/* ==========================================================================
   Hay Miga · «Abre el tuyo» (/franquicias/) · sept. 2026
   Recupera la página de franquicia anterior (negro, crema y oro, Fraunces fina
   y Hanken Grotesk) con sus fotos, y le pone el héroe de la portada con el
   vídeo de la entrada. Las tarjetas de la oferta son las de la carta de la
   portada. Navegación, héroe base y pie vienen de site.css.
   ========================================================================== */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'),url('/assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.abre-pag{
  --negro:#0c0a08; --negro-2:#141009; --negro-3:#1c160f;
  --crema-a:#F2EAD9; --papel:#FBF6EC; --oro-a:#c79a54; --vino:#6a4a24;
  --apagado:rgba(242,234,217,.66); --apagado-tinta:rgba(28,22,15,.64);
  --linea-a:rgba(242,234,217,.16); --linea-tinta:rgba(28,22,15,.14);
  --grot:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--negro);color:var(--crema-a);
}
.abre-pag main{font-family:var(--grot);font-size:clamp(16px,1.05vw,18px);line-height:1.62}
.abre-pag main h2,.abre-pag main h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em}
.abre-pag main i,.abre-pag main em{font-family:var(--serif);font-style:italic}
.abre-pag :focus-visible{outline-color:var(--oro-a)}

.ab-sec{padding:clamp(72px,11vh,140px) 0;position:relative}
.ab-ceja{display:inline-flex;align-items:center;gap:.7em;margin:0;font-family:var(--grot);font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--oro-a)}
.ab-ceja::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.ab-h2{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:380;margin:.35em 0 0}
.ab-lead{margin-top:18px;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--apagado);max-width:52ch}
.ab-cab{margin-bottom:clamp(40px,6vh,56px)}
.ab-claro{background:var(--papel);color:var(--negro-3)}
.ab-claro .ab-ceja{color:var(--azulejo)}
.ab-claro .ab-h2{color:var(--negro)}
.ab-claro .ab-lead{color:var(--apagado-tinta)}

/* ---------- héroe: el de la portada, con la entrada de la tienda ---------- */
.hero--abre{background:var(--negro)}
.hero--abre .hero__sombra{background:
  linear-gradient(180deg,rgba(12,10,8,.6) 0%,rgba(12,10,8,0) 22%),
  linear-gradient(0deg,rgba(12,10,8,.96) 0%,rgba(12,10,8,.84) 34%,rgba(12,10,8,.38) 60%,rgba(12,10,8,0) 80%)}
@media (min-width:900px){
  .hero--abre .hero__sombra{background:
    linear-gradient(180deg,rgba(12,10,8,.55) 0%,rgba(12,10,8,0) 20%),
    linear-gradient(90deg,rgba(12,10,8,.9) 0%,rgba(12,10,8,.66) 36%,rgba(12,10,8,0) 66%),
    linear-gradient(0deg,rgba(12,10,8,.72) 0%,rgba(12,10,8,0) 46%)}
}
.hero--abre .eyebrow{color:var(--oro-a)}
.hero--abre .hero__titulo{font-weight:400;font-size:clamp(2.9rem,7vw,5.8rem);line-height:.98;letter-spacing:-.025em;max-width:none;color:#FFF9EC}
.hero--abre .hero__titulo .sub{margin-top:.45em;font-size:max(.3em,1.15rem);font-weight:380;line-height:1.25;max-width:27ch;color:var(--crema-a)}
.hero--abre .hero__titulo .sub i{font-style:normal}
.hero--abre .hero__abierta{max-width:46ch;color:rgba(242,234,217,.9);font-family:var(--grot)}
.hero--abre .hero__abierta em{color:var(--oro-a)}
.hero--abre .btn{font-family:var(--grot)}
.hero--abre .btn--crema{background:var(--crema-a);color:var(--negro)}
.hero--abre .btn--crema:hover{background:var(--oro-a)}
.hero--abre .control{background:rgba(12,10,8,.4);border-color:rgba(242,234,217,.7)}
.control .ico-otra{display:none}
.control[data-estado="terminado"] .ico-pausa,.control[data-estado="terminado"] .ico-play{display:none}
.control[data-estado="terminado"] .ico-otra{display:block}
.hero__pie-texto{letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:rgba(242,234,217,.72)}

/* navegación sobre negro */
.nav--negra.is-solido{background:rgba(12,10,8,.86);color:var(--crema-a);box-shadow:0 1px 0 var(--linea-a,rgba(242,234,217,.16))}
.nav--negra .nav__cta,.nav--negra.is-solido .nav__cta{background:var(--crema-a,#F2EAD9);color:#0c0a08}
@media (max-width:880px){
  .nav--negra .nav__enlaces{background:#0c0a08;color:#F2EAD9}
  .nav--negra .nav__enlaces li{border-bottom-color:rgba(242,234,217,.16)}
  .nav--negra.is-abierto{background:#0c0a08;color:#F2EAD9}
  .nav--negra .nav__enlaces .nav__cta{background:#F2EAD9;color:#0c0a08}
}

/* ---------- historia ---------- */
.ab-historia .ab-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.ab-historia .ab-lead{color:rgba(242,234,217,.8);max-width:46ch}
.ab-firma{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--oro-a)}
.ab-marco{position:relative;margin:0;border-radius:3px;overflow:hidden}
.ab-marco img{width:100%;height:100%;object-fit:cover;aspect-ratio:40/43;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ab-marco::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--linea-a);pointer-events:none}
.ab-marco:hover img{transform:scale(1.04)}

/* ---------- oferta: tarjetas como la carta de la portada ---------- */
.ab-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.ab-cat{display:flex;flex-direction:column;background:#F5EFE4;border:1px solid var(--linea-tinta);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.ab-cat:hover{transform:translateY(-6px);box-shadow:0 24px 44px -28px rgba(34,26,18,.42)}
.ab-cat__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#F1E4CC,#E2C79C)}
.ab-cat__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ab-cat:hover .ab-cat__foto img{transform:scale(1.04)}
.ab-cat__cuerpo{padding:20px 22px 24px}
.ab-cat__cuando{display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--vino)}
.ab-cat h3{margin:.4em 0 .35em;font-size:1.45rem;font-weight:500;line-height:1.15;color:var(--negro)}
.ab-cat p{font-size:.95rem;line-height:1.55;color:var(--apagado-tinta)}
@media (max-width:1060px){.ab-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab-cats{grid-template-columns:1fr}}

/* ---------- modelo ---------- */
.ab-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px);list-style:none;margin:0;padding:0}
.ab-pilar{border-top:1px solid var(--linea-a);padding-top:26px}
.ab-pilar .n{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--oro-a)}
.ab-pilar h3{font-size:1.7rem;margin:.5em 0 .45em}
.ab-pilar p{color:var(--apagado);font-size:.98rem}
.ab-frase{margin-top:clamp(44px,6vh,80px);font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.22;color:var(--oro-a);max-width:28ch}
.ab-frase span{color:var(--crema-a);font-style:normal}
.ab-banda{margin:clamp(48px,7vh,90px) 0 0;position:relative;border-radius:4px;overflow:hidden;height:clamp(240px,40vh,480px)}
.ab-banda img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ab-banda:hover img{transform:scale(1.04)}
.ab-banda::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--linea-a)}
.ab-banda picture{display:block;height:100%}
/* En móvil y tableta, la foto de las barras es otro recorte (4:3) y se ve entera, no en primer plano */
@media (max-width:900px){.ab-banda{width:100%;height:auto;max-height:70vh;aspect-ratio:16/9}.ab-banda img{position:absolute;inset:0}}
@media (max-width:600px){.ab-banda{aspect-ratio:4/3}}
@media (max-width:900px){.ab-trio{grid-template-columns:1fr;gap:8px}.ab-pilar{padding-top:20px}}

/* ---------- el local piloto ---------- */
.ab-local{border-top:1px solid var(--linea-a)}
.ab-local .ab-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.ab-datos{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--linea-a)}
.ab-datos li{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--linea-a)}
.ab-datos b{font-family:var(--serif);font-weight:500;font-size:1.32rem;flex:0 0 auto;min-width:5.4em;color:var(--oro-a)}
.ab-datos span{color:var(--apagado);font-size:.95rem}
.ab-dir{margin-top:24px;color:var(--apagado);font-size:.92rem;letter-spacing:.02em}
.ab-dir a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(242,234,217,.35)}
.ab-dir a:hover{color:var(--crema-a)}
.ab-local__foto{position:relative;margin:0;border-radius:3px;overflow:hidden;max-width:520px;justify-self:end;width:100%}
.ab-local__foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ab-local__foto figcaption{position:absolute;left:16px;bottom:14px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--crema-a);text-shadow:0 1px 12px rgba(0,0,0,.6)}
@media (max-width:900px){.ab-historia .ab-grid,.ab-local .ab-grid{grid-template-columns:1fr}.ab-marco img{aspect-ratio:16/11}.ab-local__foto{justify-self:start;max-width:none}.ab-local__foto img{aspect-ratio:4/3;object-position:50% 60%}}

/* ---------- fondos con foto (claves y cifras) ---------- */
.ab-fondo{position:absolute;inset:0;overflow:hidden}
.ab-fondo img{width:100%;height:100%;object-fit:cover}
.ab-fondo~.wrap{position:relative;z-index:1}

/* ---------- claves ---------- */
.ab-claves{background:var(--negro-2);overflow:hidden}
.ab-claves .ab-fondo img{opacity:.22}
.ab-claves .ab-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--negro) 0%,rgba(20,16,9,.7) 45%,var(--negro) 100%)}
.ab-lista-claves{list-style:none;margin:0;padding:0}
.ab-clave{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);padding:34px 0;border-bottom:1px solid var(--linea-a);align-items:start}
.ab-clave:first-child{border-top:1px solid var(--linea-a)}
.ab-clave .idx{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:var(--oro-a)}
.ab-clave h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:.4em}
.ab-clave p{color:var(--apagado);max-width:60ch}
@media (max-width:520px){.ab-clave{grid-template-columns:1fr;gap:8px}}

/* ---------- reseñas ---------- */
.ab-resenas{background:var(--pino);text-align:center}
.ab-resenas .ab-ceja{color:#e7cf97;justify-content:center}
.ab-resenas .ab-ceja::before{display:none}
.ab-nota{margin:.12em 0 .05em;font-family:var(--serif);font-weight:340;font-size:clamp(5rem,16vw,11rem);line-height:.9;color:var(--crema-a);font-variant-numeric:lining-nums}
.ab-estrellas{font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:.14em;color:var(--oro-a)}
.ab-resenas .sub{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:#f0e6d2}
.ab-resenas .cuenta{margin-top:10px;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,234,217,.72)}
.ab-resenas .cuenta a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,234,217,.35)}

/* ---------- pasos ---------- */
.ab-pasos{list-style:none;margin:0;padding:0;position:relative;max-width:820px}
.ab-pasos::before{content:"";position:absolute;left:calc(clamp(46px,7vw,86px) / 2);top:12px;bottom:12px;width:1px;background:var(--linea-tinta)}
.ab-paso{display:grid;grid-template-columns:clamp(46px,7vw,86px) 1fr;gap:clamp(20px,3vw,44px);align-items:baseline;padding:22px 0;position:relative}
.ab-paso .num{position:relative;z-index:1;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;color:var(--vino);background:var(--papel);text-align:center}
.ab-paso h3{font-size:clamp(1.3rem,2.3vw,1.75rem);color:var(--negro);margin-bottom:.15em}
.ab-paso p{color:var(--apagado-tinta);font-size:.98rem}

/* ---------- cifras ---------- */
.ab-cifras-sec{background:var(--negro);overflow:hidden}
.ab-cifras-sec .ab-fondo img{opacity:.16}
.ab-cifras-sec .ab-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(20,16,9,.4),var(--negro) 78%)}
.ab-cifras-sec .ab-cab{text-align:center}
.ab-cifras-sec .ab-ceja{justify-content:center}
.ab-cifras-sec .ab-lead{margin-inline:auto}
.ab-cifras{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(18px,3vw,40px);list-style:none;margin:0 auto;padding:0;max-width:1000px}
.ab-cifra{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:30px 12px;border:1px solid var(--linea-a);border-radius:4px;background:rgba(242,234,217,.03)}
.ab-cifra b{font-family:var(--serif);font-weight:360;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;color:var(--crema-a);white-space:nowrap;font-variant-numeric:lining-nums}
.ab-cifra b small{display:block;margin-bottom:.15em;font-size:.5em;font-style:italic;font-weight:400;color:var(--oro-a)}
.ab-cifra>span{margin-top:14px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado)}
.ab-cifra>em{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--oro-a)}
.ab-nota-cifras{margin-top:26px;text-align:center;font-size:.9rem;color:var(--apagado)}
@media (max-width:900px){.ab-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-cifra--grande{grid-column:1/-1}}
@media (max-width:420px){.ab-cifra b{font-size:1.85rem}.ab-cifra{padding:24px 8px}}

/* ---------- preguntas frecuentes ---------- */
.ab-faq{max-width:900px;border-top:1px solid var(--linea-tinta)}
.ab-faq details{border-bottom:1px solid var(--linea-tinta)}
.ab-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:450;line-height:1.3;color:var(--negro)}
.ab-faq summary::-webkit-details-marker{display:none}
.ab-faq summary::after{content:"+";flex:none;font-family:var(--grot);font-weight:300;font-size:1.7rem;line-height:1;color:var(--vino);transition:transform .25s}
.ab-faq details[open] summary::after{transform:rotate(45deg)}
.ab-faq details p{padding:0 0 22px;max-width:68ch;color:var(--apagado-tinta)}
.ab-faq details p a{color:var(--azulejo)}
.ab-faq__fecha{margin-top:18px;font-size:.85rem;color:var(--apagado-tinta)}

/* ---------- cierre ---------- */
.ab-cierre{position:relative;min-height:82svh;min-height:82vh;display:flex;align-items:center;overflow:hidden;padding:clamp(80px,12vh,140px) 0}
.ab-cierre .ab-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,8,.94) 0%,rgba(12,10,8,.82) 45%,rgba(12,10,8,.5) 100%)}
.ab-cierre .ab-h2{font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch;margin:0}
.ab-cierre .u{display:block;color:var(--oro-a);font-style:italic}
.ab-boton{display:inline-flex;align-items:center;gap:.6em;min-height:48px;margin-top:34px;padding:15px 30px;border:0;border-radius:44px;background:var(--crema-a);color:var(--negro);font-family:var(--grot);font-size:1rem;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .35s,transform .35s}
.ab-boton:hover{background:var(--oro-a);transform:translateY(-3px)}

/* ---------- solicitar ---------- */
.ab-solicitar{border-top:1px solid var(--linea-a)}
.ab-sol{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:start}
.ab-campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ab-campos .ancho{grid-column:1/-1}
.ab-form label{display:block;margin-bottom:7px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--apagado)}
.ab-form input,.ab-form select{width:100%;padding:13px 15px;border:1px solid rgba(242,234,217,.24);border-radius:3px;background:rgba(255,255,255,.04);color:var(--crema-a);font-family:inherit;font-size:1rem;transition:border-color .3s,background-color .3s}
.ab-form input::placeholder{color:rgba(242,234,217,.5)}
.ab-form input:focus,.ab-form select:focus{outline:none;border-color:var(--oro-a);background:rgba(255,255,255,.07)}
.ab-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#c79a54 50%),linear-gradient(135deg,#c79a54 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.ab-form select option{background:#1c1512;color:#F2EAD9}
.ab-legal{margin-top:20px;max-width:56ch;font-size:.8rem;line-height:1.6;color:var(--apagado)}
.ab-legal a{color:var(--oro-a);text-decoration:underline;text-underline-offset:3px}
.ab-persona{border:1px solid var(--linea-a);border-radius:4px;padding:30px}
.ab-persona .rol{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-a)}
.ab-persona h3{margin:.35em 0 .55em;font-size:1.7rem}
.ab-persona a{display:block;padding:5px 0;color:var(--apagado);text-decoration:none;font-size:.98rem;overflow-wrap:anywhere}
.ab-persona a:hover{color:var(--crema-a)}
.ab-persona a b{color:var(--crema-a);font-weight:600}
.ab-nota-sol{margin-top:18px;font-size:.88rem;line-height:1.6;color:var(--apagado)}
.ab-nota-sol b{color:var(--crema-a)}
.trampa{position:absolute;left:-9999px}
@media (max-width:900px){.ab-sol{grid-template-columns:1fr}.ab-campos{grid-template-columns:1fr}}

/* ---------- barra de progreso e índice de puntos ---------- */
.ab-progreso{position:fixed;top:0;left:0;z-index:95;height:3px;width:100%;background:var(--oro-a,#c79a54);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.ab-puntos{position:fixed;right:22px;top:50%;z-index:85;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px}
.ab-puntos a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:24px;height:12px;color:#F2EAD9;text-decoration:none}
.ab-puntos a i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(199,154,84,.55);box-shadow:0 0 6px rgba(0,0,0,.45);transition:background-color .3s,transform .3s}
.ab-puntos a:hover i,.ab-puntos a:focus-visible i,.ab-puntos a[aria-current="true"] i{background:#c79a54;transform:scale(1.35)}
.ab-puntos a span{position:absolute;right:20px;padding:4px 10px;border-radius:20px;background:rgba(12,10,8,.86);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.ab-puntos a:hover span,.ab-puntos a:focus-visible span{opacity:1;transform:none}
@media (max-width:1100px){.ab-puntos{display:none}}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .ab-marco img,.ab-banda img,.ab-cat,.ab-cat__foto img,.ab-boton{transition:none}
  .ab-marco:hover img,.ab-banda:hover img,.ab-cat:hover,.ab-cat:hover .ab-cat__foto img,.ab-boton:hover{transform:none}
  .ab-progreso{display:none}
}