/* Los Milagros — landing. Tipografía protagonista, tinta + papel + rosa de marca. */
:root {
  --tinta: #0d0b0c;
  --tinta-2: #1c1719;
  --papel: #f6f3ef;
  --papel-2: #ece6df;
  --rosa: #ee98ad;
  --rosa-fuerte: #c2416a;
  --rosa-suave: #f8dbe3;
  --gris: #6f6668;
  --linea: rgba(13, 11, 12, .14);
  --sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --borde: 22px;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.045em; line-height: .95; }
h2 { font-size: clamp(44px, 8vw, 120px); }
h3 { font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
::selection { background: var(--rosa); color: var(--tinta); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border-radius: 999px;
  font-weight: 500; font-size: 16px; text-decoration: none;
  transition: transform .25s var(--ease), background .25s, color .25s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.98); }
.boton--rosa { background: var(--rosa); color: var(--tinta); }
.boton--rosa:hover { background: #f4adbf; }
.boton--claro { background: var(--papel); color: var(--tinta); height: 42px; padding: 0 20px; }
.boton--linea { border: 1px solid currentColor; }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }
.boton--grande { height: 64px; padding: 0 40px; font-size: 19px; }

/* ---------- Intro: varias palabras y luego el negro se abre hacia arriba y abajo ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  cursor: pointer;
  animation: intro-fuera .8s var(--ease) 10s forwards; /* red de seguridad sin JS */
}
/* Las dos tapas negras empatan con el fondo negro de la portada */
.intro__tapa { flex: 1 1 0; background: var(--tinta); min-height: 0; }
.intro__band {
  position: relative; flex: none; height: 0; overflow: hidden;
  background-color: var(--papel);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw;
  padding: 0 var(--gutter);
  transition: height 1s var(--ease);
}
.intro.lista .intro__band { height: 38vh; }
.intro__num { font-size: 12px; color: var(--gris); transition: opacity .4s; }
.intro__num:last-child { justify-self: end; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.intro__word {
  font-size: clamp(56px, 13vw, 210px); font-weight: 600; letter-spacing: -.06em; line-height: 1;
  display: inline-flex; overflow: hidden; padding: .02em 0 .1em; white-space: pre;
}
.intro__word span { display: inline-block; transform: translateY(110%); transition: transform .6s var(--ease); }
.intro__word.entra span { transform: none; }
.intro__word.sale span { transform: translateY(-110%); transition-duration: .45s; }
.intro__pie { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(246, 243, 239, .45); transition: opacity .4s; }

/* Salida: la franja se vuelve ventana (transparente) y crece despacio;
   las tapas negras se van hacia arriba y hacia abajo y dejan ver la portada. */
.intro.abre { cursor: default; pointer-events: none; }
.intro.abre .intro__band {
  height: 100vh;
  background-color: rgba(246, 243, 239, 0);
  transition: height 1.9s cubic-bezier(.76, 0, .24, 1), background-color .9s ease .15s;
}
.intro.abre .intro__num, .intro.abre .intro__pie { opacity: 0; }
.intro.fuera { animation: intro-fuera .3s linear forwards; }
@keyframes intro-fuera { to { opacity: 0; visibility: hidden; } }
html.intro-activa { overflow: hidden; }

/* ---------- Avance de lectura ---------- */
.avance { position: fixed; right: var(--gutter); bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tinta); background: rgba(246,243,239,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 12px; border-radius: 99px; box-shadow: 0 0 0 1px var(--linea); }
.avance span { min-width: 4ch; }
.avance i { width: 60px; height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.avance b { display: block; height: 100%; width: 100%; background: var(--rosa-fuerte); transform: scaleX(0); transform-origin: left; }

/* ---------- Menú a pantalla completa ---------- */
.nav__menu { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 99px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.nav__menu i { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.nav__menu i + i { margin-left: -24px; transform: translateY(5px); }
.nav__menu i:nth-of-type(1) { transform: translateY(-2px); }
.nav__menu[aria-expanded="true"] i:nth-of-type(1) { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] i + i { transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--tinta); color: var(--papel);
  padding: 96px var(--gutter) 32px; display: flex; gap: 24px; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); overflow: hidden;
}
.menu.abierto { clip-path: inset(0 0 0 0); }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: baseline; gap: 18px; text-decoration: none; font-size: min(clamp(40px, 7.4vw, 104px), 8.6vh); font-weight: 600; letter-spacing: -.05em; line-height: 1.04; transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease), opacity .7s, color .25s; }
.menu__links a span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: rgba(246,243,239,.5); min-width: 3ch; }
.menu__links a:hover { color: var(--rosa); }
.menu.abierto .menu__links a { transform: none; opacity: 1; }
.menu.abierto .menu__links a:nth-child(2) { transition-delay: .05s; }
.menu.abierto .menu__links a:nth-child(3) { transition-delay: .1s; }
.menu.abierto .menu__links a:nth-child(4) { transition-delay: .15s; }
.menu.abierto .menu__links a:nth-child(5) { transition-delay: .2s; }
.menu.abierto .menu__links a:nth-child(6) { transition-delay: .25s; }
.menu.abierto .menu__links a:nth-child(7) { transition-delay: .3s; }
.menu__pie { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; position: relative; }
.menu__pie a { text-decoration: none; opacity: .7; }
.menu__pie a:hover { opacity: 1; }
.menu__flor { position: absolute; right: -12vw; bottom: -14vw; width: 52vw; max-width: 720px; fill: var(--rosa); opacity: .9; transform: rotate(-20deg); transition: transform 1.4s var(--ease); }
.menu.abierto .menu__flor { transform: rotate(16deg); }
html.menu-abierto { overflow: hidden; }
html.menu-abierto .nav { background: transparent !important; box-shadow: none !important; color: var(--papel) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.menu-abierto .nav .boton--claro { background: var(--papel) !important; color: var(--tinta) !important; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  color: var(--papel);
  transition: background .35s, color .35s, box-shadow .35s;
}
.nav--solida {
  background: rgba(246, 243, 239, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
}
.nav--solida .boton--claro { background: var(--tinta); color: var(--papel); }
.nav--oscura { background: rgba(13, 11, 12, .82); color: var(--papel); box-shadow: 0 1px 0 rgba(246, 243, 239, .1); }
.nav--oscura .boton--claro { background: var(--papel); color: var(--tinta); }
.nav__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.02em; font-size: 19px; }
.nav__marca img { border-radius: 9px; }
.nav__etiqueta { font-size: 13px; opacity: .75; margin-right: auto; display: flex; gap: 8px; }
.nav__etiqueta b { font-weight: 500; }
.nav__etiqueta span { transition: opacity .3s; }
.nav__etiqueta.cambia span { opacity: 0; }
.nav__cta { margin-left: auto; }
.nav__links { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.nav__links a { text-decoration: none; opacity: .8; }
.nav__links a:hover { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; position: relative; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  padding: 140px var(--gutter) 56px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__petalo {
  position: absolute; right: -14vw; top: -10vw; width: 72vw; max-width: 980px;
  color: var(--rosa); opacity: .9; pointer-events: none;
  will-change: transform;
}
.hero__petalo svg { width: 100%; height: auto; fill: currentColor; }
.hero__pre { font-size: 14px; opacity: .65; margin-bottom: 24px; position: relative; }
.hero__titulo { font-size: clamp(52px, 9.6vw, 168px); max-width: 13ch; position: relative; }
.hero__titulo em { color: var(--papel); text-shadow: 0 2px 30px rgba(13, 11, 12, .35); }
.hero__sub { max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); margin-top: 32px; opacity: .8; position: relative; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; position: relative; }
.hero__bajar { position: absolute; right: var(--gutter); bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; text-decoration: none; opacity: .7; }
.hero__bajar i { width: 1px; height: 56px; background: currentColor; transform-origin: top; animation: linea 2.4s var(--ease) infinite; }
@keyframes linea { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* palabras que suben */
[data-palabras] .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
[data-palabras] .pal > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
[data-palabras].visto .pal > span { transform: none; }

/* ---------- Manifiesto ---------- */
.manifiesto { padding: clamp(100px, 18vw, 240px) var(--gutter); }
.manifiesto__texto { font-size: clamp(32px, 5.2vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; max-width: 20ch; }
.manifiesto__texto .w { opacity: .14; transition: opacity .35s; }
.manifiesto__texto .w.on { opacity: 1; }

/* ---------- Encabezados ---------- */
.encabezado { display: flex; gap: 24px; align-items: flex-start; margin-bottom: clamp(40px, 6vw, 80px); }
.encabezado__num { font-size: 13px; color: var(--gris); padding-top: .8em; min-width: 3ch; }

/* ---------- Servicios ---------- */
.servicios { padding: 0 var(--gutter) clamp(100px, 14vw, 180px); }
.tarjetas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tarjeta {
  grid-column: span 4; position: relative; overflow: hidden;
  background: var(--papel-2); border-radius: var(--borde);
  padding: 28px; min-height: 440px;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease);
}
.tarjeta:hover { transform: translateY(-6px); }
.tarjeta__num { font-size: 13px; color: var(--gris); }
.tarjeta__arte { flex: 1; display: grid; place-items: center; }
.tarjeta__arte svg { width: 58%; max-width: 170px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--gris); font-size: 16px; max-width: 30ch; }
.tarjeta--tinta { background: var(--tinta); color: var(--papel); }
.tarjeta--tinta p, .tarjeta--tinta .tarjeta__num { color: rgba(246, 243, 239, .62); }
.tarjeta--rosa { background: var(--rosa); }
.tarjeta--rosa p, .tarjeta--rosa .tarjeta__num { color: rgba(13, 11, 12, .65); }
.tarjeta--rosa .tarjeta__arte svg path[opacity] { fill: var(--tinta); stroke: none; }
.tarjeta--foto { grid-column: span 12; min-height: 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--tinta); color: var(--papel); }
.tarjeta--foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.tarjeta--foto .tarjeta__num { position: absolute; top: 28px; left: 28px; color: var(--papel); z-index: 1; }
.tarjeta__pie { padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.tarjeta__pie h3 { font-size: clamp(36px, 4vw, 60px); letter-spacing: -.045em; }
.tarjeta--foto p { color: rgba(246, 243, 239, .65); font-size: 18px; }

/* ---------- Visita (carril horizontal) ---------- */
.visita { position: relative; height: 340vh; background: var(--tinta); color: var(--papel); }
.visita__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 56px; padding: 90px 0 48px; }
.visita__cabeza { padding: 0 var(--gutter); display: grid; grid-template-columns: auto 1fr; gap: 0 24px; align-items: end; }
.visita__cabeza h2 em { color: var(--rosa); }
.visita__barra { grid-column: 1 / -1; height: 2px; background: rgba(246, 243, 239, .14); margin-top: 32px; border-radius: 2px; overflow: hidden; }
.visita__barra i { display: block; height: 100%; width: 100%; background: var(--rosa); transform: scaleX(0); transform-origin: left; }
.visita__pista { display: flex; gap: 16px; padding: 0 var(--gutter); will-change: transform; }
.paso {
  flex: 0 0 min(420px, 78vw); min-height: 300px; border-radius: var(--borde);
  border: 1px solid rgba(246, 243, 239, .16); padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.paso:nth-child(2) { background: var(--tinta-2); }
.paso:nth-child(4) { background: var(--rosa); color: var(--tinta); border-color: transparent; }
.paso__n { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1; color: var(--rosa); }
.paso:nth-child(4) .paso__n { color: var(--tinta); }
.paso h3 { font-size: 28px; margin-bottom: 10px; }
.paso p { opacity: .72; }

/* ---------- Portal ---------- */
.portal { padding: clamp(100px, 14vw, 180px) var(--gutter); display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.portal__texto > p { font-size: 20px; color: var(--gris); max-width: 36ch; margin: 32px 0; }
.portal h2 { margin-top: 20px; }
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista li { padding: 18px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 9ch 1fr; gap: 16px; color: var(--gris); }
.lista b { color: var(--tinta); font-weight: 600; }

.telefono {
  justify-self: center; width: min(340px, 82vw); aspect-ratio: 9 / 18.5;
  background: var(--tinta); border-radius: 48px; padding: 12px;
  box-shadow: 0 40px 80px -30px rgba(194, 65, 106, .45);
  rotate: -4deg;
}
.telefono__pantalla { height: 100%; border-radius: 38px; background: var(--rosa-suave); padding: 44px 18px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.telefono small { display: block; font-size: 11px; color: var(--gris); }
.tp__saludo strong { font-size: 26px; letter-spacing: -.04em; }
.tp__cita { background: var(--tinta); color: var(--papel); border-radius: 20px; padding: 16px; margin-top: 8px; }
.tp__cita small { color: rgba(246, 243, 239, .6); }
.tp__cita strong { display: block; font-size: 24px; letter-spacing: -.03em; margin: 4px 0 2px; }
.tp__cita span { font-size: 13px; opacity: .7; }
.tp__botones { display: flex; gap: 6px; margin-top: 14px; }
.tp__botones i { font-style: normal; font-size: 12px; padding: 7px 12px; border-radius: 99px; background: var(--rosa); color: var(--tinta); }
.tp__botones i + i { background: transparent; border: 1px solid rgba(246, 243, 239, .3); color: var(--papel); }
.tp__fila { background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.tp__fila em { margin-left: auto; font-size: 12px; color: var(--gris); font-family: var(--sans); font-style: normal; }
.tp__punto { width: 8px; height: 8px; border-radius: 50%; background: #e0b14a; flex: none; }
.tp__punto--ok { background: #3f9b6b; }
.tp__receta { margin-top: auto; background: var(--rosa); border-radius: 16px; padding: 14px; }
.tp__receta strong { font-size: 18px; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifra { padding: clamp(32px, 4vw, 56px) var(--gutter); border-right: 1px solid var(--linea); }
.cifra:last-child { border-right: 0; }
.cifra strong { display: block; white-space: nowrap; font-size: clamp(64px, 9vw, 150px); font-weight: 600; letter-spacing: -.07em; line-height: .9; }
.cifra:nth-child(2) strong { color: var(--rosa-fuerte); }
.cifra strong span { display: inline; margin: 0; color: inherit; max-width: none; }
.cifra span { display: block; margin-top: 14px; color: var(--gris); max-width: 20ch; }

/* ---------- Banda de foto ---------- */
.banda { background: var(--tinta); color: var(--papel); padding: 0 0 clamp(40px, 6vw, 80px); }
.banda__marco { height: min(88svh, 62vw); overflow: hidden; margin: 0 auto; width: 100%; clip-path: inset(0 var(--recorte, 6%) round var(--borde)); }
.banda__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transform: scale(var(--zoom, 1.18)); will-change: transform; }
.banda__pie { padding: 28px var(--gutter) 0; font-size: clamp(28px, 4.4vw, 64px); letter-spacing: -.04em; font-weight: 500; line-height: 1; }
.banda__pie em { color: var(--rosa); }

/* ---------- Tarjetas con foto ---------- */
.tarjeta--img { padding: 12px 12px 28px; min-height: 0; }
.tarjeta--img figure { margin: 0 0 22px; border-radius: calc(var(--borde) - 8px); overflow: hidden; aspect-ratio: 4 / 3.4; }
.tarjeta--img figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tarjeta--img:hover figure img { transform: scale(1.05); }
.tarjeta--img .tarjeta__num, .tarjeta--img h3, .tarjeta--img p { margin-left: 16px; margin-right: 16px; }
.tarjeta--img .tarjeta__num { display: block; margin-bottom: 8px; }

/* ---------- Y además ---------- */
.ademas { margin-top: clamp(64px, 8vw, 110px); }
.ademas__titulo { font-size: 14px; color: var(--gris); margin-bottom: 16px; }
.ademas__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.ademas__lista a {
  display: grid; grid-template-columns: 4ch 1fr auto 40px; align-items: baseline; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--linea); text-decoration: none;
  transition: padding .45s var(--ease), color .3s;
}
.ademas__lista span { font-size: 13px; color: var(--gris); }
.ademas__lista b { font-size: clamp(30px, 4.6vw, 68px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.ademas__lista small { font-size: 15px; color: var(--gris); text-align: right; }
.ademas__lista i { font-style: normal; font-size: 26px; justify-self: end; transition: transform .45s var(--ease); }
.ademas__lista a:hover { padding-left: 14px; color: var(--rosa-fuerte); }
.ademas__lista a:hover i { transform: rotate(45deg); }

/* ---------- Nosotros / galería ---------- */
.nosotros { padding: clamp(100px, 14vw, 180px) var(--gutter) 0; }
.nosotros h2 em { color: var(--rosa-fuerte); }
.nosotros__texto { font-size: clamp(20px, 1.8vw, 26px); max-width: 40ch; color: var(--gris); margin: -24px 0 56px; }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(180px, 20vw, 300px); gap: 12px; }
.g { margin: 0; border-radius: var(--borde); overflow: hidden; background: var(--papel-2); }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.g:hover img { transform: scale(1.04); }
.g--alta { grid-column: span 2; grid-row: span 2; }
.g--alta img { object-position: center 85%; }
.g--ancha { grid-column: span 2; }

/* ---------- Opiniones ---------- */
.opiniones { padding: clamp(100px, 14vw, 180px) var(--gutter); }
.opiniones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: 24px; }
.opinion { margin: 0; }
.opinion p { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.02em; }
.opinion footer { margin-top: 24px; font-size: 15px; color: var(--gris); }
.opinion footer b { color: var(--tinta); font-weight: 600; }
.opinion:nth-child(2) { margin-top: clamp(0px, 10vw, 160px); }

/* ---------- Valores ---------- */
.valores { padding: 0 var(--gutter) clamp(100px, 14vw, 180px); }
.valores h2 em { color: var(--rosa-fuerte); }
.valores__lista { list-style: none; margin: 0; padding: 0; counter-reset: v; border-top: 1px solid var(--linea); }
.valores__lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.valores__lista svg { width: 40px; height: 40px; fill: var(--rosa); transition: rotate 1.2s var(--ease); }
.valores__lista li:hover svg { rotate: 72deg; }
.valores__lista b { font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.valores__lista span { color: var(--gris); font-size: 18px; }

/* ---------- Cierre ---------- */
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cierre .boton--linea:hover { background: var(--tinta); color: var(--rosa); }
.datos a:hover { text-decoration: underline; }
.redes { display: flex; gap: 22px; justify-content: flex-start; margin-top: 32px; font-size: 15px; }
.redes a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.cierre { background: var(--rosa); padding: clamp(100px, 14vw, 180px) var(--gutter) 64px; text-align: center; }
.cierre .boton--rosa { background: var(--tinta); color: var(--papel); }
.cierre .boton--rosa:hover { background: var(--tinta-2); }
.cierre__pre { font-size: 15px; margin-bottom: 18px; opacity: .7; }
.cierre__titulo { font-size: clamp(88px, 20vw, 320px); letter-spacing: -.07em; margin-bottom: 48px; }
.datos { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr 1.2fr; gap: 16px; margin-top: clamp(64px, 9vw, 120px); text-align: left; border-top: 1px solid rgba(13, 11, 12, .2); padding-top: 24px; }
.datos small { display: block; font-size: 12px; opacity: .6; margin-bottom: 6px; }
.datos a, .datos span { font-size: 18px; font-weight: 500; text-decoration: none; }

.pie { background: var(--tinta); color: rgba(246, 243, 239, .6); padding: 28px var(--gutter); display: flex; gap: 24px; font-size: 14px; }
.pie span { margin-right: auto; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--papel); }

/* ---------- Reveal (con red de seguridad) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visto { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.sin-js .reveal { opacity: 1; transform: none; }
.sin-js [data-palabras] .pal > span { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav__etiqueta, .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .tarjeta { grid-column: span 6; }
  .tarjeta--foto { grid-column: span 12; grid-template-columns: 1fr; }
  .portal { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(2) { border-right: 0; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
  .tarjetas .tarjeta--img:last-child { grid-column: span 12; }
  .ademas__lista small { display: none; }
  .ademas__lista a { grid-template-columns: 4ch 1fr 32px; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .opiniones__grid { grid-template-columns: 1fr; }
  .opinion:nth-child(2) { margin-top: 0; }
  .valores__lista li { grid-template-columns: 40px 1fr; }
  .valores__lista span { grid-column: 2; margin-top: -14px; }
  .datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-bottom: 40px; }
  .hero__petalo { width: 120vw; right: -50vw; top: -20vw; opacity: .75; }
  .hero__bajar { display: none; }
  .hero__acciones .boton { width: 100%; }
  .tarjeta { grid-column: span 12; min-height: 360px; }
  .tarjeta__pie { padding: 28px; }
  .encabezado { flex-direction: column; gap: 8px; }
  .encabezado__num { padding-top: 0; }
  .visita__cabeza { grid-template-columns: 1fr; }
  .visita__cabeza .encabezado__num { margin-bottom: 8px; }
  .lista li { grid-template-columns: 1fr; gap: 2px; }
  .telefono { rotate: 0deg; }
  .datos { grid-template-columns: 1fr; }
  .tarjetas .tarjeta--img:last-child { grid-column: span 12; }
  .banda__marco { height: 62svh; }
  .galeria { grid-auto-rows: 150px; }
  .g--alta { grid-row: span 2; }
  .cierre__acciones .boton { width: 100%; }
  .redes { justify-content: center; }
  .boton--grande { width: 100%; height: 58px; padding: 0 20px; font-size: 17px; }
  .pie { flex-wrap: wrap; }
  .pie span { width: 100%; }
}