/* ========================================================================== POLLITO PASCO — styles.css Arquetipo: Editorial Light Cream. Un solo archivo, por secciones numeradas. Las fichas, el reset y todo lo del primer pantallazo están embebidos en el de cada página; acá va el resto. ========================================================================== */ /* ── 01 · Utilidades ───────────────────────────────────────────────────── */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .ojo{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase; color:var(--brasa);font-weight:700;margin:0 0 var(--s2)} .aviso{display:inline-block;font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-3);border:1px solid var(--linea); border-radius:999px;padding:.35rem .8rem;margin:var(--s2) 0 0} .nota{font-size:.9rem;color:var(--tinta-3);max-width:52ch} /* ── 02 · Secciones genéricas ──────────────────────────────────────────── */ .sec{padding:var(--sec-y) 0} .sec--alt{background:var(--papel-2)} .sec__titulo{font-size:clamp(1.9rem,5.5vw,3.4rem);max-width:20ch} .sec p{max-width:60ch} /* ── 03 · Hero (escritorio) ────────────────────────────────────────────── */ /* En móvil la foto va a sangre; a partir de 960 pasa a panel al lado del texto. No es capricho: la fuente mide 1024 px y estirarla a 1920 se ve blanda. A 560 px de panel, con pantalla al doble, sale nítida. */ /* El parallax mueve la foto ±6 %. Si la imagen mide exactamente lo que su caja, al moverse asoma el fondo por abajo. Se le da un 16 % de más y se centra con -8 %: así el recorrido nunca destapa el borde. Solo desde 720, que es donde main.js activa el parallax. */ @media(min-width:720px){ .hero__foto img{position:absolute;top:-8%;left:0;width:100%;height:116%} } @media(min-width:960px){ .hero{padding-top:var(--s6)} /* Dos hijos y nada más: el bloque de texto y la foto. Solo column-gap — con `gap` a secas la separación se aplicaba también entre filas y abría 96 px de vacío entre el titular y el texto. */ .hero__in{display:grid;grid-template-columns:1.1fr .9fr; column-gap:var(--s6);align-items:center} .hero__foto{margin:0;aspect-ratio:4/5} } /* ── 04 · Historia ─────────────────────────────────────────────────────── */ .historia{display:grid;gap:var(--s5)} .historia__texto p{margin:var(--s3) 0 0;color:var(--tinta-2)} .cifras{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(3,1fr);gap:var(--s2); border-top:1px solid var(--linea);padding-top:var(--s3)} .cifras li{display:flex;flex-direction:column;gap:.2rem} .cifras__n{font-family:var(--display);font-weight:700; font-size:clamp(1.6rem,4.5vw,2.6rem);line-height:1;color:var(--brasa); font-variant-numeric:tabular-nums} .cifras__t{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; color:var(--tinta-3)} /* ── 05 · Platos · LA FIRMA ────────────────────────────────────────────── */ .platos{padding:var(--sec-y) 0} .platos .wrap{margin-bottom:var(--s4)} /* Por defecto —y sin JavaScript, y en móvil— esto es un carrusel nativo: se desliza con el dedo y engancha en cada tarjeta. El pin horizontal de escritorio lo monta main.js encima, y solo si el equipo da. */ .platos__viewport{overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--linea) transparent; padding-bottom:var(--s2)} .platos__pista{list-style:none;margin:0;padding:0 var(--s2); display:flex;gap:var(--s3);width:max-content} .plato{scroll-snap-align:center;flex:0 0 auto; width:min(78vw,340px);background:var(--papel); border:1px solid var(--linea);border-radius:14px;overflow:hidden; display:flex;flex-direction:column} .plato__foto{aspect-ratio:4/3;background:var(--papel-3);overflow:hidden} .plato__foto img{width:100%;height:100%;object-fit:cover} .plato__cuerpo{padding:var(--s3);display:flex;flex-direction:column;gap:.4rem;flex:1} .plato__n{font-size:1.25rem} .plato__d{margin:0;color:var(--tinta-2);font-size:.92rem;flex:1} .plato__p{margin:var(--s2) 0 0;display:flex;align-items:center; justify-content:space-between;gap:var(--s2)} .plato__p span{font-family:var(--display);font-weight:700;font-size:1.35rem; font-variant-numeric:tabular-nums} .platos__pie{margin:var(--s4) auto 0;color:var(--tinta-3);font-size:.95rem} .platos__pie a{color:var(--brasa);text-underline-offset:3px} /* Cuando main.js activa el pin, el viewport deja de scrollear por su cuenta: lo mueve GSAP. Se marca en el
para no tocar nada más. */ .platos[data-pin="si"] .platos__viewport{overflow:hidden;scroll-snap-type:none; padding-bottom:0} .platos[data-pin="si"] .platos__pista{padding-inline:max(var(--s4),calc((100vw - 1280px)/2))} .platos[data-pin="si"] .plato{width:360px} /* ── 06 · Promociones ──────────────────────────────────────────────────── */ .promos{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid; gap:var(--s3)} .promo{background:var(--papel);border:1px solid var(--linea);border-radius:14px; padding:var(--s3);display:flex;flex-direction:column;gap:.35rem; align-items:flex-start} .promo__n{font-size:1.2rem} .promo__q{margin:0;color:var(--tinta-2);font-size:.92rem;flex:1} .promo__p{margin:.3rem 0 0;font-family:var(--display);font-weight:700; font-size:1.6rem;color:var(--brasa);font-variant-numeric:tabular-nums} .promo__c{margin:0 0 var(--s2);font-size:.82rem;color:var(--tinta-3)} /* ── 07 · Delivery ─────────────────────────────────────────────────────── */ .delivery{display:grid;gap:var(--s5)} .delivery__foto{aspect-ratio:4/3;overflow:hidden;border-radius:14px; background:var(--papel-3)} .delivery__foto img{width:100%;height:100%;object-fit:cover} .delivery__texto p{margin:var(--s3) 0 0} .datos{margin:var(--s3) 0 0;display:grid;grid-template-columns:auto 1fr; gap:.5rem var(--s3);font-size:.95rem} .datos dt{font-weight:700;color:var(--tinta-3);font-size:.78rem; letter-spacing:.08em;text-transform:uppercase;padding-top:.25rem} .datos dd{margin:0;color:var(--tinta-2)} /* ── 08 · Reseñas ──────────────────────────────────────────────────────── */ .resenas{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid; gap:var(--s3)} .resena{background:var(--papel);border:1px solid var(--linea);border-radius:14px; padding:var(--s3)} .resena blockquote{margin:0} .resena p{margin:0;font-family:var(--display);font-size:1.05rem; font-style:italic;color:var(--tinta)} .resena cite{display:block;margin-top:var(--s2);font-style:normal; font-size:.8rem;letter-spacing:.06em;text-transform:uppercase; color:var(--tinta-3)} /* ── 09 · Dónde estamos ────────────────────────────────────────────────── */ .donde{display:grid;gap:var(--s5)} .donde p{margin:var(--s3) 0 0} .donde__foto{aspect-ratio:3/4;overflow:hidden;border-radius:14px; background:var(--papel-3);max-width:420px} .donde__foto img{width:100%;height:100%;object-fit:cover} .donde__ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} .horario{margin:var(--s3) 0 0;border-collapse:collapse;width:100%; max-width:26rem;font-size:.95rem} .horario th,.horario td{text-align:left;padding:.5rem 0; border-bottom:1px solid var(--linea)} .horario th{font-weight:500;color:var(--tinta-2)} .horario td{text-align:right;font-variant-numeric:tabular-nums} /* ── 10 · Pie ──────────────────────────────────────────────────────────── */ .pie{background:var(--tinta);color:var(--papel);padding:var(--s5) 0 var(--s4); margin-top:var(--sec-y)} .pie__marca{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:0} .pie__nap{margin:var(--s2) 0 0;color:#C9BFB1;font-size:.95rem;line-height:1.7} .pie__nap a{color:var(--papel)} .pie__ficticio{margin:var(--s3) 0 0;font-size:.9rem;color:#C9BFB1;max-width:56ch} .pie__ficticio a{color:var(--papel)} .pie__creditos{margin:var(--s2) 0 0;font-size:.82rem;color:#9C9184} .pie__creditos a{color:#C9BFB1} /* #7E7469 daba 3,60:1 sobre el pie oscuro, por debajo de AA. */ .pie__anio{margin:var(--s3) 0 0;font-size:.78rem;color:#8F8477; letter-spacing:.1em;text-transform:uppercase} .creditos{margin:var(--s2) 0 0;font-size:.8rem;color:#9C9184} .creditos summary{cursor:pointer;min-height:44px;display:flex;align-items:center} .creditos ul{margin:.5rem 0 0;padding-left:1.1rem;line-height:1.8} /* ── 11 · Botón flotante de WhatsApp ───────────────────────────────────── */ /* Aquí SÍ tiene sentido, al revés que en el portal: la cabecera de móvil ya lleva "Pedir por WhatsApp", pero en una carta larga el pulgar está abajo y el TODO §6 pide el botón por plato Y el flotante. Se oculta en escritorio, donde la cabecera siempre está a la vista. */ .wa-flota{position:fixed;right:1rem;bottom:1rem;z-index:60; display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:.85rem 1.4rem; background:var(--brasa);color:#fff;text-decoration:none;font-weight:700; font-size:.95rem;border-radius:999px; box-shadow:0 6px 20px rgba(36,30,24,.22)} @media(min-width:960px){.wa-flota{display:none}} /* ── 12 · Reveals de capa 1 (solo CSS, corren en el compositor) ─────────── */ @supports (animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){ .plato,.promo,.resena,.cifras li,.delivery__foto,.donde__foto{ animation:aparece linear both; animation-timeline:view(); animation-range:entry 0% entry 42%} } } @keyframes aparece{from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}} /* Las tarjetas del carrusel NO se animan con view(): dentro de un scroll horizontal la línea de tiempo mide el eje equivocado y parpadean. */ .platos__viewport .plato{animation:none} /* ── 13 · Responsive — los cinco breakpoints del proyecto ──────────────── */ @media(min-width:540px){ .promos{grid-template-columns:repeat(2,1fr)} .resenas{grid-template-columns:repeat(2,1fr)} .plato{width:320px} } @media(min-width:720px){ .cab__nav{display:flex} .historia{grid-template-columns:1.4fr .6fr;gap:var(--s6);align-items:start} .delivery{grid-template-columns:.9fr 1.1fr;align-items:center} .donde{grid-template-columns:1.2fr .8fr;align-items:start} .cifras{grid-template-columns:1fr;border-top:0;padding-top:0; border-left:1px solid var(--linea);padding-left:var(--s3);gap:var(--s3)} } @media(min-width:960px){ .promos{grid-template-columns:repeat(4,1fr)} .resenas{grid-template-columns:repeat(4,1fr)} } @media(min-width:1280px){ .sec__titulo{max-width:18ch} } @media(min-width:1600px){ .wrap{width:min(100% - 2*var(--s4),1440px)} } /* ── 14 · Movimiento reducido ──────────────────────────────────────────── */ /* El pin y el parallax se apagan desde main.js (ni se carga GSAP). Acá se apaga lo que es puramente CSS. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important; scroll-behavior:auto !important} .platos__viewport{scroll-snap-type:none} } /* ── 15 · Transición entre index y carta ───────────────────────────────── */ /* Cero JavaScript y cero librería. Donde no hay soporte, navega normal. */ @view-transition{navigation:auto} /* ── 16 · La carta (carta.html) ────────────────────────────────────────── */ .carta{padding:var(--s5) 0 var(--sec-y)} .carta__t{font-size:clamp(2.1rem,6.5vw,4rem);max-width:16ch} .carta__lead{max-width:52ch;color:var(--tinta-2);margin:var(--s3) 0 0} /* Anclas, no pestañas con JavaScript: funcionan sin JS y se pueden compartir por WhatsApp apuntando a una categoría concreta. */ .carta__nav{position:sticky;top:64px;z-index:40;margin:var(--s4) 0 0; display:flex;flex-wrap:wrap;gap:.4rem var(--s2);padding:var(--s2) 0; background:var(--papel);border-bottom:1px solid var(--linea); font-size:.85rem;letter-spacing:.04em} /* Los separadores son pseudo-elementos, no texto suelto: un «·» entre enlaces de 44 px de alto se queda descolgado del centro. */ .carta__nav a{color:var(--tinta-2);text-decoration:none; min-height:44px;display:inline-flex;align-items:center} .carta__nav a + a::before{content:"·";margin-right:var(--s2); color:var(--tinta-3)} .carta__nav a:hover{color:var(--brasa)} .cat{margin-top:var(--s6);scroll-margin-top:140px} .cat__t{font-size:clamp(1.6rem,4.5vw,2.4rem); padding-bottom:var(--s2);border-bottom:2px solid var(--tinta)} .cat__nota{margin:var(--s2) 0 0;color:var(--tinta-3);font-size:.9rem; font-style:italic} .lista{list-style:none;margin:var(--s3) 0 0;padding:0} .item{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--linea)} .item__txt{flex:1;min-width:0} .item__n{font-size:1.1rem;font-weight:600} .item__d{margin:.25rem 0 0;color:var(--tinta-2);font-size:.9rem;max-width:46ch} .item__p{margin:0;display:flex;align-items:center;gap:var(--s2); flex-shrink:0;flex-wrap:wrap;justify-content:flex-end} .item__p span{font-family:var(--display);font-weight:700;font-size:1.2rem; font-variant-numeric:tabular-nums;min-width:4.2rem;text-align:right} .carta__pie{margin:var(--s5) 0 0;padding-top:var(--s3); border-top:1px solid var(--linea);color:var(--tinta-3);font-size:.9rem} /* ── 17 · Transición entre páginas ─────────────────────────────────────── */ /* El logo es el elemento compartido: al navegar entre index y carta se queda quieto mientras el resto cruza. Cero JavaScript. */ .cab__logo{view-transition-name:marca}