/* web.alejandroponce.dev
   Los valores de :root vienen de los tokens de Once UI que usa el CV
   (tema oscuro, neutro gris, marca esmeralda, acento indigo, bordes
   "playful", superficies translucidas). No se inventan colores aqui. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-700.woff2") format("woff2");
}

/* Arial ajustada a las metricas de Inter: mientras llega la fuente el
   texto ocupa el mismo espacio y no brinca al cambiar. */
@font-face {
  font-family: "Inter Respaldo";
  src: local("Arial");
  size-adjust: 107.06%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* neutral: gray */
  --gris-100: #0a0a0a;
  --gris-200: #151515;
  --gris-300: #3f3f3f;
  --gris-400: #595959;
  --gris-600: #959595;
  --gris-700: #b2b2b2;
  --gris-800: #d2d2d2;
  --gris-1000: #ededed;
  --blanco: #ffffff;

  /* brand: emerald */
  --esmeralda-100: #040b0a;
  --esmeralda-200: #081816;
  --esmeralda-300: #0d483c;
  --esmeralda-400: #0c6551;
  --esmeralda-700: #01cb90;
  --esmeralda-800: #56ecad;
  --esmeralda-1000: #b4fdda;

  /* accent: indigo */
  --indigo-400: #5625f7;
  --indigo-800: #d2cefb;

  /* semanticos, tal como los resuelve el tema oscuro de Once UI */
  --fondo: var(--gris-100);                 /* page-background */
  --fondo-medio: var(--gris-200);           /* neutral-background-medium */
  --texto: var(--blanco);                   /* neutral-on-background-strong */
  --texto-medio: var(--gris-1000);          /* neutral-on-background-medium */
  --texto-suave: var(--gris-800);           /* neutral-on-background-weak */
  --texto-tenue: var(--gris-700);           /* un paso arriba del 600 del CV, para AA */

  --borde-suave: #9595951a;                 /* neutral-alpha-weak */
  --borde: #9595954d;                       /* neutral-alpha-medium, surface-border */
  --borde-fuerte: #95959580;                /* neutral-alpha-strong */
  --superficie: #0000004d;                  /* surface-background translucido */
  --superficie-solida: #101010;             /* para tarjetas que necesitan fondo opaco */

  --marca: var(--esmeralda-800);            /* brand-on-background-weak */
  --marca-fuerte: var(--esmeralda-700);
  --marca-claro: var(--esmeralda-1000);     /* brand-on-background-medium */
  --marca-fondo: var(--esmeralda-200);      /* brand-background-medium */
  --marca-alpha-suave: #08a97c1a;
  --marca-alpha: #08a97c4d;
  --marca-alpha-fuerte: #08a97c80;
  --marca-borde: var(--esmeralda-400);      /* brand-border-strong */
  --sobre-marca: var(--esmeralda-100);

  --acento: var(--indigo-400);              /* accent-solid-medium */
  --acento-alpha: #9585fa1a;

  /* border: playful */
  --radio-s: 0.5rem;
  --radio-m: 0.75rem;
  --radio-l: 1rem;
  --radio-xl: 1.25rem;
  --radio-completo: 999rem;

  /* shadow */
  --sombra-s: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08);
  --sombra-l: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08);
  --sombra-xl: 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 12px rgba(0, 0, 0, 0.08), 0 24px 24px rgba(0, 0, 0, 0.08);

  /* spacing */
  --e-4: 0.25rem;
  --e-8: 0.5rem;
  --e-12: 0.75rem;
  --e-16: 1rem;
  --e-20: 1.25rem;
  --e-24: 1.5rem;
  --e-32: 2rem;
  --e-40: 2.5rem;
  --e-48: 3rem;
  --e-64: 4rem;
  --e-80: 5rem;
  --e-104: 6.5rem;

  --ancho: 68rem;                           /* un poco mas que static-width-1024, para las secciones anchas */
  --ancho-texto: 40rem;                     /* static-width-640 */
  --lateral: var(--e-20);

  --transicion: 0.2s ease-in-out;           /* transition-micro-medium */
  --transicion-larga: 0.5s ease-out;        /* entre macro-medium y macro-long */

  --toque: 2.75rem;                         /* 44 px */
  --barra-alto: 3.75rem;
}

/* ---------- base ---------- */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (max-width: 767px) {
  html {
    font-size: 106.25%;                     /* 17 px, font-scaling-mobile del CV */
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto-medio);
  font-family: "Inter", "Inter Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--texto);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

::selection {
  background: var(--marca);
  color: var(--sobre-marca);
}

.saltar {
  position: absolute;
  top: var(--e-8);
  left: var(--e-8);
  z-index: 100;
  padding: var(--e-12) var(--e-16);
  background: var(--marca);
  color: var(--sobre-marca);
  font-weight: 600;
  border-radius: var(--radio-m);
  transform: translateY(-200%);
}

.saltar:focus-visible {
  transform: none;
}

/* ---------- fondo: puntos y degradado del CV, mas ligeros ---------- */

.fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.fondo::before,
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* dots: brand-on-background-weak, 0.5px, cada 24px, opacidad 0.4 */
.fondo::before {
  background-image: radial-gradient(var(--marca) 0.5px, transparent 0.5px);
  background-size: var(--e-24) var(--e-24);
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 100%);
}

/* gradient: mismos tres radiales del CV, a menos opacidad */
.fondo::after {
  background:
    radial-gradient(100% 100% at 50% 0%, transparent 0%, var(--fondo) 100%),
    radial-gradient(90% 80% at 10% 20%, var(--marca-fondo) 0%, transparent 100%),
    radial-gradient(200% 120% at 50% 0%, var(--acento) 0%, transparent 100%);
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 100%);
  mask-image: linear-gradient(#000 40%, transparent 100%);
}

/* En escritorio con mouse, la mascara sigue al cursor como en el CV.
   El JS actualiza --mx y --my; si no corre, queda centrada arriba. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .fondo {
    position: fixed;
    height: 100%;
  }

  .fondo::before {
    -webkit-mask-image: radial-gradient(circle 600px at var(--mx, 50%) var(--my, 0%), #000 20%, transparent 100%);
    mask-image: radial-gradient(circle 600px at var(--mx, 50%) var(--my, 0%), #000 20%, transparent 100%);
  }

  .fondo::after {
    opacity: 0.35;
    -webkit-mask-image: radial-gradient(circle 700px at var(--mx, 50%) var(--my, 0%), #000 20%, transparent 100%);
    mask-image: radial-gradient(circle 700px at var(--mx, 50%) var(--my, 0%), #000 20%, transparent 100%);
  }
}

main,
.pie {
  position: relative;
  z-index: 1;
}

/* ---------- barra fija ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0a0a0acc;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde-suave);
}

.barra-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-16);
  max-width: var(--ancho);
  min-height: var(--barra-alto);
  margin: 0 auto;
  padding: var(--e-8) var(--lateral);
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.barra-nombre {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  min-height: var(--toque);
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}

.barra-foto {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radio-completo);
  border: 1px solid var(--borde);
}

.barra-lugar {
  color: var(--texto-tenue);
  font-weight: 400;
}

.barra-lugar::before {
  content: "·";
  margin-right: var(--e-8);
}

.barra-nav {
  display: none;
  gap: var(--e-4);
}

.barra-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--e-12);
  border-radius: var(--radio-completo);
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transicion), background-color var(--transicion);
}

.barra-nav a:hover {
  color: var(--texto);
  background: var(--borde-suave);
}

/* .barra delante para ganarle a .boton, que viene despues en el archivo */
.barra .barra-wa {
  display: none;
}

@media (max-width: 479px) {
  .barra-lugar {
    display: none;
  }
}

@media (min-width: 768px) {
  .barra .barra-wa {
    display: inline-flex;
  }
}

@media (min-width: 960px) {
  .barra-nav {
    display: flex;
  }
}

/* ---------- secciones ---------- */

section {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e-48) var(--lateral);
  scroll-margin-top: calc(var(--barra-alto) + var(--e-16));
}

@media (min-width: 768px) {
  section {
    padding-block: var(--e-80);
  }
}

.seccion-cabeza {
  max-width: var(--ancho-texto);
  margin-bottom: var(--e-32);
}

.seccion-cabeza h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  line-height: 1.12;
  margin-bottom: var(--e-16);
}

.seccion-cabeza p:not(.ceja) {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

@media (min-width: 768px) {
  .seccion-cabeza {
    margin-bottom: var(--e-40);
  }

  .seccion-cabeza p:not(.ceja) {
    font-size: 1.125rem;
  }
}

/* la ceja: etiqueta chica arriba de cada titulo */
.ceja {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  margin-bottom: var(--e-12);
  color: var(--marca);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ceja-punto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radio-completo);
  background: var(--marca-fuerte);
  box-shadow: 0 0 0 4px var(--marca-alpha-suave);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: var(--e-40);
  align-items: center;
  padding-top: clamp(var(--e-32), 6vh, var(--e-64));
  padding-bottom: var(--e-40);
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.375rem, 1.3rem + 4.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-bajada {
  max-width: 36ch;
  margin-top: var(--e-20);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--texto-suave);
}

.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12);
  margin-top: var(--e-32);
}

@media (max-width: 479px) {
  .hero-botones .boton {
    flex: 1 1 100%;
  }
}

.hero-datos {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-8) var(--e-16);
  margin-top: var(--e-32);
  padding-top: var(--e-24);
  border-top: 1px solid var(--borde-suave);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.hero-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-8);
  line-height: 1.35;
}

.hero-datos svg {
  flex: none;
  margin-top: 0.1em;
  color: var(--marca);
}

.hero-visual {
  display: none;
}

@media (min-width: 768px) {
  .hero {
    padding-bottom: var(--e-48);
  }

  .hero .hero-botones .boton {
    min-height: 3.5rem;
    padding-inline: var(--e-32);
    font-size: 1.0625rem;
  }

  .hero-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-8) var(--e-24);
  }
}

/* en escritorio, la maqueta de Corniche en un telefono a la derecha */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--e-64);
    min-height: calc(100vh - var(--barra-alto));
    padding-top: var(--e-40);
  }

  .hero-visual {
    display: block;
    position: relative;
    justify-self: center;
    width: min(100%, 19rem);
  }

  /* resplandor detras del telefono */
  .hero-visual::before {
    content: "";
    position: absolute;
    inset: -20% -30%;
    background:
      radial-gradient(60% 55% at 50% 45%, var(--marca-alpha), transparent 70%),
      radial-gradient(40% 40% at 70% 20%, var(--acento-alpha), transparent 70%);
    filter: blur(24px);
    z-index: -1;
  }

  .hero-telefono {
    position: relative;
    aspect-ratio: 780 / 1500;
    overflow: hidden;
    padding: 0.5rem;
    background: var(--gris-200);
    border: 1px solid var(--borde-fuerte);
    border-radius: 2.25rem;
    box-shadow: var(--sombra-xl), 0 0 0 1px #00000080, 0 40px 80px -20px #000000cc;
    transform: rotate(-3deg);
  }

  .hero-telefono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 1.75rem;
  }

  /* el corte de abajo se funde para que no se vea seco */
  .hero-telefono::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(transparent, var(--gris-200));
    border-radius: 0 0 2.25rem 2.25rem;
    pointer-events: none;
  }
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-8);
  min-height: 3.25rem;
  padding: var(--e-12) var(--e-24);
  border-radius: var(--radio-completo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton:active {
  transform: scale(0.98);
}

.boton-primario {
  background: var(--marca-fuerte);
  color: var(--sobre-marca);
  box-shadow: var(--sombra-s);
}

.boton-primario:hover {
  background: var(--marca);
  box-shadow: var(--sombra-s), 0 0 24px -4px var(--marca-alpha-fuerte);
}

.boton-secundario {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
}

.boton-secundario:hover {
  border-color: var(--borde-fuerte);
  background: #00000080;
}

.boton-chico {
  min-height: 2.5rem;
  padding: var(--e-8) var(--e-16);
  font-size: 0.875rem;
}

.icono-wa {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}

.boton-chico .icono-wa {
  width: 1.125rem;
  height: 1.125rem;
}

.liga {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--marca);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--marca-alpha);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--transicion);
}

.liga:hover {
  text-decoration-color: currentColor;
}

/* ---------- muestras ---------- */

.muestras-lista {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--e-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lateral);
  scrollbar-width: none;
  /* la lista se sale del padding lateral para que el corte de la
     siguiente tarjeta se vea y se entienda que se desliza */
  margin-inline: calc(var(--lateral) * -1);
  padding-inline: var(--lateral);
  padding-block: var(--e-8) var(--e-24);
}

.muestras-lista::-webkit-scrollbar {
  display: none;
}

.muestra {
  flex: 0 0 min(78vw, 22rem);
  scroll-snap-align: start;
}

.muestra-visual {
  position: relative;
}

.muestra-escritorio {
  display: none;
}

.pantalla {
  position: relative;
  overflow: hidden;
  background: var(--fondo-medio);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-l);
}

.pantalla img {
  width: 100%;
  aspect-ratio: 780 / 1500;
}

/* fundido abajo, para que el corte de la captura no se vea seco */
.pantalla::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(transparent, var(--fondo-medio));
  pointer-events: none;
}

.muestra-texto {
  margin-top: var(--e-16);
}

.muestra-texto h3 {
  font-size: 1.125rem;
  margin-top: var(--e-8);
}

.muestra-texto p {
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.muestra-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-12);
}

.muestra-tags li {
  padding: 0.125rem var(--e-8);
  border-radius: var(--radio-s);
  border: 1px solid var(--borde-suave);
  background: var(--superficie);
  color: var(--texto-tenue);
  font-size: 0.75rem;
}

.etiqueta {
  display: inline-block;
  padding: 0.125rem var(--e-8);
  border-radius: var(--radio-s);
  background: var(--marca-alpha-suave);
  border: 1px solid var(--marca-alpha);
  color: var(--marca);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.muestras-nota {
  margin-top: var(--e-4);
  max-width: var(--ancho-texto);
  font-size: 0.875rem;
  color: var(--texto-tenue);
}

@media (min-width: 768px) {
  .muestras-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-24);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .muestra {
    flex: none;
  }

  /* la pista de deslizar solo tiene sentido con el carrusel de celular */
  .muestras-nota {
    display: none;
  }
}

/* En pantallas anchas cada tarjeta muestra la version de escritorio
   con la de celular encimada: se ve que la pagina sirve en los dos. */
@media (min-width: 1024px) {
  .muestra-visual {
    padding-bottom: 30%;
  }

  .muestra-escritorio {
    display: block;
    width: 100%;
    aspect-ratio: 1600 / 1000;
    border: 1px solid var(--borde);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-l);
    background: var(--fondo-medio);
  }

  .pantalla {
    position: absolute;
    right: var(--e-12);
    bottom: 0;
    width: 36%;
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-xl);
  }

  .pantalla img {
    aspect-ratio: 780 / 1300;
    object-fit: cover;
    object-position: top;
  }
}

/* ---------- tarjetas (para que sirve) ---------- */

.tarjetas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-16);
}

.tarjeta {
  padding: var(--e-24);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-l);
  transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta:hover {
  border-color: var(--borde);
}

.tarjeta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--e-16);
  border-radius: var(--radio-m);
  background: var(--marca-alpha-suave);
  border: 1px solid var(--marca-alpha);
  color: var(--marca);
}

.tarjeta h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--e-8);
}

.tarjeta p {
  color: var(--texto-suave);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .tarjetas-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-20);
  }

  .tarjeta {
    padding: var(--e-32);
  }

  .tarjeta p {
    font-size: 1rem;
  }
}

/* ---------- que incluye ---------- */

.incluye-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-8);
}

.incluye-item {
  display: flex;
  gap: var(--e-16);
  align-items: flex-start;
  padding: var(--e-16) 0;
  border-bottom: 1px solid var(--borde-suave);
}

.incluye-item:last-child {
  border-bottom: 0;
}

.incluye-icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio-m);
  background: var(--marca-alpha-suave);
  border: 1px solid var(--marca-alpha);
  color: var(--marca);
}

.incluye-item h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--e-4);
}

.incluye-item p {
  color: var(--texto-suave);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .incluye-lista {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-16) var(--e-40);
  }

  .incluye-item {
    padding: var(--e-20) 0;
    border-bottom: 1px solid var(--borde-suave);
  }

  /* con dos columnas, los dos ultimos son la ultima fila */
  .incluye-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ---------- como trabajo ---------- */

.pasos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}

/* linea vertical que une los pasos en celular */
.pasos::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: calc(1.125rem - 1px);
  width: 2px;
  background: linear-gradient(var(--marca-alpha-fuerte), var(--borde-suave));
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-areas:
    "numero dia"
    "numero titulo"
    "numero texto";
  column-gap: var(--e-16);
  padding-bottom: var(--e-32);
}

.paso:last-child {
  padding-bottom: 0;
}

.paso-numero {
  grid-area: numero;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio-completo);
  background: var(--fondo);
  border: 2px solid var(--marca-alpha-fuerte);
  color: var(--marca);
  font-weight: 700;
  font-size: 0.9375rem;
  z-index: 1;
}

.paso-dia {
  grid-area: dia;
  align-self: center;
  color: var(--marca);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paso h3 {
  grid-area: titulo;
  font-size: 1.1875rem;
  margin-top: var(--e-4);
  margin-bottom: var(--e-8);
}

.paso p {
  grid-area: texto;
  color: var(--texto-suave);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.como-nota {
  margin-top: var(--e-32);
  max-width: var(--ancho-texto);
  font-size: 0.9375rem;
  color: var(--texto-tenue);
}

@media (min-width: 768px) {
  .pasos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e-24);
  }

  /* la linea pasa a horizontal, por en medio de los numeros */
  .pasos::before {
    top: calc(1.125rem - 1px);
    bottom: auto;
    left: 1.125rem;
    right: 1.125rem;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--marca-alpha-fuerte), var(--borde));
  }

  .paso {
    grid-template-columns: 1fr;
    grid-template-areas:
      "numero"
      "dia"
      "titulo"
      "texto";
    row-gap: 0;
    padding-bottom: 0;
  }

  .paso-numero {
    margin-bottom: var(--e-16);
  }

  .paso h3 {
    font-size: 1.125rem;
  }

  .paso p {
    font-size: 0.9375rem;
  }
}

/* ---------- mantenimiento ---------- */

.mant-columnas {
  display: grid;
  gap: var(--e-16);
}

.mant-caja {
  padding: var(--e-24);
  border-radius: var(--radio-l);
  border: 1px solid var(--borde-suave);
  background: var(--superficie);
}

.mant-entra {
  background: linear-gradient(160deg, var(--marca-alpha-suave), transparent 55%), var(--superficie);
  border-color: var(--marca-alpha);
}

.mant-caja h3 {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  font-size: 1.125rem;
  margin-bottom: var(--e-16);
}

.mant-caja h3 svg {
  flex: none;
  color: var(--marca);
}

.mant-aparte h3 svg {
  color: var(--texto-tenue);
}

.mant-caja ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-8);
}

.mant-caja li {
  position: relative;
  padding-left: var(--e-20);
  color: var(--texto-suave);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.mant-caja li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radio-completo);
  background: var(--marca);
}

.mant-aparte li::before {
  background: var(--gris-400);
}

.mant-nota {
  margin-top: var(--e-16);
  padding-top: var(--e-16);
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-tenue);
  font-size: 0.875rem;
}

.mant-reporte {
  display: flex;
  gap: var(--e-12);
  align-items: flex-start;
  max-width: var(--ancho-texto);
  margin-top: var(--e-24);
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.mant-reporte svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--marca);
}

@media (min-width: 768px) {
  .mant-columnas {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--e-20);
  }

  .mant-caja {
    padding: var(--e-32);
  }
}

/* ---------- comparativa ---------- */

.comparativa {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--superficie);
}

.comp-cabeza,
.comp-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.comp-cabeza {
  background: var(--fondo-medio);
  border-bottom: 1px solid var(--borde);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comp-cabeza span {
  padding: var(--e-12) var(--e-16);
  color: var(--texto-tenue);
}

.comp-cabeza span:last-child {
  color: var(--marca);
  background: var(--marca-alpha-suave);
}

.comp-fila {
  border-bottom: 1px solid var(--borde-suave);
}

.comp-fila:last-child {
  border-bottom: 0;
}

.comp-fila span {
  display: flex;
  gap: var(--e-8);
  align-items: flex-start;
  padding: var(--e-16);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.comp-fila span:first-child {
  color: var(--texto-tenue);
}

.comp-fila span:last-child {
  color: var(--texto);
  background: var(--marca-alpha-suave);
}

.comp-fila svg {
  flex: none;
  margin-top: 0.15em;
}

.comp-fila span:first-child svg {
  color: var(--gris-600);
}

.comp-fila span:last-child svg {
  color: var(--marca);
}

/* en celular no caben dos columnas: cada fila se apila, primero lo que
   suele pasar (chico y apagado) y abajo lo mio */
@media (max-width: 639px) {
  .comp-cabeza {
    display: none;
  }

  .comp-fila {
    grid-template-columns: 1fr;
    background: var(--marca-alpha-suave);
  }

  .comp-fila span:first-child {
    padding: var(--e-12) var(--e-16) var(--e-4);
    font-size: 0.875rem;
    background: transparent;
  }

  .comp-fila span:last-child {
    padding: var(--e-4) var(--e-16) var(--e-16);
    background: transparent;
  }
}

@media (min-width: 768px) {
  .comp-cabeza span,
  .comp-fila span {
    padding: var(--e-20) var(--e-24);
  }

  .comp-fila span {
    font-size: 1rem;
  }
}

/* ---------- quien soy ---------- */

.quien {
  display: grid;
  gap: var(--e-24);
  align-items: start;
}

.quien-foto {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radio-completo);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-s);
}

.quien-texto {
  max-width: var(--ancho-texto);
}

.quien-texto h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  line-height: 1.12;
  margin-bottom: var(--e-16);
}

.quien-texto p:not(.ceja) {
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.quien-texto p:not(.ceja) + p {
  margin-top: var(--e-12);
}

.quien-texto .liga {
  margin-top: var(--e-8);
}

@media (min-width: 768px) {
  .quien {
    grid-template-columns: auto 1fr;
    gap: var(--e-48);
  }

  .quien-foto {
    width: 11rem;
    height: 11rem;
  }
}

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

.faq-grupos {
  display: grid;
  gap: var(--e-32);
}

.faq-grupo h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-8);
}

.faq {
  border-bottom: 1px solid var(--borde-suave);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-16);
  min-height: var(--toque);
  padding: var(--e-16) 0;
  color: var(--texto);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--marca-claro);
}

.faq-icono {
  flex: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radio-completo);
  border: 1px solid var(--borde);
  transition: transform var(--transicion), border-color var(--transicion);
}

.faq-icono::before,
.faq-icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq-icono::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq[open] .faq-icono {
  transform: rotate(45deg);
  border-color: var(--marca);
  color: var(--marca);
}

.faq-cuerpo {
  padding-bottom: var(--e-20);
  max-width: var(--ancho-texto);
}

.faq-cuerpo p {
  color: var(--texto-suave);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .faq-grupos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-40);
    align-items: start;
  }
}

/* ---------- cierre ---------- */

.cierre-caja {
  display: grid;
  gap: var(--e-24);
  padding: var(--e-32) var(--e-24);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(80% 100% at 0% 0%, var(--marca-alpha), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, var(--acento-alpha), transparent 70%),
    var(--superficie-solida);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-xl);
}

.cierre-texto {
  max-width: 34rem;
}

.cierre-caja h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: var(--e-12);
}

.cierre-texto p:not(.ceja) {
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.cierre-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12);
}

@media (max-width: 479px) {
  .cierre-botones .boton {
    flex: 1 1 100%;
  }
}

@media (min-width: 768px) {
  .cierre-caja {
    grid-template-columns: 1.2fr auto;
    align-items: center;
    padding: var(--e-64) var(--e-48);
  }

  .cierre-botones {
    flex-direction: column;
    align-items: stretch;
  }
}

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

.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--e-40) var(--lateral) var(--e-48);
  border-top: 1px solid var(--borde-suave);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.pie-columnas {
  display: grid;
  gap: var(--e-24);
}

.pie-nombre {
  color: var(--texto);
  font-weight: 600;
  margin-bottom: var(--e-4);
}

.pie-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-24);
}

.pie-lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
  transition: border-color var(--transicion);
}

.pie-lista a:hover {
  border-color: var(--marca);
}

.pie-firma {
  margin-top: var(--e-24);
  color: var(--texto-tenue);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .pie-columnas {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* en celular el boton flotante tapa el final del pie si no hay aire */
@media (max-width: 767px) {
  .pie {
    padding-bottom: calc(var(--e-48) + 3.5rem);
  }
}

/* ---------- boton flotante (solo celular) ---------- */

.flotante {
  position: fixed;
  right: var(--e-16);
  bottom: calc(var(--e-16) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: none;
  align-items: center;
  gap: var(--e-8);
  min-height: 3.25rem;
  padding: var(--e-12) var(--e-20);
  border-radius: var(--radio-completo);
  background: var(--marca-fuerte);
  color: var(--sobre-marca);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-xl);
  transform: translateY(150%);
  visibility: hidden;
  transition: transform 0.3s ease-in-out, visibility 0.3s;
}

@media (max-width: 767px) {
  .flotante {
    display: inline-flex;
  }

  .flotante.visible {
    transform: none;
    visibility: visible;
  }
}

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transicion-larga), transform var(--transicion-larga);
}

.js .reveal.visto {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flotante,
  .boton,
  .faq-icono,
  .tarjeta {
    transition: none;
  }
}