@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&display=swap");
/* =========================================================================
   HALLOWEEN 2026 - Fundacion Herdez - Listado (home del recetario)
   Prefijo de clases: h26l-
   Tarjetas: h26l-m (morado) / h26l-a (amarillo) / h26l-n (naranja)
   Efectos: murcielagos, ojos que siguen el cursor, luna, niebla, relampago,
            tarjetas que "salen de la tumba", arana que baja en hover,
            foto que levita. Todo se apaga con prefers-reduced-motion.
   ========================================================================= */

/* ---------- Contenedor ---------- */
.h26l-wrap{
  --h26l-morado:#2f0b59;
  --h26l-amarillo:#fdc621;
  --h26l-naranja:#ff7300;
  --h26l-noche:#14042a;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  margin:0 auto;
  padding:72px 0 110px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #3d1173 0%, rgba(61,17,115,0) 70%),
    linear-gradient(180deg, #24084a 0%, var(--h26l-noche) 100%);
  color:#ffffff;
  font-family:"Barlow Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;
  font-size:20px;
  line-height:1.4;
  text-align:left;
  box-sizing:border-box;
}
.h26l-wrap *,
.h26l-wrap *::before,
.h26l-wrap *::after{ box-sizing:border-box; }
.h26l-wrap p,
.h26l-wrap h2,
.h26l-wrap h3,
.h26l-wrap button,
.h26l-wrap a{
  font-family:inherit;
  letter-spacing:normal;
}
.h26l-wrap img{ border:0; box-shadow:none; max-width:100%; }
.h26l-inner{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Ambiente: luna, niebla, relampago ---------- */
.h26l-moon{
  position:absolute;
  z-index:0;
  top:34px;
  right:7%;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fff6d6 0%, #fde49a 45%, #f3b840 100%);
  box-shadow:0 0 60px 18px rgba(253,198,33,.35), 0 0 160px 60px rgba(255,115,0,.18);
  opacity:.9;
  pointer-events:none;
}
.h26l-moon::before,
.h26l-moon::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(214,150,30,.35);
}
.h26l-moon::before{ width:26px; height:26px; top:42px; left:30px; }
.h26l-moon::after{ width:16px; height:16px; top:88px; left:82px; }

.h26l-fog{
  position:absolute;
  z-index:3;
  left:-20%;
  bottom:-40px;
  width:140%;
  height:200px;
  background:
    radial-gradient(ellipse 30% 60% at 20% 70%, rgba(220,200,255,.22), rgba(220,200,255,0) 70%),
    radial-gradient(ellipse 35% 55% at 55% 80%, rgba(220,200,255,.18), rgba(220,200,255,0) 70%),
    radial-gradient(ellipse 30% 60% at 85% 70%, rgba(220,200,255,.22), rgba(220,200,255,0) 70%);
  filter:blur(6px);
  pointer-events:none;
  animation:h26l-fog 18s ease-in-out infinite alternate;
}
.h26l-fog.h26l-fog-2{
  bottom:-70px;
  opacity:.7;
  animation-duration:26s;
  animation-direction:alternate-reverse;
}
@keyframes h26l-fog{
  from{ transform:translateX(-6%); }
  to  { transform:translateX(6%); }
}

.h26l-flash{
  position:absolute;
  inset:0;
  z-index:1;
  background:#c9a6ff;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:h26l-flash 14s linear infinite;
}
@keyframes h26l-flash{
  0%, 93%   { opacity:0; }
  93.6%     { opacity:.16; }
  94.2%     { opacity:0; }
  95%       { opacity:.11; }
  96%, 100% { opacity:0; }
}

/* ---------- Murcielagos ---------- */
.h26l-bats{
  position:absolute;
  inset:0 0 auto 0;
  height:420px;
  z-index:1;
  pointer-events:none;
}
.h26l-bat{
  position:absolute;
  left:-80px;
  width:60px;
  color:#0a0118;
  animation:h26l-fly 16s linear infinite;
}
.h26l-bat svg{
  display:block;
  width:100%;
  height:auto;
  animation:h26l-bob 1.6s ease-in-out infinite alternate;
}
.h26l-bat .h26l-wings{
  transform-origin:50% 40%;
  animation:h26l-flap .22s ease-in-out infinite alternate;
}
.h26l-bat-1{ top:60px;  animation-delay:0s; }
.h26l-bat-2{ top:150px; width:42px; animation-duration:21s; animation-delay:-7s; }
.h26l-bat-3{ top:24px;  width:34px; animation-duration:25s; animation-delay:-14s; }
.h26l-bat-4{ top:230px; width:50px; animation-duration:19s; animation-delay:-3s; }
.h26l-bat-2 svg{ animation-duration:1.2s; }
.h26l-bat-3 svg{ animation-duration:2s; }
@keyframes h26l-fly{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(100vw + 160px)); }
}
@keyframes h26l-bob{
  from{ transform:translateY(-14px) rotate(-6deg); }
  to  { transform:translateY(14px) rotate(6deg); }
}
@keyframes h26l-flap{
  from{ transform:scaleY(1); }
  to  { transform:scaleY(.35); }
}

/* ---------- Intro ---------- */
.h26l-intro{
  position:relative;
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}
.h26l-eyebrow{
  display:inline-block;
  margin:0 0 10px;
  padding:4px 14px;
  background:var(--h26l-naranja);
  color:var(--h26l-morado);
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.h26l-wrap .h26l-title{
  margin:0 0 12px;
  padding:0;
  color:var(--h26l-amarillo);
  font-size:clamp(42px, 7vw, 84px);
  font-weight:800;
  line-height:.95;
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(255,115,0,.45);
}
.h26l-title .h26l-flicker{
  display:block;
  color:var(--h26l-naranja);
  animation:h26l-flicker 6s linear infinite;
}
@keyframes h26l-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100%{
    opacity:1;
    text-shadow:0 0 6px rgba(255,115,0,.9), 0 0 22px rgba(255,115,0,.7), 0 0 48px rgba(255,115,0,.5);
  }
  20%, 24%, 55%{
    opacity:.35;
    text-shadow:none;
  }
}
.h26l-lead{
  margin:0 auto;
  max-width:600px;
  color:#f1e8ff;
  font-size:22px;
}

/* Ojos en la oscuridad */
.h26l-eyes{
  position:absolute;
  display:flex;
  gap:10px;
  pointer-events:none;
}
.h26l-eye{
  position:relative;
  width:30px;
  height:20px;
  border-radius:50%;
  background:var(--h26l-amarillo);
  box-shadow:0 0 14px rgba(253,198,33,.8);
  overflow:hidden;
  animation:h26l-blink 5s infinite;
}
.h26l-pupil{
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:16px;
  margin:-8px 0 0 -4px;
  border-radius:50%;
  background:#0a0118;
  transition:transform .08s linear;
}
.h26l-eyes-1{ top:6px;   left:-90px; }
.h26l-eyes-2{ top:120px; right:-110px; }
.h26l-eyes-3{ bottom:-10px; left:-40px; transform:scale(.65); }
.h26l-eyes-2 .h26l-eye{ background:var(--h26l-naranja); box-shadow:0 0 14px rgba(255,115,0,.9); animation-delay:1.7s; }
.h26l-eyes-3 .h26l-eye{ animation-delay:3.1s; }
@keyframes h26l-blink{
  0%, 92%, 100%{ transform:scaleY(1); }
  95%          { transform:scaleY(.08); }
}

/* ---------- Filtros ---------- */
.h26l-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 0 40px;
  padding:0;
}
.h26l-wrap .h26l-filter{
  appearance:none;
  margin:0;
  padding:8px 18px 7px;
  border:2px solid var(--h26l-amarillo);
  border-radius:999px;
  background:transparent;
  color:#ffffff;
  font-size:19px;
  font-weight:600;
  line-height:1.1;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, color .2s, transform .2s, box-shadow .2s;
}
.h26l-wrap .h26l-filter span{ opacity:.7; font-weight:500; }
.h26l-wrap .h26l-filter:hover{
  transform:translateY(-2px) rotate(-2deg);
  box-shadow:0 0 18px rgba(253,198,33,.45);
}
.h26l-wrap .h26l-filter[aria-pressed="true"]{
  background:var(--h26l-naranja);
  border-color:var(--h26l-naranja);
  color:var(--h26l-morado);
}
.h26l-wrap .h26l-filter:focus-visible{
  outline:3px solid #ffffff;
  outline-offset:3px;
}

/* ---------- Grid ---------- */
.h26l-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

/* ---------- Tarjetas ---------- */
.h26l-card{
  --c-bg:var(--h26l-morado);
  --c-h:#ff7f00;
  --c-tx:#ffffff;
  --c-tag-bg:var(--h26l-naranja);
  --c-tag-tx:var(--h26l-morado);
  --c-spider:var(--h26l-amarillo);
  --c-glow:rgba(255,115,0,.55);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:3px solid var(--c-tag-bg);
  background:var(--c-bg);
  color:var(--c-tx);
  text-decoration:none;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, opacity .3s;
}
.h26l-card.h26l-a{
  --c-bg:var(--h26l-amarillo);
  --c-h:var(--h26l-morado);
  --c-tx:var(--h26l-morado);
  --c-tag-bg:var(--h26l-morado);
  --c-tag-tx:#ffffff;
  --c-spider:var(--h26l-morado);
  --c-glow:rgba(253,198,33,.55);
}
.h26l-card.h26l-n{
  --c-bg:var(--h26l-naranja);
  --c-h:var(--h26l-morado);
  --c-tx:#ffffff;
  --c-tag-bg:var(--h26l-amarillo);
  --c-tag-tx:var(--h26l-morado);
  --c-spider:var(--h26l-morado);
  --c-glow:rgba(255,115,0,.6);
}
.h26l-wrap a.h26l-card,
.h26l-wrap a.h26l-card:hover,
.h26l-wrap a.h26l-card:focus{
  color:var(--c-tx);
  text-decoration:none;
}
.h26l-card:hover,
.h26l-card:focus-visible{
  transform:translateY(-8px) rotate(-1deg);
  box-shadow:0 22px 40px rgba(0,0,0,.5), 0 0 46px var(--c-glow);
  outline:none;
}
.h26l-grid > .h26l-card:nth-child(even):hover,
.h26l-grid > .h26l-card:nth-child(even):focus-visible{
  transform:translateY(-8px) rotate(1deg);
}

/* Telarana en la esquina */
.h26l-web{
  position:absolute;
  top:0;
  right:0;
  z-index:1;
  width:110px;
  height:auto;
  margin:0;
  pointer-events:none;
}

/* Arana que baja al hacer hover */
.h26l-spider{
  position:absolute;
  top:-48px;
  left:16%;
  z-index:4;
  width:34px;
  color:var(--c-spider);
  pointer-events:none;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1);
}
.h26l-spider::before{
  content:"";
  position:absolute;
  bottom:30px;
  left:50%;
  width:1.5px;
  height:240px;
  margin-left:-.75px;
  background:currentColor;
  opacity:.7;
}
.h26l-spider svg{
  display:block;
  width:100%;
  height:auto;
  animation:h26l-wiggle 1.4s ease-in-out infinite alternate;
  transform-origin:50% 0;
}
.h26l-card:hover .h26l-spider,
.h26l-card:focus-visible .h26l-spider{
  transform:translateY(120px);
}
@keyframes h26l-wiggle{
  from{ transform:rotate(-8deg); }
  to  { transform:rotate(8deg); }
}

/* Foto */
.h26l-photo{
  position:relative;
  z-index:2;
  aspect-ratio:1 / 1;
  margin:0;
  padding:22px 22px 0;
}
.h26l-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.28));
  transition:filter .35s;
}
.h26l-card:hover .h26l-photo img,
.h26l-card:focus-visible .h26l-photo img{
  animation:h26l-levitate 1.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 34px 22px rgba(0,0,0,.35));
}
@keyframes h26l-levitate{
  0%  { transform:translateY(-8px)  rotate(-2.5deg) scale(1.04); }
  100%{ transform:translateY(-18px) rotate(2.5deg)  scale(1.06); }
}

/* Cuerpo */
.h26l-body{
  position:relative;
  z-index:2;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:6px;
  padding:6px 22px 22px;
}
.h26l-cat{
  align-self:flex-start;
  padding:3px 10px 2px;
  background:var(--c-tag-bg);
  color:var(--c-tag-tx);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.h26l-wrap .h26l-name{
  margin:4px 0 0;
  padding:0;
  color:var(--c-h);
  font-size:30px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
}
.h26l-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:2px 0 0;
  font-size:18px;
  font-weight:600;
}
.h26l-meta span::before{
  content:"\2620\FE0E";
  margin-right:5px;
  font-weight:400;
}
.h26l-meta span + span::before{ content:"\29D7"; }
.h26l-cta{
  align-self:flex-start;
  margin-top:auto;
  padding:8px 16px 7px;
  background:var(--c-tag-bg);
  color:var(--c-tag-tx);
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  transition:transform .25s;
}
.h26l-meta{ margin-bottom:12px; }
.h26l-card:hover .h26l-cta{ transform:translateX(6px); }

/* Filtro: salida / entrada */
.h26l-card.is-out{
  opacity:0;
  transform:scale(.88) rotate(-4deg);
}
.h26l-card[hidden]{ display:none; }

/* Revelado al hacer scroll: "salen de la tumba" (solo con JS activo) */
.h26l-js .h26l-card.h26l-rise{
  opacity:0;
  transform:translateY(90px) rotate(-6deg) scale(.92);
}
.h26l-js .h26l-card.h26l-rise.is-up{
  opacity:1;
  transform:none;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1) var(--h26l-d, 0ms), opacity .6s ease var(--h26l-d, 0ms);
}

/* Cierre */
.h26l-outro{
  margin:56px 0 0;
  text-align:center;
  color:#f1e8ff;
  font-size:22px;
}
.h26l-outro strong{ color:var(--h26l-amarillo); }

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .h26l-grid{ grid-template-columns:repeat(2, 1fr); gap:24px; }
  .h26l-moon{ width:110px; height:110px; right:4%; }
  .h26l-moon::before{ top:30px; left:22px; width:20px; height:20px; }
  .h26l-moon::after{ top:64px; left:60px; }
  .h26l-eyes-1{ left:-20px; top:-30px; }
  .h26l-eyes-2{ right:-20px; }
}

/* ---------- Movil ---------- */
@media (max-width:620px){
  .h26l-wrap{ padding:52px 0 90px; font-size:18px; }
  .h26l-inner{ padding:0 16px; }
  .h26l-moon{ width:80px; height:80px; top:18px; right:-14px; }
  .h26l-moon::before,
  .h26l-moon::after{ display:none; }
  .h26l-lead{ font-size:19px; }
  .h26l-eyes-1{ top:-34px; left:0; transform:scale(.75); }
  .h26l-eyes-2{ display:none; }
  .h26l-eyes-3{ display:none; }
  .h26l-filters{ gap:8px; margin-bottom:28px; }
  .h26l-wrap .h26l-filter{ font-size:16px; padding:7px 13px 6px; }
  .h26l-grid{ grid-template-columns:1fr; gap:22px; }
  .h26l-wrap .h26l-name{ font-size:28px; }
  .h26l-web{ width:90px; }
}

/* Pantallas tactiles: la foto flota sola y la arana ya cuelga */
@media (hover:none){
  .h26l-photo img{ animation:h26l-levitate 2.6s ease-in-out infinite alternate; }
  .h26l-spider{ transform:translateY(64px); }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .h26l-wrap *,
  .h26l-wrap *::before,
  .h26l-wrap *::after{
    animation:none !important;
    transition:none !important;
  }
  .h26l-bats,
  .h26l-flash{ display:none; }
  .h26l-js .h26l-card.h26l-rise{ opacity:1; transform:none; }
}