/* ═══════════════════════════════════════════════════════════
   ASTeam · Alejandra Sanchis · asesorías online

   Magenta y crema, Playfair Display + Montserrat. La paleta es
   la misma que la de su landing de la app (infinitecoach.es/asteam):
   fondo crema #FBF7F4, acento #C43E92 y coral #D9524F para los
   ahorros. La estructura y la hoja vienen de la web de Raquel
   Padial, así que se mantiene, se publica y se toca igual.

   OJO con los nombres de las variables: siguen diciendo «rojo» y
   «brasa» porque la hoja nació roja en el primer proyecto que la
   usó. No se han renombrado para no tocar mil líneas por un
   nombre. Lo que pintan hoy es esto:

     --rojo        magenta de los botones y los rótulos
     --rojo-hondo  el magenta del hover
     --rojo-claro  el rosa suave de los acentos
     --brasa       rosa claro, para lo que va sobre fondo oscuro
     --coral       el coral de los avisos de ahorro
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Claros */
  --blanco:#FFFFFF;
  --crema:#FBF7F4;
  --arena:#F8EFF5;
  --arena-2:#EADCE5;

  /* Acentos (los magentas de ASTeam) */
  --rojo:#C43E92;
  --rojo-hondo:#A32B77;
  --rojo-claro:#FCE9F6;
  --brasa:#F0A8D4;
  --coral:#D9524F;
  --coral-claro:#FDEDEC;
  --coral-linea:#F3CBC9;
  --linea-roja:linear-gradient(90deg,#FCE9F6,#F0A8D4,#C43E92);

  /* Oscuros: casi negro, con una pizca de magenta dentro */
  --negro:#241A21;
  --carbon:#31242C;

  /* Tintas */
  --tinta:#23181F;
  --tinta-2:#4B3D45;
  --gris:#8C7F87;
  --linea:#EFE4E9;

  /* Tipografías: las dos que especifica su maqueta */
  --display:"Playfair Display",Georgia,serif;
  --texto:"Montserrat",-apple-system,Segoe UI,sans-serif;

  --curva:22px;
  --sombra:0 28px 60px -42px rgba(76,40,62,.5);
  --sombra-suave:0 18px 40px -34px rgba(76,40,62,.34);
  --transicion:.35s cubic-bezier(.22,1,.36,1);

  /* Lo que separa el contenedor del borde de la pantalla. */
  --sangria:max(1.3rem,(100vw - 1180px) / 2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}

body{
  font-family:var(--texto);
  font-weight:300;
  color:var(--tinta-2);
  background:var(--crema);
  line-height:1.75;
  font-size:1.07rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.lista-limpia{list-style:none}

.contenedor{width:min(1180px,100% - 2.6rem);margin-inline:auto}

:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
::selection{background:var(--rojo-claro);color:var(--tinta)}

/* ─────────── Piezas comunes ─────────── */

.cejilla{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--rojo);
  margin-bottom:1.1rem;
}

h1,.titulo{
  font-family:var(--display);
  font-weight:400;
  color:var(--tinta);
  line-height:1.1;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.5rem,5.8vw,4.5rem);letter-spacing:-.025em}
.titulo{font-size:clamp(1.95rem,4.2vw,3.2rem);letter-spacing:-.02em}
h1 em,.titulo em{font-style:italic;color:var(--rojo)}

.entradilla{max-width:58ch;margin-top:1.3rem;font-size:1.09rem}

.regla{
  width:74px;height:2px;border:0;border-radius:2px;
  background:var(--linea-roja);
  margin:1.5rem 0 1.6rem;
}

.destacado{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--rojo);
  margin:1.8rem 0;
}

.nota{
  margin-top:2.2rem;
  font-size:.96rem;
  color:var(--gris);
  text-align:center;
}

.cabecera-seccion{max-width:42rem;margin-bottom:3.2rem}

/* ─────────── Barra de lectura ─────────── */

.progreso{
  position:fixed;top:0;left:0;z-index:60;
  height:3px;width:0;
  background:var(--linea-roja);
  border-radius:0 3px 3px 0;
  transition:width .12s linear;
}

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

.boton{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.92rem 2rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:transform var(--transicion),background var(--transicion),color var(--transicion),border-color var(--transicion),box-shadow var(--transicion);
}
.boton:hover{transform:translateY(-2px)}
.boton::after{
  content:"→";
  margin-left:.55rem;
  letter-spacing:0;
  font-size:.95rem;line-height:1;
  transition:transform var(--transicion);
}
.boton:hover::after{transform:translateX(4px)}
.boton--sin-flecha::after{content:none}

.boton--rojo{
  background:var(--rojo);color:var(--blanco);
  box-shadow:var(--sombra-suave);
}
.boton--rojo:hover{background:var(--rojo-hondo)}

.boton--linea{border-color:var(--rojo);color:var(--rojo-hondo)}
.boton--linea:hover{background:var(--rojo-claro)}

.seccion--oscura .boton--linea{border-color:rgba(255,255,255,.45);color:var(--blanco)}
.seccion--oscura .boton--linea:hover{background:rgba(255,255,255,.1);border-color:var(--blanco)}

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

.nav{
  position:sticky;top:0;z-index:50;
  padding:1.1rem 0;
  transition:background var(--transicion),box-shadow var(--transicion),padding var(--transicion);
}
.nav--posada{
  background:rgba(251,247,244,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--linea);
  padding:.65rem 0;
}

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

/* La marca, en letra, hasta que pase el archivo del logotipo.
   Imita su lockup: el nombre en versales muy separadas y el
   oficio debajo, más pequeño y más separado todavía. */
.marca{display:flex;flex-direction:column;align-items:center;line-height:1}
.marca__nombre{
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-indent:.34em;
  color:var(--tinta);
}
.marca__oficio{
  font-size:.52rem;
  font-weight:500;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--gris);
  margin-top:.5rem;
}

/* El logotipo, cuando esté el archivo. Mientras no lo esté, el
   `onerror` del HTML lo quita y deja el nombre en letra: por eso
   la marca esconde el texto solo si la imagen ha cargado. */
.marca__logo{height:4rem;width:auto;transition:height var(--transicion)}
.nav--posada .marca__logo{height:3rem}

@media (max-width:620px){
  .marca__logo{height:3.2rem}
  .nav--posada .marca__logo{height:2.6rem}
}
.marca--con-logo .marca__nombre,
.marca--con-logo .marca__oficio{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.nav__enlaces{display:flex;align-items:center;gap:1.7rem}
.nav__enlaces a{
  font-size:.8rem;font-weight:500;letter-spacing:.04em;
  color:var(--tinta-2);
  transition:color var(--transicion);
}
.nav__enlaces a:hover{color:var(--rojo)}

.nav__boton{padding:.65rem 1.4rem}

.nav__hamburguesa{display:none;width:42px;height:42px;position:relative}
.nav__hamburguesa span,
.nav__hamburguesa span::before,
.nav__hamburguesa span::after{
  position:absolute;left:9px;
  width:24px;height:1.6px;
  background:var(--tinta);
  transition:var(--transicion);
}
.nav__hamburguesa span{top:20px}
.nav__hamburguesa span::before{content:"";top:-7px;left:0}
.nav__hamburguesa span::after{content:"";top:7px;left:0}
.nav__hamburguesa[aria-expanded="true"] span{background:transparent}
.nav__hamburguesa[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__hamburguesa[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

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

.portada{
  padding:3.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse 60% 55% at 85% 5%,var(--arena),transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 60%,var(--rojo-claro),transparent 62%);
}

.portada__rejilla{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:4rem;align-items:center;
}

.portada__texto{margin-top:1.5rem;max-width:52ch}
.portada__botones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.credenciales{
  margin-top:3rem;
  display:grid;gap:.7rem;
  border-top:1px solid var(--linea);
  padding-top:1.8rem;
}
.credenciales li{display:flex;align-items:baseline;gap:.8rem;font-size:1rem}
.credenciales span{font-family:var(--display);font-size:.82rem;color:var(--rojo)}

/* ─────────── Fotos y huecos ─────────── */

/* Las fotos se enseñan ENTERAS: nada de recortarlas a un
   formato fijo. Vienen verticales de Instagram y se respetan
   sus proporciones; el tope de ancho evita que se amplíen
   tanto que se vean blandas. */
.foto{
  position:relative;z-index:1;
  display:block;
  width:100%;
  max-width:24rem;
  height:auto;
  margin-inline:auto;
  border-radius:var(--curva);
  background:var(--arena);
  box-shadow:var(--sombra);
}

/* El marco de línea se ciñe a la foto, no a la columna. */
.marco{position:relative;width:fit-content;max-width:100%;margin-inline:auto}
.marco::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--rojo);
  border-radius:var(--curva);
  z-index:0;
}

/* Mientras no haya fotos suyas: el hueco marcado, no una foto
   de banco de imágenes. Se quita solo al poner el <img>. */
.hueco-foto{
  position:relative;z-index:1;
  display:grid;place-items:center;
  border:2px dashed var(--brasa);
  border-radius:var(--curva);
  background:var(--blanco);
  color:var(--rojo-hondo);
  text-align:center;
  padding:2rem;
}
.hueco-foto--retrato{aspect-ratio:4/5}
.hueco-foto--cuadrada{aspect-ratio:1/1}
.hueco-foto--ancha{aspect-ratio:3/4}
.hueco-foto span{display:block;font-family:var(--display);font-size:1.1rem;line-height:1.3}
.hueco-foto small{display:block;margin-top:.5rem;font-size:.78rem;line-height:1.6;color:var(--gris)}
.hueco-foto__icono{
  font-family:var(--display);
  font-size:1.7rem;
  color:var(--brasa);
  margin-bottom:.6rem;
}

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

.seccion{padding:7.5rem 0}
.seccion--blanca{background:var(--blanco)}
.seccion--arena{background:var(--arena)}

.seccion--oscura{background:var(--negro);color:#E3D4DD}
.seccion--oscura .titulo{color:var(--blanco)}
.seccion--oscura .titulo em{color:var(--brasa)}
.seccion--oscura .cejilla{color:var(--brasa)}

/* ─────────── La cinta con sus frases ─────────── */

.cinta{
  display:flex;
  background:var(--negro);
  color:var(--blanco);
  padding:1.6rem 0;
  overflow:hidden;
  user-select:none;
}
.cinta__pista{
  display:flex;align-items:center;gap:2.8rem;
  flex:0 0 auto;
  padding-right:2.8rem;
  animation:desfile 44s linear infinite;
}
.cinta__pista span{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.3rem,2.3vw,1.95rem);
  line-height:1.2;
  white-space:nowrap;
}
.cinta__pista i{font-style:normal;font-size:.8rem;color:var(--brasa)}

@keyframes desfile{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* ─────────── Quién soy ─────────── */

.historia{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
.historia p+p{margin-top:1rem}
.historia strong{color:var(--tinta);font-weight:600}

/* ─────────── Objetivos ─────────── */

.rejilla{display:grid;gap:1.3rem}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}

.objetivo{
  display:block;
  padding:1.9rem 1.7rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion),border-color var(--transicion);
}
.objetivo:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave);border-color:var(--brasa)}
.objetivo__num{
  display:block;
  font-family:var(--display);
  font-size:2.5rem;line-height:1;
  color:var(--brasa);
  opacity:.5;
  margin-bottom:.8rem;
  font-variant-numeric:tabular-nums;
}
.objetivo h3{
  font-family:var(--texto);
  font-size:1.1rem;font-weight:600;color:var(--tinta);
  line-height:1.35;
}
.objetivo--otro{background:var(--rojo-claro);border-color:var(--brasa)}
.objetivo--otro .objetivo__num{opacity:.8}

.bloqueos{
  margin-top:3.2rem;
  padding:2.4rem;
  background:var(--blanco);
  border-left:4px solid var(--rojo);
  border-radius:var(--curva);
  box-shadow:var(--sombra-suave);
}
.bloqueos__titulo{
  font-family:var(--display);
  font-size:1.35rem;color:var(--tinta);
  margin-bottom:1rem;
}
.bloqueos li{
  font-family:var(--display);
  font-weight:400;font-style:italic;
  font-size:1.22rem;
  letter-spacing:-.012em;
  color:var(--rojo-hondo);
  line-height:1.45;
}
.bloqueos__pie{margin-top:1.4rem;font-size:1.02rem}

/* ─────────── Metodología: los tres pilares ─────────── */

.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}

.pilar{
  position:relative;overflow:hidden;
  padding:2.4rem 2rem;
  background:var(--carbon);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--curva);
  transition:transform var(--transicion),border-color var(--transicion);
}
.pilar:hover{transform:translateY(-4px);border-color:var(--brasa)}
.pilar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--linea-roja);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicion);
}
.pilar:hover::before{transform:scaleX(1)}
.pilar__num{
  font-family:var(--display);
  font-size:.8rem;letter-spacing:.2em;
  color:var(--brasa);
}
.pilar h3{
  font-family:var(--display);font-weight:400;
  font-size:1.5rem;color:var(--blanco);
  line-height:1.2;
  margin:.7rem 0 .8rem;
}
.pilar p{font-size:1rem;color:#CFC2C9}

.metodologia__frase{
  margin-top:3.2rem;
  padding:2.6rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--curva);
  text-align:center;
}
.metodologia__frase p{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.45rem,3vw,2.2rem);
  line-height:1.3;
  color:var(--blanco);
}
.metodologia__frase span{color:var(--brasa)}

/* ─────────── Pasos ─────────── */

.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}

.paso{
  position:relative;overflow:hidden;
  padding:2rem 1.6rem;
  background:var(--blanco);
  border-radius:var(--curva);
  border:1px solid var(--linea);
}
.paso::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--linea-roja);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicion);
}
.paso:hover::before{transform:scaleX(1)}
.paso__num{
  display:block;
  font-family:var(--display);
  font-size:2.4rem;line-height:1;
  color:var(--brasa);opacity:.55;
  margin-bottom:.7rem;
  font-variant-numeric:tabular-nums;
}
.paso h3{
  font-family:var(--display);font-weight:400;
  font-size:1.25rem;color:var(--tinta);
  margin-bottom:.5rem;
}
.paso p{font-size:.99rem}

/* ─────────── Planes ─────────── */

.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:2.4rem 2rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.plan--destacado{
  background:var(--negro);
  border-color:var(--negro);
  box-shadow:0 34px 60px -44px rgba(36,26,33,.85);
}
.plan__cinta{
  position:absolute;top:-.8rem;left:2rem;
  padding:.2rem .9rem;
  background:var(--rojo);color:var(--blanco);
  border-radius:999px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.plan h3{
  font-family:var(--display);font-weight:400;
  font-size:1.5rem;color:var(--tinta);
  margin-bottom:.4rem;
}
.plan__resumen{
  font-size:.95rem;color:var(--gris);
  padding-bottom:1.2rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--linea);
}
.plan__lista{display:grid;gap:.7rem;font-size:1rem}
.plan__lista li{padding-left:1.3rem;position:relative}
.plan__lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--brasa);
}
.plan__boton{margin-top:1.8rem;align-self:flex-start}

.plan--destacado h3{color:var(--blanco)}
.plan--destacado .plan__resumen{color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.14)}
.plan--destacado .plan__lista{color:#DDD0D8}
.plan--destacado .boton--linea{border-color:rgba(255,255,255,.45);color:var(--blanco)}
.plan--destacado .boton--linea:hover{background:rgba(255,255,255,.1);border-color:var(--blanco)}

.precio-pendiente{
  margin-top:2.6rem;
  padding:1.6rem 1.9rem;
  background:var(--arena);
  border:1px dashed var(--brasa);
  border-radius:var(--curva);
  text-align:center;
  font-size:1rem;
}
.precio-pendiente strong{color:var(--tinta);font-weight:600}

/* ─────────── Transformaciones ─────────── */

.tira{margin-top:.4rem}
.tira__pista{
  display:flex;gap:1.1rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--sangria);
  padding:.5rem var(--sangria) 1.6rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tira__pista::-webkit-scrollbar{display:none}
.tira__pista li{flex:0 0 auto;scroll-snap-align:start;width:clamp(14rem,24vw,19rem)}
.tira__pista img{
  width:100%;aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--curva);
  background:var(--arena-2);
  box-shadow:var(--sombra-suave);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.tira__pista img:hover{transform:translateY(-5px);box-shadow:var(--sombra)}

.tira__mandos{display:flex;gap:.7rem;margin-top:.4rem}
.tira__flecha{
  display:grid;place-items:center;
  width:3.1rem;height:3.1rem;
  background:var(--blanco);
  border:1px solid var(--rojo);
  border-radius:50%;
  color:var(--rojo-hondo);
  font-size:1.15rem;line-height:1;
  transition:background var(--transicion),border-color var(--transicion),transform var(--transicion);
}
.tira__flecha:hover{background:var(--rojo-claro);transform:translateY(-2px)}
.seccion--oscura .tira__flecha{background:transparent;border-color:rgba(255,255,255,.4);color:var(--blanco)}
.seccion--oscura .tira__flecha:hover{background:rgba(255,255,255,.12)}

/* El hueco de una transformación, con su línea en medio. */
.antes-despues{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  aspect-ratio:4/5;
  border:2px dashed var(--brasa);
  border-radius:var(--curva);
  background:var(--blanco);
  overflow:hidden;
}
.antes-despues div{
  display:grid;place-items:center;
  font-family:var(--display);
  font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brasa);
}
.antes-despues div+div{border-left:2px dashed var(--brasa)}

/* ─────────── Feedbacks ─────────── */

.feedbacks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}

.feedback{
  display:flex;flex-direction:column;
  padding:2rem 1.8rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  box-shadow:var(--sombra-suave);
}
.feedback__comilla{
  font-family:var(--display);
  font-size:2.6rem;line-height:.6;
  color:var(--brasa);
  margin-bottom:1rem;
}
.feedback p{
  font-family:var(--display);
  font-weight:400;font-style:italic;
  font-size:1.18rem;line-height:1.5;
  color:var(--tinta);
}
.feedback cite{
  margin-top:1.2rem;
  font-family:var(--texto);font-style:normal;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);
}
.feedback--hueco{
  border-style:dashed;border-color:var(--brasa);
  box-shadow:none;background:var(--arena);
}
.feedback--hueco p{font-style:normal;font-size:1rem;font-family:var(--texto);color:var(--tinta-2)}

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

.marcas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}

.marca-tarjeta{
  display:flex;flex-direction:column;
  padding:2.2rem 2rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.marca-tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-suave)}
.marca-tarjeta h3{
  font-family:var(--display);font-weight:400;
  font-size:1.6rem;color:var(--tinta);
}
.marca-tarjeta__papel{
  font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rojo);
  margin-bottom:.4rem;
}
.marca-tarjeta p{margin-top:.7rem;font-size:1rem}
.marca-tarjeta__pie{margin-top:auto;padding-top:1.6rem}

.codigo{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.7rem 1.2rem;
  background:var(--negro);color:var(--blanco);
  border-radius:999px;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;
  transition:background var(--transicion),transform var(--transicion);
}
.codigo:hover{background:var(--rojo);transform:translateY(-2px)}
.codigo strong{font-weight:700;letter-spacing:.24em}

/* ─────────── Contacto ─────────── */

.contacto{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}

.vias{margin-top:2.6rem;display:grid;gap:.8rem}
.via{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;
  border:1px solid rgba(217,82,79,.35);
  border-radius:999px;
  transition:border-color var(--transicion),background var(--transicion);
}
.via:hover{border-color:var(--brasa);background:rgba(217,82,79,.1)}
.via--principal{border-color:var(--brasa);background:rgba(217,82,79,.14)}
.via__nombre{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brasa)}
.via__dato{font-size:1rem;color:var(--blanco)}

.formulario{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(217,82,79,.3);
  border-radius:var(--curva);
  padding:2.2rem;
}
.campo{margin-bottom:1.1rem}
.campo label{
  display:block;margin-bottom:.45rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brasa);
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(217,82,79,.3);
  border-radius:12px;
  color:var(--blanco);
  font:inherit;font-size:.95rem;
  transition:border-color var(--transicion);
}
.campo textarea{min-height:120px;resize:vertical}
.campo input::placeholder,
.campo textarea::placeholder{color:rgba(220,210,207,.5)}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{border-color:var(--brasa);outline:none}
.campo select option{color:var(--tinta)}

.formulario__boton{width:100%;margin-top:.6rem}
.formulario__aviso{
  margin-top:1rem;
  font-size:.8rem;
  color:rgba(220,210,207,.75);
  text-align:center;
}

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

.pie{
  background:var(--blanco);
  border-top:1px solid var(--linea);
  padding:2.2rem 0;
  font-size:.85rem;
}
.pie__caja{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.pie strong{color:var(--tinta);font-weight:600}
.pie__creditos{color:var(--gris)}
.pie__legal a{color:var(--rojo-hondo);text-decoration:underline;text-underline-offset:3px}

/* ─────────── Aviso flotante ─────────── */

.nube{
  position:fixed;left:50%;bottom:1.6rem;z-index:80;
  transform:translate(-50%,120%);
  max-width:min(92vw,30rem);
  padding:.85rem 1.4rem;
  background:var(--negro);
  color:#F7E4F0;
  border-radius:999px;
  font-size:.85rem;
  text-align:center;
  box-shadow:var(--sombra);
  opacity:0;
  transition:transform var(--transicion),opacity var(--transicion);
}
.nube.visible{transform:translate(-50%,0);opacity:1}

/* ─────────── Apariciones ─────────── */

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

/* ─────────── Páginas legales ─────────── */

.legal{padding-top:9rem}
.legal__caja{width:min(42rem,100% - 2.6rem)}
.legal__fecha{font-size:.88rem;color:var(--gris);margin-top:1.4rem}
.legal__indice{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 3.4rem}
.legal__indice a{
  padding:.45rem 1.1rem;
  border:1px solid var(--linea);
  border-radius:999px;
  font-size:.82rem;color:var(--rojo-hondo);
  transition:background var(--transicion),border-color var(--transicion);
}
.legal__indice a:hover{background:var(--arena);border-color:var(--brasa)}
.legal section+section{margin-top:3.4rem}
.legal h2{
  font-family:var(--display);font-weight:400;
  font-size:1.7rem;color:var(--tinta);line-height:1.2;
  padding-bottom:.9rem;margin-bottom:1.4rem;
  border-bottom:1px solid var(--linea);
}
.legal h3{
  font-family:var(--texto);font-weight:600;
  font-size:1rem;color:var(--tinta);
  margin-top:1.8rem;margin-bottom:.5rem;
}
.legal p+p{margin-top:.9rem}
.legal p{font-size:.97rem}
.legal strong{color:var(--tinta);font-weight:600}
.legal p a,.legal dd a{color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.legal__datos{
  display:grid;gap:.7rem;
  margin:1.4rem 0;
  padding:1.6rem 1.8rem;
  background:var(--crema);
  border:1px solid var(--linea);
  border-radius:var(--curva);
}
.legal__datos>div{display:grid;grid-template-columns:11rem 1fr;gap:1rem}
.legal__datos dt{
  font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo);padding-top:.25rem;
}
.legal__datos dd{font-size:.96rem;color:var(--tinta-2)}
.legal__pendiente{color:var(--rojo);font-style:italic}
.legal__volver{margin-top:3.6rem}

/* ─────────── Pantallas pequeñas ─────────── */

@media (max-width:1100px){
  .portada__rejilla,.historia,.contacto{grid-template-columns:1fr;gap:2.6rem}
  .historia .marco{max-width:26rem}
  .pasos,.pilares,.feedbacks{grid-template-columns:repeat(2,1fr)}
  .rejilla--3{grid-template-columns:repeat(2,1fr)}
  .seccion{padding:4.4rem 0}

  .nav__hamburguesa{display:block}
  .nav__boton{display:none}

  .nav__enlaces{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    gap:.2rem;
    padding:0 1.6rem;
    max-height:0;overflow:hidden;
    background:var(--blanco);
    border-bottom:1px solid transparent;
    transition:max-height var(--transicion),padding var(--transicion);
  }
  .nav__enlaces.abierto{
    max-height:28rem;
    padding:1.2rem 1.6rem 1.6rem;
    border-bottom-color:var(--linea);
  }
  .nav__enlaces a{padding:.55rem 0;font-size:.95rem}
}

@media (max-width:980px){
  .rejilla--2,.marcas{grid-template-columns:1fr}
}

@media (max-width:620px){
  .rejilla--3,.pasos,.pilares,.feedbacks{grid-template-columns:1fr}
  .bloqueos,.formulario,.metodologia__frase{padding:1.6rem}
  .portada__botones .boton{width:100%}
  .marco::before{inset:10px -10px -10px 10px}
  .cinta{padding:1.2rem 0}
  .cinta__pista{gap:1.8rem;padding-right:1.8rem}
  .tira__pista li{width:74vw}
  .tira__mandos{display:none}
  .legal{padding-top:7rem}
  .legal__datos{padding:1.3rem}
  .legal__datos>div{grid-template-columns:1fr;gap:.15rem}
  .legal__volver .boton{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .boton:hover,.objetivo:hover,.plan:hover,.pilar:hover,
  .marca-tarjeta:hover,.tira__pista img:hover,.tira__flecha:hover,
  .codigo:hover{transform:none}
  .cinta__pista{animation:none}
  .progreso{transition:none}
  .boton:hover::after,.paso:hover::before,.pilar:hover::before{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   Blanco y negro · 2026-09-24
   Al quitar el color, lo que antes era rojo sobre negro se
   quedaba en negro sobre negro. Sobre fondo oscuro el acento
   se invierte: lo que era relleno pasa a ser blanco.
   ═══════════════════════════════════════════════════════════ */

.seccion--oscura .boton--rojo,
.plan--destacado .boton--rojo{
  background:var(--blanco);
  color:var(--negro);
  box-shadow:none;
}
.seccion--oscura .boton--rojo:hover,
.plan--destacado .boton--rojo:hover{background:var(--arena)}

.plan--destacado .plan__cinta{background:var(--blanco);color:var(--negro)}
.plan--destacado .plan__lista li::before{background:var(--brasa)}

.codigo:hover{background:var(--carbon)}

/* Las transformaciones vienen a 9/16 de Instagram: se enseñan
   enteras, con su proporción, no recortadas a 4/5. */
.tira--alta li{width:clamp(12rem,20vw,16rem)}
.tira--alta img{aspect-ratio:9/16;object-fit:contain}

/* El rótulo de crédito bajo una tira. */
.credito{
  margin-top:1.4rem;
  font-size:.86rem;
  color:var(--brasa);
}

@media (max-width:620px){
  .tira--alta li{width:66vw}
}

/* ═══════════════════════════════════════════════════════════
   Menos blanco · 2026-09-24
   La primera versión se quedaba pálida: portada en crema,
   fotos pequeñas dejando huecos vacíos al lado y sietemil
   píxeles de aire entre secciones. Aquí entra el negro de
   verdad, que es la otra mitad de su logotipo.
   ═══════════════════════════════════════════════════════════ */

/* La cabecera deja de ser transparente: debajo hay negro. */
.nav{
  background:var(--crema);
  border-bottom:1px solid transparent;
}
.nav--posada{border-bottom-color:var(--linea)}

/* ─────────── La portada, en negro ─────────── */

.portada{
  background:var(--negro);
  color:#C9BCC4;
  padding:4.6rem 0 5rem;
}
.portada h1{color:var(--blanco)}
.portada h1 em{color:var(--brasa)}
.portada .cejilla{color:var(--brasa)}
.portada .credenciales{border-top-color:rgba(255,255,255,.15)}
.portada .credenciales span{color:var(--brasa)}
.portada .boton--rojo{background:var(--blanco);color:var(--negro);box-shadow:none}
.portada .boton--rojo:hover{background:var(--arena)}
.portada .boton--linea{border-color:rgba(255,255,255,.38);color:var(--blanco)}
.portada .boton--linea:hover{background:rgba(255,255,255,.1);border-color:var(--blanco)}
.portada .marco::before{border-color:rgba(255,255,255,.32)}

/* La cinta y la portada son el mismo bloque negro: solo las
   separa un pelo de línea. */
.cinta{border-top:1px solid rgba(255,255,255,.13)}

/* ─────────── Fotos con peso ───────────
   Un poco más grandes, y las que iban sueltas en mitad de una
   columna clara van ahora sobre una plancha negra, para que no
   quede medio ancho de página en blanco a su lado. */

.foto{max-width:26rem}

.marco--plancha{
  width:auto;
  padding:1.7rem;
  background:var(--negro);
  border-radius:var(--curva);
}
.marco--plancha::before{content:none}
.marco--plancha .foto{box-shadow:none}

/* Las secciones «blancas» dejan de ser blanco puro: el blanco
   se reserva para las tarjetas, que así sí destacan. */
.seccion--blanca{background:var(--crema)}

/* ─────────── Menos aire ─────────── */

.seccion{padding:5.6rem 0}
.cabecera-seccion{margin-bottom:2.6rem}
.historia,.portada__rejilla{gap:3.2rem}
.contacto{gap:3.2rem}

@media (max-width:1100px){
  .seccion{padding:3.8rem 0}
  .marco--plancha{padding:1.1rem;max-width:30rem}
}

@media (max-width:620px){
  .portada{padding:2.6rem 0 3.4rem}
}

/* ═══════════════════════════════════════════════════════════
   El oscuro, más suave · 2026-09-24
   El negro puro resultó demasiado duro. Las secciones oscuras
   pasan a un grafito cálido (`--negro:#2C2028`), que sigue
   haciendo de contrapeso sin cortar la página en dos. Sobre
   ese fondo más claro, el gris de los rótulos se sube un punto
   para que se sigan leyendo.
   ═══════════════════════════════════════════════════════════ */

.seccion--oscura .cejilla,
.portada .cejilla,
.pilar__num,
.credito{color:#F6C5E3}

.portada .credenciales span{color:#F6C5E3}

/* ═══════════════════════════════════════════════════════════
   Párrafos estandarizados · 2026-09-24
   La hoja había ido acumulando tamaños sueltos: 0,96 · 0,97 ·
   0,99 · 1 · 1,02 · 1,07 y 1,09 rem, casi todos indistinguibles
   entre sí pero suficientes para que el texto no cuadrara de
   una sección a otra. Aquí quedan CUATRO tamaños y uno solo de
   interlínea, separación y medida.

   Al escribir secciones nuevas: usar estas variables y no
   volver a poner un font-size a ojo en un párrafo.
   ═══════════════════════════════════════════════════════════ */

:root{
  --p-entrada:1.1rem;   /* las entradillas que abren sección */
  --p-cuerpo:1.04rem;   /* el texto corrido                  */
  --p-tarjeta:.97rem;   /* lo que va dentro de una tarjeta   */
  --p-pie:.86rem;       /* notas, créditos y avisos          */

  --p-interlinea:1.72;
  --p-salto:1rem;       /* separación entre párrafos seguidos */
  --p-medida:64ch;      /* ancho máximo de lectura            */
}

body{font-size:var(--p-cuerpo);line-height:var(--p-interlinea)}

/* Dos párrafos seguidos se separan siempre igual, estén donde
   estén. */
p+p,
.historia p+p,
.legal p+p{margin-top:var(--p-salto)}

/* La medida de lectura solo hace falta donde el contenedor es
   ancho de verdad: la portada y las entradillas, que cruzan la
   página entera. Dentro de una columna o de una caja estrecha
   el párrafo ya viene medido, y volver a limitarlo solo deja un
   vacío a la derecha que hace que el texto parezca arrinconado
   a la izquierda. */
.portada__texto,
.entradilla{max-width:var(--p-medida)}

.historia p,
.bloqueos__pie,
.legal p,
.paso p,
.pilar p,
.marca-tarjeta p{max-width:none}

/* 1 · Entradillas */
.entradilla{font-size:var(--p-entrada)}

/* 2 · Texto corrido */
.portada__texto,
.historia p,
.bloqueos__pie{font-size:var(--p-cuerpo)}

/* 3 · Dentro de tarjetas */
.paso p,
.pilar p,
.plan__resumen,
.plan__lista,
.marca-tarjeta p,
.feedback--hueco p,
.precio-pendiente,
.credenciales li,
.legal p{font-size:var(--p-tarjeta)}

/* 4 · Pies, notas y créditos */
.nota,
.credito,
.formulario__aviso,
.pie{font-size:var(--p-pie)}

/* Quedan cuatro objetivos en una rejilla de tres, así que el
   último —«cuéntame el tuyo»— ocupa la segunda fila entera en
   vez de dejar media fila vacía.

   A dos columnas NO hay que ensancharlo: tres objetivos más él
   llenan justo dos filas, y si abarcara dos columnas se iría a
   una tercera fila dejando un hueco al lado del tercero. */
.rejilla--3 .objetivo--otro{grid-column:span 3}

@media (max-width:1100px){
  .rejilla--3 .objetivo--otro{grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════
   Párrafos justificados · 2026-09-24
   A los dos lados, con partición de palabras activada. Sin
   `hyphens` el justificado en español abre ríos de espacio
   entre palabras; con él, y con la página en `lang="es"`, el
   navegador corta por sílabas y las líneas quedan parejas.

   Se justifica el texto corrido. NO se tocan los rótulos, los
   botones, las listas de los planes ni las frases en cursiva:
   ahí el justificado solo estorba.
   ═══════════════════════════════════════════════════════════ */

/* NINGUNA palabra se parte. La partición se probó el
   2026-09-24 para que el justificado apretara mejor, y lo que
   salió fue «transfor-mar» y «hábi-tos» en mitad del párrafo.
   Fuera: es más feo un guion a mitad de palabra que un hueco
   algo más ancho entre dos palabras. */
p,li,.entradilla,.precio-pendiente{
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

/* Se justifica solo el texto de línea larga. Dentro de una
   tarjeta la línea es tan corta que, sin partición, el
   justificado abriría huecos enormes: ahí va a bandera. */
.portada__texto,
.entradilla,
.historia p,
.bloqueos__pie,
.legal p{
  text-align:justify;
  text-justify:inter-word;
}

/* La última línea de un párrafo justificado no se estira. */
.portada__texto,
.entradilla,
.historia p,
.bloqueos__pie,
.legal p{text-align-last:left}

/* En el móvil la columna es tan estrecha que ni con líneas
   largas compensa: todo a bandera. */
@media (max-width:760px){
  .portada__texto,
  .entradilla,
  .historia p,
  .bloqueos__pie,
  .legal p{text-align:left}
}

/* ═══════════════════════════════════════════════════════════
   Más visual · 2026-09-24
   Cuatro cosas, ninguna de adorno:
     · la tira de Instagram, que llena de foto la mitad baja;
     · los titulares, más grandes y más apretados;
     · las fotos, que se acercan un punto al pasar por encima;
     · las tarjetas de una misma rejilla, que aparecen en
       cascada en vez de todas a la vez.
   ═══════════════════════════════════════════════════════════ */

/* ─────────── Titulares con más presencia ─────────── */

h1{font-size:clamp(2.7rem,6.4vw,5.2rem);letter-spacing:-.035em}
.titulo{font-size:clamp(2.1rem,4.8vw,3.7rem);letter-spacing:-.03em}
.cabecera-seccion{max-width:46rem}

/* ─────────── Las fotos respiran al pasar por encima ─────────── */

.marco{overflow:visible}
.foto{transition:transform var(--transicion)}
.marco:hover .foto{transform:scale(1.015)}

/* En las tiras la foto NO se acerca: para que un `scale` no se
   saliera habría que recortar con `overflow:hidden`, y estas
   fotos van enteras. Se levantan, que es lo mismo pero sin
   cortar nada. */
.tira__pista li:hover img{transform:translateY(-5px)}

/* `.tira--natural` —una tira de fotos con proporciones
   distintas, cuadrada por alto— se quitó el 2026-09-24 junto
   con la sección «En Instagram» para la que se hizo. Si alguna
   vez vuelve una tira de fotos mezcladas, estaba así:
     .tira--natural li{width:auto}
     .tira--natural img{aspect-ratio:auto;height:clamp(17rem,30vw,25rem);
                        width:auto;max-width:none;object-fit:contain} */

/* ─────────── El pie de una tira ─────────── */

.tira__pie{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
  margin-top:.4rem;
}
.tira__pie .tira__mandos{margin-top:0}

/* ─────────── Aparición en cascada ─────────── */

.rejilla>.reveal:nth-child(2),
.pilares>.reveal:nth-child(2),
.pasos>.reveal:nth-child(2),
.feedbacks>.reveal:nth-child(2),
.marcas>.reveal:nth-child(2){transition-delay:.09s}

.rejilla>.reveal:nth-child(3),
.pilares>.reveal:nth-child(3),
.pasos>.reveal:nth-child(3),
.feedbacks>.reveal:nth-child(3){transition-delay:.18s}

.rejilla>.reveal:nth-child(4),
.pasos>.reveal:nth-child(4){transition-delay:.27s}

.rejilla>.reveal:nth-child(5){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .marco:hover .foto,
  .tira__pista li:hover img{transform:none}
  .reveal{transition-delay:0s !important}
}

/* ═══════════════════════════════════════════════════════════
   La portada, clara · 2026-09-25
   Se puso oscura el 2026-09-24, cuando la web era blanca y
   negra y se quedaba pálida. Con la paleta morada sobra: en su
   maqueta la portada es clara, con la foto a la derecha. Esto
   deshace aquel bloque, que está más arriba y sigue ahí por si
   alguna vez hay que volver.
   ═══════════════════════════════════════════════════════════ */

.portada{
  background:
    radial-gradient(ellipse 65% 60% at 88% 8%,var(--rojo-claro),transparent 68%),
    radial-gradient(ellipse 55% 50% at 0% 70%,var(--arena),transparent 66%),
    var(--crema);
  color:var(--tinta-2);
  padding:4.2rem 0 5rem;
}
.portada h1{color:var(--tinta)}
.portada h1 em{color:var(--rojo)}
.portada .cejilla{color:var(--rojo)}

/* Los botones vuelven a ser morados, no blancos invertidos. */
.portada .boton--rojo{
  background:var(--rojo);color:var(--blanco);
  box-shadow:var(--sombra-suave);
}
.portada .boton--rojo:hover{background:var(--rojo-hondo)}
.portada .boton--linea{border-color:var(--rojo);color:var(--rojo-hondo)}
.portada .boton--linea:hover{background:var(--rojo-claro);border-color:var(--rojo)}

.portada .marco::before{border-color:var(--rojo)}

/* La cinta ya no es continuación de la portada: ahora hay un
   salto de claro a oscuro y la línea de arriba sobra. */
.cinta{border-top:0}

/* ═══════════════════════════════════════════════════════════
   La portada del móvil, a dos columnas · 2026-09-25
   La foto va al lado del titular, no debajo. Para partir la
   portada en piezas sueltas sin tocar el HTML, el bloque de
   texto pasa a `display:contents`: sus hijos —rótulo, titular,
   entradilla, pilares y botones— se vuelven celdas de la misma
   rejilla y se colocan una a una.

   El titular, la entradilla y los pilares van en la columna de
   la izquierda, con la foto al lado abarcando las tres filas.
   Los botones, a ancho completo: en media columna no cabe
   «EMPEZAR MI CAMBIO» sin partirse.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .portada{padding-bottom:2.8rem}

  .portada__rejilla{
    display:grid;
    grid-template-columns:1fr 38%;
    gap:1rem 1.1rem;
    align-items:start;
  }

  /* Los cuatro pilares se separan con el hueco, no con puntos:
     al partirse en dos líneas, el punto se quedaba huérfano al
     principio de la segunda. Va con `.portada` delante porque
     la regla que pone el punto está más abajo en la hoja. */
  .portada .pilares-cinta{grid-column:1;grid-row:4;gap:.45rem 1.2rem;margin-top:0}
  .portada .pilares-cinta li+li::before{content:none}

  /* El envoltorio del texto desaparece como caja. */
  .portada__rejilla>.reveal:first-child{
    display:contents;
    /* Sin caja no hay nada que animar: la aparición se anula
       sola, y conviene dejarlo dicho para que no despiste. */
  }

  /* El rótulo cruza las dos columnas. Si se deja solo en la
     primera y la foto ocupa dos filas, la foto reparte su
     altura entre ambas y abre un hueco enorme entre el rótulo
     y el titular. */
  .portada .cejilla{grid-column:1 / -1;grid-row:1;margin-bottom:0}

  .portada h1{
    grid-column:1;grid-row:2;
    font-size:clamp(1.85rem,8.2vw,2.6rem);
    letter-spacing:-.02em;
  }

  /* La foto deja de ir a sangre: vuelve a su columna, al lado
     del titular, con su esquina redondeada y su sombra.

     Ocupa TRES filas: titular, entradilla y pilares. Si ocupa
     menos de las que necesita para su alto, la rejilla estira
     esas filas hasta la altura de la foto y abre un pozo de
     blanco entre el título y el párrafo. Abarcando tres, el
     texto siempre mide más que la foto y no sobra nada. */
  .portada__rejilla .marco{
    grid-column:2;grid-row:2 / span 3;
    width:auto;max-width:none;
    margin:0;
    align-self:start;
  }
  .portada__rejilla .foto{
    width:100%;max-width:none;
    border-radius:var(--curva);
    box-shadow:var(--sombra-suave);
  }

  .portada__texto{grid-column:1;grid-row:3}
  .portada__botones{grid-column:1 / -1;grid-row:5;margin-top:0}
}

/* Entre 340 y 400 px —los iPhone pequeños y buena parte de los
   Android— las dos columnas siguen cabiendo, pero hay que
   apretar: la foto se lleva menos ancho y el titular baja de
   cuerpo. */
@media (max-width:400px){
  .portada__rejilla{grid-template-columns:1fr 36%;gap:.9rem}
  .portada h1{font-size:clamp(1.65rem,7.4vw,2.6rem)}
  .portada__texto{margin-top:1.1rem}
}

/* Por debajo de 340 px ya no cabe un titular que se lea al
   lado de una foto: vuelve a apilarse, con la foto a sangre. */
@media (max-width:339px){
  .portada__rejilla{display:flex;flex-direction:column;gap:1.8rem}
  .portada__rejilla>.reveal:first-child{display:block}
  .portada{padding-bottom:0}

  .portada__rejilla .marco{
    width:100vw;max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .portada__rejilla .foto{border-radius:0;box-shadow:none}
  .pilares-cinta{margin-top:1.8rem}
  .portada__botones{margin-top:2.2rem}
}

/* ═══════════════════════════════════════════════════════════
   Su maqueta · 2026-09-25
   Piezas nuevas que salen de la maqueta que hizo ella: la
   línea de cuatro pilares bajo el titular de portada, el
   método en cuatro columnas en vez de tres, la cita firmada
   del acompañamiento y el reclamo del cierre.
   ═══════════════════════════════════════════════════════════ */

/* ─────────── Los cuatro pilares, en la portada ─────────── */

.pilares-cinta{
  display:flex;flex-wrap:wrap;
  gap:.5rem 1.6rem;
  margin-top:1.8rem;
}
/* En morado: van sobre la portada, que es clara. */
.pilares-cinta li{
  position:relative;
  font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rojo);
}
.pilares-cinta li+li::before{
  content:"·";
  position:absolute;left:-.95rem;
  color:var(--rojo);opacity:.55;
}

/* ─────────── El método, en cuatro ─────────── */

.pilares--cuatro{grid-template-columns:repeat(4,1fr)}

@media (max-width:1100px){
  .pilares--cuatro{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .pilares--cuatro{grid-template-columns:1fr}
}

/* ─────────── La cita firmada ─────────── */

.cita{
  margin-top:2.6rem;
  padding:2.2rem 2.4rem;
  background:var(--rojo-claro);
  border-left:3px solid var(--rojo);
  border-radius:var(--curva);
}
.cita p{
  font-family:var(--display);
  font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.4;
  color:var(--tinta);
  max-width:46ch;
}
.cita cite{
  display:block;margin-top:1rem;
  font-family:var(--texto);font-style:normal;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rojo);
}

/* ─────────── El reclamo del cierre ─────────── */

.reclamo{
  margin-top:1.6rem;
  font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--brasa);
}

/* El titular del recuadro «no necesitas volver a empezar»
   lleva cursiva, como en su maqueta. */
.bloqueos__titulo{
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.25;
}
.bloqueos__titulo em{font-style:italic;color:var(--rojo)}

/* ═══════════════════════════════════════════════════════════
   El móvil, más visual · 2026-09-24
   En el teléfono la web se leía como una columna de texto con
   fotos pequeñas por el medio. Aquí la imagen pasa a mandar:
   las fotos grandes van de borde a borde y las tiras ocupan
   casi el ancho de la pantalla.

   El corte está en 760 px y no en 620 porque a partir de ahí
   la portada ya es de una sola columna.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:760px){

  /* ── Las fotos grandes, de borde a borde ──
     Se sacan de los márgenes del contenedor con el truco de
     los márgenes negativos, pierden la esquina redondeada y el
     marco de línea, que a sangre no pintan nada.

     La de portada ya NO va aquí: desde el 2026-09-25 se pone al
     lado del titular, a dos columnas (bloque de más abajo), y
     solo vuelve a sangre por debajo de 400 px. */
  .marco--plancha{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0;
  }
  .portada__rejilla .marco::before{content:none}

  .marco--plancha .foto{
    width:100%;
    max-width:none;
    border-radius:0;
    box-shadow:none;
  }

  /* La plancha negra del retrato se queda, pero sin aire a los
     lados: es una banda, no una tarjeta. */
  .marco--plancha{padding:1.4rem 0}

  /* El aire y el reparto de la portada los fija el bloque de
     «La portada del móvil, a dos columnas», más abajo. */

  /* ── Las tiras, casi a pantalla completa ──
     En el móvil se cuadran por ANCHO, no por alto: así las
     verticales —que son casi todas— se ven grandes de verdad,
     y las cuadradas se centran al lado sin recortarse. */
  .tira__pista{align-items:center}

  .tira--alta li{width:78vw}

  /* ── Detalles que se notan en pantalla pequeña ── */

  /* La cinta, más grande: es lo primero que se mueve. */
  .cinta__pista span{font-size:1.45rem}

  /* Los números de los objetivos y de los pasos, más presentes. */
  .objetivo__num,
  .paso__num{font-size:3rem}

  /* Los botones de la portada, uno debajo de otro y anchos. */
  .portada__botones{gap:.7rem}

  /* El pie de las tiras: sin flechas, el botón manda solo. */
  .tira__pie{justify-content:center}
  .tira__pie .boton{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   Lo propio de ASTeam
   Todo lo de arriba viene de la hoja original y vale igual. Lo
   que sigue es lo que pide esta web y la otra no tenía: la
   sección de la app, el móvil del vídeo y las cuatro tarifas.
   ═══════════════════════════════════════════════════════════ */

/* ─────────── La app: las tarjetas ───────────
   Mismo papel que los pilares, pero sobre fondo claro: blancas,
   con el icono en un cuadrado rosa y la raya de acento arriba. */

.app-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}

.tarjeta{
  position:relative;overflow:hidden;
  padding:2.1rem 1.8rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:transform var(--transicion),box-shadow var(--transicion),border-color var(--transicion);
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-suave);border-color:var(--brasa)}
.tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--linea-roja);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transicion);
}
.tarjeta:hover::before{transform:scaleX(1)}

.tarjeta__icono{
  display:flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;
  margin-bottom:1.3rem;
  border-radius:14px;
  background:var(--rojo-claro);
  color:var(--rojo);
}
.tarjeta__icono svg{width:1.35rem;height:1.35rem}
/* La segunda de cada pareja va en coral, como en la landing. */
.tarjeta--coral .tarjeta__icono{background:var(--coral-claro);color:var(--coral)}
.tarjeta--coral:hover{border-color:var(--coral-linea)}

.tarjeta h3{
  font-family:var(--display);font-weight:400;
  font-size:1.32rem;line-height:1.25;
  color:var(--tinta);
  margin-bottom:.6rem;
}
.tarjeta p{font-size:var(--p-tarjeta)}

/* ─────────── La app: el móvil del vídeo ───────────
   El tour está grabado en vertical (720x1478). El marco se ciñe
   al vídeo y no al revés, para que no aparezcan franjas negras. */

.movil{
  width:min(320px,100%);
  margin:3.4rem auto 0;
  padding:.65rem;
  background:var(--negro);
  border-radius:2.4rem;
  box-shadow:var(--sombra);
}
.movil video{
  display:block;width:100%;height:auto;
  border-radius:1.9rem;
  background:#000;
}
.movil__pie{
  margin-top:1rem;
  text-align:center;
  font-size:var(--p-pie);
  color:var(--gris);
}

/* ─────────── La app: lo que incluye ─────────── */

/* Antes eran dos bloques, uno por columna. El de la app se quitó el
   2026-09-25 porque repetía las seis tarjetas de arriba, así que
   queda uno solo, a ancho completo y con la lista a dos columnas. */
.incluye{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:3.4rem}

.incluye__bloque{
  padding:2.2rem 2rem;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--curva);
}
.incluye__titulo{
  font-family:var(--display);font-weight:400;
  font-size:1.35rem;color:var(--tinta);
  padding-bottom:1rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--linea);
}
.incluye__titulo span{
  display:block;
  font-family:var(--texto);
  font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rojo);
  margin-bottom:.45rem;
}
.incluye__lista{display:grid;gap:.85rem;font-size:var(--p-tarjeta)}
@media (min-width:761px){
  .incluye__lista{grid-template-columns:repeat(2,1fr);gap:.9rem 2.6rem}
}
.incluye__lista li{padding-left:1.5rem;position:relative}
.incluye__lista li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--rojo);
}
.incluye--coral .incluye__titulo span{color:var(--coral)}
.incluye--coral .incluye__lista li::before{background:var(--coral)}

/* ─────────── Tarifas ───────────
   Cuatro planes con los mismos servicios: lo único que cambia es
   el tiempo y el precio por mes. La barra compara de un vistazo
   ese precio con el del plan más caro (80 €). */

.rejilla--4{grid-template-columns:repeat(4,1fr)}

.tarifa{padding:2.1rem 1.7rem}
.plan__ciclo{
  font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);
  margin-top:.35rem;
}
.plan__precio{
  display:flex;align-items:baseline;gap:.2rem;
  margin:1.5rem 0 1.3rem;
  font-family:var(--display);
  font-size:3rem;line-height:1;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.plan__precio span{font-size:1.5rem;color:var(--gris)}

.plan__mes{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);
  margin-bottom:.55rem;
}
.plan__mes strong{
  font-size:.92rem;letter-spacing:0;text-transform:none;
  color:var(--rojo);
}
.plan__barra{
  height:6px;border-radius:999px;
  background:var(--arena-2);
  overflow:hidden;
}
.plan__barra i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--rojo),var(--brasa));
}

.plan__ahorro{
  display:inline-flex;align-items:center;
  margin-top:1.3rem;
  padding:.4rem .85rem;
  border-radius:999px;
  border:1px solid var(--coral-linea);
  background:var(--coral-claro);
  color:var(--coral);
  font-size:.78rem;font-weight:700;
}
.plan__ahorro--neutro{
  border-color:var(--linea);
  background:var(--crema);
  color:var(--tinta-2);
}
.plan__nota{margin-top:1.2rem;font-size:var(--p-tarjeta)}

.plan--destacado .plan__precio{color:var(--blanco)}
.plan--destacado .plan__precio span,
.plan--destacado .plan__ciclo,
.plan--destacado .plan__mes{color:rgba(255,255,255,.6)}
.plan--destacado .plan__mes strong{color:var(--brasa)}
.plan--destacado .plan__barra{background:rgba(255,255,255,.16)}
.plan--destacado .plan__nota{color:#DDD0D8}
.plan--destacado .plan__ahorro{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);
  color:var(--brasa);
}

.tarifas__pie{
  max-width:46rem;margin:2.8rem auto 0;
  text-align:center;
  font-size:var(--p-pie);
  color:var(--gris);
}

/* ─────────── El móvil ─────────── */

@media (max-width:1040px){
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .app-rejilla{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .rejilla--4,.app-rejilla,.incluye{grid-template-columns:1fr}
  /* Igual que las fotos: el móvil del vídeo, más grande. */
  .movil{width:min(340px,100%)}
}

@media (prefers-reduced-motion:reduce){
  .tarjeta:hover{transform:none}
}

/* ─────────── La tira de la tarima ───────────
   Sus fotos no son antes y después de 9:16 como las de la otra
   web: unas son 3:4 y otras cuadradas. Se enseñan enteras, sin
   recortar, pero con el fondo transparente en vez del arena: así
   la franja que le sobra a una cuadrada se funde con el oscuro de
   la sección en lugar de verse como un recuadro rosa debajo. */

.tira--natural li{width:clamp(12rem,21vw,17rem)}
.tira--natural img{
  aspect-ratio:3/4;
  object-fit:contain;
  background:transparent;
  box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════
   La portada del móvil, con la foto al lado · 2026-09-25
   Vale la rejilla de dos columnas que ya trae la hoja, pero con
   los números ajustados a ESTE titular: el de la otra web tenía
   dos líneas y este tiene tres, así que la columna de texto se
   estiraba y la foto se quedaba en una miniatura de 120 px.

   Lo que se toca: la foto se lleva más ancho y el titular baja de
   cuerpo para que quepa al lado.

   Y, sobre todo, **la entradilla baja a ancho completo**. Al lado
   de la foto van solo el titular y los cuatro pilares. Con la
   entradilla dentro de la columna, el texto medía el doble que la
   foto, y la foto tenía que estirarse a esa altura recortándose
   media figura. Así, lo que mide el texto y lo que mide la foto
   se parecen, y el recorte es mínimo.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .portada__rejilla{grid-template-columns:1fr 44%;gap:.9rem 1rem}

  /* Tres líneas al lado de una foto piden un cuerpo más corto. */
  .portada h1{font-size:clamp(1.6rem,6.9vw,2.4rem);line-height:1.12}

  /* Los pilares suben al lado de la foto y la entradilla baja. */
  .portada .pilares-cinta{grid-column:1;grid-row:3;margin-top:1.2rem}
  .portada__texto{grid-column:1 / -1;grid-row:4;margin-top:1.6rem}

  /* La foto abarca el titular y los pilares. Se estira a lo alto de
     los dos, que es casi su alto natural, así que el recorte se
     queda en un dedo por arriba y otro por abajo. Nunca por los
     lados: la figura no se estrecha. */
  .portada__rejilla .marco{grid-column:2;grid-row:2 / span 2;align-self:stretch}
  .portada__rejilla .foto{
    height:100%;
    object-fit:cover;
    object-position:50% 30%;
  }
}

/* Por debajo de 400 px la foto se lleva un pelo menos, que si no
   el titular se parte en palabras sueltas. */
@media (max-width:400px){
  .portada__rejilla{grid-template-columns:1fr 40%}
  .portada h1{font-size:clamp(1.45rem,6.4vw,2.2rem)}
}

/* Por debajo de 340 px la hoja vuelve a apilar la portada (regla de
   más arriba): ahí la foto recupera su alto natural, que si no se
   estira a lo que mida la columna. */
@media (max-width:339px){
  .portada__rejilla .foto{height:auto}
}

/* Bombafit lleva el código y además el enlace a su perfil, así que
   el pie de las tarjetas de marca pasa a repartir las dos piezas en
   vez de dejarlas pegadas en una línea. */
.marca-tarjeta__pie{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* La tira de la sección de posing se quedó en una sola foto el
   2026-09-25, así que ya no es una tira: se centra y se enseña más
   grande, y las flechas se fueron con las otras cuatro fotos. */
.tira--sola{justify-content:center}
.tira--sola li{width:clamp(14rem,42vw,22rem)}

/* ═══════════════════════════════════════════════════════════
   «Cómo trabajo», como un proceso y no como cuatro cajas
   Los cuatro pasos eran cuatro tarjetas iguales con un número
   pálido dentro: se leían como una lista, no como un camino.

   Ahora el número es una chapa redonda de color y hay un hilo
   que cruza de la primera a la cuarta. El hilo va DETRÁS de las
   tarjetas, que son opacas, así que solo asoma por los huecos:
   una sola regla y ningún elemento de más en el HTML.
   ═══════════════════════════════════════════════════════════ */

.pasos{position:relative}

.pasos::before{
  content:"";
  position:absolute;z-index:0;
  /* A la altura del centro de las chapas: 2rem de padding de la
     tarjeta más media chapa. */
  top:calc(2rem + 1.4rem);
  left:12%;right:12%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--brasa),var(--rojo),var(--brasa),transparent);
  opacity:.5;
}

.paso{position:relative;z-index:1}

.paso__num{
  display:grid;place-items:center;
  width:2.8rem;height:2.8rem;
  margin-bottom:1.1rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--rojo),var(--brasa));
  color:var(--blanco);
  font-size:1.2rem;line-height:1;
  opacity:1;
  box-shadow:0 12px 24px -14px rgba(196,62,146,.9);
  transition:transform var(--transicion);
}
.paso:hover .paso__num{transform:scale(1.08)}

/* La raya de acento de la tarjeta deja de esperar al ratón: en un
   proceso, lo que se quiere es ver los cuatro a la vez. */
.paso::before{transform:scaleX(1);opacity:.55}
.paso:hover::before{opacity:1}

/* Con dos columnas o una, el hilo cruzaría por donde no debe. */
@media (max-width:1100px){
  .pasos::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .paso:hover .paso__num{transform:none}
}

/* El botón de WhatsApp de la portada lleva su icono delante. El
   mismo trazo que los de la sección de la app, no el logotipo
   verde: aquí manda el magenta de la marca. */
.boton__icono{
  width:1.05rem;height:1.05rem;
  margin-right:.6rem;
  flex:0 0 auto;
}

/* ─────────── El botón de WhatsApp, en verde ───────────
   Pedido el 2026-09-25. Es el único sitio de la web donde entra un
   color que no es de la marca, y entra a propósito: el verde es lo
   que hace que se reconozca sin leerlo.

   No es el #25D366 plano de WhatsApp: con texto blanco encima se
   queda en 2:1 de contraste y no hay quien lo lea a este cuerpo.
   Va en degradado hasta el verde oscuro de la propia marca
   (#128C7E), que sí aguanta el blanco. Se sigue reconociendo y se
   lee. Va después de la regla de la portada para ganarle. */

/* Va en todos los botones que abren el chat: el del menú, el de la
   portada, los cuatro de las tarifas y el del formulario. Los
   contextos se listan uno a uno porque las reglas de la portada, de
   las secciones oscuras y del plan destacado pintan el botón por su
   cuenta y le ganarían por especificidad. */
.boton--wa,
.portada .boton--wa,
.seccion--oscura .boton--wa,
.plan--destacado .boton--wa,
.plan--destacado .boton--rojo.boton--wa{
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:var(--blanco);
  border-color:transparent;
  box-shadow:0 14px 30px -18px rgba(18,140,126,.85);
}
.boton--wa:hover,
.portada .boton--wa:hover,
.seccion--oscura .boton--wa:hover,
.plan--destacado .boton--wa:hover,
.plan--destacado .boton--rojo.boton--wa:hover{
  background:linear-gradient(135deg,#1FBB5B,#0E7A6E);
}