/* Be Water Café del Río — maqueta
   Mobile first. Sin frameworks.
   Dos superficies (azul y blanco), todo centrado en una columna de 1200px,
   botones píldora sin relleno, dibujos de línea y nada de sombras. */

:root {
  /* Paleta de la marca: blanco y azul mandan, el marrón café acompaña,
     y un celeste hace de acento sobre el azul. */
  --crema: #FAF8F3;      /* el blanco de la marca, apenas cálido */
  --marino: #1D2B57;
  --cafe: #7A4A2A;
  --cafe-osc: #5A3319;   /* para texto chico sobre blanco */
  --celeste: #A9CFF0;
  --marino-osc: #141E40; /* azul profundo: franja legal y "Una forma de vivir" */

  --titulos: "Big Shoulders Display", "Big Shoulders", "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --datos: "Figtree", "Segoe UI", system-ui, sans-serif; /* datos chicos: la misma letra del texto (nunca letras tipo máquina de escribir) */

  --ancho: 1200px;
  --borde: clamp(1.25rem, 5vw, 3rem);
  --aire: clamp(4.5rem, 10vw, 7.5rem);

  /* cambian en los campos de color */
  --fondo: var(--crema);
  --acento: var(--cafe-osc);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--marino);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }

[id] { scroll-margin-top: 4rem; }

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--celeste); color: var(--marino);
  padding: .6rem 1rem; font-weight: 600;
}
.saltar:focus { top: 1rem; }

/* ---------- Piezas comunes ---------- */

.seccion { background: var(--fondo); padding: var(--aire) var(--borde); }
.seccion > * { max-width: var(--ancho); margin-inline: auto; }
.seccion--campo { --fondo: var(--marino); --acento: var(--celeste); color: var(--crema); }

/* Apertura de sección: rótulo, titular y una línea, todo al centro */
.apertura { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.apertura__texto { max-width: 32rem; }

.rotulo {
  font-family: var(--titulos); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento);
}
.rotulo--izq { margin-bottom: 1rem; }

.titulo {
  font-family: var(--titulos); font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: .045em; text-transform: uppercase;
  max-width: 17em; text-wrap: balance;
}
.titulo--chica { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.titulo--grande { font-size: clamp(3.4rem, 13vw, 8rem); line-height: .95; }

/* Letra de datos: horarios, dirección, estado */
.dato {
  font-family: var(--datos); font-size: .76rem; font-weight: 600; line-height: 1.35;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Etiqueta torcida para marcar lo que es de ejemplo */
.nota {
  display: inline-block; vertical-align: middle;
  font-family: var(--texto); font-size: .66rem; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--celeste); color: var(--marino);
  padding: .45em .6em .4em; rotate: -4deg; margin-left: .5em; white-space: nowrap;
}

/* Las fotos van con bordes rectos y llenan su caja; si falta el archivo queda el fondo */
.foto { position: relative; overflow: hidden; background: #2b3760; }
.foto img { width: 100%; height: 100%; object-fit: cover; }

.foto--ancha { aspect-ratio: 4 / 5; max-height: 100vh; width: 100%; }
.foto--ancha img { position: absolute; inset: -8% 0; height: 116%; }
@media (min-width: 700px) { .foto--ancha { aspect-ratio: 16 / 9; } }

/* Línea de olas, como la del cartel */
.olas {
  width: 9rem; height: 22px;
  background: var(--cafe);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22' viewBox='0 0 36 22'%3E%3Cpath d='M0 6q9-8 18 0t18 0M0 16q9-8 18 0t18 0' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / 36px 22px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22' viewBox='0 0 36 22'%3E%3Cpath d='M0 6q9-8 18 0t18 0M0 16q9-8 18 0t18 0' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / 36px 22px repeat-x;
}

/* Dibujos de línea: solo contorno */
.dibujo {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dibujo { width: 7rem; height: 7rem; stroke-width: 6; color: var(--marino); --tapa: var(--fondo); }

/* Botón píldora: el borde es la acción, sin relleno */
.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.botones--izq { justify-content: flex-start; }

/* Botones sobrios (como en unmate.es, 26/10/2026): esquinas apenas redondeadas, colores planos, sin brillos ni
   saltitos. Al pasar el mouse solo cambia el tono o el borde. Botones, pestañas y opciones usan el mismo redondeo. */
:root { --r-btn: 8px; }
.btn {
  display: inline-block;
  padding: 1rem 1.9rem .95rem;
  font-size: .82rem; font-weight: 600; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--crema);
  border: 1.5px solid currentColor; border-radius: var(--r-btn);
  transition: color .22s, background-color .22s, border-color .22s;
}
.btn:hover { color: var(--celeste); }
.btn:active { transform: translateY(1px); }
/* Los dos botones de la portada: mismo tamaño, uno lleno y uno de borde (sin brillos ni haces que giran). */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
@keyframes brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }

.inicio .btn {
  position: relative; isolation: isolate;
  min-width: 14rem; padding: 0; border: 0;
  font-size: .88rem; font-weight: 700; text-align: center;
}
.inicio .btn > span { display: block; padding: 1.2rem 2rem 1.15rem; border-radius: calc(var(--r-btn) - 2px); transition: background-color .22s; }
.inicio .btn i { font-style: normal; display: inline-block; margin-left: .6em; }


.btn--brillo { background: var(--celeste); color: var(--marino); border-radius: var(--r-btn); }
.btn--brillo > span { margin: 2px; } /* misma altura que el de borde */
.inicio .btn--brillo:hover { color: var(--marino); background: var(--crema); }

.btn--luz { color: var(--crema); background: rgba(250,248,243,.6); border-radius: var(--r-btn); }
.inicio .btn--luz:hover { color: var(--crema); background: var(--crema); }
.btn--luz > span { margin: 1.5px; background: var(--marino); }
.btn--luz:hover > span { background: #26366b; }

.btn--marino { color: var(--marino); }
.btn--marino:hover { color: var(--cafe-osc); }

.redondo {
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  background: none; color: var(--marino); cursor: pointer;
  border: 1.5px solid currentColor; border-radius: 50%;
  font: 500 1.1rem/1 var(--texto);
  transition: color .25s, opacity .25s;
}
.redondo:hover { color: var(--cafe-osc); }
.redondo:disabled { opacity: .3; cursor: default; }

/* ---------- Cabecera: secciones a los lados, logo al centro ---------- */

/* El logo es una máscara: toma el color del texto (crema sobre marino, marino sobre crema).
   Solo lo usa la portada del café; en el resto va el SVG logo-cafe de logos.py. */
.logo {
  display: block; width: 100%; aspect-ratio: 637 / 211;
  background: currentColor;
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
          mask: url("../img/logo.png") center / contain no-repeat;
}

.cabecera {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem var(--borde);
  color: var(--crema);
  transition: background-color .35s, color .35s;
}
.js .cabecera { position: fixed; }
.cabecera.es-solida { background: var(--crema); color: var(--marino); }

.marca { display: block; width: 6.8rem; transition: opacity .35s; }

.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.3rem; }
.nav a, .menu-btn, .cabecera__directo {
  font: 600 .74rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: .8rem 0; color: inherit;
}
.nav a:hover, .cabecera__directo:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1.5px; }
.menu-btn, .cabecera__directo { display: none; }

/* En la portada el logo grande ya está en pantalla: el de la cabecera aparece al bajar */
.js .en-inicio .cabecera:not(.es-solida) .marca,
.js body:has(.portada--marca) .cabecera:not(.es-solida):not(:has(.nav:focus-within)) .marca { opacity: 0; pointer-events: none; }

/* En celular, con JS, las secciones van en un panel a pantalla completa */
@media (max-width: 899px) {
  .js .cabecera { flex-direction: row; justify-content: space-between; min-height: 3.7rem; }
  .js .marca { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; }
  .js .menu-btn, .js .cabecera__directo { display: block; position: relative; z-index: 2; }
  .js .menu-btn { background: none; border: 0; cursor: pointer; }
  .js .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .4rem;
    padding: 5rem var(--borde) 2rem;
    background: var(--marino); color: var(--crema);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .js .nav a {
    font: 900 clamp(2.2rem, 11vw, 3.4rem)/1.05 var(--titulos); letter-spacing: .04em; padding: .15em 0;
  }
  .menu-abierto .nav { opacity: 1; visibility: visible; }
  .menu-abierto .cabecera { color: var(--crema); background: transparent; }
  .js .menu-abierto .cabecera .marca { opacity: 1; pointer-events: auto; }
  .menu-abierto { overflow: hidden; }
}

@media (min-width: 900px) {
  .cabecera { flex-direction: row; min-height: 4.4rem; }
  .marca { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 7.6rem; }
  .nav { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 2.2rem; }
  .nav a:nth-child(2) { margin-right: auto; }
}

/* ---------- 1. Inicio: la marca primero ---------- */

.inicio {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5.5rem var(--borde) 5.5rem;
  position: relative;
  background: var(--marino); color: var(--crema);
  text-align: center;
}

.inicio__frase { width: min(78%, 23rem); height: auto; overflow: visible; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); } /* aire para el vapor */
.inicio__frase text { font-family: var(--titulos); font-weight: 900; font-size: 56px; letter-spacing: 3px; fill: var(--celeste); }
/* Foto de la fachada al fondo, teñida de marino para que mande la marca */
.inicio__fondo { position: absolute; inset: 0; z-index: 0; background: none; }
/* Las fotos se van turnando: cada lámina entra fundida, se acerca muy despacio y deja paso a la siguiente.
   --foto es la imagen y --cel su encuadre en celular. */
.lamina {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0;
  animation: pase 28s linear infinite;
}
.lamina:first-child { opacity: 1; } /* la que queda si no hay animación */
.lamina:nth-child(1) { animation-delay: -1.4s; }
.lamina:nth-child(2) { animation-delay: 5.6s; }
.lamina:nth-child(3) { animation-delay: 12.6s; }
.lamina:nth-child(4) { animation-delay: 19.6s; }
.lamina img { position: absolute; inset: 0; object-position: var(--cel, 50% 50%); }

/* En compu queda una sola foto, la del frente de noche, y se ve entera: sin recortar nada.
   Si la pantalla es más ancha que la foto, los costados se completan con negro, que es
   el color de los bordes de la foto, así que no se nota el corte.
   Las otras tres no se muestran (y al ser "lazy" tampoco se descargan). */
@media (min-width: 900px) and (orientation: landscape) {
  .lamina:not(:first-child) { display: none; }
  .lamina:first-child { opacity: 1; animation: acercar 30s ease-in-out infinite alternate; background: #05060b; }
  .lamina img {
    object-fit: contain; object-position: 50% 50%;
    /* los bordes laterales se funden con el negro, para que no se vea la costura en la vereda */
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 13%, #000 87%, transparent 96%);
            mask-image: linear-gradient(90deg, transparent 4%, #000 13%, #000 87%, transparent 96%);
  }
}
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.03); } }
/* cuatro fotos en 28 s: 7 s cada una, con 1,4 s de fundido compartido con la vecina */
@keyframes pase {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; transform: scale(1.07); }
  100% { opacity: 0; transform: scale(1.07); }
}
.inicio__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,64,.8) 0%, rgba(24,36,76,.56) 42%, rgba(20,30,64,.85) 100%);
}
.inicio > .inicio__fondo { animation: none; }
.inicio > :not(.inicio__fondo) { z-index: 1; }
.inicio__frase, .inicio__logo, .inicio__linea, .inicio__rubro, .inicio .botones { position: relative; }

.inicio__logo { width: min(92%, 36rem); }

/* Vapor: tres columnas difusas que suben de la taza, se ladean y se pierden */
.vapor { position: absolute; left: 13%; bottom: 92%; width: 34%; height: 95%; pointer-events: none; }
.vapor i {
  position: absolute; bottom: 0; left: 18%;
  width: 20%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.85) 35%, rgba(255,255,255,.5) 70%, rgba(255,255,255,0));
  filter: blur(7px);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: vapor 4.8s ease-in-out infinite;
}
.vapor i:nth-child(2) { left: 42%; --lado: -1; animation-delay: 1.6s; }
.vapor i:nth-child(3) { left: 64%; animation-delay: 3.2s; }
.vapor i:nth-child(4) { display: none; }
@keyframes vapor {
  0%   { opacity: 0;   transform: translateY(18%) scale(.7, .35) skewX(0deg); }
  25%  { opacity: .75; transform: translateY(0) scale(1, .7) skewX(calc(var(--lado, 1) * 9deg)); }
  60%  { opacity: .45; transform: translateY(-22%) scale(1.5, 1) skewX(calc(var(--lado, 1) * -10deg)); }
  100% { opacity: 0;   transform: translateY(-48%) scale(2.4, 1.15) skewX(calc(var(--lado, 1) * 6deg)); }
}

.inicio__linea { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 500; margin: 1.8rem 0 .5rem; }
.inicio__rubro { margin-bottom: 1.7rem; opacity: .85; }

/* Palabra que va cambiando */
.cambia { color: var(--celeste); font-weight: 700; white-space: nowrap; }
.js .cambia {
  display: inline-block; position: relative; overflow: hidden; vertical-align: bottom;
  height: 1.55em; text-align: left;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.cambia__p {
  position: absolute; left: 0; top: 0;
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.cambia__p.esta { transform: none; }
.cambia__p.sale { transform: translateY(-110%); }

.inicio__datos {
  position: absolute; inset: auto var(--borde) 1.4rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 2rem;
}
@media (min-width: 700px) { .inicio__datos { justify-content: space-between; } }

.inicio > * { animation: subir .9s cubic-bezier(.2,.7,.2,1) both; }
.inicio > .inicio__logo { animation-delay: .1s; }
.inicio > .inicio__linea, .inicio > .inicio__rubro { animation-delay: .2s; }
.inicio > .botones { animation-delay: .28s; }
.inicio > .inicio__datos { animation-delay: .36s; }
@keyframes subir { from { opacity: 0; transform: translateY(26px); } }

/* Sello que gira: la marca al centro y sus palabras alrededor, pegado sobre la primera foto */
.sello {
  position: absolute; z-index: 3; right: var(--borde); bottom: 0; translate: 0 86%;
  width: 6.6rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--crema); color: var(--marino);
  box-shadow: inset 0 0 0 1.5px var(--marino);
  display: grid; place-items: center;
}
.inicio > .sello { animation: none; z-index: 3; }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 18s linear infinite; }
.sello text { font: 500 13.5px var(--datos); letter-spacing: .08em; fill: currentColor; }
.sello__marca {
  width: 44%; aspect-ratio: 344 / 211; background: currentColor;
  -webkit-mask: url("../img/marca.png") center / contain no-repeat;
          mask: url("../img/marca.png") center / contain no-repeat;
}
@keyframes girar { to { rotate: 360deg; } }
@media (min-width: 700px) { .sello { width: 9.5rem; right: auto; left: 50%; translate: -50% 50%; } }

/* Portada de las páginas internas: mismo campo, más bajo */
.portada {
  background: var(--marino); color: var(--crema); --acento: var(--celeste);
  padding: clamp(8rem, 18vw, 11rem) var(--borde) clamp(3.5rem, 8vw, 5.5rem);
}
.portada .apertura { max-width: var(--ancho); margin-inline: auto; }
/* En Quiénes somos el título es la marca misma: el logo, grande */
.portada--marca { padding-top: clamp(9rem, 20vw, 12rem); padding-bottom: clamp(5rem, 11vw, 7.5rem); }
.portada--marca .apertura { gap: 2rem; }
.portada__marca { width: min(100%, 40rem); margin: 0; }
.portada__lema { color: var(--celeste); letter-spacing: .35em; }
.portada .apertura > * { animation: subir .9s cubic-bezier(.2,.7,.2,1) both; }

/* Estado abierto / cerrado */
.estado { display: inline-flex; align-items: center; gap: .6rem; text-align: left; }
.estado[hidden] { display: none; }
.estado__punto { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: #a9a497; }
.estado.es-abierto .estado__punto { background: var(--celeste); box-shadow: 0 0 0 0 rgba(169,207,240,.6); animation: latido 2.2s infinite; }
/* sobre blanco el celeste no se ve: punto café */
.seccion:not(.seccion--campo) .estado.es-abierto .estado__punto { background: var(--cafe); box-shadow: 0 0 0 0 rgba(122,74,42,.5); animation-name: latido-cafe; }
@keyframes latido { 70%, 100% { box-shadow: 0 0 0 .6rem rgba(169,207,240,0); } }
@keyframes latido-cafe { 70%, 100% { box-shadow: 0 0 0 .6rem rgba(122,74,42,0); } }

/* ---------- 2. El lugar: galería ---------- */

/* Una tira de fotos más chicas: en compu entran tres y pico, enteras, con las flechas a los costados.
   Con el dedo (o la rueda con shift) se desliza igual. */
.galeria { position: relative; margin-top: 3.5rem; }
.galeria__pista {
  display: flex; gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista .foto { flex: 0 0 auto; width: min(76vw, 21rem); aspect-ratio: 4 / 5; scroll-snap-align: start; }
.galeria__pista .foto img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.galeria__pista .foto:hover img { transform: scale(1.04); }
@media (min-width: 700px) { .galeria__pista .foto { width: auto; height: clamp(18rem, 56vh, 27rem); } }

.galeria__flecha {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  width: 3.2rem; height: 3.2rem; background: var(--crema);
  transition: color .25s, opacity .3s;
}
.galeria__flecha--ant { left: -.8rem; }
.galeria__flecha--sig { right: -.8rem; }
.galeria__flecha[hidden] { display: none; }
.galeria__flecha:disabled { opacity: 0; pointer-events: none; }

/* ---------- Par: foto + texto con dibujo ---------- */

.par { display: grid; gap: 2.5rem; align-items: center; }
.par__foto { aspect-ratio: 4 / 5; }
.par__texto { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.par__texto p:not(.rotulo) { max-width: 26rem; }

@media (min-width: 900px) {
  .par { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
  .par--invertido .par__foto { order: 2; }
}

/* ---------- 3. La barra: deslizador ---------- */

.comparar { margin-top: var(--aire); }
.comparar .desliz { justify-self: center; }
.comparar__pista { color: var(--cafe-osc); margin-top: .6rem; }

.desliz {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; width: 100%; max-width: 34rem;
  background: #cbb694;
  touch-action: pan-y; /* deja scrollear en vertical y arrastrar en horizontal */
  cursor: ew-resize;
  -webkit-user-select: none; user-select: none;
}
.desliz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.desliz__img--arriba { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.desliz__nombre {
  position: absolute; bottom: .9rem;
  font-family: var(--datos); font-size: .72rem; line-height: 1; text-transform: uppercase;
  color: var(--marino); background: var(--crema);
  padding: .55em .9em .5em; border-radius: 9999px;
  pointer-events: none;
}
.desliz__nombre--izq { left: .9rem; }
.desliz__nombre--der { right: .9rem; }
.desliz__manija {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 44px; margin-left: -22px;
  display: grid; place-items: center;
}
.desliz__manija::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--crema); }
.desliz__perilla {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--crema); border: 1.5px solid var(--marino);
}
.desliz__perilla::before, .desliz__perilla::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: solid var(--marino); border-width: 0 0 2px 2px;
}
.desliz__perilla::before { left: 11px; rotate: 45deg; }
.desliz__perilla::after { right: 11px; rotate: -135deg; }

/* ---------- 4. La carta ---------- */

.carta__cols { display: grid; gap: 3rem; margin-top: 3.5rem; max-width: 1040px; }
.carta__col h3 {
  font-family: var(--titulos); font-weight: 900; font-size: 1.9rem; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--cafe-osc);
  padding-bottom: .9rem; border-bottom: 1.5px solid var(--marino);
}
.carta__col h3 small { display: block; margin-top: .45rem; font: 400 .72rem/1.2 var(--datos); letter-spacing: 0; color: var(--marino); opacity: .75; }
.carta__col li { padding: .85rem 0 .8rem; border-bottom: 1px solid rgba(29,43,87,.18); text-align: center; }
.carta__col strong { display: block; font-weight: 600; }
.carta__col li > span { display: block; font-size: .92rem; opacity: .75; }
.tacc {
  font-family: var(--datos); font-style: normal; font-size: .62rem; font-weight: 500; text-transform: uppercase;
  color: var(--cafe-osc); border: 1px solid currentColor; border-radius: 9999px;
  padding: .25em .7em .2em; margin-left: .4em; white-space: nowrap;
  position: relative; top: -.15em;
}

@media (min-width: 900px) {
  .carta__cols { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; align-items: start; }
}

@media (min-width: 900px) { .carta__cols--dos { grid-template-columns: repeat(2, 1fr); max-width: 44rem; } }

/* ---------- 5. Talleres ---------- */

.talleres__lista { display: grid; gap: 3rem; margin-top: 3.5rem; max-width: 60rem; }

/* Flyer con borde de estampilla: las perforaciones son círculos del color del fondo */
.flyer {
  --d: 16px;
  color: var(--marino);
  padding: 1.1rem;
  rotate: -1.3deg;
  background:
    radial-gradient(circle, var(--fondo) 4.6px, transparent 5.2px) 0 calc(var(--d) / -2) / var(--d) var(--d) round no-repeat,
    radial-gradient(circle, var(--fondo) 4.6px, transparent 5.2px) 0 calc(100% + var(--d) / 2) / var(--d) var(--d) round no-repeat,
    radial-gradient(circle, var(--fondo) 4.6px, transparent 5.2px) calc(var(--d) / -2) 0 / var(--d) var(--d) no-repeat round,
    radial-gradient(circle, var(--fondo) 4.6px, transparent 5.2px) calc(100% + var(--d) / 2) 0 / var(--d) var(--d) no-repeat round,
    var(--crema);
}
.flyer--b { rotate: 1.1deg; }
.flyer__marco { border: 1.5px solid var(--marino); padding: 1.3rem 1.2rem 1.6rem; }
.flyer__arriba { display: flex; justify-content: space-between; padding-bottom: .8rem; margin-bottom: 1.2rem; border-bottom: 1.5px solid var(--marino); }
.flyer__foto { aspect-ratio: 4 / 3; margin-bottom: 1.2rem; }
.flyer__titulo {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.2rem, 15vw, 4.6rem); line-height: 1; /* lugar para la tilde de CERÁMICA */
}
.flyer .olas { margin: 1rem 0; width: 6.75rem; -webkit-mask-position: left center; mask-position: left center; }
.seccion--campo > .talleres__lista:first-child { margin-top: 0; }
.flyer__texto { margin-top: 1rem; max-width: 24rem; }
.flyer .btn { padding-inline: 1.1rem; letter-spacing: .06em; white-space: nowrap; }
.flyer__fecha { font-size: .86rem; font-weight: 500; margin-top: .9rem; padding: .6rem 0; border-block: 1.5px solid var(--marino); }
.flyer__incluye { color: var(--cafe-osc); margin: 1rem 0 1.5rem; }

@media (min-width: 900px) {
  .talleres__lista { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .flyer__titulo { font-size: clamp(3.2rem, 6vw, 4.6rem); }
}

/* ---------- 7. Visitanos: mapa navegable ---------- */

#visitanos .apertura { gap: .9rem; }

.mapa--primera { margin-top: 0 !important; }
.galeria__sola { aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .galeria__sola { aspect-ratio: 16 / 9; } }
.mapa { margin-top: 3rem; height: min(70vh, 30rem); background: #d9d3c4; }
.mapa iframe { width: 100%; height: 100%; border: 0; }

.visita__abajo { display: grid; gap: 3rem; margin-top: 3rem; max-width: 60rem; }
.horarios { border-top: 1.5px solid var(--marino); font-size: .88rem; }
.horarios li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(29,43,87,.18); }
.horarios li span:last-child { white-space: nowrap; }
.horarios li.es-hoy { color: var(--cafe-osc); font-weight: 500; }

@media (min-width: 900px) {
  .visita__abajo { grid-template-columns: 3fr 2fr; gap: 5rem; }
}

/* ---------- 8. Pie ---------- */

.pie {
  background: var(--marino); color: var(--crema);
  padding: clamp(4rem, 9vw, 6.5rem) var(--borde) 2rem;
  display: grid; justify-items: center; gap: 2rem; text-align: center;
}
.pie__lema {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.3rem, 9vw, 6rem); line-height: 1; letter-spacing: .04em; white-space: nowrap;
}
.pie__lema i { font-style: normal; color: var(--celeste); }
.pie .olas, .seccion--campo > .apertura .olas { background: var(--celeste); }
.pie__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.5rem; font-family: var(--datos); font-size: .82rem; text-transform: uppercase; }
.pie__links a { text-decoration: none; padding: .4rem 0; display: inline-block; }
.pie__links a:hover { color: var(--celeste); }
.pie__chico { font-size: .78rem; opacity: .6; margin-top: 1rem; }

/* ---------- Piezas de las páginas internas y enlaces "ver más" ---------- */

.seccion--pegada { padding-top: 0; }
.cierre { margin-top: 3rem; display: flex; justify-content: center; }
.par__texto .btn { margin-top: .6rem; }

.pasa .titulo { max-width: 14em; }

/* Cita grande del dueño */
.cita { text-align: center; display: grid; justify-items: center; gap: 1.5rem; }
.cita blockquote {
  margin: 0;
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 6.4vw, 4.6rem); line-height: 1.05; letter-spacing: .03em;
}
.cita blockquote span { display: block; }
.cita blockquote b { font-weight: inherit; color: var(--cafe); }
.cita p { max-width: 34rem; }

/* Surf · Coffee · Life, palabra por palabra */
.tres { display: grid; gap: 3rem; margin-top: 3.5rem; max-width: 62rem; text-align: center; }
.tres li { display: grid; justify-items: center; gap: .8rem; }
.tres strong {
  font-family: var(--titulos); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.6rem, 9vw, 5.5rem); line-height: .95; letter-spacing: .04em; color: var(--crema);
}
/* Life es la que importa: va en celeste */
.tres li:nth-child(3) strong { color: var(--celeste); }
.tres span { max-width: 19rem; }
@media (min-width: 900px) { .tres { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.par__foto--apaisada { aspect-ratio: 4 / 3; }

/* La carta: título y texto a un lado, fotos chicas tipo polaroid al otro. La carta manda. */
.carta__cabeza { display: grid; gap: 2rem; justify-items: center; text-align: center; max-width: 1040px; }
.carta__intro { display: grid; gap: .8rem; justify-items: inherit; }
.carta__intro p { max-width: 28rem; }
.carta__intro .rotulo { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.carta__fotos { display: flex; align-items: flex-start; padding: .5rem 1rem; }
.polaroid {
  margin: 0; width: clamp(8rem, 30vw, 12.5rem);
  background: #fff; padding: .5rem .5rem 0; border: 1.5px solid var(--marino);
  rotate: var(--g, -3deg); transition: rotate .4s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1);
}
.polaroid + .polaroid { margin-left: -1.6rem; margin-top: 1.6rem; }
.polaroid:hover { rotate: 0deg; translate: 0 -.4rem; z-index: 1; }
.polaroid .foto { aspect-ratio: 4 / 5; }
.polaroid figcaption { text-align: center; padding: .6rem 0 .7rem; font-size: .68rem; color: var(--cafe-osc); }
.carta__cabeza + .carta__cols { margin-top: 2.5rem; }
@media (min-width: 700px) {
  .carta__cabeza { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; }
  .carta__cabeza--invertida { grid-template-columns: auto minmax(0, 1fr); max-width: 44rem; } /* del ancho de Brunch + Bakery */
  .carta__cabeza--invertida .carta__fotos { order: -1; }
}

/* Los flyers originales, tal cual salieron en Instagram */
.originales { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 3vw, 2rem); margin-top: 3rem; max-width: 46rem; }
.originales img { width: 100%; height: auto; }

/* ---------- Cómo nació: una pantalla fija y, al bajar, la gota abre cada etapa de la obra ----------
   Sin JS (o con "reducir movimiento") se lee hacia abajo: la foto de hoy y todas las etapas en lista.
   Con JS (relato--js) la sección se estira, su contenido queda fijo y el avance del scroll
   decide qué etapa se ve. */
.relato { background: var(--marino); color: var(--crema); --acento: var(--celeste); }
.relato__fijo {
  display: grid; gap: 2.5rem; align-items: center;
  max-width: calc(var(--ancho) + 2 * var(--borde)); margin-inline: auto;
  padding: clamp(7rem, 14vw, 9rem) var(--borde) var(--aire);
}
.relato__fotos { aspect-ratio: 4 / 5; background: #0f1730; }
.relato__capa { position: absolute; inset: 0; object-position: 50% 55%; }
/* las etapas que todavía no tienen foto: la de hoy, cada vez menos apagada */
.relato__capa--0 { filter: grayscale(1) brightness(.42) contrast(1.25) blur(2.5px); }
.relato__capa--1 { filter: grayscale(1) sepia(.35) brightness(.8) contrast(1.1); }
.relato__capa--2 { filter: saturate(.5) brightness(.95); }
.relato__capa--3 { filter: saturate(.8); }
.relato__onda {
  position: absolute; left: 50%; top: 55%; translate: -50% -50%;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--celeste), 0 0 0 9px rgba(169,207,240,.22);
  opacity: 0; pointer-events: none;
}
.relato__texto { display: grid; gap: 1.2rem; align-content: center; }
.relato .titulo { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.relato__etapas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 1.8rem; }
.relato__paso {
  margin: 0; display: block;
  font-family: var(--titulos); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05;
  letter-spacing: .05em; text-transform: uppercase;
}
.relato__paso b { color: var(--celeste); margin-right: .35em; }
.relato__etapa p { margin-top: .5rem; max-width: 30rem; font-size: 1.1rem; }
.relato__linea, .relato__ayuda { display: none; }
@media (min-width: 900px) {
  .relato__fijo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); }
  .relato__paso b { display: block; margin: 0 0 .15em; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; }
}

.relato--js .relato__fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  grid-template-rows: minmax(0, 1fr) auto; gap: 1.2rem; align-items: stretch;
  padding: 4.6rem var(--borde) 1.6rem;
}
.relato--js .relato__fotos { aspect-ratio: auto; min-height: 0; }
.relato--js .relato__capa:not(:first-child) { clip-path: circle(0 at 50% 55%); }
.relato--js .relato__texto { gap: .8rem; }
/* las etapas van una encima de la otra: se ve la activa */
.relato--js .relato__etapas { grid-template-areas: "etapa"; margin: 0; }
.relato--js .relato__etapa {
  grid-area: etapa; opacity: 0; translate: 0 1rem; pointer-events: none;
  transition: opacity .2s, translate .2s;
}
/* la que se va desaparece rápido; la que entra espera un instante, así no se enciman */
.relato--js .relato__etapa.activa {
  opacity: 1; translate: none; pointer-events: auto;
  transition: opacity .45s .18s, translate .6s .18s cubic-bezier(.2,.7,.2,1);
}
.relato--js .relato__etapa p { font-size: 1rem; }
.relato--js .relato__linea {
  display: block; position: relative; height: 3px; margin: .9rem .8rem .4rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--celeste) var(--avance, 0%), rgba(250,248,243,.25) var(--avance, 0%));
}
/* la gota avanza por la línea */
.relato__gota {
  position: absolute; top: 50%; left: var(--avance, 0%);
  width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem;
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--celeste); border: 3px solid var(--crema);
}
.relato--js .relato__ayuda { display: block; opacity: .75; transition: opacity .4s; }
.relato__ayuda i { font-style: normal; display: inline-block; animation: bajar 1.6s ease-in-out infinite; }
.relato--andando .relato__ayuda { opacity: 0; }
@keyframes bajar { 50% { translate: 0 .3em; } }
@media (min-width: 900px) {
  .relato--js .relato__fijo { grid-template-rows: minmax(0, 1fr); padding: 6rem var(--borde) 2.5rem; gap: clamp(2.5rem, 6vw, 5rem); }
  .relato--js .relato__texto { gap: 1.2rem; }
  .relato--js .relato__etapa p { font-size: 1.15rem; }
}
/* en celular, pantallas bajas: el título más chico para que entre todo */
@media (max-width: 899px) { .relato--js .titulo { font-size: clamp(1.6rem, 7vw, 2.2rem); } }

/* Ahora que nos conocés: la vereda de noche de fondo y de vuelta al inicio */
.ahora {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 88vh; min-height: 88svh; display: grid; place-items: center;
  padding: var(--aire) var(--borde);
  background: var(--marino-osc); color: var(--crema); --acento: var(--celeste);
}
.ahora__fondo { position: absolute; inset: 0; z-index: -1; }
.ahora__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ahora__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,64,.92), rgba(24,36,76,.6) 50%, rgba(20,30,64,.92)); }
.ahora .titulo--grande { max-width: 9em; }
.ahora__linea { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 500; }
.ahora .botones { margin-top: .6rem; }
.ahora__historia { color: var(--celeste); font-weight: 600; text-decoration: none; padding: .4rem 0; }
.ahora__historia:hover { text-decoration: underline; text-underline-offset: .35em; }
.ahora__historia i { font-style: normal; }

/* Botón crema lleno, para fondos oscuros */
.btn--crema { background: var(--crema); color: var(--marino); border-color: var(--crema); transition: background-color .25s, border-color .25s; }
.btn--crema:hover { color: var(--marino); background: var(--celeste); border-color: var(--celeste); }

.pasos { list-style: none; padding: 0; }

/* Pasos numerados, sin cajas */
.pasos { display: grid; gap: 2.5rem; margin-top: 3.5rem; max-width: 60rem; text-align: center; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; justify-items: center; gap: .5rem; }
.pasos li::before {
  content: counter(paso);
  font-family: var(--titulos); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--cafe);
}
.pasos strong { font-family: var(--titulos); font-weight: 900; font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; }
.pasos span { max-width: 17rem; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.leyenda { text-align: center; margin-top: 2.5rem; }

/* ---------- Detalles que se dibujan al aparecer ---------- */

/* Subrayado dibujado a mano y resaltador */
.ul { position: relative; white-space: nowrap; display: inline-block; }
.ul svg { position: absolute; left: -3%; bottom: -.3em; width: 106%; height: .42em; overflow: visible; pointer-events: none; }
.ul path {
  fill: none; stroke: var(--cafe); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
}
.seccion--campo .ul path, .portada .ul path { stroke: var(--celeste); }
.ul.dibujada path { transition: stroke-dashoffset .9s cubic-bezier(.6,0,.3,1) .5s; stroke-dashoffset: 0; }

.hlt {
  background: linear-gradient(transparent 42%, rgba(169,207,240,.7) 42%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js .hlt { background-size: 0% 100%; }
.js .hlt.dibujada { transition: background-size .8s cubic-bezier(.6,0,.3,1) .4s; background-size: 100% 100%; }

/* ---------- Aparecer al bajar (solo si hay JS) ---------- */

.js [data-aparece] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.js [data-aparece].se-ve { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-aparece] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
  .ul path { stroke-dashoffset: 0 !important; }
  .js .hlt { background-size: 100% 100% !important; }
}

/* ---------- Café: los horarios como el cartel del local (crema, centrado, los días y cada turno abajo) ---------- */
.cartel { background: #F4EFDF; }
.cartel__hoja { display: grid; justify-items: center; gap: 1.6rem; max-width: 64rem; margin-inline: auto; text-align: center; }
.cartel__titulo { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(2.6rem, 7vw, 3.8rem); line-height: 1; color: var(--marino); }
.cartel .estado { justify-content: center; }
/* la semana: siete días en fila (en celular, uno debajo del otro), cada uno con su mañana y su tarde */
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55rem; width: 100%; margin: .8rem 0 0; padding: 0; list-style: none; }
.semana__dia {
  display: grid; align-content: start; justify-items: center; gap: .7rem; padding: 1.1rem .5rem 1.2rem;
  background: var(--crema); border: 1px solid rgba(29,43,87,.16); border-radius: var(--curva); color: var(--marino);
}
.semana__dia b { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 1.5rem; line-height: 1; }
.semana__dia abbr { text-decoration: none; }
.semana__turno { display: grid; gap: .15rem; font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; line-height: 1; letter-spacing: .03em; white-space: nowrap; }
.semana__turno i { font: 600 .62rem/1 var(--texto); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cafe-osc); }
.semana__dia--cerrado { background: transparent; border-style: dashed; color: rgba(29,43,87,.5); align-content: start; }
.semana__cerrado { font: 700 .74rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; margin-top: .55rem; }
/* hoy, resaltado */
.semana__dia.es-hoy { background: var(--marino); border-color: var(--marino); color: var(--crema); }
.semana__dia.es-hoy .semana__turno i { color: var(--celeste); }
.semana__dia.es-hoy b::after {
  content: "Hoy"; display: block; margin-top: .35rem; font: 700 .6rem/1 var(--texto); letter-spacing: .12em; color: var(--celeste);
}
.semana__dia--cerrado.es-hoy { background: transparent; color: var(--marino); border-color: var(--marino); }
@media (max-width: 799px) {
  .semana { grid-template-columns: 1fr; gap: .45rem; width: 100%; max-width: 28rem; }
  .semana__dia { grid-template-columns: 3.4rem 1fr 1fr; align-items: center; justify-items: start; padding: .8rem 1rem; text-align: left; gap: .6rem; }
  .semana__dia b { font-size: 1.3rem; }
  .semana__dia.es-hoy b::after { display: inline; margin: 0 0 0 .35rem; }
  .semana__cerrado { grid-column: 2 / -1; margin-top: 0; }
}

/* ---------- Café: Dónde, el mapa grande y al lado Escribinos ---------- */
.donde-cafe { display: grid; gap: 2.2rem; max-width: var(--ancho); margin: 3rem auto 0; }
.donde-cafe .mapa { margin-top: 0; }
.donde-cafe__lado { display: grid; align-content: center; justify-items: start; gap: 1rem; text-align: left; }
.donde-cafe__redes { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 900px) { .donde-cafe { grid-template-columns: 2fr 1fr; gap: 3rem; } }