/* --- Fuentes, servidas desde el propio sitio -----------------------------

   Antes venian de fonts.googleapis.com. Era la UNICA peticion a un tercero
   de un sitio que no tiene ni una linea de JavaScript, y ademas fallaba el
   checklist de publicacion: "fuentes servidas desde el propio sitio".

   Lo que se gana:
   · Ningun visitante le entrega su IP a Google por entrar aca.
   · Dos handshakes menos (DNS + TLS a otro origen) antes de pintar texto.
     En datos moviles eso se nota.
   · El sitio deja de depender de que un tercero siga en linea.

   Inter es fuente VARIABLE: Google servia el MISMO archivo para 400, 500 y
   600 -- verificado por md5, los tres identicos. Se guarda uno solo, con
   font-weight:100 900. Eso solo son ~260 KB que no se copian tres veces.

   Los unicode-range NO son adorno: el navegador descarga latin-ext solo si
   la pagina usa un caracter de ese rango. El espanol entero (n con tilde,
   vocales acentuadas, signos de apertura) vive en latin, U+0000-00FF. Un
   visitante normal baja ~78 KB, no los 183 KB del disco.

   font-display:swap: el texto se ve con la fuente del sistema mientras
   carga, en vez de quedar invisible. Nunca una pagina en blanco por una
   fuente.
   -------------------------------------------------------------------------- */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/inter-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/inter-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(/fuentes/poppins-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(/fuentes/poppins-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/poppins-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/poppins-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fuentes/poppins-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* ==========================================================================
   Konecta Positivo — consultora de gestión de personas

   La identidad sale del logo real, medida pixel a pixel, no inventada:
     · Un degradado que va de verde (#82c494) a turquesa (#44bcc2).
     · Un símbolo de NODOS CONECTADOS que forma una «K». Ese motivo —punto
       más línea— se repite en toda la interfaz: es lo único gráfico que de
       verdad es de ellas.
     · Sin fotos de archivo. Las del sitio viejo eran del tema comprado.

   Parentesco con el sitio personal de Caro Pichuante: el extremo turquesa
   de este logo (#4dbbb9) y su acento (#5ebebc) son el mismo color. Los dos
   sitios son familia. Konecta tira al verde; ella tira al azul. No se
   unifican: se parecen.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ── Los tres del logo. Decorativos: NO tienen contraste para texto. ── */
  --verde:       #82c494;
  --verde-medio: #62bead;
  --turquesa:    #44bcc2;

  /* ── La paleta REAL de su sitio, medida en el CSS de su portada ──
     El primer intento de este sitio usó un verde pizarra (#12343a) para el
     texto y bandas verde oscuro con texto blanco. Quedaba opaco y pesado.
     Ellas no usan eso: usan AZUL MARINO sobre AQUA CLARO. La estructura de
     valores estaba invertida — el problema no era falta de brillo, era que
     los fondos oscuros se comían la luz. */
  --marino:       #161b39;   /* 15 apariciones en su CSS: es su color de texto */
  --marino-suave: #4d5470;
  --teal:         #08a4a4;   /* 8 apariciones: su acento */
  --aqua:         #77b6c3;   /* --gradient-color-from de su tema */
  --salvia:       #9bc091;   /* --gradient-color-to de su tema */

  /* El teal de marca da 3.06:1 contra blanco: sirve para adornar, no para
     leer. Esta versión da 5.2:1 y se sigue leyendo como el mismo color. */
  --acento-texto: #0b7a7a;

  --tinta:       var(--marino);
  --tinta-suave: var(--marino-suave);
  --borde:       #d7e6ea;
  --fondo:       #ffffff;
  --fondo-alt:   #eef7f9;

  /* El degradado del logo se reserva para los iconos y detalles chicos.
     Para superficies grandes va el suyo, que es claro. */
  --degradado: linear-gradient(100deg, var(--verde) 0%, var(--turquesa) 100%);
  --degradado-claro: linear-gradient(105deg, #93cbd6 0%, #a9cfae 100%);

  --display: 'Poppins', system-ui, sans-serif;
  --cuerpo:  'Inter', system-ui, sans-serif;

  --e-1: .25rem; --e-2: .5rem;  --e-3: .75rem; --e-4: 1rem;
  --e-6: 1.5rem; --e-8: 2rem;   --e-12: 3rem;  --e-16: 4rem;
  --e-20: 5rem;  --e-24: 6.5rem;

  --ancho-texto: 64ch;
  --ancho-max: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --acento-texto: #5ecfcf;
    --tinta:        #e7ebf2;
    --tinta-suave:  #a6aec4;
    --borde:        #2a3050;
    --fondo:        #0e1226;
    --fondo-alt:    #161c38;
  }
}

/* --- Reinicio -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

body {
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.2;
  color: var(--tinta);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { max-width: var(--ancho-texto); text-wrap: pretty; }
a { color: var(--acento-texto); text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; }

/* El salto por ancla tiene que frenar debajo de la cabecera fija. En móvil
   la cabecera es más alta porque la navegación baja a su propia fila:
   133px medidos en el despliegue, no un número inventado. */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (max-width: 900px) { html { scroll-padding-top: 9rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Estructura ------------------------------------------------------------ */

.contenedor { width: min(100% - 2.5rem, var(--ancho-max)); margin-inline: auto; }
.flujo > * + * { margin-block-start: var(--e-6); }
.seccion { padding-block: var(--e-24); }

/* La sección alterna no es gris neutro: lleva un lavado del degradado de
   marca. Es casi imperceptible por metro cuadrado y muy perceptible a
   pantalla completa — es lo que hace que el sitio se sienta de un color y
   no de ninguno. */
.alterna {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--verde) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 60% at 95% 100%, color-mix(in srgb, var(--turquesa) 16%, transparent), transparent 70%),
    var(--fondo-alt);
}
.centrado { text-align: center; }
.centrado p { margin-inline: auto; }

.saltar { position: absolute; left: -9999px; background: var(--marino); color: #fff; padding: var(--e-3) var(--e-4); }
.saltar:focus { left: var(--e-4); top: var(--e-4); z-index: 30; }

/* Rótulo de sección: el motivo de nodos del logo, reducido a su mínimo —
   un punto y una línea. Es la firma gráfica que se repite en todo el sitio. */
.rotulo {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--display); font-weight: 600;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-texto);
  margin-block-end: var(--e-4);
}
.rotulo::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--degradado);
}
.rotulo::after {
  content: ""; width: 2.5rem; height: 1px;
  background: linear-gradient(90deg, var(--turquesa), transparent);
}
.centrado .rotulo { justify-content: center; }
.centrado .rotulo::after { display: none; }

/* --- Cabecera -------------------------------------------------------------- */

.sitio-header {
  position: sticky; top: 0; z-index: 20;
  padding-block: var(--e-3);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--borde);
}
.barra { display: flex; gap: var(--e-4); align-items: center; justify-content: space-between; }
.marca img { width: clamp(150px, 22vw, 190px); }
@media (prefers-color-scheme: dark) { .marca img { filter: brightness(1.15); } }

.nav { display: flex; gap: var(--e-6); }
.nav a {
  font-family: var(--display); font-size: .84rem; font-weight: 500;
  color: var(--tinta-suave); text-decoration: none;
}
.nav a:hover { color: var(--acento-texto); }
.nav a[aria-current="page"] { color: var(--acento-texto); font-weight: 600; }

/* En móvil la navegación no se esconde detrás de un botón: baja a una tira.
   Son cuatro enlaces y caben. Un desplegable pediría JavaScript que este
   sitio no necesita para nada más. */
@media (max-width: 900px) {
  .barra { flex-wrap: wrap; row-gap: var(--e-2); column-gap: var(--e-3); }
  .marca { flex: 1 1 auto; }
  .nav-envoltorio {
    order: 3; flex-basis: 100%;
    overflow-x: auto; scrollbar-width: none;
    border-block-start: 1px solid var(--borde);
  }
  .nav-envoltorio::-webkit-scrollbar { display: none; }
  .nav { gap: var(--e-6); }
  .nav a { display: block; padding-block: var(--e-3); white-space: nowrap; font-size: .8rem; }
}

/* El comentario de arriba dice «son cuatro enlaces y caben». A 360px sí; a
   320-340 NO: «Contacto» se salía 4px y había que arrastrar la tira para
   verlo. La tira scrollable evita que se rompa el diseño, pero un enlace que
   hay que descubrir arrastrando es un enlace que nadie usa. Cerrar el hueco
   entre ítems los devuelve a la pantalla sin tocar nada más. */
@media (max-width: 400px) {
  .nav { gap: var(--e-4); }
}

/* --- Portada --------------------------------------------------------------- */

/* La portada es AQUA CLARO con texto marino, no una banda oscura con texto
   blanco. Es el cambio que devuelve la frescura: el marino sobre aqua da
   8:1 de contraste —más que el blanco sobre verde oscuro que había antes—
   y además se ve luminoso en vez de corporativo. */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--degradado-claro);
  color: var(--marino);
  padding-block: clamp(var(--e-16), 12vw, var(--e-24));
}
/* La red de nodos de la portada, dibujada en SVG incrustado.
   Antes eran cinco degradados radiales sueltos y casi no se veían: la
   portada quedaba como un rectángulo verde plano. Ahora es una red de
   verdad —nodos unidos por líneas—, que es literalmente el logo ampliado.
   Va en el CSS como data URI: cero peticiones, ~1 KB. */
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: .5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='white' stroke-width='1.1' fill='none' opacity='.55'%3E%3Cpath d='M70 90 L210 160 L150 300 L70 90 M210 160 L360 60 M360 60 L520 130 L470 280 L210 160 M520 130 L690 80 M690 80 L740 230 L620 350 L470 280 M150 300 L300 400 L470 280 M300 400 L620 350 M620 350 L700 460 M150 300 L90 430'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='70' cy='90' r='7'/%3E%3Ccircle cx='210' cy='160' r='11'/%3E%3Ccircle cx='360' cy='60' r='6'/%3E%3Ccircle cx='520' cy='130' r='9'/%3E%3Ccircle cx='690' cy='80' r='6.5'/%3E%3Ccircle cx='150' cy='300' r='8'/%3E%3Ccircle cx='470' cy='280' r='12'/%3E%3Ccircle cx='740' cy='230' r='7'/%3E%3Ccircle cx='300' cy='400' r='9'/%3E%3Ccircle cx='620' cy='350' r='7.5'/%3E%3Ccircle cx='700' cy='460' r='5.5'/%3E%3Ccircle cx='90' cy='430' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}
/* En pantalla angosta la red compite con el texto: se baja. */
@media (max-width: 700px) { .portada::before { opacity: .3; } }

/* Velo suave del lado donde vive el texto. Con la portada clara el problema
   de contraste desapareció —el marino sobre aqua da 8:1 y los nodos blancos
   ahora suman luz en vez de restarla—, así que esto ya no protege la
   lectura: solo calma el lado izquierdo para que el titular respire. */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg,
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.18) 40%,
    transparent 70%);
}
.portada h1, .portada h2 { color: var(--marino); }
.portada p { color: color-mix(in srgb, var(--marino) 88%, transparent); }
.portada .rotulo { color: #0a6f6f; }
.portada .rotulo::before { background: var(--marino); }
.portada .rotulo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--marino) 45%, transparent), transparent); }

.entrada { font-size: clamp(1.05rem, 2vw, 1.2rem); }

/* Portada interior, más baja que la del home */
.portada--interior { padding-block: clamp(var(--e-12), 8vw, var(--e-16)); }

/* --- Cifras ---------------------------------------------------------------- */

.cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4);
  margin-block-start: var(--e-12); padding-block-start: var(--e-8);
  border-block-start: 1px solid color-mix(in srgb, var(--marino) 22%, transparent);
}
.cifra strong {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.1;
}
.cifra span {
  font-family: var(--display); font-size: clamp(.62rem, 1.6vw, .72rem);
  letter-spacing: .12em; text-transform: uppercase; opacity: .85;
}
@media (max-width: 560px) {
  .cifras { grid-template-columns: 1fr; gap: 0; }
  .cifra { display: flex; align-items: baseline; gap: var(--e-3); padding-block: var(--e-3); }
  .cifra + .cifra { border-block-start: 1px solid color-mix(in srgb, var(--marino) 16%, transparent); }
  .cifra strong { display: inline; font-size: 1.5rem; }
}

/* --- Rejillas -------------------------------------------------------------- */

.rejilla { display: grid; gap: var(--e-8); margin-block-start: var(--e-12); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --- Servicios ------------------------------------------------------------- */

/* Sin fotos a propósito: las del sitio viejo eran de archivo, del tema
   comprado. Ocho fotos genéricas de oficinas no dicen nada. El número en
   el degradado y el motivo de nodos sí son de la marca. */
.servicio {
  position: relative;
  padding: var(--e-8);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 2px;
  transition: border-color .18s ease, transform .18s ease;
}
.servicio:hover { border-color: var(--turquesa); transform: translateY(-2px); }
/* La barra de degradado se ve SIEMPRE, no solo al pasar el mouse. Antes
   aparecía en hover y en móvil —que es donde llega el tráfico— no existía:
   ocho tarjetas blancas y ni una gota de color. */
.servicio::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--degradado);
  opacity: .55; transition: opacity .18s ease;
}
.servicio:hover::before { opacity: 1; }
/* El icono va dentro de un halo tintado. Ese halo es lo que devuelve el
   color que el sitio había perdido al sacar las fotos de banco: ocho manchas
   de marca repartidas por la página, en vez de ocho tarjetas blancas. */
.servicio .icono {
  display: grid; place-items: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--verde) 26%, transparent) 0%,
      color-mix(in srgb, var(--turquesa) 16%, transparent) 100%);
  margin-block-end: var(--e-6);
  transition: transform .18s ease;
}
.servicio .icono svg { width: 2.5rem; height: 2.5rem; }
.servicio:hover .icono { transform: scale(1.06); }

.servicio .numero {
  position: absolute; inset-block-start: var(--e-6); inset-inline-end: var(--e-6);
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  color: var(--turquesa);
  opacity: .75;
}
.servicio h3 { margin-block-end: var(--e-3); }
.servicio p { color: var(--tinta-suave); font-size: .97rem; max-width: none; }

/* --- Valores --------------------------------------------------------------- */

.valor { padding-inline-start: var(--e-6); border-inline-start: 2px solid var(--turquesa); }
.valor h3 { margin-block-end: var(--e-2); }
.valor p { color: var(--tinta-suave); max-width: none; }

/* --- Equipo ---------------------------------------------------------------- */

.persona { text-align: center; }
.persona img {
  width: 100%; max-width: 260px; margin-inline: auto;
  aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 3px solid transparent;
  background: var(--degradado) border-box;
  /* El aro de degradado alrededor del retrato: es el logo aplicado a una foto */
  padding: 3px;
}
.persona h3 { margin-block-start: var(--e-6); }
.persona .cargo {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento-texto);
  margin-block: var(--e-2) var(--e-4);
  max-width: none;
}
.persona .bio { font-size: .94rem; color: var(--tinta-suave); text-align: start; max-width: none; }

/* Marcador de dato que falta. Se ve, a propósito: un hueco tiene que
   notarse hasta que Carolina lo llene. */
.falta {
  background: #fff3cd; color: #6b4e00;
  padding: .1em .45em; border-radius: 2px;
  font-size: .9em; font-weight: 600;
  border: 1px dashed #d0a800;
}
@media (prefers-color-scheme: dark) {
  .falta { background: #4a3c00; color: #ffe89a; border-color: #a58600; }
}

/* --- Formulario ------------------------------------------------------------ */

.formulario { display: grid; gap: var(--e-6); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); }
@media (max-width: 640px) { .par { grid-template-columns: 1fr; } }

.campo { display: grid; gap: var(--e-2); }
.campo label {
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta);
}
.campo .opcional { font-weight: 400; color: var(--tinta-suave); text-transform: none; letter-spacing: 0; }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 1rem; color: var(--tinta);
  padding: var(--e-3) var(--e-4); min-height: 48px;
  background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 2px;
  width: 100%;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--turquesa); outline: 2px solid color-mix(in srgb, var(--turquesa) 40%, transparent); outline-offset: 1px;
}

.consentimiento { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
/* 24px, no 18: es el mínimo de tamaño de objetivo de WCAG 2.2 para el propio
   control. El texto del label también es pulsable, pero la casilla tiene que
   poder tocarse sola. */
.consentimiento input { width: 1.5rem; height: 1.5rem; min-height: 0; margin-block-start: .2rem; flex: none; accent-color: var(--acento-texto); }
.consentimiento label { font-family: var(--cuerpo); font-weight: 400; font-size: .92rem; color: var(--tinta-suave); letter-spacing: 0; }

/* --- Botones --------------------------------------------------------------- */

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; max-width: none; }
.centrado .acciones { justify-content: center; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--e-3) var(--e-8); min-height: 48px;
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  background: var(--marino); color: #fff;
  text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.boton:hover { filter: brightness(1.12); transform: translateY(-1px); }
.boton--blanco { background: #fff; color: var(--marino); background-image: none; }
.boton--blanco:hover { background: #eaf6f6; }
.boton--linea {
  background: none; background-image: none;
  color: var(--acento-texto); border: 1px solid currentColor;
}
.boton--linea:hover { background: color-mix(in srgb, var(--turquesa) 12%, transparent); filter: none; }
.portada .boton--linea, .cierre .boton--linea { color: var(--marino); }
.portada .boton--linea:hover { background: color-mix(in srgb, var(--marino) 10%, transparent); }

/* --- Contacto -------------------------------------------------------------- */

.datos-contacto { display: grid; gap: var(--e-8); }
.dato-contacto { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; }
.dato-contacto .punto {
  width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--degradado); margin-block-start: .5rem;
}
.dato-contacto h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-texto); margin-block-end: var(--e-1); }
.dato-contacto p, .dato-contacto a { color: var(--tinta); max-width: none; }

/* --- Cierre ---------------------------------------------------------------- */

/* El cierre también es claro. El ancla oscura de la página es el pie, y con
   uno basta: dos bandas oscuras seguidas era justo lo que hacía que el sitio
   se sintiera pesado. */
.cierre {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--degradado-claro); color: var(--marino);
  text-align: center; padding-block: var(--e-20);
}
.cierre h2 { color: var(--marino); }
.cierre p { color: color-mix(in srgb, var(--marino) 88%, transparent); margin-inline: auto; }
/* Los mismos nodos de la portada, más tenues: cierran el círculo visual. */
.cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='white' stroke-width='1.1' fill='none' opacity='.7'%3E%3Cpath d='M60 60 L180 130 L90 240 M180 130 L340 40 M340 40 L520 120 L620 250 M520 120 L720 60 M180 130 L420 220 L620 250'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3Ccircle cx='180' cy='130' r='10'/%3E%3Ccircle cx='340' cy='40' r='6'/%3E%3Ccircle cx='520' cy='120' r='8'/%3E%3Ccircle cx='720' cy='60' r='6'/%3E%3Ccircle cx='90' cy='240' r='7'/%3E%3Ccircle cx='420' cy='220' r='9'/%3E%3Ccircle cx='620' cy='250' r='6.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

/* --- Pie ------------------------------------------------------------------- */

.sitio-footer {
  padding-block: var(--e-16) var(--e-8);
  background: var(--marino); color: #a9b0c8; font-size: .9rem;
}
.sitio-footer a { color: #fff; }
.sitio-footer img { width: 180px; margin-block-end: var(--e-6); }
.footer-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-12); }
@media (max-width: 760px) { .footer-rejilla { grid-template-columns: 1fr; gap: var(--e-8); } }
.sitio-footer h3 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-block-end: var(--e-4); }
.sitio-footer li + li { margin-block-start: var(--e-2); }
.sitio-footer .legal {
  margin-block-start: var(--e-12); padding-block-start: var(--e-6);
  border-block-start: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: #8a92ad;
}
/* ⚠ `.sitio-footer a { color:#fff }` (0,1,1) le gana a `.boton--blanco`
   (0,1,0), así que el botón del pie salía BLANCO SOBRE BLANCO: invisible,
   y no se ve mirando la hoja de estilos — hay que medir el color computado.
   Esta regla (0,2,0) lo devuelve al marino.

   El nowrap es lo que impide que «Escribir por WhatsApp» se parta en dos
   líneas dentro de la columna del pie, que mide ~200px. */
/* ⚠ `--e-5` NO EXISTE en la escala: va --e-4, --e-6. Estaba escrito así y la
   declaración entera se descartaba en silencio, sin margen y sin error. */
.sitio-footer .boton {
  margin-block-start: var(--e-6);
  padding-inline: var(--e-4);
  white-space: nowrap;
}
.sitio-footer .boton--blanco { color: var(--marino); }
.sitio-footer .boton--blanco:hover { color: var(--marino); }

/* ⚠ Sin esto el botón le dicta el ancho a la rejilla del pie. Un elemento de
   grid tiene min-width:auto, o sea nunca se encoge por debajo de su contenido
   — y con `nowrap` ese mínimo son ~250px. Medido a 800px de ventana, las
   columnas salían 233/167/249: la primera, que es la principal (1.4fr),
   terminaba MÁS ANGOSTA que la de contacto. El `min-width:0` devuelve el
   control a las proporciones declaradas. */
.footer-rejilla > * { min-width: 0; }

/* --- WhatsApp -------------------------------------------------------------- */

/* ⚠ NO se usa el verde de WhatsApp. Rompería la paleta de la marca en el
   único lugar donde el visitante decide algo. El botón se reconoce por la
   FORMA del icono, no por el color — y el icono hereda currentColor, así que
   sirve igual sobre fondo claro, sobre el marino del pie y sobre la portada. */
.boton .ico {
  width: 1.35em; height: 1.35em; flex: none;
  margin-inline-end: .5em; fill: currentColor;
}

/* --- Marca personal de la directora ---------------------------------------- */

/* El enlace de vuelta a caropichuante.cl. Existía en una sola dirección:
   el sitio de ella enlazaba a Konecta dos veces y Konecta no devolvía
   ninguna. Konecta lleva años indexado; el sitio personal nació en agosto
   de 2026. El enlace que falta es el que traspasa autoridad. */
.marca-personal { color: #9db6b8; margin-block-start: var(--e-4); }
.marca-personal a { border-block-end: 1px solid rgba(255,255,255,.35); }

/* --- Trampa para robots ---------------------------------------------------- */

/* ⚠ NO se usa display:none ni visibility:hidden: los robots que valen algo
   los detectan y saltan el campo. Esto lo saca de la pantalla pero lo deja
   en el árbol, así que el robot lo encuentra y lo rellena.

   Y NO se usa left:-9999px, que puede provocar barra horizontal si algún
   ancestro no es position:relative. El recorte a 1px no puede desbordar. */
.trampa {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}