/*
 * EL SALTO A LOS ANCLAJES, SUAVE
 *
 * Lo hacía un plugin —page-scroll-to-id, con su propio archivo de JavaScript—.
 * El navegador lo hace solo con esta línea, así que el plugin ya no se carga.
 *
 * scroll-padding-top descuenta la cabecera fija: sin él, al saltar a #contacto
 * el titular de la sección queda escondido debajo de la barra de arriba.
 */
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
@media (prefers-reduced-motion: reduce){
  /* Quien pidió menos movimiento no quiere que la página se desplace sola de
     un extremo a otro: salta de golpe, que es lo de siempre. */
  html{scroll-behavior:auto;}
}

/*
 * Elementos HTML y utilidades compartidas.
 * Nada de esto es específico de una sección; eso vive en components.css.
 */

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  letter-spacing:-.01em;
  /* text-wrap:balance reparte las líneas de un titular para que no quede
     una palabra suelta al final. Sin soporte, el navegador lo ignora. */
  text-wrap:balance;
}

/*
 * Foco visible. WordPress y muchos temas lo quitan por estética y dejan el
 * sitio inutilizable con teclado. Aquí se marca claro.
 */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* Sólo para lectores de pantalla */
.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Enlace de salto, visible sólo al tabular */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface);color:var(--text);
  padding:12px 20px;border-radius:0 0 var(--radius) 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:1;
}

/*
 * Píldora de sección. Reemplaza al típico "eyebrow" en cursiva; se eligió
 * porque es el mismo tratamiento que la marca ya usa en sus materiales de
 * congreso, así que el sitio se ve de la misma familia.
 */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:11px 26px;border-radius:999px;
  background:var(--accent-tint);
  color:var(--accent-ink);
  border:1px solid rgba(4,169,156,.32);
}
/* Sobre fondo oscuro la píldora se invierte */
.on-dark .eyebrow{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
/*
 * Y el encabezado de sección se aclara. Va aquí y no en cada sección oscura
 * porque .section__head es común: sin esta regla, una sección que pase a
 * oscuro se queda con el titular en color de texto normal y no se lee. Ya
 * pasó al mover la metodología a fondo oscuro.
 */
.on-dark .section__head h2{color:#fff;}
.on-dark .section__head p{color:#CFE0F5;}

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:6px;
  text-decoration:none;border:1.5px solid transparent;
  transition:transform .15s ease,background .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:#012320;}
.btn-primary:hover{background:#06C0B1;}
.btn-white{background:#fff;color:var(--brand-navy);}
.btn-white:hover{background:var(--accent-tint);}
.btn-outline{border-color:rgba(255,255,255,.75);color:#fff;background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-dark{border-color:var(--border-strong);color:var(--text);background:transparent;}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:5px;}
.btn-card{
  border-color:var(--border-strong);color:var(--accent-ink);
  width:100%;justify-content:center;background:transparent;
}
.btn-card:hover{background:var(--accent-tint);border-color:var(--accent);}

/* --- Secciones genéricas --- */
.section{padding:92px 0;position:relative;}
.section--tint{background:var(--surface-2);}
.section--white{background:var(--surface);}
.section__head{max-width:660px;margin-bottom:48px;}
.section__head .eyebrow{margin-bottom:18px;}
/*
 * El titular de sección, también fluido y por el mismo motivo que el del banner:
 * 30px a 1280, que es el ancho real de la mayoría, y hasta 32 en monitores
 * anchos. Antes eran 34 fijos, calibrados mirando una pantalla grande.
 */
.section__head h2{font-size:clamp(24px, 2.4vw, 32px);}
.section__head p{color:var(--text-muted);font-size:16.5px;margin:18px 0 0;}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center;}

/*
 * Manchas de color difuminadas de fondo. Dan profundidad sin usar imágenes,
 * que es lo que permite tener color en la página sin sumar peticiones.
 */
.ambient-blob{
  position:absolute;border-radius:50%;
  filter:blur(60px);z-index:0;pointer-events:none;
}

/* Quien pidió menos movimiento en su sistema, no ve animaciones */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}