/* Coco Nails — estilos de la web.
   Marca: crema #FFFEF5 · marrón #643F13 · texto negro · Manrope con +4 % de espacio entre letras.
   Las olas marrones con el patrón CŌCŌ son las de las tarjetas de visita
   (anverso arriba a la derecha, reverso abajo). --patron-tam lo escribe _build.py. */

/* Manrope (Google Fonts, licencia OFL), servida desde la propia web: un solo archivo variable,
   del 200 al 800, solo con el alfabeto latino. Sustituye a Spock Pro desde el 19-oct-2026. */
@font-face { font-family: "Manrope"; src: url("fuentes/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --crema: #FFFEF5;
  --marron: #643F13;
  --negro: #000;
  --gris: rgba(0, 0, 0, .62);
  --linea: rgba(0, 0, 0, .13);
  --ancho: 1160px;
  --lado: clamp(20px, 5vw, 48px);
  --ola-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z'/%3E%3C/svg%3E");
  /* las mismas olas, moviéndose despacio (la forma de arriba es su posición de reposo) */
  --ola-arriba-mov: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z'%3E%3Canimate attributeName='d' dur='14s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.25;.5;.75;1' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1;.45 0 .55 1' values='M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z;M0,0 C21,26.5 28,60 41.5,79.5 C55.5,97.5 79.5,96 100,83 L100,0 Z;M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z;M0,0 C16,18 22.5,51.5 34.5,72 C47.5,93.5 75,100 100,95.5 L100,0 Z;M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z'/%3E%3C/path%3E%3C/svg%3E");
  --ola-abajo-mov: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z'%3E%3Canimate attributeName='d' dur='17s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.25;.5;.75;1' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1;.45 0 .55 1' values='M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z;M0,100 L0,57 C15.5,51 31.5,49.5 45.5,47 C63.5,43.5 80.5,22 100,3 L100,100 Z;M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z;M0,100 L0,69 C12.5,63.5 27.5,61 41,58 C59,54.5 76,36.5 100,1 L100,100 Z;M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z'/%3E%3C/path%3E%3C/svg%3E");
  --ola-arriba-movil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z'%3E%3Canimate attributeName='d' dur='11s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.25;.5;.75;1' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1;.45 0 .55 1' values='M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z;M0,0 C23.5,31 31,64 45,83 C59,99 81,93 100,76 L100,0 Z;M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z;M0,0 C13.5,13 20,46 31,67 C43.5,89.5 72,100 100,99 L100,0 Z;M0,0 C18.4,21.8 24.9,56.4 37.7,76.4 C51.3,98.2 77.6,100 100,90 L100,0 Z'/%3E%3C/path%3E%3C/svg%3E");
  --ola-abajo-movil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z'%3E%3Canimate attributeName='d' dur='13s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.25;.5;.75;1' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1;.45 0 .55 1' values='M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z;M0,100 L0,50 C17,43 33.5,42 48,40 C65.5,36.5 82.5,15 100,6 L100,100 Z;M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z;M0,100 L0,76 C11,70.5 25.5,68.5 39,65.5 C57,61.5 74,43 100,2 L100,100 Z;M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z'/%3E%3C/path%3E%3C/svg%3E");
  --ola-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,63.8 C13.9,57.9 29.3,55.3 43,52.6 C61.2,49.3 78,28.9 100,0 L100,100 Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--negro);
  font: 400 18px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;   /* Nico, 19-oct: Manrope con más aire entre letras */
  -webkit-font-smoothing: antialiased;
}
/* El 4 % se calcula con el tamaño de CADA texto: heredado del body sería el 4 % de 18 px también en
   los títulos. :where() no pesa, así que las reglas con su propio espaciado (idiomas, antetítulo) mandan. */
:where(body *) { letter-spacing: .04em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.06; }
h1 { font-size: clamp(46px, 6.6vw, 88px); }
h2 { font-size: clamp(36px, 4.4vw, 56px); }
h3 { font-size: 22px; font-weight: 400; }
p { margin: 0; }
strong { font-weight: 700; }

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 100; background: var(--marron); color: var(--crema); padding: 8px 14px; border-radius: 8px; }
.nota { color: var(--gris); font-size: 16px; }

/* ------------------------------------------------------------ botones e iconos */
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico-peq { width: .9em; height: .9em; }
.boton {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .82em 1.5em; border-radius: 999px;
  background: var(--marron); color: var(--crema); border: 1.5px solid var(--marron);
  text-decoration: none; line-height: 1.1; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
  --hueco: var(--marron);
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(100, 63, 19, .7); }
.boton-linea { background: transparent; color: var(--negro); border-color: var(--negro); --hueco: var(--crema); }
.boton-peq { padding: .62em 1.2em; font-size: 16px; }
a:focus-visible, .boton:focus-visible { outline: 2px solid var(--marron); outline-offset: 3px; }

/* ------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 254, 245, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-in { display: flex; align-items: center; gap: 30px; height: 70px; }
.marca img { height: 27px; width: auto; }
.menu { display: flex; gap: 28px; margin-left: auto; font-size: 16px; }
.menu a { text-decoration: none; opacity: .78; }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.idiomas { display: flex; gap: 2px; padding-left: 18px; border-left: 1px solid var(--linea); font-size: 14px; letter-spacing: .06em; }
.idiomas a { padding: 6px 7px; border-radius: 8px; text-decoration: none; color: var(--gris); letter-spacing: inherit; }
.idiomas a:hover { color: var(--negro); background: rgba(100, 63, 19, .07); }
.idiomas a[aria-current] { color: var(--negro); font-weight: 700; }

/* ------------------------------------------------------------ portada */
.hero { --hero-arriba: clamp(56px, 8vw, 110px); position: relative; padding: var(--hero-arriba) 0 clamp(24px, 4vw, 48px); }
.hero-ola {
  position: absolute; top: 0; right: 0; width: 60%; height: 74%;
  background: var(--marron) url("img/patron-crema.png") 0 0 / var(--patron-tam) repeat;
  -webkit-mask: var(--ola-arriba-mov) 0 0 / 100% 100% no-repeat;
          mask: var(--ola-arriba-mov) 0 0 / 100% 100% no-repeat;
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.antetitulo { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: 20px; }
.entradilla { margin-top: 24px; max-width: 28em; font-size: clamp(19px, 1.6vw, 22px); color: var(--gris); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.horario-corto { display: flex; align-items: center; gap: .55em; margin-top: 28px; font-size: 16px; color: var(--gris); }
.hero-foto {
  margin: 0; justify-self: end; width: min(100%, 430px); aspect-ratio: 3 / 4;
  border-radius: 30px; overflow: hidden; background: #ece6d8;
  box-shadow: 0 36px 70px -34px rgba(60, 35, 10, .55);
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ secciones */
.seccion { padding: clamp(64px, 9vw, 116px) 0; }
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 44px; }

/* carta de precios */
.carta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 80px; }
.grupo h3 { padding-bottom: 14px; border-bottom: 1.5px solid var(--negro); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: grid; grid-template-columns: 1fr auto minmax(3.3em, max-content); align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.lista .dur { font-size: 14px; color: var(--gris); white-space: nowrap; }
.lista .precio { font-weight: 700; text-align: right; white-space: nowrap; }
.lista .precio small { display: block; font-size: .62em; font-weight: 500; color: var(--gris); line-height: 1.1; margin-bottom: 2px; }
.pie-carta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 52px; padding: 28px 32px; border-radius: 24px; background: rgba(100, 63, 19, .07); }
.pie-carta p { font-size: 20px; }

/* fotos */
.seccion-fotos { padding-top: 0; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galeria figure { margin: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #ece6d8; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galeria figure:hover img { transform: scale(1.035); }
.enlace { display: inline-flex; align-items: center; gap: .5em; margin-top: 30px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* manifiesto: un párrafo en grande, como los textos del flyer */
.seccion-manifiesto { padding: clamp(48px, 7vw, 96px) 0 0; }
.manifiesto { max-width: 23em; font-size: clamp(25px, 3.3vw, 42px); font-weight: 300; line-height: 1.32; }
.manifiesto em { font-style: normal; color: var(--marron); }

/* tarjeta de fidelización: los cinco círculos en zigzag del reverso de la tarjeta */
.seccion-tarjeta { position: relative; overflow: hidden; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion-tarjeta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background: url("img/patron-marron.png") 0 0 / var(--patron-tam) repeat;
}
.tarjeta-in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.tarjeta-in p { margin-top: 20px; max-width: 22em; font-size: 21px; }
.tarjeta-in .nota { font-size: 16px; margin-top: 14px; }
.sellos { --d: clamp(66px, 8.6vw, 108px); display: flex; padding-bottom: calc(var(--d) * .7); }
.sello {
  width: var(--d); height: var(--d); flex: none; border: 2px solid var(--negro); border-radius: 50%;
  background: var(--crema); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sello + .sello { margin-left: calc(var(--d) * -.1); }
.sello:nth-child(even) { translate: 0 70%; }
.sello b { font-size: calc(var(--d) * .27); font-weight: 700; line-height: 1; }
.sello i { font-style: normal; font-size: calc(var(--d) * .115); color: var(--gris); margin-top: .35em; }

/* visítanos */
.visitanos { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
.datos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 24px; }
.datos li { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; }
.datos li > .ico { width: 24px; height: 24px; margin-top: 3px; }
.datos a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.datos a:hover { border-color: currentColor; }
.datos p + p { margin-top: 4px; }
.enlace-peq { display: inline-flex; align-items: center; gap: .35em; margin-top: 6px; font-size: 16px; color: var(--marron); }
.horas { display: grid; grid-template-columns: auto auto; gap: 4px 28px; margin: 0; justify-content: start; }
.horas dt { color: var(--gris); }
.horas dd { margin: 0; }
.pet { display: inline-flex; align-items: center; gap: .6em; margin-top: 34px; padding: 11px 18px; border-radius: 999px; background: rgba(100, 63, 19, .08); color: var(--marron); font-size: 16px; }
.pet .ico { width: 22px; height: 22px; }
/* plano: Coco entre las dos paradas de la L4 (lo dibuja plano() en _build.py) */
.visita-lado { display: grid; gap: 24px; }
.plano { display: block; border: 1px solid var(--linea); border-radius: 30px; overflow: hidden; text-decoration: none; color: var(--negro); }
.plano:hover { border-color: var(--marron); }
.plano-svg { display: block; width: 100%; height: auto; }
/* el plano lo dibuja _plano.py con las calles de OpenStreetMap */
.pl-fondo { fill: #EFE8DA; }
.pl-parque { fill: #DCE3D0; }
.pl-plaza { fill: #FFFEF5; }
.pl-calle { fill: none; stroke: #FFFEF5; stroke-linecap: round; stroke-linejoin: round; }
.pl-nombre { font-size: 10.5px; font-weight: 600; fill: rgba(0, 0, 0, .46); letter-spacing: .05em; }
.pl-l4 { fill: none; stroke-width: 5; stroke-dasharray: 11 7; stroke-linecap: butt; stroke-linejoin: round; }
.pl-pie-fondo { fill: none; stroke: #FFFEF5; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pl-pie { fill: none; stroke: var(--marron); stroke-width: 4.2; stroke-dasharray: .1 8; stroke-linecap: round; stroke-linejoin: round; }
.pl-halo { paint-order: stroke; stroke: #FFFEF5; stroke-width: 5px; stroke-linejoin: round; }
.pl-halo-fino { paint-order: stroke; stroke: #EFE8DA; stroke-width: 3px; stroke-linejoin: round; }
.pl-parada { fill: var(--crema); stroke: var(--negro); stroke-width: 3.4; }
.pl-parada-t { font-size: 21px; font-weight: 700; fill: var(--negro); }
.pl-min { font-size: 16px; font-weight: 600; fill: var(--marron); }
.pl-linea { font-size: 13px; font-weight: 700; fill: var(--negro); letter-spacing: .02em; }
.pl-pin { fill: var(--marron); stroke: #FFFEF5; stroke-width: 2; }
.pl-pin-ojo { fill: var(--crema); }
.pl-coco { font-size: 22px; font-weight: 700; fill: var(--negro); }
.pl-calle-coco { font-size: 15px; fill: rgba(0, 0, 0, .62); }
.pl-norte path { fill: rgba(0, 0, 0, .55); }
.pl-norte text { font-size: 12px; font-weight: 700; fill: rgba(0, 0, 0, .55); }
.pl-credito { font-size: 10px; fill: rgba(0, 0, 0, .5); }
.resena { background: var(--marron); color: var(--crema); border-radius: 30px; padding: 40px 36px; }
.resena h3 { font-size: 30px; font-weight: 300; }
.resena p { margin: 16px 0 28px; opacity: .88; }
.resena .boton { background: var(--crema); color: var(--marron); border-color: var(--crema); }
.resena .ico { width: 20px; height: 20px; }

/* páginas legales */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: 12px; }
.legal h2 { font-size: 26px; font-weight: 400; margin: 40px 0 12px; }
.legal p, .legal li { color: rgba(0, 0, 0, .8); }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .nota { margin-top: 48px; }

/* ------------------------------------------------------------ pie */
.pie-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 48px 0 36px; font-size: 15px; color: var(--gris); border-top: 1px solid var(--linea); }
.pie-in img { height: 22px; width: auto; }
.pie-in a { text-decoration: none; }
.pie-in a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie-ola {
  height: clamp(110px, 15vw, 220px);
  background: var(--marron) url("img/patron-crema.png") 0 0 / var(--patron-tam) repeat;
  -webkit-mask: var(--ola-abajo-mov) 0 0 / 100% 100% no-repeat;
          mask: var(--ola-abajo-mov) 0 0 / 100% 100% no-repeat;
}

/* ------------------------------------------------------------ animaciones
   Intro del logo: solo la primera vez que se abre la web en la pestaña (la activa el
   script del <head> poniendo .con-intro) y nunca si el móvil pide menos movimiento.
   Sin JavaScript no hay intro y la web se ve igual. Tocar la pantalla la salta. */
:root { --retraso: .05s; }
.con-intro { --retraso: 1.3s; }

.intro { display: none; }
.con-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  background: var(--crema); cursor: pointer;
  box-shadow: 0 18px 50px rgba(60, 35, 10, .16);  /* se ve el borde al levantarse */
  animation: intro-sale .65s cubic-bezier(.7, 0, .2, 1) 1.25s forwards;
}
.intro-logo { width: min(66vw, 480px); height: auto; color: var(--negro); overflow: visible; }
.intro .pz { transform-box: fill-box; transform-origin: 50% 100%; animation: pz-sube .6s cubic-bezier(.2, .75, .25, 1) both; }
.intro .pz-c1 { animation-delay: .1s; }
.intro .pz-o1 { animation-delay: .18s; }
.intro .pz-c2 { animation-delay: .26s; }
.intro .pz-o2 { animation-delay: .34s; }
.intro .pz-m1, .intro .pz-m2 { transform-origin: 50% 50%; animation: pz-cae .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.intro .pz-m1 { animation-delay: .66s; }
.intro .pz-m2 { animation-delay: .78s; }
.intro-saltada .intro { animation: intro-sale .35s ease-in forwards; }

@keyframes pz-sube { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
@keyframes pz-cae { from { opacity: 0; transform: translateY(-260%); } to { opacity: 1; transform: none; } }
@keyframes intro-sale { to { transform: translateY(-100%); visibility: hidden; } }

/* Entrada de la portada, con o sin intro: la ola crece desde la esquina y el texto sube */
.hero-ola { animation: ola-entra 1.1s cubic-bezier(.65, 0, .25, 1) var(--retraso) backwards; }
.hero-texto > * { animation: aparece .7s cubic-bezier(.2, .75, .25, 1) both; }
.hero-texto > :nth-child(1) { animation-delay: calc(var(--retraso) + .1s); }
.hero-texto > h1 { animation-name: sube; animation-delay: calc(var(--retraso) + .16s); }
.hero-texto > :nth-child(3) { animation-delay: calc(var(--retraso) + .24s); }
.hero-texto > :nth-child(4) { animation-delay: calc(var(--retraso) + .32s); }
.hero-texto > :nth-child(5) { animation-delay: calc(var(--retraso) + .4s); }
.hero-foto { animation: sube .9s cubic-bezier(.2, .75, .25, 1) calc(var(--retraso) + .2s) both; }

@keyframes ola-entra {
  from { -webkit-clip-path: circle(0% at 100% 0%); clip-path: circle(0% at 100% 0%); }
  to   { -webkit-clip-path: circle(150% at 100% 0%); clip-path: circle(150% at 100% 0%); }
}
@keyframes aparece { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* el título y la foto no se desvanecen: así Google los cuenta como pintados desde el principio */
@keyframes sube { from { transform: translateY(22px); } to { transform: none; } }

/* Aparecer al bajar: fotos, títulos y sellos de la tarjeta. Lo activa el script del final
   de la portada (.animar). Sin JavaScript o con "reducir movimiento" todo se ve desde el
   principio. */
.animar .revelar {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .75, .25, 1), transform .8s cubic-bezier(.2, .75, .25, 1);
  transition-delay: var(--espera, 0s);
}
.animar .galeria .revelar { transform: translateY(46px) scale(.96); }
.animar .revelar.visto { opacity: 1; transform: none; }
.animar .sellos.revelar { opacity: 1; transform: none; }   /* el bloque se queda; salen los sellos */
.animar .sellos.revelar .sello { opacity: 0; scale: .3; transition: opacity .35s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1); }
.animar .sellos.visto .sello { opacity: 1; scale: 1; }
.animar .sellos .sello:nth-child(2) { transition-delay: .14s; }
.animar .sellos .sello:nth-child(3) { transition-delay: .28s; }
.animar .sellos .sello:nth-child(4) { transition-delay: .42s; }
.animar .sellos .sello:nth-child(5) { transition-delay: .62s; }

/* Olas vivas: con JavaScript las dibuja un SVG que se mueve (también en iPhone) y la
   máscara CSS se retira; sin JavaScript se queda la máscara. */
.pie-ola { position: relative; }
.hero-ola.ola-viva, .pie-ola.ola-viva { -webkit-mask: none; mask: none; background: none; }
.ola-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ------------------------------------------------------------ tablet y móvil */
@media (max-width: 900px) {
  .cabecera-in { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 10px; gap: 10px 12px; }
  .menu { order: 3; width: 100%; margin: 0; justify-content: space-between; font-size: 15px; gap: 12px; }
  .idiomas { margin-left: auto; padding-left: 0; border-left: 0; }
  html { scroll-padding-top: 110px; }
  .hero-in, .visitanos, .tarjeta-in { grid-template-columns: 1fr; }
  .hero-in { gap: 44px; }
  .hero-foto { justify-self: stretch; width: 100%; aspect-ratio: 4 / 5; }
  .sellos { justify-self: start; }
  .carta { gap: 48px 48px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .idiomas a { padding: 6px 5px; }
  .hero-ola { -webkit-mask-image: var(--ola-arriba-movil); mask-image: var(--ola-arriba-movil); }
  .pie-ola { -webkit-mask-image: var(--ola-abajo-movil); mask-image: var(--ola-abajo-movil); }
  .horario-corto { font-size: 15px; }
  .hero { --hero-arriba: 132px; }
  .hero-ola { width: 74%; height: 150px; }
  .carta { grid-template-columns: 1fr; }
  .lista li { gap: 12px; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .galeria figure { border-radius: 14px; }
  .pie-carta { padding: 24px; }
  .pie-carta .boton { width: 100%; justify-content: center; }
  .resena { padding: 32px 26px; }
  .botones .boton { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .galeria img { transition: none; }
  .con-intro .intro { display: none; }
  .hero-ola, .hero-texto > *, .hero-foto { animation: none; }
  .hero-ola { -webkit-mask-image: var(--ola-arriba); mask-image: var(--ola-arriba); }
  .pie-ola { -webkit-mask-image: var(--ola-abajo); mask-image: var(--ola-abajo); }
}