/* --- 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 JavaScript, y fallaba el checklist de publicacion:
   "fuentes servidas desde el propio sitio".

   Y aca pesa mas que en otros sitios: quien entra a la web de una coach de
   empleabilidad suele estar buscando trabajo. Esa visita no tiene por que
   pasar por los servidores de un tercero.

   Montserrat y Open Sans son fuentes VARIABLES: Google servia el MISMO archivo
   para cada peso. Verificado por md5. De 16 archivos quedaron 6.
   698 KB -> 216 KB en disco, y un visitante en espanol baja ~102 KB.

   Los unicode-range hacen que latin-ext solo se descargue si la pagina usa un
   caracter de ese rango. El espanol entero vive en latin, U+0000-00FF.

   font-display:swap: el texto se lee con la fuente del sistema mientras carga,
   nunca en blanco.
   -------------------------------------------------------------------------- */

@font-face{font-family:"Yellowtail";font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/yellowtail-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:"Yellowtail";font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/yellowtail-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:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/montserrat-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:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/montserrat-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:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fuentes/open-sans-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:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fuentes/open-sans-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;}

/* ==========================================================================
   Caro Pichuante — coaching de empleabilidad

   La identidad NO se inventó acá: está sacada de sus propios ebooks y
   propuestas, que es donde vive la marca que ella ya usa.
     · Azul. Overlay azul sobre foto, texto azul oscuro sobre blanco.
     · Script caligráfico para los títulos ("Coaching Empleabilidad",
       "¿Qué conseguirás?").
     · Sans en mayúsculas muy espaciada para la firma ("CARO PICHUANTE").
     · Marco de línea fina blanca, abierto para dejar pasar el título.
     · Flor de pétalos alargados como marca de agua.

   Todo eso está reproducido acá en CSS. Los valores viven en :root.
   ========================================================================== */

/* Las tipografías se cargan con <link> desde el <head>, no con @import.
   Un @import dentro del CSS obliga al navegador a descargar styles.css
   completo antes de empezar a pedir las fuentes: dos viajes en serie en vez
   de dos en paralelo. En móvil con 4G eso se nota. */

:root {
  color-scheme: light dark;

  /* Azules — de sus PDFs */
  --azul-texto:   #1b5480;
  --azul-fuerte:  #14497a;
  --azul-medio:   #3e6fa6;
  --azul-acero:   #5f8db9;   /* también está en su paleta y es la pared de sus fotos */

  /* Resto de su paleta de 2022 */
  --lila:      #e4d7df;
  --malva:     #caa9d7;
  --berenjena: #615781;
  --turquesa:  #5ebebc;
  --petroleo:  #04504c;

  /* Roles */
  --color-principal: var(--azul-medio);
  /* Tinta del boton solido. Existe para que el modo oscuro pueda invertirla:
     alli --color-principal se aclara a #7fb4e4 y el blanco encima daba 2,20:1. */
  --boton-tinta: #fff;
  --color-principal-hover: var(--azul-fuerte);
  --color-titulo: var(--azul-fuerte);
  --color-texto: #2c3944;
  --color-texto-suave: #61707c;
  --color-borde: #dde5ec;
  --color-fondo: #ffffff;
  --color-fondo-alt: #f2f6fa;

  --script: 'Yellowtail', cursive;
  --display: 'Montserrat', system-ui, sans-serif;
  --cuerpo: 'Open Sans', 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: 62ch;
  --ancho-max: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-principal: #7fb4e4;
    --color-principal-hover: #a3cbef;
    --color-titulo: #cfe4f5;
    --color-texto: #dde5eb;
    --color-texto-suave: #97a6b3;
    --color-borde: #2b3742;
    --color-fondo: #131a20;
    --color-fondo-alt: #1a232b;
    /* 23-ago · El boton solido llevaba texto blanco sobre el azul CLARO del modo
       oscuro: 2,20:1, cuando WCAG pide 4,5. Con tinta oscura queda en 7,40:1.
       Se cambia la TINTA y no el fondo: el azul claro es el que da el contraste
       del boton contra la pagina oscura. */
    --boton-tinta: #0b2233;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, 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(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El script es de ella y es lo que más marca. Se usa en títulos, nunca en
   párrafos: una caligráfica en texto corrido no se lee. */
.script {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .005em;
}

h1, h2 { font-family: var(--script); font-weight: 400; line-height: 1.2; color: var(--color-titulo); text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  line-height: 1.3; color: var(--color-titulo); text-wrap: balance;
}

p { max-width: var(--ancho-texto); text-wrap: pretty; }
/* Los párrafos llevan ancho de lectura, así que dentro de un bloque centrado
   quedaban angostos y corridos a la izquierda: el texto se centraba dentro de
   su propia caja, no dentro de la sección. Esto centra la caja. */
.centrado { text-align: center; }
.centrado > * { margin-inline: auto; }
.centrado .rotulo { font-size: .86rem; letter-spacing: .3em; }
a { color: var(--color-principal); text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--color-principal); outline-offset: 3px; }

/* El desplazamiento por ancla tiene que frenar debajo de la cabecera fija, o el
   título de la sección queda tapado. En móvil la cabecera es más alta porque
   lleva la tira de navegación: 124px medidos, no un número inventado. */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (max-width: 900px) { html { scroll-padding-top: 8.5rem; } }
@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); }
.alterna { background: var(--color-fondo-alt); }

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

/* Rótulo: sans en mayúsculas muy espaciada, como su firma "CARO PICHUANTE" */
.rotulo {
  font-family: var(--display); font-weight: 500;
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--azul-acero);
  margin-block-end: var(--e-3);
}

/* Marco de línea fina abierto, con el título montado encima. Es su recurso
   más característico: en sus PDFs la línea se corta para dejar pasar el texto. */
.marco {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--azul-acero) 45%, transparent);
  padding: var(--e-16) var(--e-12) var(--e-12);
  margin-block-start: var(--e-12);
}
.marco > .marco-titulo {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-fondo); padding-inline: var(--e-6);
  white-space: nowrap;
}
.alterna .marco > .marco-titulo { background: var(--color-fondo-alt); }

/* Firma al pie, tal como la usa en sus documentos */
/* El logo real de Carolina es un PNG negro con transparencia. En vez de tener
   tres archivos (azul, blanco, negro) se usa como máscara: el color lo pone
   `currentColor`, así que hereda el del contexto — azul en la cabecera, blanco
   sobre fondo oscuro. Un archivo, cualquier color, sin perder nitidez. */
.marca-logo, .firma-logo {
  display: block;
  aspect-ratio: 1000 / 220;
  background-color: currentColor;
  -webkit-mask: url("img/logo.png") center / contain no-repeat;
  mask: url("img/logo.png") center / contain no-repeat;
}
/* Fluido a propósito: a 190px fijos el logo no dejaba espacio al botón
   "Agendar" en un teléfono y la cabecera se partía en tres filas. */
.marca-logo { width: clamp(140px, 40vw, 190px); color: var(--color-titulo); }
.firma-logo { width: 230px; margin-inline: auto; color: var(--color-titulo); }
.hero .firma-logo { color: #fff; }

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

.sitio-header {
  position: sticky; top: 0; z-index: 10;
  padding-block: var(--e-3);
  background: color-mix(in srgb, var(--color-fondo) 90%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--color-borde);
}
.barra { display: flex; gap: var(--e-4); align-items: center; justify-content: space-between; }
.marca { display: block; text-decoration: none; }
.nav { display: flex; gap: var(--e-6); }
.nav a { font-family: var(--display); font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-texto-suave); text-decoration: none; }
.nav a:hover { color: var(--color-principal); }

/* En móvil la navegación NO se esconde detrás de un botón: baja a una tira
   que se desliza con el pulgar. Es una sola página con anclas y casi todo el
   tráfico llega de Instagram, o sea del teléfono — un menú plegado agrega un
   toque para llegar a lo mismo, y un desplegable pide 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; overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-block-start: var(--e-1);
    border-block-start: 1px solid var(--color-borde);
    /* El degradado del borde derecho insinúa que hay más al deslizar */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .nav-envoltorio::-webkit-scrollbar { display: none; }
  .nav { gap: var(--e-6); padding-inline-end: var(--e-8); }
  .nav a { display: block; padding-block: var(--e-3); white-space: nowrap; font-size: .75rem; }
}

/* --- Hero: overlay azul sobre foto, como sus portadas ----------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: min(88vh, 780px);
  display: grid; align-items: center;
  padding-block: var(--e-20);
  background: var(--azul-medio);
}
.hero > img.fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--azul-fuerte) 92%, transparent) 0%,
    color-mix(in srgb, var(--azul-medio) 78%, transparent) 55%,
    color-mix(in srgb, var(--azul-medio) 55%, transparent) 100%);
}
.hero .contenedor { max-width: 940px; }

/* Marco blanco del hero, abierto arriba y abajo */
.hero-marco {
  position: relative;
  border: 1px solid rgba(255,255,255,.55);
  padding: var(--e-16) clamp(1.25rem, 5vw, 4rem) var(--e-12);
  text-align: center;
  color: #fff;
}
.hero-marco h1 { color: #fff; }
.hero-marco .rotulo { color: rgba(255,255,255,.85); }
.hero-marco p { color: rgba(255,255,255,.94); margin-inline: auto; }
.hero-marco .firma b, .hero-marco .firma span { color: #fff; }
.hero-marco .firma {
  position: absolute; inset-block-end: 0; inset-inline-start: 50%;
  transform: translate(-50%, 50%);
  background: transparent; padding-inline: var(--e-6);
}
/* El fondo del recorte de la firma se pinta con el degradado, no con un color
   plano: si no, se vería un parche sobre la foto. */
.hero-marco .firma::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(2px);
}

.entrada { font-size: 1.15rem; }

/* --- Datos ----------------------------------------------------------------- */

.datos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4);
  margin-block-start: var(--e-8); padding-block-start: var(--e-6);
  border-block-start: 1px solid rgba(255,255,255,.3);
}
.dato { text-align: center; }
.dato strong { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.35rem, 4.5vw, 1.9rem); line-height: 1.1; }
.dato span { font-family: var(--display); font-size: clamp(.6rem, 1.8vw, .72rem); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* En pantalla angosta las tres columnas quedan con rótulos de dos y tres
   líneas, y los números dejan de estar a la misma altura. Se pasan a filas:
   número a la izquierda, rótulo a la derecha, cada uno en una sola línea. */
@media (max-width: 560px) {
  .datos { grid-template-columns: 1fr; gap: 0; }
  .dato {
    display: flex; align-items: baseline; justify-content: center;
    gap: var(--e-3); text-align: start;
    padding-block: var(--e-3);
  }
  .dato + .dato { border-block-start: 1px solid rgba(255,255,255,.18); }
  .dato strong { display: inline; font-size: 1.5rem; }
  .dato span { font-size: .68rem; }
}

/* --- Programas -------------------------------------------------------------- */

.programa {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-12);
  padding-block: var(--e-12);
  border-block-start: 1px solid var(--color-borde);
  align-items: start;
}
.programa:first-of-type { border-block-start: 0; }
@media (max-width: 860px) { .programa { grid-template-columns: 1fr; gap: var(--e-6); } }

.programa .etiqueta {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--azul-acero);
  margin-block-end: var(--e-2);
}
.programa .nombre { font-family: var(--script); font-size: 2.1rem; line-height: 1.15; color: var(--color-titulo); margin-block-end: var(--e-4); }
.programa p { color: var(--color-texto-suave); }

.lista { display: grid; gap: var(--e-3); font-size: .97rem; }
.lista li { padding-inline-start: 1.6em; position: relative; max-width: 48ch; }
.lista li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .68em;
  width: .55rem; height: .55rem; border: 1px solid var(--turquesa); border-radius: 50%;
}
.lista-titulo { font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-texto-suave); margin-block-end: var(--e-4); }

/* --- Precio ---------------------------------------------------------------- */

.precio {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: var(--e-16);
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-12);
  align-items: center; padding: var(--e-16) var(--e-12);
  background: var(--azul-fuerte); color: #eaf2f9;
}
@media (max-width: 760px) { .precio { grid-template-columns: 1fr; } }
.precio h3 { color: #fff; font-family: var(--script); font-weight: 400; font-size: 2.2rem; }
.precio p { color: #c3d8ea; max-width: 46ch; }
.precio strong { color: #fff; }
.precio-cifra { font-family: var(--display); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3rem); color: #fff; line-height: 1; white-space: nowrap; max-width: none; }
.precio-cifra span { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--turquesa); margin-block-start: var(--e-3); }

/* Dos tramos de precio: los valores cambian según el cargo, así que publicar
   uno solo sería publicar el equivocado para la mitad de quienes lo lean. */
.precio-tramos { display: grid; gap: var(--e-8); }
.tramo + .tramo { border-block-start: 1px solid rgba(255,255,255,.2); padding-block-start: var(--e-8); }
.tramo-nombre {
  font-family: var(--display); font-weight: 500;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; margin-block-end: var(--e-4); max-width: none;
}
.tramo-sesion { font-size: .92rem; margin-block-start: var(--e-3); max-width: none; }

/* --- Banda del puente ------------------------------------------------------- */

.puente { position: relative; isolation: isolate; padding-block: var(--e-24); background: var(--petroleo); text-align: center; }
.puente img.fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.puente::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--azul-fuerte) 72%, transparent); }
.puente blockquote { font-family: var(--script); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.3; color: #fff; max-width: 22ch; margin-inline: auto; }
.puente cite { display: block; margin-block-start: var(--e-8); font-family: var(--display); font-style: normal; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* --- Testimonios ------------------------------------------------------------ */

.rejilla-citas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--e-8) var(--e-12); margin-block-start: var(--e-12); }
.cita { position: relative; padding-inline-start: var(--e-8); }
.cita::before {
  content: "“"; position: absolute; inset-inline-start: 0; inset-block-start: -.15em;
  font-family: var(--script); font-size: 3rem; line-height: 1; color: var(--turquesa);
}
.cita p { max-width: none; font-size: 1rem; color: var(--color-texto); }
.cita footer { margin-block-start: var(--e-4); font-family: var(--display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-texto-suave); }
.cita footer strong { color: var(--color-titulo); font-weight: 600; }

/* --- Sobre ------------------------------------------------------------------ */

.sobre-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--e-16); align-items: center; }
@media (max-width: 900px) { .sobre-grid { grid-template-columns: 1fr; } }
.sobre-grid img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.tira { display: flex; height: 5px; margin-block-start: var(--e-8); }
.tira span { flex: 1; }

/* --- Recursos --------------------------------------------------------------- */

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-8); margin-block-start: var(--e-12); }
.recurso { display: flex; flex-direction: column; gap: var(--e-4); background: var(--color-fondo); border: 1px solid var(--color-borde); padding: var(--e-8); }
.alterna .recurso { background: var(--color-fondo); }
.recurso img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin: calc(var(--e-8) * -1) calc(var(--e-8) * -1) 0; width: calc(100% + var(--e-8) * 2); max-width: none; }
.recurso p { max-width: none; color: var(--color-texto-suave); font-size: .96rem; flex: 1; }
.recurso .etiqueta { font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--azul-acero); }

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

.cierre { text-align: center; }
.cierre p { margin-inline: auto; }

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

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

.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: 500; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--color-principal); color: var(--boton-tinta); text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.boton:hover { background: var(--color-principal-hover); transform: translateY(-1px); }
.boton--blanco { background: #fff; color: var(--azul-fuerte); }
.boton--blanco:hover { background: #e7f0f8; }
.boton--turquesa { background: var(--turquesa); color: #05403e; }
.boton--turquesa:hover { background: #7fd2d0; }
.boton--linea { background: transparent; color: currentColor; border: 1px solid currentColor; }
.boton--linea:hover { background: color-mix(in srgb, var(--azul-acero) 14%, transparent); }
.boton--chico { padding: var(--e-2) var(--e-6); min-height: 42px; font-size: .74rem; }

.nota { font-size: .87rem; color: var(--color-texto-suave); }

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

.sitio-footer { padding-block: var(--e-12); background: var(--azul-fuerte); color: #b9d0e4; font-size: .88rem; text-align: center; }
.sitio-footer a { color: #fff; }
/* `p` lleva ancho de lectura global. En el pie eso dejaba los párrafos
   angostos y pegados a la izquierda, aunque el bloque dijera `text-align:center`. */
.sitio-footer p { margin-inline: auto; }
.sitio-footer .firma-logo { margin-block-end: var(--e-6); color: #fff; }

/* --- Formularios ----------------------------------------------------------- */

/* Nacen con los ebooks (2026-08-07): el PDF se entrega a cambio del correo.
   El sitio no tenía formularios, así que estas clases son nuevas — con SUS
   colores y SU tipografía, no las de Konecta. */

.formulario { display: grid; gap: var(--e-4); max-width: 34rem; }
.campo { display: grid; gap: var(--e-2); }
.campo label {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--color-titulo);
}
.campo .opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-texto-suave); }
.campo input {
  font: inherit; color: var(--color-texto);
  padding: var(--e-3) var(--e-4); min-height: 48px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde); border-radius: 4px;
}
.campo input:focus { outline: 2px solid var(--color-principal); outline-offset: 2px; border-color: var(--color-principal); }

/* El consentimiento NO es decorativo: es la base legal por la que estos datos
   pueden existir. Por eso va con la casilla y el texto juntos, legible, y no
   escondido en letra chica. */
.consentimiento { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
.consentimiento input { margin-block-start: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.consentimiento label { font-size: .88rem; color: var(--color-texto-suave); max-width: none; }

/* ⚠ 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. El recorte a 1px no puede provocar barra
   horizontal, al revés que left:-9999px. */
.trampa {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Página simple (ebooks, gracias, error) -------------------------------- */

.pagina-simple { padding-block: var(--e-12) var(--e-12); }
.pagina-simple .contenedor { max-width: 54rem; }

/* La foto va en la columna ANGOSTA y recortada, no estirada.
   Primer intento: dos columnas iguales y `height:auto`. Las fotos de Carolina
   son verticales, asi que a 432px de ancho salian 648 de alto y empujaban la
   pagina a 1269px. La foto no es el contenido de esta pagina -- el formulario
   lo es. */
.pagina-simple .rejilla-ebook {
  display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
  gap: var(--e-10, 2.5rem); align-items: start;
}
@media (max-width: 760px) { .pagina-simple .rejilla-ebook { grid-template-columns: 1fr; gap: var(--e-6); } }
.pagina-simple img {
  width: 100%; height: auto; max-height: 300px;
  object-fit: cover; object-position: center 20%;
  border-radius: 8px;
}
@media (max-width: 760px) { .pagina-simple img { max-height: 190px; } }

/* El formulario ya no necesita respirar tanto: cada hueco de mas son 16px que
   alargan la pagina. */
.pagina-simple .formulario { gap: var(--e-3); }
.pagina-simple h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }