/* ═══════════════════════════════════════════════════
   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}
.marca__logo{
  width:46px;height:46px;flex:none;border-radius:50%;
  object-fit:cover;
}
.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)}

/* ─────────── 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)}

/* ─────────── 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}
}