/* ═══════════════════════════════════════════════════
   Cris Pajares · IFBB Pro Bikini
   Estética alineada con The Heels (posingtheheels.com):
   blanco y rosa empolvado, Cormorant Garamond en los
   titulares, Inter en versalitas espaciadas y botones
   en forma de píldora.
   ═══════════════════════════════════════════════════ */

:root{
  --blanco:#FFFFFF;
  /* Rosa empolvado, tomado de la tarjeta de tarifas que Cris envía
     por WhatsApp: más apagado y más cálido que el rosa bebé. */
  --blush-50:#FBF3F6;
  --blush-100:#F7E8EE;
  --blush-200:#EFD6E0;
  --blush-300:#E4C0CF;
  --blush-400:#C98CA3;
  --blush-500:#A8556F;
  --vino:#8E3B54;

  --tinta:#2D2D2D;
  --tinta-2:#4A4A4A;
  --gris:#6B6B6B;
  --gris-claro:#9A9A9A;
  --linea:#EFE0E7;

  --oscuro:#1A1A1A;
  --oscuro-2:#232122;

  --display:"Cormorant Garamond",Georgia,serif;
  --texto:"Inter",system-ui,-apple-system,sans-serif;
  --firma:"Dancing Script",cursive;

  --ancho:1180px;
  --pildora:9999px;
  --curva:22px;
  --transicion:.45s cubic-bezier(.22,1,.36,1);
  --sombra:0 18px 40px -24px rgba(45,45,45,.22);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:100px}

body{
  margin:0;
  background:var(--blanco);
  color:var(--gris);
  font-family:var(--texto);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--blush-300);color:var(--tinta);padding:.7rem 1.2rem;font-weight:500;
}
.saltar:focus{left:0}

:focus-visible{outline:2px solid var(--blush-400);outline-offset:3px}

/* ─────────── Tipografía compartida ─────────── */

.cejilla{
  font-family:var(--texto);
  text-transform:uppercase;
  letter-spacing:.4em;
  font-size:.72rem;
  font-weight:500;
  color:var(--gris-claro);
  margin:0 0 1.3rem;
}

.titulo{
  font-family:var(--display);
  font-weight:400;
  color:var(--tinta);
  font-size:clamp(2.1rem,4.6vw,3.3rem);
  line-height:1.18;
  letter-spacing:.02em;
  margin:0 0 1.5rem;
}
.titulo em{font-style:italic;color:var(--blush-500)}

h3{font-family:var(--display);font-weight:700;color:var(--tinta);letter-spacing:.04em}

p{margin:0 0 1.15rem}
strong{color:var(--tinta);font-weight:500}

/* Filete fino bajo los titulares, como en The Heels */
.regla{
  width:72px;height:1px;background:var(--blush-300);
  border:0;margin:0 0 1.8rem;
}
.cabecera--centrada .regla{margin-inline:auto}

/* ─────────── Botones ─────────── */

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--texto);
  text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:500;
  padding:1rem 2.4rem;
  background:var(--blush-300);color:var(--tinta);
  border:1px solid var(--blush-300);
  border-radius:var(--pildora);
  text-decoration:none;cursor:pointer;
  transition:background var(--transicion),border-color var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.boton:hover{
  background:var(--blush-400);border-color:var(--blush-400);
  transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(168,85,111,.55);
}

.boton--linea{background:var(--blanco);border-color:var(--linea);color:var(--tinta)}
.boton--linea:hover{background:var(--blush-50);border-color:var(--blush-300);box-shadow:none}

.boton--mini{padding:.62rem 1.5rem;font-size:.74rem;letter-spacing:.16em}

.boton--bloque{width:100%;margin-top:.5rem}

.boton[disabled]{opacity:.55;pointer-events:none}

/* ─────────── Navegación ─────────── */

.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:.9rem 0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--transicion),border-color var(--transicion),padding var(--transicion);
}
.nav--fijo{border-bottom-color:var(--linea);box-shadow:0 10px 30px -28px rgba(45,45,45,.6);padding:.6rem 0}

.nav__fila{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

/* Mariposa de Cris + el nombre apilado: cejilla, nombre y firma */
.marca{display:flex;align-items:center;gap:.75rem;text-decoration:none;line-height:1.05;text-align:left}
/* El original que pasó Cris viene con fondo transparente, así que la
   mariposa va suelta sobre la barra, sin recortarla en un círculo. */
.marca__logo{width:auto;height:46px;flex:none}
.marca__texto{display:block}
.marca__cejilla{
  display:block;font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gris-claro);font-weight:500;margin-bottom:.22rem;
}
.marca__nombre{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.32rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta);
}
.marca__firma{
  display:block;font-family:var(--firma);font-size:.92rem;
  color:var(--blush-500);margin-top:.1rem;
}

.nav__enlaces{display:flex;align-items:center;gap:2.1rem}
.nav__enlaces a{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:500;color:var(--tinta-2);text-decoration:none;
  transition:color var(--transicion);
}
.nav__enlaces a:not(.boton):hover{color:var(--blush-500)}

.hamburguesa{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.hamburguesa span{
  display:block;width:26px;height:1.5px;background:var(--tinta);margin:5px 0;
  transition:transform .3s,opacity .3s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─────────── Portada ─────────── */

.portada{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:9rem 0 5rem;
  overflow:hidden;
}
.portada__fondo{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 55% at 82% 18%,var(--blush-100),transparent 62%),
    radial-gradient(60% 55% at 6% 92%,var(--blush-50),transparent 60%),
    linear-gradient(180deg,var(--blush-50),var(--blanco) 72%);
}

.portada__rejilla{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

.portada__titulo{
  font-family:var(--display);
  font-weight:700;
  color:var(--tinta);
  /* Escala con el ancho, no con un mínimo fijo: "CRISTOBALINA"
     es larga y a 2,9rem no cabía en un móvil de 375 px. */
  font-size:clamp(2rem,9.2vw,5.1rem);
  line-height:1.02;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0 0 1.4rem;
}
.portada__titulo em{
  display:block;font-style:normal;font-weight:700;color:var(--blush-500);
}

/* El lema, en cursiva serif, como el de The Heels */
.portada__entrada{
  max-width:33rem;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.55;
  color:var(--tinta-2);
}

.portada__acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin:2.2rem 0 3rem}

.cifras{
  list-style:none;margin:0;padding:1.8rem 0 0;
  border-top:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.cifras li{display:flex;flex-direction:column;gap:.3rem}
.cifras strong{
  font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--blush-500);line-height:1;
}
.cifras span{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.24em;
  font-size:.62rem;font-weight:500;color:var(--gris-claro);
}

.portada__foto{position:relative;margin:0}
.portada__foto img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%;
  border-radius:var(--curva);
  box-shadow:0 40px 70px -40px rgba(45,45,45,.38);
}
.portada__foto::before{
  content:"";position:absolute;inset:-16px -16px 28px 28px;z-index:-1;
  border-radius:calc(var(--curva) + 8px);
  background:linear-gradient(140deg,var(--blush-200),transparent 60%);
}

.sello{
  position:absolute;left:-14px;bottom:28px;z-index:2;
  background:var(--blanco);border:1px solid var(--blush-200);
  color:var(--tinta);
  font-family:var(--texto);text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;font-weight:600;
  padding:.7rem 1.2rem;line-height:1;border-radius:var(--pildora);
  box-shadow:var(--sombra);
  display:flex;gap:.5rem;align-items:center;
}
.sello span{font-size:.62rem;letter-spacing:.3em;color:var(--blush-500)}

.portada__bajar{
  position:absolute;left:50%;bottom:1.8rem;z-index:2;
  width:1px;height:48px;background:linear-gradient(var(--blush-300),transparent);
}
.portada__bajar::after{
  content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;
  border-radius:50%;background:var(--blush-400);
  animation:caer 2.4s infinite;
}
@keyframes caer{0%{transform:translateY(0);opacity:1}70%{transform:translateY(40px);opacity:0}100%{opacity:0}}

/* ─────────── Secciones ─────────── */

.seccion{padding:clamp(4.5rem,10vw,7.5rem) 0;position:relative}
.seccion--rosa{background:linear-gradient(180deg,var(--blush-50),var(--blanco))}
.seccion--contacto{background:linear-gradient(180deg,var(--blanco),var(--blush-50))}

/* El bloque oscuro, igual que la zona de masterclass de The Heels */
.seccion--oscura{background:var(--oscuro);color:#B9B3B5}
.seccion--oscura .titulo{color:var(--blanco)}
.seccion--oscura .titulo em{color:var(--blush-300)}
.seccion--oscura .cejilla{color:var(--blush-300)}
.seccion--oscura .regla{background:var(--blush-400)}

.cabecera{max-width:44rem;margin:0 0 3.4rem}
.cabecera--centrada{margin-inline:auto;text-align:center}
.cabecera__entrada{color:var(--gris)}
.seccion--oscura .cabecera__entrada{color:#B9B3B5}

.rejilla-2{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.rejilla-2--contacto{align-items:start;grid-template-columns:1fr 1.05fr}

/* «Quién soy» ya no lleva foto: el texto va centrado en la página
   y con ancho de lectura, no a los 1.180 px del contenedor. */
.sobre-mi{max-width:46rem;margin-inline:auto}


.firma{
  font-family:var(--firma);font-size:2.1rem;
  color:var(--blush-500);margin-top:1.8rem;line-height:1;
}

/* ─────────── Hitos ─────────── */

.hitos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));
  gap:1.4rem;
}
.hito{
  background:var(--blush-50);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  padding:2.2rem 1.9rem;
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.hito:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.hito__num{
  font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--blush-400);
  letter-spacing:.06em;display:block;margin-bottom:.9rem;
}
.hito h3{font-size:1.16rem;margin:0 0 .7rem;text-transform:uppercase;letter-spacing:.07em}
.hito p{font-size:.94rem;margin:0;color:var(--gris)}

/* El hito más reciente y más grande, destacado: es el que cierra la
   historia y el que conviene que se lea primero si solo se lee uno. */
.hito--oro{
  background:linear-gradient(160deg,var(--blush-100),var(--blush-50));
  border-color:var(--blush-300);
}
.hito--oro .hito__num{color:var(--blush-500)}
.hito--oro p{color:var(--tinta-2)}

/* ─────────── Palmarés completo ───────────
   Va plegado: la lista entera impresiona, pero abierta se come la
   página. Quien quiera comprobarlo, la abre. */

.palmares{margin-top:2.6rem}

.palmares summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6rem;
  margin-inline:auto;
  font-family:var(--texto);text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;font-weight:500;
  padding:.85rem 2.1rem;
  background:var(--blanco);color:var(--tinta);
  border:1px solid var(--blush-300);border-radius:var(--pildora);
  transition:background var(--transicion),transform var(--transicion);
}
.palmares summary::-webkit-details-marker{display:none}
.palmares summary:hover{background:var(--blush-100);transform:translateY(-2px)}
.palmares summary::after{
  content:'';width:7px;height:7px;flex:none;
  border-right:1.5px solid var(--blush-500);border-bottom:1.5px solid var(--blush-500);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--transicion);
}
.palmares[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* El rótulo cambia según esté abierto o cerrado */
.palmares__cerrar{display:none}
.palmares[open] .palmares__abrir{display:none}
.palmares[open] .palmares__cerrar{display:inline}

/* summary es un elemento de bloque: para centrar la píldora hace falta
   un contenedor con text-align, no margin-inline en el propio botón. */
.palmares > summary{display:block;width:max-content;margin-inline:auto}

.palmares__cuerpo{
  margin-top:2.4rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1.6rem;
}

.palmares__anyo{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  padding:1.7rem 1.6rem;
}
.palmares__anyo h3{
  font-family:var(--display);font-size:1.6rem;font-weight:700;
  color:var(--blush-500);letter-spacing:.05em;
  margin:0 0 1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--linea);
}
.palmares__anyo h3 span{
  display:block;font-family:var(--texto);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--gris-claro);
  margin-top:.45rem;
}

.palmares__anyo ul{list-style:none;margin:0;padding:0}
.palmares__anyo li{
  position:relative;padding-left:1.4rem;margin-bottom:.6rem;
  font-size:.9rem;line-height:1.5;color:var(--gris);
}
.palmares__anyo li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--blush-200);
}
/* Las victorias, marcadas: son lo que se busca al abrir esto */
.palmares__anyo li.gana{color:var(--tinta);font-weight:500}
.palmares__anyo li.gana::before{background:var(--blush-500);width:7px;height:7px;top:.55em;left:-1px}
.palmares__anyo li.pro{color:var(--blush-500);font-weight:500;font-style:italic}
.palmares__anyo li.pro::before{background:var(--vino)}
.palmares__anyo li b{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}

/* ─────────── Servicios ─────────── */

.servicios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(1.5rem,3vw,2.4rem);
}

.servicio{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.servicio:hover{transform:translateY(-5px);box-shadow:var(--sombra)}

.servicio__foto{margin:0;overflow:hidden;position:relative}
/* Las fotos son verticales (9:16). En una franja baja y ancha solo se
   veía una tira del torso, así que la caja es alta y deja sitio a la cara. */
.servicio__foto img{
  width:100%;height:430px;object-fit:cover;object-position:center 30%;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.servicio:hover .servicio__foto img{transform:scale(1.05)}

.servicio__cuerpo{padding:2.2rem 2rem 2.4rem;display:flex;flex-direction:column;flex:1}
.servicio__cuerpo .cejilla{margin-bottom:.8rem}
.servicio__cuerpo h3{font-size:1.55rem;margin:0 0 .9rem;text-transform:uppercase;letter-spacing:.07em}
.servicio__resumen{color:var(--gris)}

.lista{list-style:none;margin:1.2rem 0 1.8rem;padding:0;flex:1}
.lista li{
  position:relative;padding-left:1.5rem;margin-bottom:.8rem;
  font-size:.94rem;line-height:1.65;
}
.lista li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:7px;border-radius:50%;background:var(--blush-400);
}

.nota{
  margin:2.6rem auto 0;max-width:42rem;text-align:center;
  color:var(--gris-claro);font-size:.95rem;font-style:italic;
}

/* El precio, justo encima del botón de la tarjeta */
.servicio__precio{
  display:flex;align-items:baseline;gap:.5rem;
  margin:0 0 1rem;padding-top:1.1rem;
  border-top:1px solid var(--linea);
}
.servicio__precio strong{
  font-family:var(--display);font-weight:700;font-size:1.9rem;
  line-height:1;color:var(--vino);
}
.servicio__precio span{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;font-weight:600;color:var(--gris-claro);
}

.pasos{
  list-style:none;margin:4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:2.4rem;
}
.pasos li{text-align:center}
.pasos span{
  display:inline-grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--blush-100);color:var(--blush-500);
  font-family:var(--display);font-size:1.4rem;font-weight:700;
  margin-bottom:1.1rem;
}
.pasos h4{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;
  font-size:1.1rem;font-weight:700;color:var(--tinta);margin:0 0 .6rem;
}
.pasos p{font-size:.93rem;margin:0}

/* ─────────── Cómo funcionan las clases ─────────── */

.metodo{margin-top:clamp(3rem,6vw,4.5rem)}

.metodo__cabecera{max-width:42rem;margin:0 auto 3rem;text-align:center}
.metodo__cabecera .regla{margin-inline:auto}
.metodo__cabecera p{color:var(--gris);margin:0}
.metodo__titulo{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(1.35rem,2.8vw,1.9rem);
  color:var(--tinta);margin:0 0 1.2rem;
}

.pilares{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1.4rem;
}
.pilar{
  background:var(--blush-50);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  padding:2rem 1.8rem 1.4rem;
}
.pilar__num{
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--blanco);border:1px solid var(--blush-200);
  color:var(--blush-500);
  font-family:var(--display);font-size:1.15rem;font-weight:700;
  margin-bottom:1rem;
}
.pilar h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:1.14rem;color:var(--tinta);margin:0 0 .3rem;
}
.pilar .lista{margin:.8rem 0 0}
.pilar .lista li{font-size:.9rem;margin-bottom:.65rem}

.detalles{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--curva);overflow:hidden;
}
.detalles li{
  background:var(--blush-50);padding:1.3rem 1.4rem;
  font-size:.88rem;line-height:1.6;color:var(--gris);
}
.detalles strong{
  display:block;font-family:var(--texto);text-transform:uppercase;
  letter-spacing:.18em;font-size:.66rem;font-weight:600;
  color:var(--blush-500);margin-bottom:.4rem;
}
.detalles a{
  color:var(--blush-500);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--blush-200);
}
.detalles a:hover{color:var(--vino);border-bottom-color:var(--blush-400)}

/* ─────────── Tarifas de posing ─────────── */

.tarifas{
  margin-top:clamp(2.5rem,5vw,3.6rem);
  background:linear-gradient(165deg,var(--blush-100),var(--blush-50) 55%,var(--blanco));
  border:1px solid var(--blush-200);
  border-radius:calc(var(--curva) + 10px);
  padding:clamp(1.8rem,4vw,3rem);
}
.tarifas__titulo{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(1.3rem,2.6vw,1.75rem);
  color:var(--tinta);text-align:center;margin:0 0 .5rem;
}
.tarifas__entrada{
  text-align:center;color:var(--gris);font-size:.94rem;
  max-width:34rem;margin:0 auto 2.4rem;
}

.tarifas__bloques{
  /* min() evita que los 320px mínimos desborden el móvil:
     esta rejilla va dentro de una caja que ya tiene su propio relleno. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(1.4rem,3vw,2.2rem);
}

.tarifas__pastilla{
  display:block;margin:0 auto 1.3rem;width:fit-content;
  background:var(--blush-500);color:var(--blanco);
  font-family:var(--texto);text-transform:uppercase;
  letter-spacing:.34em;font-size:.76rem;font-weight:600;
  padding:.6rem 2.2rem .6rem 2.5rem;border-radius:var(--pildora);
}

.tarifas__lista{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.tarifas__lista li{
  display:flex;align-items:center;gap:1.1rem;
  background:var(--blanco);
  border:1px solid var(--blush-200);
  border-radius:var(--pildora);
  padding:.85rem 1.6rem .85rem 1rem;
  transition:border-color var(--transicion),transform var(--transicion);
}
.tarifas__lista li:hover{border-color:var(--blush-400);transform:translateX(3px)}

.tarifas__precio{
  flex:none;min-width:5.4rem;text-align:center;
  font-family:var(--display);font-weight:700;font-size:1.75rem;line-height:1;
  color:var(--vino);
  border:1px solid var(--blush-200);border-radius:var(--pildora);
  padding:.5rem .4rem;
}
.tarifas__que{display:flex;flex-direction:column;line-height:1.35}
.tarifas__que strong{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;color:var(--tinta);
}
.tarifas__que small{font-size:.81rem;color:var(--gris-claro)}

.tarifas__pie{
  margin:2.4rem 0 0;text-align:center;
  font-size:.88rem;color:var(--gris-claro);
}
.tarifas__pie a{
  color:var(--blush-500);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--blush-200);
}
.tarifas__pie a:hover{color:var(--vino);border-bottom-color:var(--blush-400)}

/* ─────────── Galería ─────────── */

/* Carrusel: se desliza con el dedo, con la rueda o con las flechas */
.galeria-caja{position:relative}

.galeria{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:1.1rem;
  scrollbar-width:thin;
  scrollbar-color:var(--blush-400) transparent;
}
.galeria::-webkit-scrollbar{height:5px}
.galeria::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:99px}
.galeria::-webkit-scrollbar-thumb{background:var(--blush-400);border-radius:99px}

.galeria figure{
  flex:0 0 clamp(210px,24vw,280px);
  margin:0;overflow:hidden;border-radius:var(--curva);background:var(--oscuro-2);
  scroll-snap-align:start;
}
.galeria img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.galeria figure:hover img{transform:scale(1.06)}

.galeria__flecha{
  position:absolute;top:calc(50% - 1.1rem);transform:translateY(-50%);
  z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--blanco);border:1px solid var(--blush-200);color:var(--tinta);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55);
  transition:background var(--transicion),opacity var(--transicion),transform var(--transicion);
}
.galeria__flecha svg{width:20px;height:20px}
.galeria__flecha:hover{background:var(--blush-100)}
.galeria__flecha--izq{left:-14px}
.galeria__flecha--der{right:-14px}
.galeria__flecha[hidden]{display:none}

/* En pantallas táctiles sobran: se desliza con el dedo */
@media (hover:none){
  .galeria__flecha{display:none}
}

.galeria__pie{margin-top:2.2rem;text-align:center;color:#B9B3B5;font-size:.94rem}
.galeria__pie a{color:var(--blush-300);text-decoration:none;border-bottom:1px solid rgba(228,192,207,.45)}
.galeria__pie a:hover{color:var(--blush-200)}

/* ─────────── Testimonios ─────────── */

/* Son capturas de WhatsApp, de altos muy distintos. Se pasan deslizando,
   con la rueda o con las flechas, igual que la galería. */
.testimonios-caja{position:relative}

.testimonios{
  display:flex;gap:1.1rem;align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.3rem .2rem 1.1rem;
  scrollbar-width:thin;
  scrollbar-color:var(--blush-300) transparent;
}
.testimonios::-webkit-scrollbar{height:5px}
.testimonios::-webkit-scrollbar-track{background:var(--blush-100);border-radius:99px}
.testimonios::-webkit-scrollbar-thumb{background:var(--blush-300);border-radius:99px}
.testimonios:focus-visible{outline:2px solid var(--blush-400);outline-offset:6px}

.testimonios figure{
  flex:0 0 min(88%,340px);
  margin:0;
  scroll-snap-align:center;
}
.testimonios img{
  width:100%;
  border-radius:var(--curva);
  border:1px solid var(--linea);
  box-shadow:var(--sombra);
  background:var(--blanco);
}

/* Todas las capturas se ven al mismo ancho, para que la letra tenga
   siempre el mismo tamaño; los altos quedan desiguales porque unos
   mensajes son más largos que otros, así que se centran entre sí. */
@media (min-width:761px){
  /* En pantalla ancha caben casi todas y el recorrido es corto: con el
     imán fuerte la fila se volvería al principio en vez de quedarse al
     final, así que aquí solo insinúa. */
  .testimonios{align-items:center;gap:1.4rem;scroll-snap-type:x proximity}
  .testimonios figure{
    flex:0 0 clamp(300px,26vw,360px);
    scroll-snap-align:start;
  }
}

/* ─────────── Marcas ─────────── */

.marcas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.2rem;
}
.marca-tarjeta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  padding:1.9rem 1.7rem;
  display:flex;flex-direction:column;gap:.45rem;
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.marca-tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.marca-tarjeta h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:1.14rem;margin:0;font-weight:700;line-height:1.25;
}
.marca-tarjeta p{font-size:.9rem;color:var(--gris-claro);margin:0}

/* Caja de altura fija: así los logos, que vienen con proporciones
   muy distintas, quedan alineados entre tarjetas. */
.marca-tarjeta__logo{
  height:44px;display:flex;align-items:center;margin-bottom:.5rem;
}
.marca-tarjeta__logo img{
  max-height:100%;max-width:150px;width:auto;height:auto;object-fit:contain;
}
/* El logotipo de NEBBIA es blanco, pensado para fondo oscuro */
.logo--invertir{filter:invert(1)}

.marca-tarjeta__web{
  margin-top:auto;padding-top:1rem;
  font-family:var(--texto);font-size:.72rem;letter-spacing:.04em;
  color:var(--gris-claro);text-decoration:none;overflow-wrap:anywhere;
  transition:color var(--transicion);
}
.marca-tarjeta__web:hover{color:var(--blush-500)}

/* Sin esta etiqueta, la píldora suelta no dice qué es */
.codigo-etiqueta{
  margin:.6rem 0 0;
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.2em;
  font-size:.6rem;font-weight:600;color:var(--gris-claro);
}

.codigo{
  align-self:flex-start;margin-top:0;
  background:var(--blush-50);border:1px dashed var(--blush-300);color:var(--blush-500);
  font-family:var(--texto);letter-spacing:.18em;font-size:.72rem;font-weight:600;
  text-transform:uppercase;
  padding:.5rem 1.1rem;cursor:pointer;border-radius:var(--pildora);
  transition:background var(--transicion),color var(--transicion),border-color var(--transicion);
}
.codigo:hover{background:var(--blush-300);color:var(--tinta);border-color:var(--blush-300)}
.codigo.copiado{background:var(--blush-300);color:var(--tinta);border-style:solid}

.marca-tarjeta--cta{background:linear-gradient(150deg,var(--blush-100),var(--blanco));border-color:var(--blush-200)}
.marca-tarjeta--cta a{
  margin-top:.8rem;color:var(--blush-500);text-decoration:none;
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;
}
.marca-tarjeta--cta a:hover{color:var(--tinta)}

/* ─────────── Canales de contacto ─────────── */

.canales{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:.9rem}
.canales a{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.1rem 1.4rem;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--curva);
  text-decoration:none;
  transition:border-color var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.canales a:hover{border-color:var(--blush-300);transform:translateY(-2px);box-shadow:var(--sombra)}
.canales__icono{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--blush-100);color:var(--blush-500);border-radius:14px;
}
.canales__icono svg{width:20px;height:20px}
.canales strong{display:block;color:var(--tinta);font-weight:500;font-size:.98rem}
.canales small{color:var(--gris-claro);font-size:.86rem}

/* ─────────── Formulario ─────────── */

.formulario-caja{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:var(--sombra);
}

.campo{margin-bottom:1.15rem;display:flex;flex-direction:column;gap:.45rem}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

label{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;font-weight:600;color:var(--gris);
}
.opcional{color:var(--gris-claro);letter-spacing:.08em;font-weight:400}

input,select,textarea{
  width:100%;
  background:var(--blush-50);
  border:1px solid var(--linea);
  border-radius:14px;
  color:var(--tinta);
  font-family:var(--texto);font-size:.97rem;font-weight:400;
  padding:.85rem 1rem;
  transition:border-color var(--transicion),background var(--transicion);
}
textarea{resize:vertical;line-height:1.7}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blush-300);background:var(--blanco);
}
input.error,textarea.error,select.error{border-color:var(--blush-500);background:var(--blush-100)}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--blush-500) 50%),linear-gradient(135deg,var(--blush-500) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;
}

.consentimiento{
  display:flex;gap:.7rem;align-items:flex-start;
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:.86rem;color:var(--gris);margin:.4rem 0 1.4rem;line-height:1.6;
}
.consentimiento input{width:17px;height:17px;flex:none;margin-top:.2rem;accent-color:var(--blush-500)}
.consentimiento a{color:var(--blush-500)}

.formulario__aviso{margin:1rem 0 0;font-size:.9rem;min-height:1.2em;color:var(--gris)}
.formulario__aviso.ok{color:var(--blush-500);font-weight:500}
.formulario__aviso.ko{color:#C4546F}

.alternativas{
  margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:.7rem;
}
.alternativas p{font-size:.88rem;color:var(--gris-claro);margin:0 0 .3rem}

/* ─────────── Pie ─────────── */

.pie{
  background:var(--blush-50);border-top:1px solid var(--linea);
  padding:3.4rem 0 2rem;
}
.pie__fila{
  display:flex;flex-wrap:wrap;gap:1.6rem;
  justify-content:space-between;align-items:center;
}
.pie__marca{
  font-family:var(--display);font-size:1.4rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tinta);margin:0;
}
.pie__nota{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;font-weight:500;color:var(--gris-claro);margin:.4rem 0 0;
}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:1.6rem}
.pie__enlaces a{
  font-family:var(--texto);text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;font-weight:500;color:var(--tinta-2);text-decoration:none;
}
.pie__enlaces a:hover{color:var(--blush-500)}
.pie__copy{
  margin:2.6rem auto 0;padding-top:1.6rem;border-top:1px solid var(--linea);
  text-align:center;font-size:.76rem;color:var(--gris-claro);
  width:min(100% - 2.5rem,var(--ancho));
}

/* ─────────── WhatsApp flotante ─────────── */

.wa-flotante{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#FFFFFF;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.7);
  transition:transform var(--transicion);
}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:28px;height:28px}

/* ─────────── Animación de entrada ─────────── */

.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ─────────── Adaptación a pantallas pequeñas ─────────── */

@media (max-width:960px){
  .portada__rejilla{grid-template-columns:1fr;gap:3rem}
  .portada__foto{max-width:400px;margin-inline:auto}
  .portada{min-height:auto;padding-top:8rem}
  .portada__bajar{display:none}
  .rejilla-2,.rejilla-2--contacto{grid-template-columns:1fr}
}

@media (max-width:760px){
  .hamburguesa{display:block}
  .nav{border-bottom-color:var(--linea)}
  .nav__enlaces{
    position:absolute;inset:100% 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanco);border-bottom:1px solid var(--linea);
    padding:.5rem 1.25rem 1.4rem;
    box-shadow:0 20px 30px -28px rgba(45,45,45,.6);
    display:none;
  }
  .nav__enlaces.abierto{display:flex}
  .nav__enlaces a{padding:.95rem 0;border-bottom:1px solid var(--linea)}
  .nav__enlaces .boton{margin-top:1rem;border-bottom:none}
  .portada__acciones{flex-direction:column;align-items:stretch}
  .cifras{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .campo-doble{grid-template-columns:1fr}

  /* En vertical, una foto 3/4 a todo el ancho se come media pantalla
     y obliga a hacer scroll solo para pasarla. Aquí van más bajas. */
  .portada__foto img{aspect-ratio:1/1;object-position:center 20%}
  .servicio__foto img{height:250px}
  .galeria figure{flex:0 0 180px}
  .pie__fila{flex-direction:column;align-items:flex-start;text-align:left}
  .sello{left:auto;right:14px;bottom:14px}
}

/* ═══════════════════════════════════════════════════════════
   La portada del móvil, con la foto al lado · 2026-09-25
   Antes se apilaba: el texto entero y la foto debajo, centrada
   y cuadrada para que no se comiera media pantalla. Ahora va al
   lado del titular, que es lo que se ve sin bajar.

   Para partir la portada en piezas sin tocar el HTML, el bloque
   de texto pasa a `display:contents`: sus hijos —rótulo,
   titular, filete, lema, botones y cifras— se vuelven celdas de
   la misma rejilla y se colocan una a una.

   OJO con el titular: «CRISTOBALINA» es larga y en media
   columna no cabe a 9,2vw. Por eso aquí baja a 6,4vw y la foto
   se lleva solo el 34 % del ancho, que es lo justo para que la
   palabra siga entrando en una línea en un móvil de 375 px.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .portada__rejilla{
    grid-template-columns:1fr 34%;
    gap:.7rem 1rem;
    align-items:start;
  }
  .portada__texto{display:contents}

  /* El rótulo cruza las dos columnas: si se queda en la primera,
     la foto reparte su altura sobrante entre las filas que
     abarca y abre un hueco antes del titular. */
  .portada .cejilla{grid-column:1 / -1;grid-row:1}

  .portada__titulo{
    grid-column:1;grid-row:2;
    font-size:clamp(1.3rem,6.4vw,5.1rem);
    margin-bottom:.9rem;
  }
  .portada .regla{grid-column:1;grid-row:3}
  .portada__entrada{grid-column:1 / -1;grid-row:4;margin-top:1.4rem}

  /* La foto va al lado del titular y el filete, y el lema baja a
     ancho completo. Estirada también al alto del lema se perdía un
     37 % de la figura por los lados; así la fila crece hasta el alto
     de la foto y el encuadre es el mismo que en el ordenador. */
  .portada__foto{
    grid-column:2;grid-row:2 / span 2;
    align-self:start;
    max-width:none;margin:0;
  }
  /* El 3/4 de siempre, el mismo encuadre que en el ordenador. */
  .portada__foto img{aspect-ratio:3/4;object-position:center 20%}

  /* Los botones y las cifras, a ancho completo: en un tercio de
     pantalla no cabe ni «Hablar con Cris» ni una cifra con su
     rótulo debajo. */
  .portada__acciones{grid-column:1 / -1;grid-row:5;margin:1.8rem 0 2.4rem}
  .cifras{grid-column:1 / -1;grid-row:6}

  /* El sello, más pequeño: a 34% de ancho el de tamaño normal se
     salía de la foto por los dos lados. */
  .sello{
    left:auto;right:8px;bottom:10px;
    padding:.45rem .7rem;
    font-size:.6rem;letter-spacing:.14em;
    gap:.35rem;
  }
  .sello span{font-size:.5rem;letter-spacing:.18em}
}

/* Por debajo de 340 px no cabe «CRISTOBALINA» al lado de nada:
   vuelve a apilarse, como estaba. */
@media (max-width:339px){
  .portada__rejilla{display:block}
  .portada__texto{display:block}
  .portada__foto{margin-top:2.4rem;max-width:400px;margin-inline:auto}
  .portada__foto img{height:auto;aspect-ratio:1/1}
}