/* =========================================================
   Certilisto — hoja de estilos única (v2, rediseño moderno)
   Tokens de marca (sección 4 del CLAUDE.md) + componentes.
   Mobile-first: base a 360 px, media queries hacia arriba.
   ========================================================= */

:root{
  --verde-sello:#0E7C4A;   /* marca, verificación, enlaces */
  --verde-bosque:#0B3B2A;  /* fondos hero/carné/footer, titulares */
  --mango:#FFAE1F;         /* SOLO botón de acción principal y énfasis puntual */
  --menta:#ECF7F0;         /* superficies, tarjetas, chips */
  --tinta:#132019;         /* texto sobre fondo claro */

  --blanco:#FFFFFF;
  --gris-borde:#DCE9E1;
  --gris-texto:#4A5A51;    /* texto secundario, AA sobre blanco */
  --rojo-error:#B3261E;
  --menta-oscura:#D9EEE1;  /* detalles sobre menta */

  --fuente-titulo:'Bricolage Grotesque', system-ui, sans-serif;
  --fuente-cuerpo:'Figtree', system-ui, sans-serif;
  --fuente-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radio:16px;
  --radio-suave:22px;
  --sombra-sm:0 1px 3px rgba(11,59,42,.06), 0 4px 14px rgba(11,59,42,.05);
  --sombra-md:0 4px 10px rgba(11,59,42,.07), 0 16px 36px rgba(11,59,42,.10);
}

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

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

body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  font-weight:400;
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.6;
}

h1,h2,h3{
  font-family:var(--fuente-titulo);
  font-weight:800;
  color:var(--verde-bosque);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 6vw, 3.1rem); }
h2{ font-size:clamp(1.5rem, 4vw, 2.1rem); }
h3{ font-size:1.15rem; font-weight:600; }

p{ margin:0 0 1em; }

a{ color:var(--verde-sello); text-underline-offset:3px; }
a:focus-visible{ outline:3px solid var(--verde-sello); outline-offset:2px; border-radius:4px; }

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

.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:20px;
}

.codigo{
  font-family:var(--fuente-mono);
  font-weight:500;
  letter-spacing:.04em;
}

/* Etiqueta pequeña sobre los titulares de sección */
.kicker{
  display:inline-block;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--verde-sello);
  margin-bottom:10px;
}

/* ---------- Botones ----------
   Área táctil mínima 52 px. El texto del botón dice lo que pasa. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:14px 32px;
  border:none;
  border-radius:999px;
  font-family:var(--fuente-cuerpo);
  font-size:1.06rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;
  width:100%;              /* móvil: ancho completo */
}
@media (min-width:600px){ .btn{ width:auto; } }

.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:3px solid var(--verde-bosque); outline-offset:2px; }

/* Acción principal: el ÚNICO uso libre del mango */
.btn-principal{
  background:var(--mango);
  color:var(--tinta);
  box-shadow:0 6px 18px rgba(255,174,31,.35);
}
.btn-principal:hover{ filter:brightness(1.04); box-shadow:0 8px 24px rgba(255,174,31,.45); }

.btn-secundario{ background:var(--verde-sello); color:var(--blanco); box-shadow:var(--sombra-sm); }
.btn-secundario:hover{ filter:brightness(1.08); }

.btn-borde{
  background:transparent;
  color:var(--verde-sello);
  border:2px solid var(--verde-sello);
}
.btn-borde:hover{ background:var(--menta); }
.btn-borde-claro{ color:var(--blanco); border-color:rgba(255,255,255,.4); }
.btn-borde-claro:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); }

.btn[disabled], .btn[aria-disabled="true"]{
  background:var(--gris-borde);
  color:var(--gris-texto);
  cursor:not-allowed;
  box-shadow:none;
}

/* ---------- Tarjetas y chips ---------- */
.tarjeta{
  background:var(--blanco);
  border:1px solid var(--gris-borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra-sm);
  padding:26px;
}
.tarjeta-menta{ background:var(--menta); border-color:transparent; box-shadow:none; }
.tarjeta-hover{ transition:transform .18s ease, box-shadow .18s ease; }
.tarjeta-hover:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 15px;
  border-radius:999px;
  background:var(--menta);
  color:var(--verde-bosque);
  font-size:.9rem;
  font-weight:600;
}

/* Estados de certificado: color + texto, nunca solo color */
.chip-vigente{ background:var(--verde-sello); color:var(--blanco); }
.chip-vencido{ background:var(--gris-borde); color:var(--tinta); }
.chip-revocado{ background:var(--rojo-error); color:var(--blanco); }

/* Chips sobre fondo oscuro (héroe) */
.chip-oscuro{
  background:rgba(255,255,255,.08);
  color:var(--menta);
  border:1px solid rgba(255,255,255,.14);
}

/* ---------- Imágenes de marca ---------- */
.img-marca{
  border-radius:var(--radio-suave);
  object-fit:cover;
  width:100%;
}
.img-pendiente{
  border-radius:var(--radio-suave);
  background:linear-gradient(145deg, var(--menta), var(--menta-oscura));
  color:var(--verde-sello);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.img-pendiente svg{ width:min(30%, 110px); opacity:.5; }

/* ---------- Formularios ---------- */
.campo{ margin-bottom:20px; }

.campo label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.campo .ayuda{
  font-size:.9rem;
  color:var(--gris-texto);
  margin-top:6px;
}

.campo input,
.campo select{
  width:100%;
  min-height:54px;
  padding:12px 16px;
  font:inherit;
  color:var(--tinta);
  background:var(--blanco);
  border:2px solid var(--gris-borde);
  border-radius:14px;
}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--verde-sello);
  box-shadow:0 0 0 4px rgba(14,124,74,.14);
}

.campo.con-error input{ border-color:var(--rojo-error); }
.campo .error{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  font-weight:600;
  color:var(--rojo-error);
  margin-top:6px;
}

/* ---------- Barra de progreso (curso y compra) ---------- */
.progreso{
  background:var(--menta);
  border-radius:999px;
  height:14px;
  overflow:hidden;
}
.progreso > span{
  display:block;
  height:100%;
  background:var(--verde-sello);
  border-radius:999px;
  transition:width .3s ease;
}

/* Pasos de compra 1-2-3 */
.pasos{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  list-style:none;
  margin:0 0 24px;
  padding:0;
  font-size:.9rem;
  font-weight:600;
}
.pasos li{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gris-texto);
}
.pasos li::before{
  content:attr(data-num);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--menta);
  color:var(--verde-bosque);
}
.pasos li[aria-current="step"]{ color:var(--verde-bosque); }
.pasos li[aria-current="step"]::before{ background:var(--verde-sello); color:var(--blanco); }

/* ---------- Avisos ---------- */
.aviso{
  display:flex;
  gap:10px;
  padding:14px 18px;
  border-radius:var(--radio);
  font-size:.95rem;
}
.aviso-ok{ background:var(--menta); color:var(--verde-bosque); }
.aviso-error{ background:#FBEAE9; color:var(--rojo-error); }

/* ---------- Fondos oscuros ---------- */
.fondo-bosque{
  background:var(--verde-bosque);
  color:var(--blanco);
}
.fondo-bosque h1,.fondo-bosque h2,.fondo-bosque h3{ color:var(--blanco); }
.fondo-bosque a{ color:var(--menta); }

/* ---------- Encabezado del sitio ---------- */
.sitio-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gris-borde);
}
.sitio-header-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
.logo-texto{
  font-family:var(--fuente-titulo);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.02em;
  color:var(--verde-bosque);
}
.logo-texto span{ color:var(--verde-sello); }
.logo-texto-claro{ color:var(--blanco); }
.logo-texto-claro span{ color:var(--mango); }

.header-derecha{
  display:flex;
  align-items:center;
  gap:6px;
}
.header-carrito{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  color:var(--verde-bosque);
  text-decoration:none;
  border-radius:12px;
}
.header-carrito:hover{ background:var(--menta); }
.header-carrito svg{ width:24px; height:24px; }
.header-carrito-n{
  position:absolute;
  top:2px;
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;
  height:19px;
  border-radius:999px;
  background:var(--mango);
  color:var(--tinta);
  font-size:.75rem;
  font-weight:700;
}

/* Menú de navegación */
.menu-boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  color:var(--verde-bosque);
  cursor:pointer;
}
.menu-boton:hover{ background:var(--menta); }
.menu-boton svg{ width:25px; height:25px; }
.menu-boton .icono-cerrar{ display:none; }
.menu-toggle:checked ~ .header-derecha .menu-boton .icono-abrir{ display:none; }
.menu-toggle:checked ~ .header-derecha .menu-boton .icono-cerrar{ display:block; }
.menu-toggle:focus-visible ~ .header-derecha .menu-boton{ outline:3px solid var(--verde-sello); outline-offset:2px; }

.sitio-nav{
  /* móvil: panel desplegable bajo el encabezado */
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:none;
  flex-direction:column;
  background:var(--blanco);
  border-bottom:1px solid var(--gris-borde);
  box-shadow:var(--sombra-md);
  padding:10px 20px 18px;
}
.menu-toggle:checked ~ .sitio-nav{ display:flex; }
.sitio-header-fila{ position:relative; }
.sitio-nav a{
  text-decoration:none;
  font-weight:600;
  color:var(--tinta);
  padding:14px 10px;   /* área táctil ≥44px */
  border-radius:10px;
}
.sitio-nav a:hover{ background:var(--menta); }
.sitio-nav a[aria-current="page"]{
  color:var(--verde-sello);
  background:var(--menta);
  font-weight:700;
}
.sitio-nav-carrito{ border-top:1px solid var(--gris-borde); margin-top:6px; padding-top:16px !important; }

/* Compra directa desde el encabezado */
.btn-compacto{
  min-height:44px;
  padding:9px 22px;
  font-size:.95rem;
  width:auto;
}
.header-compra{ display:none; }
.header-entrar{ display:none; }
.nav-compra{ margin-top:12px; }
.nav-compra .btn{ width:100%; }
.nav-entrar{ border-top:1px solid var(--gris-borde); margin-top:6px; padding-top:16px !important; }

@media (min-width:900px){
  .menu-boton{ display:none; }
  .menu-toggle{ display:none; }  /* sin botón visible, fuera del orden de Tab */
  .sitio-nav{
    position:static;
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:2px;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
  }
  .sitio-nav a{ padding:10px 14px; font-size:.98rem; }
  .sitio-nav-carrito{ display:none !important; }  /* en escritorio va el ícono */
  .nav-compra{ display:none; }                    /* en escritorio va en el header */
  .nav-entrar{ display:none !important; }         /* en escritorio va como botón */
  .header-compra{ display:block; }
  .header-entrar{ display:inline-flex; }
}

/* ---------- Héroe ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(14,124,74,.55), transparent 65%),
    var(--verde-bosque);
  color:var(--blanco);
  padding-block:56px 64px;
  overflow:hidden;
}
/* Titulares SIEMPRE blancos sobre el héroe (el fondo es verde bosque) */
.hero h1,.hero h2,.hero h3{ color:var(--blanco); }
.hero-grid{
  display:grid;
  gap:36px;
  grid-template-columns:1fr;
  align-items:center;
}
.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.hero-bajada{
  color:var(--menta);
  font-size:1.15rem;
  max-width:34em;
}
.hero-acciones{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px;
}
.hero-acciones form{ display:contents; }
.hero-nota{
  margin-top:18px;
  font-size:.9rem;
  color:rgba(236,247,240,.75);
}
.hero-media{ position:relative; }
.hero-media::before{
  content:'';
  position:absolute;
  inset:18px -14px -14px 18px;
  border-radius:var(--radio-suave);
  border:2px dashed rgba(255,174,31,.55);
  z-index:0;
}
.hero-media > *{ position:relative; z-index:1; }
.hero-sello-flotante{
  position:absolute;
  z-index:2;
  right:-8px;
  top:-16px;
  background:var(--verde-bosque);
  border-radius:50%;
  padding:10px;
  box-shadow:var(--sombra-md);
}
@media (min-width:840px){
  .hero{ padding-block:88px 96px; }
  .hero-grid{ grid-template-columns:1.15fr .85fr; gap:56px; }
  .hero-acciones{ flex-direction:row; }
}
.hero-compacto{ padding-block:48px 52px; }

/* ---------- Franja de confianza ---------- */
.franja-confianza{
  background:var(--menta);
}
.franja-confianza .container{
  display:grid;
  gap:14px;
  padding-block:22px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .franja-confianza .container{ grid-template-columns:repeat(3, 1fr); }
}
.confianza-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  color:var(--verde-bosque);
  font-size:.98rem;
}
.confianza-item svg{ flex:none; width:26px; height:26px; color:var(--verde-sello); }

/* ---------- Secciones ---------- */
.seccion{ padding-block:64px; }
.seccion-menta{ background:var(--menta); }
.seccion-menta .tarjeta-menta{ background:var(--blanco); box-shadow:var(--sombra-sm); }
@media (min-width:768px){ .seccion{ padding-block:96px; } }

.seccion-encabezado{
  text-align:center;
  max-width:620px;
  margin:0 auto 44px;
}
.seccion-encabezado p{ color:var(--gris-texto); font-size:1.05rem; }

.grid-2, .grid-3{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:600px){ .grid-2{ grid-template-columns:1fr 1fr; } }
@media (min-width:768px){ .grid-3{ grid-template-columns:1fr 1fr 1fr; } }

/* Pasos "Así de fácil" */
.paso-tarjeta{ text-align:left; position:relative; }
.paso-numero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--verde-sello);
  color:var(--blanco);
  font-family:var(--fuente-titulo);
  font-weight:800;
  font-size:1.35rem;
  margin-bottom:14px;
}
.paso-tarjeta h3{ font-size:1.22rem; font-weight:800; }

/* Diferenciales con ícono */
.diferencial{ display:flex; gap:16px; align-items:flex-start; }
.diferencial-icono{
  flex:none;
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--menta);
  color:var(--verde-sello);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.diferencial-icono svg{ width:26px; height:26px; }

/* ---------- Precio ---------- */
.precio-tarjeta{
  max-width:560px;
  margin-inline:auto;
  padding:36px 28px;
  border:none;
  box-shadow:var(--sombra-md);
  border-radius:var(--radio-suave);
}
.precio-grande{
  font-size:clamp(2.6rem, 8vw, 3.4rem);
  color:var(--verde-bosque);
  margin:6px 0 2px;
}
.precio-detalle{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px auto;
  max-width:360px;
  text-align:left;
}
.precio-detalle li{
  list-style:none;
  padding-left:30px;
  position:relative;
}
.precio-detalle li::before{
  content:'✓';
  position:absolute;
  left:2px;
  color:var(--verde-sello);
  font-weight:700;
}

/* ---------- FAQ (details nativo, sin JS) ---------- */
.faq{ max-width:720px; margin-inline:auto; }
.faq details{
  border:1px solid var(--gris-borde);
  border-radius:var(--radio);
  margin-bottom:12px;
  background:var(--blanco);
  transition:box-shadow .15s ease;
}
.faq details[open]{ box-shadow:var(--sombra-sm); }
.faq summary{
  padding:18px 48px 18px 20px;
  font-weight:700;
  cursor:pointer;
  min-height:54px;
  position:relative;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--menta);
  color:var(--verde-sello);
  font-weight:700;
  font-size:1.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.faq details[open] summary::after{ content:'–'; }
.faq details p{ padding:0 20px 18px; margin:0; color:var(--gris-texto); }

/* ---------- Página del curso ---------- */
.curso-columnas{
  display:grid;
  gap:28px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .curso-columnas{ grid-template-columns:1.4fr 1fr; align-items:start; }
  .compra-caja{ position:sticky; top:84px; }
}
.lista-incluye, .lista-temario{
  padding-left:0;
  margin:0;
  list-style:none;
}
.lista-incluye li{
  padding:11px 0 11px 34px;
  position:relative;
  border-bottom:1px solid var(--gris-borde);
}
.lista-incluye li::before{
  content:'✓';
  position:absolute;
  left:4px;
  color:var(--verde-sello);
  font-weight:700;
}
.lista-temario{ counter-reset:tema; }
.lista-temario li{
  counter-increment:tema;
  padding:11px 0 11px 42px;
  position:relative;
  border-bottom:1px solid var(--gris-borde);
}
.lista-temario li::before{
  content:counter(tema);
  position:absolute;
  left:0;
  top:9px;
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--menta);
  color:var(--verde-bosque);
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Testimonios */
.testimonio{ margin:0; display:flex; flex-direction:column; gap:4px; }
.testimonio p{ font-size:1rem; }
.testimonio-pie{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
}
.testimonio-avatar{
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--verde-sello);
  color:var(--blanco);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.testimonio-pie span{
  color:var(--gris-texto);
  font-size:.9rem;
  font-weight:600;
}

/* ---------- Carrito ---------- */
.carrito-lista{ display:flex; flex-direction:column; gap:12px; }
.carrito-item{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media (min-width:600px){
  .carrito-item{ flex-direction:row; justify-content:space-between; align-items:center; }
}
.carrito-item-derecha{
  display:flex;
  align-items:center;
  gap:16px;
}
.carrito-precio{ font-size:1.2rem; color:var(--verde-bosque); }
.enlace-quitar{
  background:none;
  border:none;
  color:var(--gris-texto);
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
  font-size:.95rem;
  padding:10px 4px;   /* área táctil */
}
.enlace-quitar:hover{ color:var(--rojo-error); }
.carrito-total{ max-width:480px; }
.carrito-total-fila{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:1.1rem;
}

/* ---------- Línea de tiempo (Cómo funciona) ---------- */
.timeline{
  max-width:640px;
  margin-inline:auto;
  padding:0;
  list-style:none;
  position:relative;
}
.timeline::before{
  content:'';
  position:absolute;
  left:22px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--gris-borde);
}
.timeline li{
  position:relative;
  padding:0 0 32px 68px;
}
.timeline li:last-child{ padding-bottom:0; }
.timeline-numero{
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--verde-sello);
  color:var(--blanco);
  font-family:var(--fuente-titulo);
  font-weight:800;
  font-size:1.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 5px var(--blanco);
}
.timeline h2{ font-size:1.22rem; margin-bottom:4px; letter-spacing:0; }
.timeline p{ color:var(--gris-texto); margin:0; }

/* Valores (Nosotros) */
.valor-tarjeta{ text-align:center; }
.valor-tarjeta h3{ color:var(--verde-sello); font-weight:800; font-size:1.3rem; }

/* ---------- Pie del sitio ---------- */
.sitio-footer{ padding-block:52px 88px; margin-top:64px; }
.footer-enlaces{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:28px;
}
@media (min-width:600px){ .footer-enlaces{ flex-direction:row; gap:32px; } }
.footer-enlaces a{ text-decoration:none; font-weight:600; padding-block:4px; }
.footer-enlaces a:hover{ text-decoration:underline; }
.footer-legal{
  font-size:.82rem;
  color:#9DBFAF;
  max-width:640px;
}

/* ---------- WhatsApp flotante (todas las pantallas) ---------- */
.whatsapp-flotante{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--verde-sello);
  color:var(--blanco);
  box-shadow:0 4px 14px rgba(11,59,42,.35);
  text-decoration:none;
  transition:transform .15s ease;
}
.whatsapp-flotante:hover{ transform:scale(1.06); }
.whatsapp-flotante svg{ width:27px; height:27px; }

/* ---------- Utilidades ---------- */
.texto-centro{ text-align:center; }
.texto-secundario{ color:var(--gris-texto); }
.mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; } .mt-4{ margin-top:40px; }
.mb-1{ margin-bottom:8px; } .mb-2{ margin-bottom:16px; } .mb-3{ margin-bottom:24px; } .mb-4{ margin-bottom:40px; }

.visualmente-oculto{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}