/* Ristòro · sitio informativo · v2 (octubre 2026) — menos es más: tres fotografías, el resto tipografía. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/manrope-variable.woff2") format("woff2"); }

:root {
  --negro: #101214; --blanco: #FFFFFF; --petroleo: #405B61; --niebla: #EDF1F2; --gris: #656C70;
  --sobre-negro: #B8BDC0; --linea: #D3DADC;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", Arial, sans-serif;
  --pad: clamp(1.25rem, 5vw, 4rem); --max: 76rem; --cab: 4.5rem; --barra: 0rem;
  --margen: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
}
@media (max-width: 1023.98px) { :root { --barra: 4.25rem; --cab: 4rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 1rem); scroll-padding-bottom: calc(var(--barra) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--blanco); color: var(--negro); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; padding-bottom: var(--barra); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; height: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
p { text-wrap: pretty; }
.eti { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--petroleo); margin-bottom: 1rem; }
.rule { width: 3rem; height: 2px; background: var(--petroleo); margin: 1.5rem 0; }
figure { position: relative; }
figcaption { position: absolute; right: .75rem; bottom: .6rem; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.85); text-shadow: 0 0 6px rgba(0,0,0,.7); }
:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 3px; }
.hero :focus-visible, .segmento--corporativo :focus-visible, .preparacion :focus-visible, .contacto :focus-visible, .barra-movil:focus-visible { outline-color: var(--blanco); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--negro); color: var(--blanco); padding: .75rem 1rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; }
.boton--oscuro { background: var(--negro); color: var(--blanco); } .boton--oscuro:hover { background: var(--petroleo); }
.boton--claro { background: var(--blanco); color: var(--negro); } .boton--claro:hover { background: var(--niebla); }
.boton--contorno { border-color: var(--blanco); color: var(--blanco); } .boton--contorno:hover { background: var(--blanco); color: var(--negro); }
.enlace { display: inline-block; margin-top: 2rem; font-weight: 600; text-underline-offset: .35em; text-decoration-thickness: 1px; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.encabezado__fila { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); height: var(--cab); display: flex; align-items: center; gap: 2rem; }
.marca { display: block; padding: .25rem 0; flex: none; } .marca img { width: 150px; height: auto; }
.nav { margin-left: auto; } .nav__lista { display: flex; gap: 1.5rem; }
.nav__lista a { text-decoration: none; font-size: .92rem; font-weight: 500; padding: .5rem 0; }
.nav__lista a:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav__boton { display: none; } .encabezado__cta { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .92rem; }
@media (max-width: 1023.98px) {
  .encabezado__cta { display: none; }
  .nav__boton { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: none; border: 1px solid var(--negro); font: 600 .95rem var(--sans); color: var(--negro); cursor: pointer; }
  .js .nav__lista { display: none; position: absolute; left: 0; right: 0; top: var(--cab); flex-direction: column; gap: 0; background: var(--blanco); border-bottom: 1px solid var(--linea); padding: .5rem var(--pad) 1.25rem; }
  .js .nav[data-abierto="true"] .nav__lista { display: flex; }
  .nav__lista a { display: block; padding: .85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--niebla); }
  html:not(.js) .nav__boton { display: none; } html:not(.js) .nav__lista { flex-wrap: wrap; gap: .25rem 1rem; } html:not(.js) .encabezado__fila { height: auto; flex-wrap: wrap; padding-block: .75rem; }
}

/* Hero: una fotografía a sangre, texto a la izquierda */
.hero { position: relative; min-height: calc(100svh - var(--cab)); display: flex; align-items: flex-end; color: var(--blanco); background: var(--negro); isolation: isolate; }
.hero__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; }
.hero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,18,20,.9) 0%, rgba(16,18,20,.72) 45%, rgba(16,18,20,.15) 100%), linear-gradient(to top, rgba(16,18,20,.75) 0%, rgba(16,18,20,0) 45%); }
.hero__texto { padding: clamp(5rem, 14vw, 9rem) var(--margen) clamp(3rem, 7vw, 5.5rem); width: 100%; }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 4vw, 4.8rem); max-width: 16ch; }
.hero__lema { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; margin-top: 1.25rem; color: rgba(255,255,255,.88); }
.hero__acciones { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero__tel a { font-family: var(--serif); font-size: 1.7rem; font-variant-numeric: lining-nums; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); }
@media (max-width: 719.98px) { .hero { min-height: calc(100svh - var(--cab) - var(--barra)); } .hero__fondo img { object-position: 85% 50% !important; } .hero__fondo::after { background: linear-gradient(to top, rgba(16,18,20,.92) 0%, rgba(16,18,20,.6) 55%, rgba(16,18,20,.25) 100%); } }

/* Manifiesto: texto + una foto vertical */
.manifiesto { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 10vw, 9rem) var(--pad); display: grid; gap: 3rem; align-items: center; }
.manifiesto h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); max-width: 15ch; }
.manifiesto__texto > p { max-width: 32rem; font-size: 1.125rem; }
.manifiesto__nota { margin-top: 1.5rem; color: var(--gris); font-size: .95rem; }
.manifiesto__foto { max-width: 70vw; aspect-ratio: 3 / 4; overflow: hidden; }
.manifiesto__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (min-width: 1024px) { .manifiesto { grid-template-columns: 7fr 5fr; column-gap: clamp(3rem, 7vw, 7rem); } .manifiesto__foto { max-width: none; } }

/* Bodas y corporativo: dos bloques tipográficos, sin fotografía */
.segmentos { display: grid; }
.segmento { padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad) clamp(4rem, 9vw, 7rem); }
.segmento h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); max-width: 16ch; }
.segmento > p:not(.eti) { margin-top: 1.5rem; max-width: 30rem; }
.segmento--bodas { background: var(--niebla); text-align: center; }
.segmento--bodas h2 { font-style: italic; margin-inline: auto; }
.segmento--bodas > p { margin-inline: auto; }
.momentos { margin-top: 2rem; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.momentos li + li::before { content: ""; display: block; width: 1.75rem; height: 1px; background: var(--petroleo); margin: .9rem auto; }
.segmento--corporativo { background: var(--negro); color: var(--blanco); }
.segmento--corporativo .eti { color: var(--sobre-negro); }
.usos { margin-top: 2rem; max-width: 22rem; }
.usos li { border-top: 1px solid rgba(255,255,255,.28); padding: .75rem 0; font-weight: 500; }
.usos li:last-child { border-bottom: 1px solid rgba(255,255,255,.28); }
@media (min-width: 1024px) { .segmentos { grid-template-columns: 1fr 1fr; } .segmento { padding-inline: clamp(3rem, 6vw, 6rem); } }

/* Cómo preparamos: foto a sangre con texto */
.preparacion { position: relative; background: var(--negro); color: var(--blanco); isolation: isolate; min-height: 36rem; display: flex; align-items: center; }
.preparacion__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.preparacion__fondo img { width: 100%; height: 100%; object-fit: cover; }
.preparacion__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,18,20,.94) 0%, rgba(16,18,20,.8) 45%, rgba(16,18,20,.2) 100%); }
.preparacion__texto { padding: clamp(4rem, 9vw, 7rem) var(--margen); max-width: calc(var(--max) + 2 * var(--pad)); }
.preparacion .eti { color: var(--sobre-negro); }
.preparacion h2 { max-width: 14ch; }
.preparacion__texto > p { margin-top: 1.5rem; max-width: 30rem; font-size: 1.125rem; }
.datos { margin-top: 2rem; max-width: 30rem; }
.datos li { border-top: 1px solid rgba(255,255,255,.3); padding: .7rem 0; font-size: .95rem; }
.datos li:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
@media (max-width: 719.98px) { .preparacion__fondo img { object-position: 30% 50% !important; } .preparacion__fondo::after { background: rgba(16,18,20,.78); } }

/* Carta */
.carta { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 10vw, 9rem) var(--pad); display: grid; gap: 2.5rem; }
.carta__cabeza p:not(.eti) { margin-top: 1rem; max-width: 30rem; color: var(--gris); }
.bebidas li { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.2; }
.carta__alergias { max-width: 34rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); color: var(--gris); font-size: .95rem; align-self: end; }
@media (min-width: 1024px) { .carta { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 7vw, 7rem); } .carta__cabeza { grid-column: 1; } .bebidas { grid-column: 2; grid-row: 1 / span 2; } .carta__alergias { grid-column: 1; } }

/* Inversión */
.inversion { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 10vw, 9rem) var(--pad); display: grid; gap: 2.5rem; }
.inversion__cabeza p:not(.eti) { margin-top: 1rem; max-width: 30rem; color: var(--gris); }
.filas { border-top: 2px solid var(--negro); font-variant-numeric: lining-nums tabular-nums; }
.fila { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--linea); }
.fila__l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fila__q { font-family: var(--serif); font-size: 2.1rem; line-height: 1; } .fila__q span { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--gris); }
.fila__pp { font-family: var(--serif); font-weight: 600; font-size: 2.3rem; line-height: 1; text-align: right; } .fila__pp span { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--gris); }
.fila__l2 { margin-top: .6rem; display: flex; justify-content: space-between; gap: 1.5rem; font-size: .9rem; color: var(--gris); }
.fila__l2 p:last-child { text-align: right; }
.fila__cta { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .4rem; font-size: .95rem; font-weight: 600; text-underline-offset: .3em; }
.inversion__cond { font-size: .9rem; color: var(--gris); max-width: 34rem; } .inversion__cond p + p { margin-top: .75rem; }
@media (max-width: 479.98px) { .fila__l2 { flex-direction: column; gap: .2rem; } .fila__l2 p:last-child { text-align: left; } .fila__q span, .fila__pp span { display: block; margin-top: .35rem; } }
@media (min-width: 1024px) { .inversion { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 7vw, 7rem); } .filas { grid-column: 2; grid-row: 1 / span 2; } .inversion__cond { grid-column: 1; align-self: end; } }

/* Preguntas */
.preguntas { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--pad); display: grid; gap: 2rem; }
.faq { border-top: 1px solid var(--negro); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; font-weight: 600; font-size: 1.05rem; min-height: 3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.8rem; line-height: .8; color: var(--petroleo); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 1.4rem; max-width: 40rem; }
@media (min-width: 1024px) { .preguntas { grid-template-columns: 5fr 7fr; column-gap: clamp(3rem, 7vw, 7rem); } }

/* Contacto y pie */
.contacto { background: var(--negro); color: var(--blanco); padding: clamp(4.5rem, 10vw, 8rem) var(--margen) clamp(3.5rem, 7vw, 5rem); }
.contacto .eti { color: var(--sobre-negro); }
.contacto h2 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); max-width: 14ch; }
.contacto__tel { margin-top: 2rem; font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: 1; font-variant-numeric: lining-nums; }
.contacto__tel a { text-decoration: none; } .contacto__tel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.contacto .boton { margin-top: 2rem; }
.contacto__incluye { margin-top: 1.5rem; max-width: 34rem; color: var(--sobre-negro); } .contacto__incluye strong { color: var(--blanco); font-weight: 600; }
.pie { background: var(--negro); color: var(--sobre-negro); padding: 2.5rem var(--margen) 3rem; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 2rem; align-items: end; font-size: .875rem; }
.pie__firma { width: 160px; } .pie__texto p + p { margin-top: .4rem; }
@media (min-width: 720px) { .pie { grid-template-columns: auto 1fr; column-gap: 4rem; } }

/* Barra fija móvil */
.barra-movil { display: none; }
@media (max-width: 1023.98px) {
  .barra-movil { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: var(--barra); padding: 0 var(--pad) env(safe-area-inset-bottom); align-items: center; justify-content: space-between; gap: 1rem; background: var(--negro); color: var(--blanco); font-weight: 600; text-decoration: none; border-top: 1px solid rgba(255,255,255,.2); transition: transform .2s ease; }
  .barra-movil span { font-weight: 500; color: var(--sobre-negro); }
  .barra-movil[data-oculta="true"] { transform: translateY(110%); }
}
@media (max-width: 359.98px) { .barra-movil span { display: none; } }
@media (max-height: 480px) and (orientation: landscape) { .hero { min-height: 0; } .hero__texto { padding-top: 3rem; padding-bottom: 2rem; } .hero h1 { font-size: 1.9rem; } .hero__lema { font-size: 1.2rem; margin-top: .6rem; } .hero__acciones { margin-top: 1.25rem; } }

/* ===== Movimiento (sobrio): una entrada orquestada en el hero, revelado único al hacer scroll,
   sombra del encabezado y paralaje leve en «Cómo preparamos». Todo se desactiva con reduced-motion
   y nada depende de JS para ser visible. ===== */
.js .hero__texto > * { opacity: 0; transform: translateY(14px); animation: entrada .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero h1 { animation-delay: .1s; }
.js .hero__lema { animation-delay: .35s; }
.js .hero__acciones { animation-delay: .55s; }
@keyframes entrada { to { opacity: 1; transform: none; } }
.js .hero__fondo img { transform: scale(1.06); animation: respirar 7s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes respirar { to { transform: scale(1); } }

.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar[data-retraso="1"] { transition-delay: .12s; }
.js .revelar[data-retraso="2"] { transition-delay: .24s; }
.js .revelar[data-retraso="3"] { transition-delay: .36s; }
.js .fila.revelar:nth-child(2) { transition-delay: .1s; }
.js .fila.revelar:nth-child(3) { transition-delay: .2s; }
.js .fila.revelar:nth-child(4) { transition-delay: .3s; }
.js .rule { transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.js .revelar:not(.visible) .rule { transform: scaleX(0); }

.encabezado { transition: box-shadow .3s ease; }
.encabezado.con-sombra { box-shadow: 0 1px 0 var(--linea), 0 8px 24px rgba(16,18,20,.06); }

.boton, .enlace, .nav__lista a, .fila__cta, .escenario__cta { transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }
.enlace, .fila__cta { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: .15rem; transition: background-size .35s cubic-bezier(.2,.7,.2,1); }
.enlace:hover, .fila__cta:hover { background-size: 0 1px; background-position: 100% 100%; }
.faq details[open] > p { animation: entrada .45s cubic-bezier(.2,.7,.2,1) both; }
.faq summary::after { transition: transform .3s ease; display: inline-block; }
.faq details[open] summary::after { transform: rotate(180deg); }

@media (min-width: 1024px) { .js .preparacion__fondo img { will-change: transform; transform: translateY(var(--paralaje, 0px)) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .js .hero__texto > *, .js .revelar, .js .rule, .js .hero__fondo img, .js .preparacion__fondo img { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
.hero, .preparacion { overflow: hidden; }