/* ============================================================ MOMOTO CAFÉ · deck.css Modo "deck": un apartado por pantalla, sin scroll de página. deck.js añade la clase .deck a . Sin JS → scroll normal. Capa aislada: no depende de styles.css salvo por los tokens :root. ============================================================ */ html.deck, html.deck body{height:100%;overflow:hidden} html.deck body{padding-bottom:0} /* Área de contenido bajo el header fijo, sin scroll propio */ html.deck #contenido{position:fixed;inset:var(--header-h) 0 0 0;overflow:hidden;z-index:1} /* Cada apartado = panel a pantalla completa con scroll INTERNO. Se usan CLASES (no IDs) para que .panel-active pueda ganar en especificidad. */ html.deck .hero, html.deck .chapter{ position:absolute;inset:0;margin:0;min-height:0; overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden;transform:translateY(20px); transition:opacity .5s var(--ease),transform .55s var(--ease),visibility .5s; background:var(--papel); } html.deck .dark{background:var(--verde-sombra)!important} html.deck .hero{background:var(--verde-sombra)} html.deck .panel-active{opacity:1;visibility:visible;transform:none;z-index:3} html.deck .panel-leaving{z-index:2} /* Header TRANSLÚCIDO en deck: deja ver el fondo de la página (frost sutil), sin recuadro. Logo y menú se adaptan al panel (claro sobre oscuro, oscuro sobre claro); deck.js cambia la imagen del logo. */ html.deck .site-header{ background:rgba(244,239,230,.72); /* paneles claros: crema translúcido */ -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); padding-block:12px;border-bottom:1px solid rgba(6,43,38,.08); } html.deck .nav-links a{color:var(--verde-sombra)} html.deck .nav-links a:hover, html.deck .nav-links a.is-active{color:var(--cereza)} html.deck .nav-toggle span{background:var(--verde-sombra)} html.deck .cart-btn{color:var(--verde-sombra)} /* Header crema translúcido en TODOS los paneles: deja ver el fondo difuminado detrás y el logo a color (azul marino + menta) se lee siempre. */ /* En deck el contenido siempre visible (no depende del observer de reveals) */ html.deck [data-anim]{opacity:1!important;transform:none!important} /* Padding ajustado para una pantalla + colchón inferior para la barra WhatsApp */ html.deck .chapter{padding-block:clamp(40px,6vh,80px)} html.deck .chapter--tight{padding-block:clamp(36px,5vh,64px)} html.deck .hero, html.deck .chapter{padding-bottom:calc(var(--wa-bar-h) + 44px)} @media(min-width:821px){ html.deck .hero, html.deck .chapter{padding-bottom:56px} /* en desktop no hay barra inferior */ } /* Scrollbar discreta dentro de los paneles */ html.deck .hero::-webkit-scrollbar, html.deck .chapter::-webkit-scrollbar{width:9px} html.deck .chapter::-webkit-scrollbar-thumb{background:rgba(6,43,38,.18);border-radius:9px} html.deck .dark::-webkit-scrollbar-thumb, html.deck .hero::-webkit-scrollbar-thumb{background:rgba(244,239,230,.22)} /* ---- Dots de navegación (lado derecho, verticales) ---- */ .deck-dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40; display:flex;flex-direction:column;gap:12px} .deck-dot{width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer; border:2px solid rgba(6,43,38,.4);background:transparent;transition:transform .2s,background .2s,border-color .2s} .deck-dot:hover{border-color:var(--verde-selva);transform:scale(1.15)} .deck-dot.on{background:var(--verde-sombra);border-color:var(--verde-sombra);transform:scale(1.3)} .deck-dot:focus-visible{outline:3px solid var(--salvia);outline-offset:3px} /* Sobre paneles oscuros: dots claros */ body.deck-on-dark .deck-dot{border-color:rgba(244,239,230,.6)} body.deck-on-dark .deck-dot:hover{border-color:var(--salvia)} body.deck-on-dark .deck-dot.on{background:var(--salvia);border-color:var(--salvia)} /* Pista sutil de "desliza / usa el menú" (solo primera pantalla, opcional) */ .deck-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40; font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--papel-60);pointer-events:none;opacity:0;transition:opacity .6s ease} body.deck-on-dark .deck-hint.show{opacity:1} @media(max-width:680px){ .deck-dots{right:9px;gap:10px} .deck-dot{width:10px;height:10px} } @media(prefers-reduced-motion:reduce){ html.deck .hero, html.deck .chapter{transition:opacity .2s;transform:none} } /* ============================================================ Ronda de optimización (crítica de expertos, 2026-07-12) ============================================================ */ /* Catálogo estático (indexable / sin JS): se oculta cuando hay JS */ .js .catalogo-seo{display:none} .catalogo-seo{display:grid;gap:22px;max-width:62ch;margin-top:8px} .catalogo-seo .seo-ficha{border-top:1px solid var(--arena);padding-top:16px} .catalogo-seo h3{font-family:var(--display);font-weight:500;font-size:1.6rem;color:var(--verde-selva);margin:0 0 2px} .catalogo-seo .seo-latin{font-family:var(--display);font-style:italic;color:var(--gris-cacao);margin:0 0 6px} .catalogo-seo p{color:var(--tinta);margin:0;line-height:1.6} .catalogo-seo .seo-nota{color:var(--gris-cacao);font-size:.9rem;margin-top:6px} .catalogo-seo .btn{margin-top:10px;width:fit-content} /* Guiño de las 5 líneas (animales) en el hero */ .hero-fauna{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 2px} .hero-fauna span{font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.02em; color:var(--papel);background:rgba(244,239,230,.10);border:1px solid var(--salvia-borde); border-radius:999px;padding:.34rem .82rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* Estrellas de reseñas: tamaño correcto (los SVG no traían width/height) */ .card-resena .estrellas svg{width:18px;height:18px;flex:none} /* Historia + equipo (Nosotros) */ .historia{max-width:64ch;margin-top:clamp(40px,6vw,72px)} .historia h3,.equipo h3{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2rem);color:var(--verde-selva);margin:0 0 14px} .historia p{color:var(--tinta);margin:0 0 14px;line-height:1.7} .equipo{margin-top:clamp(36px,5vw,56px)} .equipo-grid{display:grid;grid-template-columns:1fr;gap:24px} @media(min-width:720px){.equipo-grid{grid-template-columns:repeat(3,1fr)}} .equipo-card{border-top:1px solid var(--arena);padding-top:18px} .equipo-card h4{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--tinta);margin:0 0 2px} .equipo-card .equipo-rol{display:block;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cereza);margin-bottom:10px} .equipo-card p{color:var(--gris-cacao);font-size:.95rem;line-height:1.6;margin:0} /* CTA "Califícanos en Google" en reseñas */ .resenas-cta{margin-top:clamp(28px,4vw,44px);display:flex;justify-content:center}