/* ═══════════════════════════════════════════════════════════════════════════
   RIVIERE · Centro de Estética y Salud · Los Ángeles — hoja de estilo compartida
   Arquetipo 19 «Carta de Tratamientos»: una sola columna larga como una carta
   impresa de spa, secciones numeradas por zona del cuerpo, índice pegajoso
   lateral (cinta bajo la barra en el celular), sin precios (la línea termina
   en «valor a consultar»), hero tipográfico de carta abierta, anillo punteado
   que gira en bucle (idle, no sigue el cursor).

   Paleta: lino + tinta verde-negra + salvia (solo texto, líneas y números) +
   arcilla para el botón de reservar. ⛔ El botón de reservar NUNCA es verde:
   verde promete WhatsApp, y este abre la agenda de AgendaPro.
   Tipografía: Instrument Serif (títulos, cursivas) + Figtree (cuerpo y UI).
   Ninguna otra demo de la carpeta usa estas dos (medido con grep de family=).

   Sin librerías ni CDN. Sin style= en línea (un style= anula el @media).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --lino:#F3EDE3;
  --lino-osc:#EAE1D3;
  --papel:#FBF8F2;
  --tinta:#243129;
  --tinta-suave:#3F4B45;
  --salvia:#6E8A73;
  --salvia-osc:#41594A;
  --salvia-claro:#DCE4DB;
  --arcilla:#BE7355;
  --arcilla-osc:#9E5B41;
  --arcilla-claro:#F2E0D6;
  --arena:#D6C9B4;
  --gris:#6B716B;
  --wa:#1FA855;
  --wa-osc:#168A45;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:1120px;
  --barra-h:64px;
  --radio:14px;
  --paso:.38s cubic-bezier(.22,.61,.36,1);
  --sombra:0 10px 30px rgba(36,49,41,.08);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lino);color:var(--tinta);
  font-family:var(--sans);font-size:1rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.35rem,2vw,1.6rem)}
h1 em,h2 em,h3 em,.lema em{font-style:italic;color:var(--salvia-osc)}
p{margin:0 0 1rem}
.env{width:min(var(--ancho),100% - 2.5rem);margin-inline:auto}
.pre{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--salvia-osc);margin:0 0 .9rem;
}
.lead{font-size:1.12rem;color:var(--tinta-suave);max-width:58ch}
.mudo{color:var(--gris);font-size:.92rem}
.nota{
  font-size:.86rem;color:var(--gris);border-left:2px solid var(--arena);
  padding:.35rem 0 .35rem .9rem;margin:1.1rem 0 0;
}
.nota b{color:var(--tinta-suave);font-weight:600}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--arcilla);outline-offset:3px;border-radius:4px}

/* ── botones ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.35rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.95rem;line-height:1;border:1px solid transparent;
  cursor:pointer;transition:transform var(--paso),background var(--paso),box-shadow var(--paso),color var(--paso);
  position:relative;overflow:hidden;
}
.btn::after{ /* brillo que barre al pasar el cursor */
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s ease;pointer-events:none;
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.05em;height:1.05em;flex:none}
/* reservar → AgendaPro. Arcilla, nunca verde. */
.btn--reserva{background:var(--arcilla);color:#fff;box-shadow:0 8px 20px rgba(190,115,85,.28)}
.btn--reserva:hover{background:var(--arcilla-osc)}
/* WhatsApp: verde y solo verde para lo que abre un chat */
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(31,168,85,.22)}
.btn--wa:hover{background:var(--wa-osc)}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--lino)}
.btn--chico{padding:.6rem 1rem;font-size:.85rem}
.enlace{
  color:var(--salvia-osc);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--salvia);padding-bottom:1px;transition:color var(--paso),border-color var(--paso);
}
.enlace:hover{color:var(--arcilla);border-color:var(--arcilla)}

/* ── barra ────────────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:50;height:var(--barra-h);
  background:rgba(243,237,227,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--arena);
}
.barra__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:1.05}
.marca__nombre{font-family:var(--serif);font-size:1.75rem;letter-spacing:.01em}
.marca__sub{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--salvia-osc);font-weight:600;margin-top:.15rem}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.6rem}
.menu a:not(.btn){text-decoration:none;font-size:.92rem;font-weight:500;color:var(--tinta-suave);padding:.3rem 0;border-bottom:1px solid transparent;transition:color var(--paso),border-color var(--paso)}
.menu a:not(.btn):hover,.menu a[aria-current="page"]{color:var(--tinta);border-color:var(--arcilla)}
.hamb{display:none;background:none;border:1px solid var(--arena);border-radius:999px;width:44px;height:44px;cursor:pointer;position:relative}
.hamb span{position:absolute;left:12px;right:12px;height:2px;background:var(--tinta);border-radius:2px;transition:transform var(--paso),top var(--paso)}
.hamb span:first-child{top:17px}.hamb span:last-child{top:25px}
.hamb[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.hamb[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

/* ── hero de carta abierta ────────────────────────────────────────────── */
.hero{padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4.5rem);position:relative;overflow:hidden}
.hero::before{ /* resplandor suave, idle */
  content:'';position:absolute;width:56vw;height:56vw;max-width:720px;max-height:720px;
  right:-18vw;top:-22vw;border-radius:50%;
  background:radial-gradient(circle,rgba(110,138,115,.22),rgba(110,138,115,0) 68%);
  filter:blur(20px);pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative}
.hero h1{font-size:clamp(4.4rem,11vw,8.6rem);line-height:.92;margin:.1rem 0 .6rem;letter-spacing:-.02em}
.hero__lema{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.25;color:var(--tinta-suave);max-width:24ch;margin-bottom:1.8rem}
.hero__indice{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--arena)}
.hero__indice li{border-bottom:1px solid var(--arena)}
.hero__indice a{
  display:grid;grid-template-columns:2.2rem 1fr auto;align-items:baseline;gap:.8rem;
  text-decoration:none;padding:.72rem 0;transition:padding-left var(--paso),color var(--paso);
}
.hero__indice a:hover{padding-left:.5rem;color:var(--arcilla-osc)}
.hero__indice .num{font-family:var(--serif);font-size:1.25rem;color:var(--salvia-osc)}
.hero__indice .zona{font-family:var(--serif);font-size:1.32rem}
.hero__indice .cant{font-size:.8rem;color:var(--gris);letter-spacing:.04em}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__foto{margin:0;position:relative;justify-self:end;width:min(100%,460px)}
.hero__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:220px 220px var(--radio) var(--radio);box-shadow:var(--sombra)}
.hero__foto figcaption{font-size:.74rem;color:var(--gris);margin-top:.6rem;text-align:right;letter-spacing:.02em}
.anillo{
  position:absolute;width:150px;height:150px;left:-46px;top:26%;z-index:2;pointer-events:none;
  animation:girar 38s linear infinite;
}
.anillo svg{width:100%;height:100%;display:block;overflow:visible}
.anillo circle{fill:none;stroke:var(--arcilla);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round}
.anillo circle.interior{stroke:var(--salvia);stroke-dasharray:1 5;stroke-width:1.2}
@keyframes girar{to{transform:rotate(360deg)}}

/* ── secciones ────────────────────────────────────────────────────────── */
.seccion{padding:clamp(3rem,7vw,6rem) 0}
.seccion--papel{background:var(--papel);border-top:1px solid var(--arena);border-bottom:1px solid var(--arena)}
.seccion--tinta{background:var(--tinta);color:var(--lino)}
.seccion--tinta .pre{color:var(--salvia-claro)}
.seccion--tinta h2 em{color:#C9D6C7}
.seccion--tinta .lead,.seccion--tinta .mudo{color:rgba(243,237,227,.78)}
.cab{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.cab h2{margin-bottom:.9rem}

/* pasos: tres líneas numeradas, como las instrucciones al pie de una carta */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:paso}
.paso{counter-increment:paso;border-top:1px solid var(--arena);padding-top:1.2rem;position:relative}
.paso::before{content:counter(paso,decimal-leading-zero);font-family:var(--serif);font-size:2.3rem;color:var(--salvia-osc);display:block;line-height:1;margin-bottom:.7rem}
.paso h3{margin-bottom:.45rem}
.paso p{color:var(--tinta-suave);font-size:.96rem;margin:0}

/* la carta de un vistazo (portada): filas por zona */
.zonas{list-style:none;margin:0;padding:0;border-top:1px solid var(--arena)}
.zona-fila{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) 150px;gap:1.5rem;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--arena);text-decoration:none;color:inherit;
  transition:background var(--paso);
}
.zona-fila:hover{background:rgba(255,255,255,.35)}
.zona-fila__num{font-family:var(--serif);font-size:2.1rem;color:var(--salvia-osc);line-height:1}
.zona-fila h3{margin-bottom:.3rem;transition:color var(--paso)}
.zona-fila:hover h3{color:var(--arcilla-osc)}
.zona-fila__lista{color:var(--tinta-suave);font-size:.94rem;margin:0}
.zona-fila__ir{display:inline-block;margin-top:.5rem;font-size:.82rem;font-weight:600;color:var(--salvia-osc);letter-spacing:.04em}
.zona-fila figure{margin:0;position:relative}
.zona-fila img{width:150px;height:110px;object-fit:cover;border-radius:var(--radio);box-shadow:var(--sombra);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.zona-fila:hover img{transform:scale(1.04)}
.zona-fila figcaption{position:absolute;left:.5rem;bottom:.5rem;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(243,237,227,.9);color:var(--tinta-suave);padding:.2rem .45rem;border-radius:999px}

/* dos columnas texto + foto */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.dos--inv > figure{order:-1}
.foto{margin:0;position:relative}
.foto img{width:100%;border-radius:var(--radio);box-shadow:var(--sombra);object-fit:cover}
.foto--alta img{aspect-ratio:4/5}
.foto--ancha img{aspect-ratio:3/2}
.foto--cuadrada img{aspect-ratio:1}
.foto figcaption{font-size:.74rem;color:var(--gris);margin-top:.6rem;letter-spacing:.02em}

/* horario: tabla de dos columnas con guía de puntos */
.horario{list-style:none;margin:1rem 0 0;padding:0;max-width:420px}
.horario li{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--arena)}
.horario li span:first-child{white-space:nowrap}
.horario .guia{flex:1;border-bottom:1px dotted var(--arena);transform:translateY(-.3em)}
.horario b{font-weight:600;white-space:nowrap}
.horario .cerrado{color:var(--gris)}
.seccion--tinta .horario li,.seccion--tinta .horario .guia{border-color:rgba(243,237,227,.25)}

/* opiniones: sin cifras, un enlace a Google */
.opiniones{text-align:center;max-width:60ch;margin:0 auto}
.opiniones h2{margin-bottom:1rem}
.opiniones p{margin-bottom:1.5rem}

/* remate */
.remate{background:var(--tinta);color:var(--lino);padding:clamp(3rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.remate::after{
  content:'';position:absolute;width:420px;height:420px;right:-160px;bottom:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(190,115,85,.32),rgba(190,115,85,0) 70%);pointer-events:none;
}
.remate__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.5rem;align-items:center;position:relative}
.remate .pre{color:var(--salvia-claro)}
.remate h2 em{color:#C9D6C7}
.remate p{color:rgba(243,237,227,.8)}
.remate__btns{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:flex-end}
.remate .btn--linea{color:var(--lino);border-color:rgba(243,237,227,.55)}
.remate .btn--linea:hover{background:var(--lino);color:var(--tinta)}
.tel{font-family:var(--serif);font-size:1.35rem;color:var(--lino);text-decoration:none;white-space:nowrap}
.tel:hover{color:#C9D6C7}

/* pie */
.pie{background:var(--tinta);color:rgba(243,237,227,.72);padding:1.6rem 0 1.4rem;border-top:1px solid rgba(243,237,227,.12);font-size:.84rem}
.pie__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:baseline}
.pie a{color:var(--lino);text-decoration:none;border-bottom:1px solid rgba(243,237,227,.3)}
.pie a:hover{border-color:var(--lino)}
.pie__marca{font-family:var(--serif);font-size:1.3rem;color:var(--lino)}
.pie__muestra{width:100%;font-size:.76rem;color:rgba(243,237,227,.55);margin-top:.4rem}

/* flotante WhatsApp: siempre WhatsApp, siempre verde */
.wa-float{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(31,168,85,.38);transition:transform var(--paso),background var(--paso);
}
.wa-float:hover{transform:translateY(-3px) scale(1.04);background:var(--wa-osc)}
.wa-float svg{width:30px;height:30px}
.wa-float::before{ /* latido suave, idle */
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(31,168,85,.45);
  animation:latir 2.6s ease-out infinite;
}
@keyframes latir{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ── cabecera de página interior ──────────────────────────────────────── */
.cabecera{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.cabecera h1{margin-bottom:1rem;max-width:18ch}
.cabecera .lead{margin:0}

/* ── LA CARTA (tratamientos.html) ─────────────────────────────────────── */
.carta{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start;padding-bottom:clamp(3rem,6vw,5rem)}
.indice{position:sticky;top:calc(var(--barra-h) + 1.4rem);align-self:start}
.indice__titulo{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:600;margin:0 0 .8rem}
.indice ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--arena)}
/* solo los enlaces de la lista son grilla (numeral + rótulo); el de la nota de abajo es texto corrido */
.indice ol a{
  display:grid;grid-template-columns:1.8rem 1fr;align-items:baseline;gap:.5rem;
  padding:.55rem 0 .55rem 1rem;text-decoration:none;color:var(--tinta-suave);position:relative;
  transition:color var(--paso);
}
.indice ol a::before{content:'';position:absolute;left:-1px;top:20%;bottom:20%;width:2px;background:transparent;transition:background var(--paso)}
.indice ol a:hover{color:var(--tinta)}
.indice ol a.activo{color:var(--arcilla-osc)}
.indice ol a.activo::before{background:var(--arcilla)}
.indice .num{font-family:var(--serif);font-size:1.1rem}
.indice .corto{display:none}
.indice__nota{font-size:.8rem;color:var(--gris);margin:1.2rem 0 0;line-height:1.5}
.indice__nota a{color:var(--salvia-osc)}
.carta__col{min-width:0}
.aviso-valores{
  background:var(--papel);border:1px solid var(--arena);border-radius:var(--radio);
  padding:1.1rem 1.3rem;margin:0 0 2.5rem;display:flex;gap:1rem;align-items:flex-start;font-size:.94rem;
}
.aviso-valores b{font-family:var(--serif);font-weight:400;font-size:1.25rem;display:block;margin-bottom:.15rem}
.aviso-valores p{margin:0;color:var(--tinta-suave)}
.aviso-valores .marca-valor{font-family:var(--serif);font-style:italic;color:var(--salvia-osc);font-size:1.5rem;line-height:1;flex:none;padding-top:.1rem}

.zona{padding:0 0 3.2rem;scroll-margin-top:calc(var(--barra-h) + 1rem)}
.zona + .zona{border-top:1px solid var(--arena);padding-top:3rem}
.zona__cab{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:baseline;margin-bottom:1.6rem}
.zona__num{font-family:var(--serif);font-size:clamp(2.6rem,4vw,3.4rem);color:var(--salvia-osc);line-height:1}
.zona__cab p{grid-column:2;margin:0;color:var(--tinta-suave);max-width:56ch}
.zona__fotos{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:0 0 1.6rem}
.zona__fotos--dos{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.zona__fotos .foto img{aspect-ratio:16/9}
.zona__fotos--dos .foto img{aspect-ratio:3/2}
.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--arena)}
.item{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto auto;align-items:center;gap:.5rem 1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--arena);
}
.item__n{font-family:var(--serif);font-size:1.15rem;color:var(--salvia-osc)}
.item__txt h3{font-size:clamp(1.3rem,1.8vw,1.55rem);margin-bottom:.2rem}
.item__txt p{margin:0;color:var(--tinta-suave);font-size:.93rem}
.item__valor{font-family:var(--serif);font-style:italic;color:var(--gris);font-size:1.05rem;white-space:nowrap;padding-left:1rem;position:relative}
.item__valor::before{ /* la guía de puntos de una carta impresa */
  content:'';position:absolute;right:100%;top:55%;width:clamp(30px,6vw,90px);border-bottom:1px dotted var(--arena);
}
.item__btn{
  text-decoration:none;font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--arcilla-osc);
  border:1px solid var(--arcilla);border-radius:999px;padding:.5rem .95rem;white-space:nowrap;
  transition:background var(--paso),color var(--paso),transform var(--paso);
}
.item__btn:hover{background:var(--arcilla);color:#fff;transform:translateY(-1px)}
.item__btn.btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.zona__wa{margin:1.2rem 0 0;font-size:.92rem}
.zona__wa a{color:var(--salvia-osc);text-decoration:none;font-weight:600;border-bottom:1px solid var(--salvia);transition:color var(--paso),border-color var(--paso)}
.zona__wa a:hover{color:var(--arcilla);border-color:var(--arcilla)}

/* ── EL CENTRO ────────────────────────────────────────────────────────── */
.espacio{
  border:1.5px dashed var(--arena);border-radius:var(--radio);padding:2rem;display:grid;place-items:center;
  text-align:center;color:var(--gris);min-height:260px;background:rgba(255,255,255,.35);
}
.espacio b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--tinta-suave);display:block;margin-bottom:.4rem}
.espacio p{margin:0;font-size:.9rem;max-width:34ch}
.datos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.datos li{background:var(--papel);border:1px solid var(--arena);border-radius:var(--radio);padding:1.2rem 1.3rem}
.datos .pre{margin-bottom:.4rem}
.datos p{margin:0;font-size:.98rem}
.datos a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--arena)}
.datos a:hover{border-color:var(--arcilla)}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.galeria .foto img{aspect-ratio:4/5}

/* ── PEDIR HORA ───────────────────────────────────────────────────────── */
.vias{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem;align-items:start}
.via{background:var(--papel);border:1px solid var(--arena);border-radius:var(--radio);padding:clamp(1.4rem,3vw,2.2rem);position:relative}
.via--tinta{background:var(--tinta);color:var(--lino);border-color:var(--tinta)}
.via--tinta .pre{color:var(--salvia-claro)}
.via--tinta .mudo,.via--tinta p{color:rgba(243,237,227,.8)}
.via--tinta h2 em{color:#C9D6C7}
.via h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.8rem}
.via__num{font-family:var(--serif);font-size:3rem;color:var(--salvia-osc);line-height:1;position:absolute;right:1.4rem;top:1rem;opacity:.5}
.via--tinta .via__num{color:#C9D6C7}
.form{display:grid;gap:1rem;margin-top:1.4rem}
.form label{display:grid;gap:.35rem;font-size:.86rem;font-weight:600;color:var(--tinta-suave)}
.form select,.form input{
  font:inherit;font-size:.98rem;padding:.75rem .9rem;border:1px solid var(--arena);border-radius:10px;
  background:#fff;color:var(--tinta);width:100%;min-width:0;
}
.form select:focus,.form input:focus{outline:2px solid var(--arcilla);outline-offset:1px;border-color:transparent}
.form .btn{justify-self:start;margin-top:.3rem}
.form__pie{font-size:.8rem;color:var(--gris);margin:0}
.via__tel{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--lino);text-decoration:none;margin:.4rem 0 .6rem;line-height:1.1}
.via__tel:hover{color:#C9D6C7}
.via--tinta .btn--reserva{margin-top:1rem}
.via--tinta .horario{margin-top:1.2rem}
.via--tinta .horario li,.via--tinta .horario .guia{border-color:rgba(243,237,227,.25)}

/* ── CONTACTO ─────────────────────────────────────────────────────────── */
.contacto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.contacto .datos{grid-template-columns:1fr}
.mapa{margin:0;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);background:var(--lino-osc);border:1px solid var(--arena)}
.mapa iframe{display:block;width:100%;aspect-ratio:4/3;border:0}
.mapa figcaption{padding:.8rem 1rem;font-size:.84rem;color:var(--gris);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between}
.mapa figcaption a{color:var(--salvia-osc);text-decoration:none;font-weight:600}

/* ── LEGAL / ERROR ────────────────────────────────────────────────────── */
.legal{max-width:72ch;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.legal h1{margin-bottom:1rem}
.legal h2{font-size:1.6rem;margin:2.2rem 0 .7rem}
.legal p,.legal li{color:var(--tinta-suave);font-size:.97rem}
.legal .aviso-valores{margin-top:1.5rem}
.perdido{min-height:60vh;display:grid;place-items:center;text-align:center;padding:3rem 0}
.perdido b{font-family:var(--serif);font-weight:400;font-size:6rem;color:var(--salvia-osc);display:block;line-height:1}

/* ── revelados: solo con JS. Sin JS todo se ve (plan B) ───────────────── */
html.js .rev{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
html.js .rev.in{opacity:1;transform:none}
html.js .rev.d1{transition-delay:.08s}
html.js .rev.d2{transition-delay:.16s}
html.js .rev.d3{transition-delay:.24s}
html.js .rev.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anillo,.wa-float::before{animation:none}
  html.js .rev{opacity:1;transform:none;transition:none}
  .btn::after{display:none}
}

/* ── responsivo ───────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__foto{justify-self:start;width:min(100%,420px)}
  .anillo{left:auto;right:-30px;top:-40px;width:120px;height:120px}
  .carta{grid-template-columns:1fr;gap:1.5rem}
  .indice{top:var(--barra-h);z-index:20;background:var(--lino);border-bottom:1px solid var(--arena);margin:0 calc(50% - 50vw);padding:.4rem calc(50vw - 50%) .5rem;width:100vw;box-sizing:border-box}
  .indice__titulo,.indice__nota{display:none}
  .indice ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:0;gap:.2rem}
  .indice ol a{grid-template-columns:1fr;gap:.1rem;text-align:center;padding:.4rem .1rem .3rem;justify-items:center}
  .indice ol a::before{left:15%;right:15%;top:auto;bottom:0;width:auto;height:2px}
  .indice .num{font-size:1.15rem}
  .indice .largo{display:none}
  .indice .corto{display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .zona{scroll-margin-top:calc(var(--barra-h) + 74px)}
  .remate__in{grid-template-columns:1fr}
  .remate__btns{justify-content:flex-start}
  .vias{grid-template-columns:1fr}
  .contacto{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hamb{display:block}
  .menu{
    position:absolute;left:0;right:0;top:var(--barra-h);background:var(--papel);border-bottom:1px solid var(--arena);
    flex-direction:column;align-items:stretch;gap:0;padding:.6rem 1.25rem 1rem;display:none;
    box-shadow:0 18px 30px rgba(36,49,41,.12);
  }
  .menu.abierto{display:flex}
  .menu li{border-bottom:1px solid var(--arena)}
  .menu li:last-child{border-bottom:0;padding-top:.9rem}
  .menu a:not(.btn){display:block;padding:.85rem 0;font-size:1.05rem}
  .menu__cta .btn{width:100%;justify-content:center}
  .marca__sub{font-size:.58rem}
  .hero h1{font-size:clamp(4rem,19vw,6rem)}
  .hero__indice .zona{font-size:1.15rem}
  .hero__indice .cant{font-size:.72rem}
  .pasos{grid-template-columns:1fr;gap:1.4rem}
  .zona-fila{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem 1rem}
  .zona-fila figure{grid-column:2}
  .zona-fila img{width:100%;height:150px}
  .dos,.dos--inv{grid-template-columns:1fr}
  .dos--inv > figure{order:0}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .foto:last-child{grid-column:1 / -1}
  .galeria .foto:last-child img{aspect-ratio:16/10}
  .zona__fotos--dos{grid-template-columns:1fr}
  .zona__cab{grid-template-columns:1fr;gap:.6rem}
  .zona__cab p{grid-column:1}
  .item{grid-template-columns:2.2rem minmax(0,1fr);gap:.7rem .8rem;padding:1rem 0}
  .item__valor{grid-column:2;padding-left:0;font-size:.98rem}
  .item__valor::before{display:none}
  .item__btn{grid-column:2;justify-self:start}
  .via__num{display:none}
  .pie__in{flex-direction:column;gap:.6rem}
  .wa-float{width:54px;height:54px;right:.9rem;bottom:.9rem}
  .wa-float svg{width:28px;height:28px}
}
@media (max-width:420px){
  .env{width:min(var(--ancho),100% - 2rem)}
  .hero h1{font-size:clamp(3.6rem,20vw,5rem)}
  .hero__foto{width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .remate__btns .btn{width:100%;justify-content:center}
  .indice .corto{font-size:.56rem;letter-spacing:.03em}
}