@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap");
/* =========================================================================
   HALLOWEEN 2026 - Fundacion Herdez - Recetas individuales
   Prefijo de clases: h26-
   Temas: h26-theme-m (morado) / h26-theme-a (amarillo) / h26-theme-n (naranja)
   Estructura: h1 100% | izq 50% (datos + foto) + der 50% (bg + ingredientes)
               | procedimiento 100% | pleca de credito
   ========================================================================= */

/* ---------- Temas (variables) ---------- */
.h26-receta,
.h26-receta.h26-theme-m{
  --h26-bg:#2f0b59;
  --h26-h1:#ff7f00;
  --h26-body:#ffffff;
  --h26-tag-bg:#ff7300;
  --h26-tag-tx:#2f0b59;
  --h26-ind:#fdc621;
}
.h26-receta.h26-theme-a{
  --h26-bg:#fdc621;
  --h26-h1:#2f0b59;
  --h26-body:#2f0b59;
  --h26-tag-bg:#2f0b59;
  --h26-tag-tx:#ffffff;
  --h26-ind:#ff7300;
}
.h26-receta.h26-theme-n{
  --h26-bg:#ff7300;
  --h26-h1:#2f0b59;
  --h26-body:#ffffff;
  --h26-tag-bg:#fdc621;
  --h26-tag-tx:#2f0b59;
  --h26-ind:#2f0b59;
}

/* Fondo de la columna derecha por tema */
.h26-receta.h26-theme-m .h26-col-der{ background-image:url("https://fundacionherdez.com/img/h26/bg-der-m.webp"); background-position: center; background-size: contain; }
.h26-receta.h26-theme-a .h26-col-der{ background-image:url("https://fundacionherdez.com/img/h26/bg-der-a.webp"); background-position: center; background-size: contain; }
.h26-receta.h26-theme-n .h26-col-der{ background-image:url("https://fundacionherdez.com/img/h26/bg-der-n.webp"); background-position: center; background-size: contain; }

/* ---------- Contenedor y reset local ---------- */
.h26-receta{
  position:relative;
  overflow:hidden;
  max-width:80%;
  margin:0 auto;
  background:var(--h26-bg);
  color:var(--h26-body);
  font-family:"Barlow Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1.4;
  text-align:left;
  box-sizing:border-box;
}
.h26-receta *,
.h26-receta *::before,
.h26-receta *::after{ box-sizing:border-box; }
.h26-receta p,
.h26-receta ul,
.h26-receta ol,
.h26-receta li,
.h26-receta h1,
.h26-receta h2{
  font-family:inherit;
  color:inherit;
  letter-spacing:normal;
  text-transform:none;
}
.h26-receta img{ border:0; box-shadow:none; }

/* ---------- Encabezado ---------- */
.h26-receta .h26-head{
  position:relative;
  padding:56px 56px 8px;
}
.h26-receta .h26-telarana{
  position:absolute;
  top:0;
  right:0;
  width:210px;
  max-width:28%;
  height:auto;
  margin:0;
  pointer-events:none;
}
.h26-receta .h26-title{
  margin:0 0 16px;
  padding:0 190px 0 0;
  font-size:clamp(36px, 5.4vw, 62px);
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  color:var(--h26-h1);
}
.h26-receta .h26-seo{
  max-width:780px;
  margin:0;
  font-size:20px;
  line-height:1.35;
}

/* ---------- Grid 50/50 ---------- */
.h26-receta .h26-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.h26-receta .h26-col-izq{
  display:flex;
  flex-direction:column;
  padding:24px 32px 24px 56px;
}
.h26-receta .h26-col-der{
  padding:24px 56px 24px 32px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Datos (dificultad, rendimiento, tiempo) */
.h26-receta .h26-meta{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.h26-receta .h26-meta li{
  margin:0;
  padding:0;
  font-size:22px;
  line-height:1.35;
  background:none;
}
.h26-receta .h26-meta li::before{ content:none; }
.h26-receta .h26-meta span{ font-weight:600; }

/* Foto */
.h26-receta .h26-foto{
  margin:0px;
}
.h26-receta .h26-foto img{
  display:block;
  width:100%;
  max-width:520px;
  height:auto;
  margin:0 auto;
}

/* ---------- Subtitulos tipo etiqueta ---------- */
.h26-receta .h26-tag{
  display:inline-block;
  margin:0 0 12px;
  padding:6px 16px 5px;
  background:var(--h26-tag-bg);
  color:var(--h26-tag-tx);
  font-size:28px;
  font-weight:600;
  line-height:1.1;
  text-transform:uppercase;
}

/* Indicadores (Escarchado:, Para la masa:, etc.) */
.h26-receta .h26-ind{
  margin:14px 0 4px;
  padding:0;
  color:var(--h26-ind);
  font-size:23px;
  font-weight:700;
  line-height:1.2;
}
.h26-receta .h26-tag + .h26-ind{ margin-top:4px; }

/* Lista de ingredientes */
.h26-receta .h26-list{
  list-style:none;
  margin:0 0 6px;
  padding:0;
}
.h26-receta .h26-list li{
  position:relative;
  margin:0 0 3px;
  padding:0 0 0 22px;
  background:none;
}
.h26-receta .h26-list li::before{
  content:"\2022";
  position:absolute;
  left:4px;
  top:0;
  font-weight:700;
  color:var(--h26-body);
}

/* ---------- Procedimiento ---------- */
.h26-receta .h26-proc{
  padding:16px 56px 40px;
}
.h26-receta .h26-steps{
  list-style:decimal outside;
  margin:0 0 8px;
  padding:0 0 0 28px;
}
.h26-receta .h26-steps li{
  margin:0 0 6px;
  padding:0 0 0 4px;
  background:none;
}
.h26-receta .h26-steps li::before{ content:none; }
.h26-receta .h26-steps li::marker{ font-weight:600; }

/* Tips del chef */
.h26-receta .h26-tip{
  margin:24px 0 0;
  padding:14px 20px 12px;
  border:2px dashed var(--h26-ind);
}
.h26-receta .h26-tip .h26-ind{ margin-top:0; }

/* ---------- Pleca de credito ---------- */
.h26-receta .h26-credito{
  padding:18px 56px;
  background:var(--h26-tag-bg);
  color:var(--h26-tag-tx);
  font-size:18px;
  line-height:1.4;
}
.h26-receta .h26-credito p{ margin:0; }
.h26-receta .h26-credito strong{ font-weight:700; }
.h26-receta .h26-credito .h26-nota{
  margin-top:6px;
  font-size:15px;
  font-style:italic;
  opacity:.85;
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .h26-receta .h26-head{ padding:44px 36px 8px; }
  .h26-receta .h26-title{ padding-right:150px; }
  .h26-receta .h26-telarana{ width:170px; }
  .h26-receta .h26-col-izq{ padding:20px 24px 20px 36px; }
  .h26-receta .h26-col-der{ padding:20px 36px 20px 24px; }
  .h26-receta .h26-proc{ padding:16px 36px 36px; }
  .h26-receta .h26-credito{ padding:16px 36px; }
}

/* ---------- Movil ---------- */
@media (max-width:760px){
  .h26-receta{ font-size:18px; }
  .h26-receta .h26-head{ padding:36px 20px 4px; }
  .h26-receta .h26-telarana{ width:110px; max-width:32%; }
  .h26-receta .h26-title{ padding-right:80px; font-size:34px; }
  .h26-receta .h26-seo{ font-size:18px; }
  .h26-receta .h26-grid{ grid-template-columns:1fr; }
  .h26-receta .h26-col-izq,
  .h26-receta .h26-col-der{ padding:18px 20px; }
  .h26-receta .h26-meta li{ font-size:19px; }
  .h26-receta .h26-foto{ margin-top:4px; }
  .h26-receta .h26-tag{ font-size:24px; }
  .h26-receta .h26-ind{ font-size:20px; }
  .h26-receta .h26-proc{ padding:12px 20px 28px; }
  .h26-receta .h26-steps{ padding-left:24px; }
  .h26-receta .h26-credito{ padding:14px 20px; font-size:16px; }
  .h26-receta .h26-credito .h26-nota{ font-size:14px; }
}