/* ============================================================
   Deluxe Studio — sistema visual
   Colores de marca tomados del logo: taupe #695B48, círculo
   negro, crema #FCFDF8.

   Los tonos de texto están ajustados para pasar WCAG AA (4.5:1
   en texto normal, 3:1 en decorativo) sobre AMBOS fondos de
   sección y en los dos temas. No cambiar sin volver a medir.
   ============================================================ */

:root {
  /* ---- paleta clara ---- */
  --cl-fondo:      #FCFDF8;
  --cl-superficie: #F3F0E7;
  --cl-borde:      #E2DACC;
  --cl-texto:      #241F1A;
  --cl-suave:      #766C61;   /* 5.03 / 4.51 */
  --cl-titulo:     #695B48;   /* 6.44 / 5.78 */
  --cl-acento:     #826840;   /* 5.13 / 4.60 */
  --cl-deco:       #A58552;   /* 3.38 / 3.03 */
  --cl-deco-tenue: #979289;   /* 3.03 */
  --cl-pie:        #241F1A;
  --cl-btn-fondo:  #695B48;
  --cl-btn-texto:  #FCFDF8;

  /* ---- paleta oscura ---- */
  --os-fondo:      #17130F;
  --os-superficie: #201B16;
  --os-borde:      #3A3128;
  --os-texto:      #F0EAE0;   /* 15.44 / 14.27 */
  --os-suave:      #B3A797;   /*  7.82 /  7.23 */
  --os-titulo:     #D8C4A6;   /* 10.88 / 10.06 */
  --os-acento:     #C9A468;   /*  7.91 /  7.31 */
  --os-deco:       #7D6B52;
  --os-deco-tenue: #756550;   /* 3.30 sobre fondo, 3.01 sobre superficie (hover) */
  --os-pie:        #100D0A;
  --os-btn-fondo:  #D8C4A6;
  --os-btn-texto:  #17130F;

  /* ---- activos: claro por defecto ---- */
  --fondo:      var(--cl-fondo);
  --superficie: var(--cl-superficie);
  --borde:      var(--cl-borde);
  --texto:      var(--cl-texto);
  --suave:      var(--cl-suave);
  --titulo:     var(--cl-titulo);
  --acento:     var(--cl-acento);
  --deco:       var(--cl-deco);
  --deco-tenue: var(--cl-deco-tenue);
  --pie:        var(--cl-pie);
  --btn-fondo:  var(--cl-btn-fondo);
  --btn-texto:  var(--cl-btn-texto);

  /* Constantes: el héroe es espresso en ambos temas, es la marca */
  --heroe-a: #1B1713;
  --heroe-b: #2E2721;
  --heroe-c: #4A4036;
  --sobre-oscuro:     #FCFDF8;
  --sobre-oscuro-sec: #C4A882;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio: 2px;
  --ancho: 1180px;
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* Sigue al sistema mientras nadie elija a mano */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: var(--os-fondo);       --superficie: var(--os-superficie);
    --borde: var(--os-borde);       --texto: var(--os-texto);
    --suave: var(--os-suave);       --titulo: var(--os-titulo);
    --acento: var(--os-acento);     --deco: var(--os-deco);
    --deco-tenue: var(--os-deco-tenue); --pie: var(--os-pie);
    --btn-fondo: var(--os-btn-fondo);   --btn-texto: var(--os-btn-texto);
    color-scheme: dark;
  }
}

/* Elección manual: gana siempre sobre el sistema */
:root[data-tema='oscuro'] {
  --fondo: var(--os-fondo);       --superficie: var(--os-superficie);
  --borde: var(--os-borde);       --texto: var(--os-texto);
  --suave: var(--os-suave);       --titulo: var(--os-titulo);
  --acento: var(--os-acento);     --deco: var(--os-deco);
  --deco-tenue: var(--os-deco-tenue); --pie: var(--os-pie);
  --btn-fondo: var(--os-btn-fondo);   --btn-texto: var(--os-btn-texto);
  color-scheme: dark;
}

:root[data-tema='claro'] {
  --fondo: var(--cl-fondo);       --superficie: var(--cl-superficie);
  --borde: var(--cl-borde);       --texto: var(--cl-texto);
  --suave: var(--cl-suave);       --titulo: var(--cl-titulo);
  --acento: var(--cl-acento);     --deco: var(--cl-deco);
  --deco-tenue: var(--cl-deco-tenue); --pie: var(--cl-pie);
  --btn-fondo: var(--cl-btn-fondo);   --btn-texto: var(--cl-btn-texto);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Los controles de formulario no heredan la tipografía por su cuenta.
   Sin esta regla, la «×» que cierra el globo de WhatsApp se pintaba en
   Arial: era el único texto de la web fuera de Cormorant y Jost. */
button, input, select, textarea { font-family: inherit; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--fondo);
  transition: background-color var(--transicion), color var(--transicion);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--titulo);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 28px;
}

.seccion { padding: 110px 0; }
.seccion--alterna { background: var(--superficie); }

.etiqueta {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}

.titulo-seccion { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 20px; }

.entradilla {
  color: var(--suave);
  max-width: 58ch;
  margin-bottom: 56px;
  font-size: 1.05rem;
}

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}

.boton--primario { background: var(--btn-fondo); color: var(--btn-texto); }
.boton--primario:hover { filter: brightness(1.15); }

.boton--contorno { border-color: var(--titulo); color: var(--titulo); background: transparent; }
.boton--contorno:hover { background: var(--titulo); color: var(--fondo); }

/* Sobre el héroe oscuro, en cualquier tema */
.boton--claro {
  border-color: rgba(252, 253, 248, .55);
  color: var(--sobre-oscuro);
  background: transparent;
}
.boton--claro:hover { background: var(--sobre-oscuro); color: var(--heroe-a); }

.boton--crema { background: var(--sobre-oscuro); color: var(--heroe-a); }
.boton--crema:hover { background: var(--sobre-oscuro-sec); }

/* ---------- navegación ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: var(--transicion);
  border-bottom: 1px solid transparent;
}
.nav--solida {
  background: color-mix(in srgb, var(--fondo) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--borde);
}

/* La barra es sólida desde arriba del todo. Lo único que aporta el scroll
   es una sombra, que la despega de lo que va pasando por debajo. */
.nav--elevada { box-shadow: 0 8px 26px rgba(36, 31, 26, .09); }

/* La barra respira más ancho que el contenido. Medido: la marca, los cinco
   enlaces y los dos botones con rótulo largo suman 1227px, y la columna del
   resto de la página son 1124. No caben. Antes que apretar la tipografía
   hasta que entren —que se lee peor— la barra se sale de la columna, como
   en el diseño. En móvil no aplica: allí manda el menú desplegable. */
@media (min-width: 1001px) {
  .nav__fila { max-width: 1400px; padding-left: 40px; padding-right: 40px; }
}

.nav__fila {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 78px;
}

.marca { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.marca__nombre {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: .04em;
  color: var(--sobre-oscuro);
  white-space: nowrap;
  transition: var(--transicion);
}
.marca__lema {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(252, 253, 248, .72);
  margin-top: 5px;
  white-space: nowrap;
  transition: var(--transicion);
}
.nav--solida .marca__nombre { color: var(--titulo); }
.nav--solida .marca__lema   { color: var(--acento); }

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav__enlace {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(252, 253, 248, .9);
  transition: var(--transicion);
  position: relative;
  white-space: nowrap;
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: currentColor;
  transition: var(--transicion);
}
.nav__enlace:hover::after { width: 100%; }
.nav--solida .nav__enlace { color: var(--texto); }

/* Acceso del equipo: discreto a propósito. Quien llega a la web
   es una clienta buscando cita, no alguien buscando iniciar sesión. */
.nav__acceso {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(252, 253, 248, .75);
  padding: 9px 13px;
  border-radius: var(--radio);
  white-space: nowrap;
  transition: var(--transicion);
}
.nav__acceso:hover { color: var(--sobre-oscuro); background: rgba(252, 253, 248, .14); }
.nav--solida .nav__acceso { color: var(--suave); }
.nav--solida .nav__acceso:hover { color: var(--titulo); background: var(--superficie); }
.nav__acceso svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Los dos botones de la barra: reservar en relleno y hablar en contorno.
   Heredan entero el .boton base —alto, relleno y tipografía— y aquí solo
   se les dice cuánto mide su icono, que el base no contempla. Los anchos
   difieren porque el texto difiere; forzarlos iguales estiraría el más
   corto hasta que pareciera otra cosa. */
.nav__cta { padding: 14px 24px; letter-spacing: .09em; }
.nav__cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__cta .cta__corto { display: none; }

.nav__acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.nav__icono {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: none;
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  color: rgba(252, 253, 248, .8);
  transition: var(--transicion);
}
.nav__icono:hover { color: var(--sobre-oscuro); background: rgba(252, 253, 248, .14); }
.nav--solida .nav__icono { color: var(--suave); }
.nav--solida .nav__icono:hover { color: var(--titulo); background: var(--superficie); }
.nav__icono svg { width: 19px; height: 19px; }

/* El icono del tema muestra a dónde vas, no dónde estás */
.tema__sol  { display: none; }
.tema__luna { display: block; }
:root[data-tema='oscuro'] .tema__sol  { display: block; }
:root[data-tema='oscuro'] .tema__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tema__sol  { display: block; }
  :root:not([data-tema='claro']) .tema__luna { display: none; }
}

.nav__menu { display: none; }

/* ---------- héroe ---------- */

/* Una foto del salón con un velo oscuro que se abre hacia la derecha: el
   texto se apoya en la zona densa y la estantería de esmaltes queda a la
   vista. El velo no es decoración; sin él el titular crema cae sobre pared
   blanca y deja de leerse. */
.heroe {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;   /* el texto arriba, los datos abajo */
  background: var(--heroe-a);
  overflow: hidden;
}

.heroe__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es apaisada 16:9 y el héroe también, así que en pantalla ancha
     apenas se recorta: centrada está bien. El encuadre ya trae la pared lisa
     a la izquierda, que es donde se apoya el texto. */
  object-position: 50% 50%;
}

.heroe__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(20, 17, 14, .95) 0%,
      rgba(20, 17, 14, .90) 33%,
      rgba(20, 17, 14, .70) 51%,
      rgba(20, 17, 14, .32) 72%,
      rgba(20, 17, 14, .12) 100%),
    linear-gradient(to top, rgba(20, 17, 14, .60), transparent 30%);
}

/* El padding horizontal debe repetirse: este shorthand pisa el de
   .contenedor, y sin él el texto queda pegado al borde en móvil. */
.heroe__contenido {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 118px 28px 42px;
}
.heroe__panel { max-width: 760px; }

.heroe__etiqueta {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-sec);
  margin-bottom: 24px;
}
.heroe h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  line-height: 1.08;
  color: var(--sobre-oscuro);
  margin-bottom: 22px;
}
.heroe h1 em { font-style: italic; color: var(--sobre-oscuro-sec); }
.heroe__texto {
  font-size: 1.08rem;
  color: rgba(252, 253, 248, .86);
  max-width: 52ch;
  margin-bottom: 0;
}

.heroe__filo {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--sobre-oscuro-sec);
  opacity: .75;
  margin: 30px 0 28px;
}

/* Cuatro columnas centradas y separadas por un filete, con el icono encima:
   los rótulos son de dos líneas y así cada uno parte donde debe. Ya no van
   en versalitas: a este cuerpo, cuatro rótulos en mayúsculas con separación
   de letra se leen como un cartel de avisos, no como lo que ofrece el
   salón. */
.heroe__ventajas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
}
.heroe__ventajas li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  padding: 0 14px;
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(252, 253, 248, .88);
}
.heroe__ventajas li + li { border-left: 1px solid rgba(252, 253, 248, .20); }
.heroe__ventajas svg { width: 29px; height: 29px; color: var(--sobre-oscuro-sec); }

/* Cada camino lleva su rótulo, su flecha y una línea que dice qué pasa al
   pulsarlo: el rótulo promete cuánto tarda, el subtítulo explica en qué
   consiste. Van antes que las ventajas: quien ya se decidió no debería
   tener que leerlas para llegar a reservar. */
.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.heroe__cta {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: var(--transicion);
}
.heroe__cta > svg { width: 26px; height: 26px; flex: none; }
.heroe__cta__cuerpo { display: flex; flex-direction: column; gap: 3px; }
.heroe__cta__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
}
.heroe__cta__flecha { width: 17px; height: 17px; flex: none; transition: transform var(--transicion); }
.heroe__cta:hover .heroe__cta__flecha { transform: translateX(4px); }
.heroe__cta__sub { font-size: .8rem; line-height: 1.45; opacity: .82; }

/* El tan del diseño, oscurecido hasta que el crema encima pase AA. El del
   logo (--deco) se queda en 3,1:1 y este texto no es decorativo. */
.heroe__cta--relleno { background: #8C6636; color: var(--sobre-oscuro); }
.heroe__cta--relleno:hover { filter: brightness(1.12); }
.heroe__cta--contorno { border-color: rgba(252, 253, 248, .45); color: var(--sobre-oscuro); }
.heroe__cta--contorno:hover { background: rgba(252, 253, 248, .12); }

/* Dónde, cuándo y a qué número: lo que se busca cuando ya se decidió venir.
   La regla superior va al ancho del contenido, no de la pantalla, para que
   alinee con el titular en lugar de cortar la foto de lado a lado. */
.heroe__datos {
  position: relative;
  z-index: 2;
  padding: 0 28px 22px;
}
.heroe__datos-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(252, 253, 248, .18);
  font-size: 13px;
  color: rgba(252, 253, 248, .78);
}
.heroe__dato { display: inline-flex; align-items: center; gap: 8px; }
.heroe__dato svg { width: 15px; height: 15px; flex: none; color: var(--sobre-oscuro-sec); }
a.heroe__dato { transition: var(--transicion); }
a.heroe__dato:hover { color: var(--sobre-oscuro); }
/* El de horario son dos renglones, así que los cuatro se alinean por arriba
   y no por el centro: si no, los otros tres bailan medio renglón. */
.heroe__datos-fila { align-items: flex-start; justify-content: space-between; }
.heroe__dato svg { margin-top: 1px; }

/* ---------- nosotras ---------- */

/* Texto a la izquierda y una foto del salón trabajando a la derecha. La
   proporción no es mitad y mitad: el texto son tres párrafos y cuatro
   compromisos, y necesita más sitio que la imagen. */
.nosotras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 68px;
  align-items: center;
}

.nosotras .titulo-seccion { margin-bottom: 0; }
.nosotras__filo {
  display: block;
  width: 74px;
  height: 2px;
  background: var(--deco);
  margin: 26px 0 28px;
}
.nosotras__texto > p {
  color: var(--suave);
  max-width: 54ch;
  margin: 0 0 18px;
}
.nosotras__texto > p:last-of-type { margin-bottom: 0; }

.nosotras__foto { margin: 0; }
.nosotras__foto img {
  display: block;
  width: 100%;
  /* height:auto no sobra: el <img> lleva height="1600" para reservar sitio
     mientras carga, y ese atributo cuenta como altura declarada. Sin esto
     gana él y aspect-ratio no llega a aplicarse: la foto salía de 1600px. */
  height: auto;
  /* La foto es vertical (3:4). Recortada a 5:6 conserva a la manicurista y
     el rótulo del fondo, y deja de estirar la columna a lo alto. */
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 52% 42%;
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(36, 31, 26, .17);
}

/* ---------- valores ---------- */

/* En fila y separados por un filete, no en una rejilla con marco: aquí
   acompañan al texto en vez de ser un bloque aparte. */
.valores {
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.valor { padding: 0 18px; }
.valor:first-child { padding-left: 0; }
.valor + .valor { border-left: 1px solid var(--borde); }
.valor svg {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--deco);
  margin-bottom: 15px;
}
.valor h3 { font-size: 1.02rem; line-height: 1.3; margin-bottom: 9px; }
.valor p { font-size: .87rem; line-height: 1.62; color: var(--suave); margin: 0; }

/* ---------- servicios ---------- */

/* Cabecera centrada, con el loto entre dos filetes. Es la única sección
   sin antetítulo: el titular ya dice de qué va y la simetría se rompería. */
.servicios__cabecera { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.servicios__cabecera .titulo-seccion { margin-bottom: 20px; }
.servicios__cabecera .entradilla { margin-bottom: 0; max-width: none; }

.servicios__adorno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
}
.servicios__adorno span { width: 76px; height: 1px; background: var(--deco); opacity: .6; }
.servicios__adorno svg { width: 32px; height: 32px; color: var(--deco); }

/* Cinco tarjetas. Por debajo de 1180 no caben cinco sin estrangular el
   texto, así que bajan a tres y luego a dos; una fila corta al final se ve
   mejor que cinco columnas de sesenta caracteres partidos. */
.servicios {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.servicio {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(36, 31, 26, .07);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow var(--transicion);
}

.servicio__medio { position: relative; }
.servicio__foto {
  display: block;
  width: 100%;
  /* height:auto hace falta: el <img> lleva el height real del archivo como
     atributo y ese valor gana al aspect-ratio si no se le dice nada. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

/* La insignia monta sobre la juntura entre la foto y el texto. Cuelga por
   debajo de .servicio__medio pero sigue dentro de .servicio, así que el
   overflow:hidden de la tarjeta la respeta. */
.servicio__insignia {
  position: absolute;
  left: 50%;
  bottom: -31px;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--fondo);
  display: grid;
  place-items: center;
  color: var(--deco);
  box-shadow: 0 4px 16px rgba(36, 31, 26, .12);
}
.servicio__insignia svg { width: 28px; height: 28px; }

.servicio__cuerpo { padding: 46px 20px 30px; text-align: center; }
.servicio h3 { font-size: 1.32rem; margin-bottom: 10px; }
.servicio p { margin: 0; color: var(--suave); font-size: .92rem; line-height: 1.66; }

/* El botón vive pegado al fondo de la tarjeta: las descripciones miden lo
   que miden y, sin margin-top auto, cada botón quedaría a una altura
   distinta y la fila parecería descuadrada. */
.servicio__cuerpo { display: flex; flex-direction: column; }
.servicio__precio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  padding: 12px 18px;
  background: #8C6636;
  color: var(--sobre-oscuro);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: .04em;
  transition: var(--transicion);
}
.servicio__precio svg { width: 15px; height: 15px; flex: none; transition: transform var(--transicion); }
.servicio__precio:hover { filter: brightness(1.12); }
.servicio__precio:hover svg { transform: translateX(3px); }

/* ---------- banda de promociones ---------- */

.promos {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 22px;
  padding: 24px 30px;
  background: var(--fondo);
  border-radius: 16px;
}
.promos__icono {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--deco);
}
.promos__icono svg { width: 28px; height: 28px; }
.promos__texto { flex: 1; min-width: 0; border-left: 1px solid var(--borde); padding-left: 26px; }
.promos__texto h3 { font-size: 1.32rem; margin-bottom: 5px; }
.promos__texto p { margin: 0; color: var(--suave); font-size: .94rem; }
.promos__boton { flex: none; gap: 10px; }
.promos__boton svg { width: 15px; height: 15px; transition: transform var(--transicion); }
.promos__boton:hover svg { transform: translateX(3px); }

/* ---------- galería ---------- */

/* Mosaico de seis columnas: las tres primeras ocupan dos cada una y las dos
   últimas, tres. Sale una fila de tres y otra de dos más anchas, sin tener
   que numerar las piezas a mano. */
.galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.galeria__pieza {
  grid-column: span 2;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
}
.galeria__pieza:nth-child(n + 4) { grid-column: span 3; }

.galeria__pieza img {
  display: block;
  width: 100%;
  /* height:auto hace falta: el <img> lleva el alto real del archivo como
     atributo y ese valor gana al aspect-ratio si no se le dice nada. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Las cinco son verticales y aquí se ven apaisadas: hay que decir a qué
     altura mirar. No vale un valor común —en cada foto las uñas están en un
     sitio distinto—, así que cada pieza trae el suyo y este es el respaldo. */
  object-position: 50% var(--foco, 60%);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.galeria__pieza:nth-child(n + 4) img { aspect-ratio: 16 / 9; }

/* Medido sobre cada archivo: dónde caen las manos una vez recortada. */
.galeria__pieza--rosa    { --foco: 58%; }
.galeria__pieza--azul    { --foco: 68%; }
.galeria__pieza--perla   { --foco: 92%; }
.galeria__pieza--durazno { --foco: 40%; }
.galeria__pieza--blanco  { --foco: 38%; }

/* ---------- preguntas ---------- */

.faq { border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__pregunta {
  width: 100%;
  padding: 26px 44px 26px 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--titulo);
  cursor: pointer;
  position: relative;
  /* display:block quita el triángulo nativo en todos los navegadores;
     list-style solo basta en Chrome moderno. */
  display: block;
  list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ''; }
.faq__pregunta::after {
  content: '+';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--acento);
  transition: var(--transicion);
}
.faq__item[open] .faq__pregunta::after { content: '−'; }
.faq__respuesta { padding: 0 44px 28px 0; color: var(--suave); margin: 0; }

/* Los enlaces de las respuestas llevan a reservar y a WhatsApp: hay que
   verlos. El estilo base de la web quita el subrayado a todo enlace, así que
   aquí se devuelve, con el mismo trato que los datos de contacto. */
.faq__respuesta a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde);
  transition: var(--transicion);
}
.faq__respuesta a:hover { text-decoration-color: currentColor; }

/* ---------- contacto ---------- */

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contacto__bloque + .contacto__bloque { margin-top: 34px; }
.contacto__titulo {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 8px;
}
.contacto__dato { font-size: 1.1rem; color: var(--texto); }
.contacto__dato a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--borde); }
.contacto__dato a:hover { color: var(--titulo); text-decoration-color: currentColor; }

/* Los dos caminos, del mismo ancho y con la misma forma: icono a la
   izquierda, rótulo, y la flecha pegada al borde derecho. Lo que cambia
   entre ellos es el relleno, no el tamaño. */
.contacto__acciones { display: grid; gap: 12px; max-width: 400px; }
.contacto__cta {
  justify-content: flex-start;
  gap: 14px;
  padding: 19px 24px;
}
.contacto__cta svg { width: 18px; height: 18px; flex: none; }
.contacto__cta .contacto__flecha { margin-left: auto; width: 15px; height: 15px; }
.contacto__cta:hover .contacto__flecha { transform: translateX(3px); }
.contacto__flecha { transition: transform var(--transicion); }

/* En color y sin marco. Estaba en escala de grises para que no compitiera
   con la página, pero la página ya es toda fotos: un mapa gris al lado de
   la galería parece que no cargó. Las esquinas, como las tarjetas.
   El redondeo va en el contenedor: sobre el propio <iframe> el navegador
   redondea la caja pero no recorta lo que Google pinta dentro. */
/* align-self: la rejilla estira las dos columnas a la misma altura y el mapa
   se iba a 480px para igualar al texto. Un mapa no gana nada por ser más
   alto: se queda en su medida y arriba, como en el diseño. */
.mapa__marco {
  border-radius: 14px;
  overflow: hidden;
  align-self: start;
  min-height: 340px;
}
.mapa {
  border: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

/* ---------- pie ---------- */

.pie { background: var(--pie); color: rgba(252, 253, 248, .86); padding: 70px 0 34px; font-size: .95rem; }
.pie h3 { color: #FCFDF8; font-size: 1.7rem; margin-bottom: 10px; }
.pie a { text-decoration: none; }
.pie a:hover { color: #FCFDF8; }
/* Cuatro columnas desde que existe la de Legal. `auto-fit` con un mínimo
   evita tener que reescribir esta línea cada vez que se añade una: cuando no
   caben cuatro, bajan solas a dos y luego a una. */
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px 50px;
  padding-bottom: 40px;
}
.pie__rejilla > :first-child { grid-column: span 1; min-width: 0; }

/* El Libro de Reclamaciones lleva distintivo propio: la ley obliga a
   exhibirlo, no a esconderlo entre los demás enlaces del pie. */
.pie__libro {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(252, 253, 248, .34);
  border-radius: 10px;
  padding: 7px 11px 7px 9px;
  margin-top: 4px;
}
.pie__libro:hover { border-color: #C4A882; }
.pie__libro__icono { display: inline-flex; flex: none; }
.pie__libro svg { width: 17px; height: 17px; }

/* Quién responde ante el consumidor. Va antes de la línea del copyright y en
   un cuerpo menor: es un dato obligatorio, no un reclamo publicitario. */
.pie__titular {
  font-size: 12.5px;
  line-height: 1.7;
  opacity: .72;
  margin: 0 0 24px;
  max-width: 88ch;
}
.pie__titular strong { font-weight: 600; opacity: 1; }
.pie__titulo {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C4A882;
  margin-bottom: 16px;
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 10px; }
.pie__base {
  border-top: 1px solid rgba(252, 253, 248, .18);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .86rem;
  color: rgba(252, 253, 248, .72);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Medido: con los rótulos largos la fila pide 1270px y el relleno lateral
   suma 80, o sea 1350px de ventana. Por debajo de eso se aprieta y cada
   botón se queda en su palabra. */
@media (max-width: 1365px) {
  /* Por debajo del ancho del contenedor la barra deja de tener holgura.
     Se aprietan huecos y tipografía antes que mandarla al menú de
     hamburguesa en cuanto la pantalla no es enorme. */
  .nav__enlaces { gap: 13px; }
  .nav__enlace  { font-size: 12px; }
  .nav__enlaces .boton { padding: 11px 16px; font-size: 12px; }
  .nav__acceso { font-size: 12px; }

  /* Y cada botón se queda en su palabra: con el icono al lado se entiende
     igual, y entran los dos sin mandar la barra al menú de hamburguesa en
     cuanto la pantalla no es enorme. */
  .nav__cta .cta__largo { display: none; }
  .nav__cta .cta__corto { display: inline; }
}

/* Cinco tarjetas de servicio dejan de caber antes que nada más */
@media (max-width: 1180px) {
  .servicios { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet: 2x2 en vez de dejar una celda huérfana */
@media (max-width: 980px) {
  /* Una sola columna: el texto encima y la foto debajo, con un tope de
     ancho para que en tablet no se convierta en un cartel. */
  .nosotras { grid-template-columns: 1fr; gap: 46px; }
  /* Se ensancha la medida, pero no del todo: a 900px de ancho una línea
     suelta pasa de los 90 caracteres y cuesta volver al renglón. */
  .nosotras__texto > p { max-width: 62ch; }
  .nosotras__foto img { max-width: 520px; margin: 0 auto; }

  /* Dos columnas: al que abre fila le sobra el filete de la izquierda. */
  .valores { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .valor:nth-child(odd) { padding-left: 0; border-left: 0; }

  /* Dos columnas: se deshacen los tramos del mosaico y la quinta, que se
     quedaría sola en su fila, ocupa las dos. */
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria__pieza, .galeria__pieza:nth-child(n + 4) { grid-column: span 1; }
  .galeria__pieza:nth-child(n + 4) img { aspect-ratio: 4 / 3; }
  .galeria__pieza:last-child { grid-column: span 2; }
  .galeria__pieza:last-child img { aspect-ratio: 16 / 9; }
  .contacto { grid-template-columns: 1fr; gap: 44px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 34px; }

  /* El héroe deja de repartirse en filas: con el texto a todo el ancho no
     hace falta reservar la mitad derecha para la foto. */
  .heroe { display: block; min-height: auto; }
  .heroe__contenido { padding: 128px 28px 34px; }
  .heroe__panel { max-width: none; }
  .heroe__datos { padding-bottom: 44px; }

  /* El velo se abría de izquierda a derecha para dejar sitio al texto en la
     zona densa. Con el texto ocupando todo el ancho, ese degradado dejaría
     el final de cada línea sobre pared clara: aquí pasa a ser de arriba
     abajo, parejo, y la foto sigue viéndose por debajo. */
  .heroe__velo {
    background: linear-gradient(180deg,
      rgba(20, 17, 14, .89) 0%,
      rgba(20, 17, 14, .78) 52%,
      rgba(20, 17, 14, .89) 100%);
  }
  /* Aquí el héroe pasa a ser alto y estrecho, y de una foto apaisada solo
     cabe una franja vertical. Se elige la del rótulo y los esmaltes, que es
     lo que se reconoce; centrada saldría el pasillo vacío. */
  .heroe__foto { object-position: 72% 50%; }
  .heroe__ventajas { max-width: none; }
}

/* Ni con el rótulo corto caben cinco enlaces y dos botones: menú desplegable */
@media (max-width: 1000px) {
  .nav__menu { display: grid; }

  .nav__enlaces {
    display: none;
    position: absolute;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 20px 28px 28px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
  }
  .nav__enlaces--abierto { display: flex; }

  .nav__enlaces .nav__enlace {
    color: var(--texto);
    padding: 13px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
  }
  .nav__enlaces .nav__enlace::after { display: none; }

  .nav__enlaces .nav__acceso {
    color: var(--suave);
    padding: 15px 0 10px;
    justify-content: flex-start;
  }
  /* Los dos ocupan la fila entera, pero conservan su jerarquía: dos
     botones rellenos e idénticos no dicen cuál es el camino principal. */
  .nav__enlaces .boton { width: 100%; margin-top: 6px; }
  .nav__enlaces .boton--contorno { border-color: var(--borde); color: var(--titulo); }

  /* Y recuperan su rótulo largo. El corto existe para que quepan en la
     barra; aquí el panel ocupa el ancho entero de la pantalla y «Reservar»
     a secas dice menos que «Reserva en 30 segundos». */
  .nav__enlaces .nav__cta .cta__largo { display: inline; }
  .nav__enlaces .nav__cta .cta__corto { display: none; }
}

@media (max-width: 780px) {
  .seccion { padding: 76px 0; }
}

/* Las tarjetas de servicio aguantan tres columnas hasta bien entrada la
   tablet: a 768px cada una mide 218px, más que en escritorio. Bajar a dos
   antes de tiempo dejaba la quinta huérfana en una fila para ella sola. */
@media (max-width: 700px) {
  .servicios { grid-template-columns: repeat(2, 1fr); }
}

/* El pie tiene cuatro columnas de poco texto: dos entran de sobra en una
   tablet. Apilarlas a 780 dejaba media pantalla en blanco al costado. */
@media (max-width: 620px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}

/* El botón flotante de WhatsApp vive pegado al borde inferior derecho y,
   al llegar al final de la página, se sentaba encima de «Acceso del
   equipo». El pie mide como mucho 1180 y va centrado; el botón ocupa 58px
   a 24 del borde, así que solapan mientras (ancho+1180)/2 > ancho-82, o
   sea por debajo de 1344px. Se redondea a 1360 y se le reserva el hueco. */
@media (max-width: 1360px) {
  .pie { padding-bottom: 104px; }
}

@media (max-width: 560px) {
  .valores { grid-template-columns: 1fr; row-gap: 26px; }
  /* El filete lo pone «.valor + .valor», que pesa lo mismo que un
     :nth-child: hay que apagarlo con el mismo selector, no con «.valor». */
  .valor, .valor + .valor { padding-left: 0; border-left: 0; }
  /* En el móvil van de una en una: son fotos de uñas, y a media pantalla
     no se distingue el trabajo, que es justo lo que hay que enseñar. */
  .galeria { grid-template-columns: 1fr; gap: 12px; }
  .galeria__pieza, .galeria__pieza:nth-child(n + 4), .galeria__pieza:last-child { grid-column: span 1; }
  .galeria__pieza img,
  .galeria__pieza:nth-child(n + 4) img,
  .galeria__pieza:last-child img { aspect-ratio: 4 / 3; }
  .heroe__datos-fila { gap: 14px 20px; }

  /* Dos y dos: cuatro columnas a media pantalla dejan una palabra por
     renglón. El filete pasa a separar solo las de la derecha. */
  .heroe__ventajas { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .heroe__ventajas li:nth-child(odd) { border-left: 0; }
  .heroe__ventajas li + li { border-left: 1px solid rgba(252, 253, 248, .20); }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 20px; }
  .nav__fila { gap: 10px; height: 70px; }
  .nav__enlaces { top: 70px; }
  .marca__nombre { font-size: 1.28rem; }
  .marca__lema   { display: none; }
  .nav__icono { width: 38px; height: 38px; }
  .boton { padding: 14px 22px; font-size: 12px; }
  .heroe__contenido { padding: 112px 20px 28px; }
  .heroe__datos { padding: 0 20px 36px; }
  .heroe__acciones { flex-direction: column; align-items: stretch; }
  .heroe__cta { padding: 14px 18px; gap: 12px; }
  .heroe__cta > svg { width: 23px; height: 23px; }
  .heroe__cta__titulo { font-size: .96rem; }
  .heroe__cta__sub { font-size: .76rem; }

  /* Medido a 320px: el contenido de «Reserva en 30 segundos» pide 294px y
     la caja da 263, así que la flecha se salía fuera del botón. Se aprieta
     el relleno y el espaciado de letra en vez de partir el rótulo. */
  .contacto__cta { padding: 17px 15px; letter-spacing: .05em; gap: 10px; }
  .servicios { grid-template-columns: 1fr; }
  .promos { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; padding: 26px 22px; }
  .promos__icono { margin: 0 auto; }
  .promos__texto { border-left: 0; padding-left: 0; }
  /* A una sola columna la tarjeta se hace ancha y la foto 4:3 ocuparía
     media pantalla de alto: se aplasta a 16:9. */
  .servicio__foto { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ============================================================
   Movimiento y efectos
   Todo respeta prefers-reduced-motion (al final del archivo).
   ============================================================ */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes mecer {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-8px); }
}
@keyframes latido {
  75%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes entrar-burbuja {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Entrada por scroll: el elemento espera oculto y entra al verse */
.revelar { opacity: 0; transform: translateY(18px); }
.revelar--visible {
  animation: aparecer .62s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--retraso, 0ms);
}

/* ---------- ornamentos decorativos ---------- */
/* Círculos que recogen el motivo del logo. Puramente decorativos:
   aria-hidden y sin contenido, no interfieren con lectores. */
.ornamento {
  position: absolute;
  border: 1px solid var(--borde);
  border-radius: 50%;
  pointer-events: none;
  opacity: .55;
}
.ornamento--a { width: 190px; height: 190px; animation: flotar 11s ease-in-out infinite; }
.ornamento--b { width: 110px; height: 110px; animation: mecer 14s ease-in-out infinite; }
.ornamento--c {
  width: 260px; height: 260px;
  border-style: dashed;
  animation: flotar 16s ease-in-out infinite reverse;
}
.seccion { position: relative; overflow: hidden; }

/* ---------- realces al pasar el cursor ---------- */

.valor {
  position: relative;
  transition: background-color var(--transicion), transform var(--transicion);
}
.valor::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--deco);
  transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.valor:hover { background: var(--superficie); }
.valor:hover::after { width: 100%; }
.valor:hover .valor__num { color: var(--acento); }
.valor__num { transition: color var(--transicion); }

/* La tarjeta se levanta y la foto se acerca un punto. El zoom va en la
   imagen y no en la tarjeta entera: así los bordes redondeados y la
   insignia se quedan quietos, que es lo que da sensación de solidez. */
.servicio:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(36, 31, 26, .14); }
.servicio:hover .servicio__foto { transform: scale(1.06); }
.servicio h3 { transition: color var(--transicion); }
.servicio:hover h3 { color: var(--acento); }

/* El velo oscuro que llevaba encima existía para que se leyera el rótulo
   de cada pieza. Ya no hay rótulo: son las fotos, y taparlas no ayuda. */
.galeria__pieza { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow var(--transicion); }
.galeria__pieza:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(36, 31, 26, .18); }
.galeria__pieza:hover img { transform: scale(1.05); }

.faq__item { transition: background-color var(--transicion); }
.faq__item:hover { background: var(--superficie); }
.faq__respuesta { animation: aparecer .4s cubic-bezier(.16, 1, .3, 1); }

.boton { position: relative; overflow: hidden; }
.boton:active { transform: scale(.98); }

/* ============================================================
   Widget flotante de WhatsApp
   ============================================================ */

.wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  max-width: calc(100vw - 2rem);
  padding-bottom: env(safe-area-inset-bottom);
}

.wa__burbuja {
  width: 272px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  animation: entrar-burbuja .5s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
.wa__burbuja[hidden] { display: none; }

/* Al irse: se desvanece y deja de aceptar clics antes de desaparecer, para
   que un dedo a medio camino no acabe pulsando algo que ya no está. */
.wa__burbuja--yendose {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.wa__estado {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1F9D55;
  margin-bottom: 9px;
}
.wa__estado--cerrado { color: var(--suave); }
.wa__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
}
.wa__estado:not(.wa__estado--cerrado) .wa__punto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: latido 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

.wa__titulo {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--titulo);
  margin: 0 0 6px;
  padding-right: 18px;
}
.wa__texto { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--suave); }

.wa__cerrar {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--suave);
  font-size: 17px;
  line-height: 1;
  transition: var(--transicion);
}
.wa__cerrar:hover { background: var(--superficie); color: var(--texto); }

.wa__boton {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa__boton:hover { transform: scale(1.07); box-shadow: 0 14px 32px rgba(37, 211, 102, .55); }
.wa__boton svg { width: 31px; height: 31px; }

/* Anillo que late alrededor del botón */
.wa__boton::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: latido 2.2s cubic-bezier(0, 0, .2, 1) infinite;
  z-index: -1;
}

.wa__insignia {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: #C0392B;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  display: grid;
  place-items: center;
  border: 2px solid var(--fondo);
}

@media (max-width: 460px) {
  .wa { right: 16px; bottom: 16px; gap: 10px; }
  .wa__burbuja { width: min(272px, calc(100vw - 32px)); }
  .wa__boton { width: 54px; height: 54px; }
}

/* Sin movimiento para quien lo pidió */
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .revelar--visible { animation: none; }
  .ornamento, .wa__boton::before, .wa__punto::after { animation: none; }
  .wa__burbuja { animation: none; }
  .wa__burbuja--yendose { transition: none; }
}

/* ---------- campo de contraseña con ojo ---------- */

.campo-clave { position: relative; display: block; }
/* Deja sitio al botón para que el texto no pase por debajo */
.campo-clave input { padding-right: 48px !important; width: 100%; }

.campo-clave__ojo {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radio);
  color: var(--suave);
  cursor: pointer;
  transition: var(--transicion);
}
.campo-clave__ojo:hover { color: var(--titulo); background: var(--borde); }
.campo-clave__ojo svg { width: 19px; height: 19px; }

/* ============================================================
   Página de precios
   ============================================================ */

.precios__cabecera { position: relative; background: var(--superficie); overflow: hidden; }
.precios__foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* Se funde con el fondo por la izquierda para que el texto no caiga sobre
     el borde duro de la foto. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
          mask-image: linear-gradient(90deg, transparent, #000 38%);
}
.precios__intro { position: relative; z-index: 1; padding: 132px 28px 40px; }
.precios__intro h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.1;
  color: var(--titulo);
  margin-bottom: 16px;
}
.precios__bajada { color: var(--suave); font-size: 1.04rem; margin-bottom: 30px; max-width: 46ch; }

.precios__atributos {
  list-style: none;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--borde);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
}
.precios__atributos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--suave);
}
.precios__atributos li:first-child { padding-left: 0; }
.precios__atributos li + li { border-left: 1px solid var(--borde); }
.precios__atributos svg { width: 27px; height: 27px; flex: none; color: var(--deco); }

/* Las pestañas no filtran: llevan al bloque. Con seis categorías y la lista
   entera en la página, saltar es más rápido que recargar. */
/* La cabecera ya trae su propio aire abajo: los 110px de .seccion encima
   dejaban un hueco de media pantalla entre la foto y las pestañas. */
.precios { padding-top: 54px; }
.precios__pestanas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.pestana {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo);
  font-size: 13.5px;
  color: var(--texto);
  transition: var(--transicion);
}
.pestana svg { width: 17px; height: 17px; color: var(--deco); }
.pestana:hover { border-color: var(--deco); color: var(--titulo); }

.grupo {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 26px;
  margin-bottom: 18px;
  background: var(--fondo);
  border-radius: 16px;
  /* Compensa la barra fija al saltar desde una pestaña o desde la portada. */
  scroll-margin-top: 96px;
}
.grupo__icono {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--deco);
  margin-bottom: 18px;
}
.grupo__icono svg { width: 40px; height: 40px; }
.grupo__ficha h2 { font-size: 1.7rem; margin-bottom: 10px; }
.grupo__ficha p { margin: 0; color: var(--suave); font-size: .93rem; line-height: 1.62; }

.tarifas__cabecera,
.tarifa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 96px 128px;
  gap: 14px;
  align-items: center;
}
.tarifas__cabecera {
  padding: 10px 16px;
  background: var(--superficie);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suave);
}
.tarifa { padding: 9px 16px; border-bottom: 1px solid var(--borde); }
.tarifa:last-child { border-bottom: 0; }
.tarifa__nombre { font-size: .95rem; }
.tarifa__duracion { font-size: .88rem; color: var(--suave); }
.tarifa__precio { font-family: var(--serif); font-size: 1.12rem; color: var(--titulo); }
.tarifa__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 4px;
  background: #8C6636;
  color: var(--sobre-oscuro);
  font-size: 12.5px;
  transition: var(--transicion);
}
.tarifa__boton svg { width: 14px; height: 14px; flex: none; }
.tarifa__boton:hover { filter: brightness(1.12); }

.tarifas__mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--borde);
}
.tarifas__mas svg { width: 15px; height: 15px; }
.tarifas__mas:hover { text-decoration-color: currentColor; }

.precios__ayuda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
  padding: 30px 34px;
  background: var(--fondo);
  border-radius: 16px;
}
.precios__ayuda h2 { font-size: 1.5rem; margin-bottom: 6px; }
.precios__ayuda p { margin: 0; color: var(--suave); }
.precios__ayuda-botones { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
  .precios__foto { width: 100%; opacity: .2; -webkit-mask-image: none; mask-image: none; }
  .precios__intro { padding: 122px 28px 36px; }
  .precios__atributos { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .precios__atributos li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .grupo { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 700px) {
  /* La tabla deja de ser tabla: en el móvil, nombre y precio arriba, la
     duración debajo y el botón a lo ancho. Cuatro columnas de 90px no caben
     y encogerlas deja los precios en dos renglones. */
  .tarifas__cabecera { display: none; }
  .tarifa {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 4px;
  }
  .tarifa__nombre   { grid-column: 1;      grid-row: 1; }
  .tarifa__precio   { grid-column: 2;      grid-row: 1; text-align: right; }
  .tarifa__duracion { grid-column: 1 / -1; grid-row: 2; }
  .tarifa__boton    { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .grupo { padding: 22px 18px; }
  .tarifas__mas { margin-left: 4px; }
  .precios__ayuda { padding: 24px 20px; }
  .precios__ayuda-botones { width: 100%; }
  .precios__ayuda-botones .boton { flex: 1; min-width: 200px; }
}

@media (max-width: 460px) {
  .precios__intro { padding: 108px 20px 30px; }
  .precios__atributos { grid-template-columns: 1fr; gap: 16px; }
  .precios__atributos li { padding-left: 0; border-left: 0; }
}