/* =============================================================
   Yerilyn Salón — estilos
   1. Tokens
   ============================================================= */
:root {
  --vino: #2B0A1B;
  --vino-2: #3A1026;
  --vino-3: #4D1733;
  --ciruela: #853456;
  --malva: #AE5D7E;
  --rosa: #EFB1C6;
  --rosa-claro: #FADCE7;
  --crema: #FFF5F8;
  --tinta: #32091E;

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --borde: 1.25rem;
  --lado: clamp(1.25rem, 5vw, 5rem);
  --ancho: 78rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--rosa-claro);
  background: var(--vino);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; line-height: 1.02; letter-spacing: -0.015em; }
h1 em, h2 em, .pie-lema em { font-style: italic; font-weight: 400; color: var(--rosa); }
fieldset { border: 0; padding: 0; min-width: 0; }
address { font-style: normal; }
::selection { background: var(--rosa); color: var(--vino); }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--rosa-claro); color: var(--vino); z-index: 9999; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 1rem; }

.sobre {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rosa);
}
.sobre::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; }
.sobre:has(img)::before { display: none; }

.cabecera { display: grid; gap: 1rem; max-width: 44rem; }
.cabecera h2 { font-size: clamp(2.25rem, 6vw, 4.25rem); }
.cabecera-nota { color: color-mix(in srgb, var(--rosa-claro) 72%, transparent); max-width: 34rem; }

.enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--rosa);
  padding-bottom: .2rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-out), gap .4s var(--ease-out);
}
.enlace:hover { background-size: 0 1px; background-position: 100% 100%; gap: .85rem; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: .98rem; line-height: 1.2; white-space: nowrap;
  transition: transform .45s var(--ease-out), background-color .3s, color .3s, box-shadow .45s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-grande { padding: 1.05rem 1.75rem; font-size: 1.05rem; }
.btn-rosa { background: var(--rosa); color: var(--vino); box-shadow: 0 .6rem 1.8rem -0.8rem rgba(239, 177, 198, .7); }
.btn-rosa:hover { background: var(--rosa-claro); box-shadow: 0 1rem 2.2rem -0.8rem rgba(239, 177, 198, .85); }
.btn-vino { background: var(--ciruela); color: var(--crema); }
.btn-vino:hover { background: var(--vino-3); }
.btn-linea { border: 1px solid color-mix(in srgb, var(--rosa) 55%, transparent); color: var(--rosa-claro); }
.btn-linea:hover { background: color-mix(in srgb, var(--rosa) 14%, transparent); }

/* Forma propia: el arco (ceja / párpado) */
.arco { border-radius: 999px 999px var(--borde) var(--borde); }
.suave { border-radius: var(--borde); }

/* =============================================================
   4. Navegación (píldora flotante)
   ============================================================= */
.nav {
  position: fixed; z-index: 50; top: .75rem; left: 50%;
  width: min(calc(100% - 1.5rem), 62rem);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  padding: .4rem .45rem .4rem .5rem;
  border-radius: 999px;
  background: rgba(43, 10, 27, .92);
  border: 1px solid color-mix(in srgb, var(--rosa) 22%, transparent);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .nav { background: rgba(43, 10, 27, .68); backdrop-filter: blur(16px) saturate(1.3); }
}
.nav.is-bajando { box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .6); }
.nav-marca { display: flex; align-items: center; gap: .65rem; font-family: var(--serif); font-size: 1.2rem; margin-right: auto; }
.nav-marca img { width: 2.75rem; height: 2.75rem; transition: transform .8s var(--ease-out); }
.nav-marca:hover img { transform: rotate(40deg); }
.nav-marca em { color: var(--rosa); }
.nav-enlaces {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
  display: grid; gap: .25rem; padding: 1rem;
  background: var(--vino-2); border: 1px solid color-mix(in srgb, var(--rosa) 22%, transparent);
  border-radius: 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .3s, transform .4s var(--ease-out), visibility .3s;
}
.nav.is-abierto .nav-enlaces { opacity: 1; visibility: visible; transform: none; }
.nav-enlaces a { padding: .8rem 1rem; border-radius: 999px; font-family: var(--serif); font-size: 1.5rem; }
.nav-enlaces a:hover { background: color-mix(in srgb, var(--rosa) 12%, transparent); }
.nav-cta { padding: .65rem 1.1rem; font-size: .92rem; }
.nav-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-content: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--rosa) 35%, transparent); }
.nav-toggle i { display: block; width: 1.1rem; height: 1.5px; background: var(--rosa-claro); transition: transform .4s var(--ease-out); }
.nav.is-abierto .nav-toggle i:first-of-type { transform: translateY(3.75px) rotate(45deg); }
.nav.is-abierto .nav-toggle i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }

/* =============================================================
   5. Hero
   ============================================================= */
.hero {
  position: relative;
  display: grid; gap: 2.5rem;
  padding: 6.5rem var(--lado) 4rem;
  max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% -20% auto auto; width: 70rem; max-width: 160vw; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(133, 52, 86, .55), transparent 70%);
}
.hero-texto { display: grid; gap: 1.5rem; align-content: center; order: 2; }
.hero-titulo { font-size: clamp(2.9rem, 12.5vw, 6.4rem); line-height: .96; }
.hero-titulo .linea { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-titulo .linea > span { display: block; }
.js .hero-titulo .linea > span { transform: translateY(110%); animation: sube 1.1s var(--ease-out) forwards; }
.js .hero-titulo .linea:nth-child(2) > span { animation-delay: .12s; }
.js .hero-titulo .linea:nth-child(3) > span { animation-delay: .24s; }
@keyframes sube { to { transform: none; } }
.hero-bajada { max-width: 31rem; font-size: 1.125rem; color: color-mix(in srgb, var(--rosa-claro) 80%, transparent); }
.hero-bajada strong { color: var(--rosa-claro); font-weight: 600; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.hero-datos { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--rosa) 22%, transparent); }
.hero-datos dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--malva); font-weight: 600; }
.hero-datos dd { font-weight: 500; }
[data-estado].is-abierto::before, .estado.is-abierto::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%;
  background: #7be0a4; box-shadow: 0 0 0 0 rgba(123, 224, 164, .6); animation: pulso 2.4s infinite;
}
@keyframes pulso { 70% { box-shadow: 0 0 0 .5rem rgba(123, 224, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(123, 224, 164, 0); } }

/* La portada: retrato en arco envuelto por los anillos del logo */
.hero-sello { position: relative; order: 1; width: min(84%, 22rem); aspect-ratio: 4 / 5; margin: 1.5rem auto 1rem; }
.sello-giro { position: absolute; width: 132%; aspect-ratio: 1; left: -16%; top: -12%; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.anillo-a { animation: gira 90s linear infinite; }
.anillo-b { animation: gira 130s linear infinite reverse; opacity: .8; }
@keyframes gira { to { transform: rotate(360deg); } }
.sello-foto {
  position: absolute; inset: 0; overflow: hidden; background: var(--vino-3);
  border-radius: 999px 999px 1.75rem 1.75rem;
  box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .65);
}
.sello-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); }
.js .sello-foto { clip-path: inset(100% 0 0 0 round 999px 999px 1.75rem 1.75rem); animation: abre 1.4s .15s var(--ease-out) forwards; }
@keyframes abre { to { clip-path: inset(0 0 0 0 round 999px 999px 1.75rem 1.75rem); } }
.sello-etiqueta {
  position: absolute; right: -8%; bottom: 20%;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: var(--crema); color: var(--tinta);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .55);
}
.sello-etiqueta img { width: .75rem; height: .75rem; filter: brightness(.55) saturate(1.6); }
.js .sello-etiqueta { opacity: 0; animation: aparece .8s 1.2s var(--ease-out) forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
.sello-logo {
  position: absolute; left: -12%; bottom: 4%; width: 36%; height: auto;
  filter: drop-shadow(0 .75rem 1.5rem rgba(0, 0, 0, .45));
  transform: rotate(-10deg);
}
.js .sello-logo { opacity: 0; animation: estampa .7s 1s var(--ease-bounce) forwards; }
@keyframes estampa { from { opacity: 0; transform: rotate(-30deg) scale(1.5); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }

/* =============================================================
   6. Cinta
   ============================================================= */
.cinta { overflow: hidden; padding: 1.1rem 0; background: var(--rosa); color: var(--tinta); width: 106%; margin: 1rem 0 0 -3%; transform: rotate(-1.2deg); }
.cinta-pista { display: flex; align-items: center; gap: 2.25rem; width: max-content; animation: corre 36s linear infinite; }
.cinta span { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.1rem); white-space: nowrap; }
.cinta i { width: 1.1rem; height: 1.05rem; flex: none; background: var(--ciruela); -webkit-mask: url(assets/corazon.svg) center / contain no-repeat; mask: url(assets/corazon.svg) center / contain no-repeat; }
@keyframes corre { to { transform: translateX(-50%); } }

/* =============================================================
   7. Servicios
   ============================================================= */
.servicios { padding: clamp(5rem, 11vw, 9rem) var(--lado); max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; display: grid; gap: clamp(3rem, 7vw, 6rem); }
.servicio { position: relative; display: grid; gap: 1.5rem; align-items: center; }
.servicio-num {
  position: absolute; top: -2.2rem; left: -.25rem; z-index: 1;
  font-family: var(--serif); font-style: italic; font-size: 5.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--rosa);
}
.servicio-foto { overflow: hidden; aspect-ratio: 4 / 5; width: min(100%, 21rem); background: var(--vino-3); margin-left: auto; }
.servicio-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.servicio:hover .servicio-foto img { transform: scale(1.07); }
.servicio-txt { display: grid; gap: 1rem; justify-items: start; }
.servicio-txt h3 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.servicio-txt p { max-width: 30rem; color: color-mix(in srgb, var(--rosa-claro) 78%, transparent); }


/* =============================================================
   7b. Yerilyn (quién te atiende)
   ============================================================= */
.servicios { padding-bottom: clamp(3rem, 6vw, 5rem); }
.autora { padding: clamp(2rem, 5vw, 4rem) var(--lado) clamp(5rem, 11vw, 9rem); max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; display: grid; gap: 3rem; align-items: center; }
.autora-foto { position: relative; width: min(78%, 22rem); margin-inline: auto; }
.autora-foto figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--vino-3); box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .6); }
.autora-foto figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.4s var(--ease-out); }
.autora-foto:hover figure img { transform: scale(1.05); }
.autora-anillo { position: absolute; width: 150%; max-width: none; height: auto; left: -25%; top: -14%; opacity: .5; animation: gira 140s linear infinite; pointer-events: none; }
.autora-sello { position: absolute; right: -12%; bottom: 6%; width: 34%; height: auto; transform: rotate(12deg); filter: drop-shadow(0 .75rem 1.5rem rgba(0, 0, 0, .45)); }
.autora-txt { display: grid; gap: 1.25rem; justify-items: start; }
.autora-txt h2 { font-size: clamp(2.25rem, 6vw, 4.25rem); }
.autora-cita { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.25; color: var(--rosa); padding-left: 1.1rem; border-left: 1px solid var(--rosa); }
.autora-txt > p:not(.sobre):not(.autora-cita) { max-width: 31rem; color: color-mix(in srgb, var(--rosa-claro) 80%, transparent); }

/* =============================================================
   8. Miradas (sección clara)
   ============================================================= */
.miradas { background: var(--rosa-claro); color: var(--tinta); padding: clamp(5rem, 11vw, 9rem) var(--lado); border-radius: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 6vw, 4.5rem) 0 0; }
.miradas .cabecera, .muro { max-width: var(--ancho); margin-inline: auto; }
.miradas .cabecera { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.miradas .sobre, .miradas h2 em { color: var(--ciruela); }
.muro { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; align-items: start; }
.muro-col { display: grid; gap: .9rem; }
.muro-col[data-col="2"] { padding-top: 3rem; }
.muro-col[data-col="3"] { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
.muro-item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--rosa); cursor: zoom-in; }
.muro-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.muro-item:hover img { transform: scale(1.06); }
.muro-item::after {
  content: "+"; position: absolute; right: .9rem; bottom: .9rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  background: var(--rosa-claro); color: var(--ciruela);
  transform: scale(0); transition: transform .5s var(--ease-bounce);
}
.muro-item:hover::after, .muro-item:focus-visible::after { transform: scale(1); }

/* =============================================================
   9. Reservar
   ============================================================= */
.reservar { background: var(--rosa-claro); color: var(--tinta); padding: 0 var(--lado) clamp(5rem, 11vw, 9rem); display: grid; gap: 3rem; }
.reservar > * { width: 100%; max-width: var(--ancho); margin-inline: auto; }
.reservar .sobre, .reservar h2 em { color: var(--ciruela); }
.reservar-intro { display: grid; gap: 2.5rem; align-content: start; padding-top: clamp(1rem, 4vw, 3rem); border-top: 1px solid color-mix(in srgb, var(--ciruela) 25%, transparent); }
.pasos { list-style: none; padding: 0; display: grid; gap: 1.75rem; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.pasos li > span {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  border: 1px solid var(--ciruela); color: var(--ciruela);
}
.pasos h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.pasos p { color: color-mix(in srgb, var(--tinta) 78%, transparent); max-width: 26rem; }

.cita {
  position: relative; overflow: hidden;
  display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--crema); border-radius: 2rem;
  box-shadow: 0 2.5rem 5rem -2.5rem rgba(133, 52, 86, .45);
}
.cita > * { position: relative; }
.cita-anillo { position: absolute; width: 26rem; max-width: none; height: auto; right: -11rem; top: -11rem; opacity: .55; animation: gira 120s linear infinite; pointer-events: none; }
.cita-titulo { font-size: 2rem; }
.cita legend, .campo > span { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ciruela); margin-bottom: .7rem; display: block; }
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; }
.fichas label { position: relative; cursor: pointer; }
.fichas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fichas span {
  display: block; padding: .6rem 1.05rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ciruela) 35%, transparent);
  font-weight: 500; font-size: .98rem;
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--ease-bounce);
}
.fichas label:hover span { border-color: var(--ciruela); }
.fichas input:checked + span { background: var(--ciruela); border-color: var(--ciruela); color: var(--crema); transform: scale(1.04); }
.fichas input:focus-visible + span { outline: 2px solid var(--ciruela); outline-offset: 3px; }
.campo input {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ciruela) 40%, transparent);
  padding: .5rem 0 .7rem; border-radius: 0;
}
.campo input::placeholder { color: color-mix(in srgb, var(--tinta) 45%, transparent); }
.campo input:focus { outline: none; border-bottom-color: var(--ciruela); box-shadow: 0 1px 0 var(--ciruela); }
.cita-previa { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.35; padding: 1rem 1.25rem; background: var(--rosa-claro); border-radius: 1.25rem 1.25rem 1.25rem .25rem; }
.cita .btn { justify-self: start; }
.cita-nota { font-size: .875rem; color: color-mix(in srgb, var(--tinta) 65%, transparent); }

/* =============================================================
   10. Preguntas
   ============================================================= */
.preguntas { padding: clamp(5rem, 11vw, 9rem) var(--lado); max-width: calc(var(--ancho) + 2 * var(--lado)); margin-inline: auto; display: grid; gap: 2.5rem; }
.acordeon { border-top: 1px solid color-mix(in srgb, var(--rosa) 28%, transparent); }
.acordeon details { border-bottom: 1px solid color-mix(in srgb, var(--rosa) 28%, transparent); }
.acordeon summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; font-family: var(--serif); font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.15;
  transition: color .3s;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--rosa); }
.acordeon summary::after {
  content: "+"; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--sans); font-size: 1.35rem; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--rosa) 45%, transparent); color: var(--rosa);
  transition: transform .5s var(--ease-out), background-color .3s, color .3s;
}
.acordeon details[open] summary::after { transform: rotate(45deg); background: var(--rosa); color: var(--vino); }
.acordeon details p { padding: 0 3.5rem 1.6rem 0; max-width: 40rem; color: color-mix(in srgb, var(--rosa-claro) 80%, transparent); }
.acordeon details a { color: var(--rosa); text-decoration: underline; text-underline-offset: .2em; }

/* =============================================================
   11. Visítanos
   ============================================================= */
.visita {
  position: relative; overflow: hidden;
  margin: 0 clamp(.5rem, 2vw, 1.5rem); padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4.5rem);
  background: var(--ciruela); color: var(--crema);
  border-radius: clamp(2rem, 6vw, 4.5rem);
  display: grid; gap: 2.5rem;
}
.visita > * { position: relative; }
.visita-anillo { position: absolute; width: 46rem; max-width: none; height: auto; right: -15rem; bottom: -17rem; opacity: .3; animation: gira 160s linear infinite; pointer-events: none; }
.visita .sobre { color: var(--rosa-claro); }
.visita-dir { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.visita h2 { font-size: clamp(2.3rem, 6.4vw, 4.6rem); }
.visita h2 em { color: var(--rosa-claro); }
.visita address { font-size: 1.2rem; line-height: 1.5; }
.visita address small { display: block; margin-top: .6rem; font-size: .85rem; letter-spacing: .04em; opacity: .75; }
.visita-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.visita .btn-linea { border-color: rgba(255, 245, 248, .5); color: var(--crema); }
.horario { background: var(--vino); color: var(--rosa-claro); border-radius: 1.75rem; padding: clamp(1.25rem, 3.5vw, 2.25rem); align-self: start; }
.horario-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.horario h3 { font-size: 1.75rem; }
.estado { font-size: .82rem; font-weight: 600; padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--rosa) 16%, transparent); white-space: nowrap; }
.horario ul { list-style: none; padding: 0; }
.horario li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--rosa) 18%, transparent); font-size: .98rem; }
.horario li.cerrado { opacity: .55; }
.horario li span:last-child { white-space: nowrap; }
.horario li.es-hoy { color: var(--rosa); font-weight: 600; opacity: 1; }
.horario li.es-hoy span:first-child::after { content: " · hoy"; font-weight: 400; }

/* =============================================================
   12. Pie
   ============================================================= */
.pie { padding: clamp(4rem, 9vw, 7rem) var(--lado) 6.5rem; display: grid; gap: 2rem; justify-items: center; text-align: center; }
.pie-mono { width: min(60vw, 17rem); height: auto; opacity: .95; }
.pie-lema { font-family: var(--serif); font-size: clamp(1.6rem, 4.4vw, 2.6rem); line-height: 1.1; }
.pie-fila { width: 100%; max-width: var(--ancho); display: grid; gap: 1rem; justify-items: center; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--rosa) 20%, transparent); font-size: .9rem; color: color-mix(in srgb, var(--rosa-claro) 70%, transparent); }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.pie nav a:hover { color: var(--rosa); }

/* Botón flotante */
.flota {
  position: fixed; z-index: 40; right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.2rem; border-radius: 999px;
  background: var(--rosa); color: var(--vino); font-weight: 600;
  box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, .55);
  transition: transform .5s var(--ease-out), opacity .4s;
}
.js .flota { transform: translateY(160%); opacity: 0; }
.js .flota.is-visible { transform: none; opacity: 1; }
.flota:hover { background: var(--rosa-claro); }

/* Visor de fotos */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; margin: auto; overflow: visible; }
.visor::backdrop { background: rgba(43, 10, 27, .9); }
.visor img { max-width: min(92vw, 44rem); max-height: 88dvh; width: auto; border-radius: 1.25rem; }
.visor[open] img { animation: entra .5s var(--ease-out); }
@keyframes entra { from { opacity: 0; transform: scale(.94); } }
.visor-cerrar { position: absolute; top: -.75rem; right: -.75rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--rosa); color: var(--vino); font-size: 1.5rem; line-height: 1; z-index: 1; }

/* =============================================================
   13. Apariciones al hacer scroll
   ============================================================= */
.js .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.js .servicio-foto.arco, .js .muro-item { transition: clip-path 1.3s var(--ease-out), opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .servicio.reveal .servicio-foto { clip-path: inset(100% 0 0 0 round 999px 999px 1.25rem 1.25rem); transition: clip-path 1.3s var(--ease-out); }
.js .servicio.reveal.is-in .servicio-foto { clip-path: inset(0 0 0 0 round 999px 999px 1.25rem 1.25rem); }

/* =============================================================
   14. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .servicio { grid-template-columns: auto 1fr; gap: 2rem; }
  .servicio-foto { width: 15rem; margin-left: 0; }
  .servicio-num { left: -1rem; }
}
@media (min-width: 720px) {
  .muro { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .muro-col { gap: 1.25rem; }
  .muro-col[data-col="2"] { padding-top: 5rem; }
  .muro-col[data-col="3"] { grid-column: auto; grid-template-columns: 1fr; padding-top: 1.5rem; }
  .pie-fila { grid-template-columns: 1fr auto 1fr; justify-items: start; text-align: left; }
  .pie-fila p:last-child { justify-self: end; }
}
@media (min-width: 960px) {
  .nav { top: 1rem; padding-left: .6rem; }
  .nav-toggle { display: none; }
  .nav-enlaces {
    position: static; display: flex; gap: .15rem; padding: 0; background: none; border: 0; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; margin-right: .5rem;
  }
  .nav-enlaces a { font-family: var(--sans); font-size: .95rem; font-weight: 500; padding: .55rem .95rem; }

  .hero { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 3rem; min-height: min(100svh, 54rem); padding-top: 7.5rem; padding-bottom: 5rem; }
  .hero-texto { order: 1; }
  .hero-sello { order: 2; width: min(78%, 27rem); margin: 0 auto; }
  .hero-titulo { font-size: clamp(3.6rem, 6.3vw, 6.1rem); }

  .servicio { grid-template-columns: 1fr 22rem 1fr; gap: 4rem; }
  .servicio-foto { width: 100%; grid-column: 2; grid-row: 1; }
  .servicio-txt { grid-column: 3; grid-row: 1; }
  .servicio-num { position: static; grid-column: 1; grid-row: 1; justify-self: end; font-size: clamp(8rem, 13vw, 12rem); }
  .servicio:nth-of-type(even) .servicio-txt { grid-column: 1; justify-items: end; text-align: right; }
  .servicio:nth-of-type(even) .servicio-num { grid-column: 3; justify-self: start; }

  .autora { grid-template-columns: .85fr 1.15fr; gap: 5rem; }
  .autora-foto { width: min(100%, 24rem); }

  .reservar { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; max-width: none; }
  .reservar > * { max-width: none; }
  .reservar { padding-inline: max(var(--lado), calc((100vw - var(--ancho)) / 2)); }
  .reservar-intro { position: sticky; top: 7rem; }

  .preguntas { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
  .visita { grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: center; }
}

/* =============================================================
   15. Movimiento reducido (solo lo intrusivo)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinta-pista { animation-duration: 90s; }
}