/* ==========================================================================
   DEBI CAND — style.css
   Hoja de estilos compartida por todas las páginas del sitio.

   Cómo está organizado este archivo (buscá estos títulos con Ctrl+F):
   1. Variables (colores, tipografía, espaciados)
   2. Reset básico
   3. Tipografía general
   4. Utilidades (contenedor, botones, etiquetas)
   5. Header / navegación
   6. Hero (sección grande de arriba de cada página)
   7. Tarjetas (situaciones, formatos, beneficios, resultados)
   8. Pasos numerados (metodología)
   9. Bloques de dos columnas
   10. Formularios
   11. Footer
   12. Responsive (celular / tablet)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABLES
   Todos los colores y medidas importantes están acá arriba. Si mañana Debi
   pide cambiar el terracota por otro tono, se cambia UNA sola línea acá y
   se actualiza en todo el sitio.
   -------------------------------------------------------------------------- */
:root {
  /* Paleta de marca (definida por la clienta) */
  --color-azul: #2e4259;        /* azul petróleo: botones, títulos destacados */
  --color-azul-oscuro: #202f3f; /* variante más oscura, solo para :hover */
  --color-terracota: #d6b8a6;   /* acentos, líneas, detalles */
  --color-fondo: #f4f1ea;       /* fondo general de la página */
  --color-texto: #333333;       /* color de texto principal */

  /* Colores derivados (no vienen del brief, son de apoyo) */
  --color-superficie: #ffffff;  /* fondo de tarjetas, para que resalten sobre el crema */
  --color-borde: #e2dcd0;       /* líneas divisorias suaves */
  --color-terracota-oscura: #c6a08d; /* terracota un poco más oscuro, solo para :hover sobre fondo azul */

  /* Tipografía */
  --fuente-principal: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* Espaciados (para no repetir números sueltos por todo el CSS) */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 2rem;
  --espacio-lg: 4rem;
  --espacio-xl: 6rem;

  /* Ancho máximo del contenido, para que no se estire de más en pantallas grandes */
  --ancho-maximo: 1140px;

  /* Radio de borde único: lo usamos SIEMPRE igual (fotos, botones, inputs) */
  --radio-borde: 4px;
}


/* --------------------------------------------------------------------------
   2. RESET BÁSICO
   Normaliza el comportamiento entre navegadores antes de empezar a diseñar.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* para que los botones "bajar al formulario" se vean prolijos */
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA GENERAL
   -------------------------------------------------------------------------- */
body {
  font-family: var(--fuente-principal);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fuente-principal);
  color: var(--color-azul);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.6rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.9rem;
  margin-bottom: var(--espacio-md);
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

p {
  max-width: 65ch; /* líneas más cortas = más fácil de leer */
}

/* Línea fina en terracota debajo de algunos títulos de sección.
   La usamos como recurso repetido para dar identidad, en vez de
   una "etiqueta" en mayúsculas arriba de cada título. */
.titulo-seccion {
  position: relative;
  padding-bottom: var(--espacio-sm);
  margin-bottom: var(--espacio-lg);
}

.titulo-seccion::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background-color: var(--color-terracota);
}

.titulo-seccion.centrado::after {
  left: 50%;
  transform: translateX(-50%);
}


/* --------------------------------------------------------------------------
   4. UTILIDADES
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}

.seccion {
  padding: var(--espacio-xl) 0;
}

.seccion--pequena {
  padding: var(--espacio-lg) 0;
}

.centrado {
  text-align: center;
}

/* Botón principal: fondo azul petróleo, texto claro */
.boton {
  display: inline-block;
  background-color: var(--color-azul);
  color: #ffffff;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radio-borde);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease;
}

.boton:hover,
.boton:focus-visible {
  background-color: var(--color-azul-oscuro);
}

/* Botón secundario: contorno, para acciones menos prioritarias (ej: "Quiero que me avisen") */
.boton-secundario {
  display: inline-block;
  background-color: transparent;
  color: var(--color-azul);
  border: 1.5px solid var(--color-azul);
  padding: 0.85rem 1.8rem;
  border-radius: var(--radio-borde);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.boton-secundario:hover,
.boton-secundario:focus-visible {
  background-color: var(--color-azul);
  color: #ffffff;
}

/* Botón deshabilitado (ej: dossier todavía no cargado, o botón de envío
   hasta que el formulario esté completo). Lo dejamos preparado en CSS;
   la lógica para activarlo/desactivarlo va a ir en main.js más adelante. */
.boton:disabled,
.boton-secundario:disabled,
.boton[aria-disabled="true"] {
  background-color: var(--color-borde);
  color: #8b8b8b;
  border-color: var(--color-borde);
  cursor: not-allowed;
}

/* Nota para vos: siempre que agreguemos accesibilidad (focus visible)
   la dejamos con este mismo estilo, para que todo el sitio sea consistente
   al navegar con teclado. */
:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 2px;
}

/* Caja "placeholder" para las fotos que todavía no tenemos.
   Cuando llegue la foto final, esto se reemplaza por una etiqueta <img>. */
.imagen-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-borde);
  background: linear-gradient(160deg, var(--color-terracota) 0%, var(--color-azul) 100%);
  opacity: 0.85;
  display: flex;
  align-items: flex-end;
  padding: var(--espacio-sm);
}

.imagen-placeholder span {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: rgba(46, 66, 89, 0.55);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radio-borde);
}

.imagen-placeholder--ancha {
  aspect-ratio: 16 / 7;
  max-width: 480px;   /* achica la caja SIN pelear con el aspect-ratio */
  margin-left: auto;  /* la pega contra el borde derecho de su columna */
}


/* --------------------------------------------------------------------------
   5. HEADER / NAVEGACIÓN
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
}

.header__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--espacio-sm);
  padding-bottom: var(--espacio-sm);
}

.header__logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-azul);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
}

.nav__lista {
  display: flex;
  list-style: none;
  gap: var(--espacio-md);
}

.nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.nav__link:hover,
.nav__link--activo {
  border-bottom-color: var(--color-terracota);
}

/* Botón "CONVERSEMOS" fijo arriba a la derecha.
   OJO: el PDF de Empresas lo pide explícitamente. En Personas no se
   menciona, pero lo dejamos en las dos páginas para que el header sea
   igual en todo el sitio (si Debi prefiere que solo esté en Empresas,
   basta con borrar este <a> de personas.html). */
.header__cta {
  flex-shrink: 0;
}

/* Menú hamburguesa para celular (lo mostramos/ocultamos con CSS puro
   usando un checkbox oculto, sin necesidad de JavaScript todavía) */
.nav__toggle {
  display: none;
}

.nav__boton-menu {
  display: none;
  font-size: 1.6rem;
  color: var(--color-azul);
}


/* --------------------------------------------------------------------------
   6. HERO
   Estructura repetida: texto a la izquierda, foto a la derecha
   (en celular se apila: texto, botón, foto).
   -------------------------------------------------------------------------- */
.hero {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--espacio-lg);
  align-items: center;
}

.hero__eyebrow {
  color: var(--color-terracota-oscura, var(--color-azul));
  font-weight: 600;
  margin-bottom: var(--espacio-xs);
}

.hero h1 {
  margin-bottom: var(--espacio-sm);
}

.hero__texto {
  font-size: 1.05rem;
  margin-bottom: var(--espacio-md);
}

.hero__firma {
  margin-top: var(--espacio-md);
  font-size: 0.9rem;
  color: var(--color-azul);
  font-weight: 600;
}

/* Detalle con punto terracota, tal como en la pieza de marca que pasó Debi
   (el punto + frase corta antes de la línea divisoria). */
.hero__detalle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-terracota);
  margin-bottom: var(--espacio-md);
}

.hero__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-terracota);
  flex-shrink: 0;
  margin-right: 0.6rem; /* respaldo por si el navegador no soporta "gap" en flexbox */
}

/* Línea fina que separa el bloque de texto de la firma/caption,
   igual a la que aparece en la pieza de marca. */
.hero__regla {
  border: none;
  height: 1px;
  width: 140px;
  background-color: rgba(244, 241, 234, 0.35);
  margin: var(--espacio-md) 0 var(--espacio-sm);
}

/* --------------------------------------------------------------------------
   HERO — VARIANTE OSCURA
   Misma paleta de siempre (azul petróleo, terracota, crema), pero invertida:
   fondo azul petróleo y texto crema, igual que en la pieza de marca que
   Debi ya usa (targeta/banner). La usamos en el hero de cada página, que
   es el equivalente a esa pieza — el resto del sitio sigue con fondo claro.
   -------------------------------------------------------------------------- */
.hero--oscuro {
  /* el degradé sutil arriba a la derecha reproduce el brillo que se ve
     en la esquina de la pieza de marca original */
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 55%),
              var(--color-azul);
  color: var(--color-fondo);
}

.hero--oscuro h1,
.hero--oscuro .hero__firma {
  color: var(--color-fondo);
}

.hero--oscuro .hero__texto {
  color: rgba(244, 241, 234, 0.85);
}

/* Dentro del hero oscuro, el botón pasa a terracota (si fuera azul,
   se perdería contra el fondo) */
.hero--oscuro .boton {
  background-color: var(--color-terracota);
  color: var(--color-azul);
}

.hero--oscuro .boton:hover,
.hero--oscuro .boton:focus-visible {
  background-color: var(--color-terracota-oscura);
}

/* Botón secundario (contorno) dentro del hero oscuro: si lo dejáramos
   con el color por defecto (borde y texto azul) se perdería contra el
   fondo azul del hero. Acá pasa a borde/texto crema. */
.hero--oscuro .boton-secundario {
  border-color: var(--color-fondo);
  color: var(--color-fondo);
}

.hero--oscuro .boton-secundario:hover,
.hero--oscuro .boton-secundario:focus-visible {
  background-color: var(--color-fondo);
  color: var(--color-azul);
}

/* --------------------------------------------------------------------------
   HERO CENTRADO (variante para Inicio)
   A diferencia del hero de Personas/Empresas (texto izquierda, foto
   derecha), el de Inicio pide todo centrado y la foto debajo.
   -------------------------------------------------------------------------- */
.hero__centrado {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.hero__centrado .hero__texto {
  margin-left: auto;
  margin-right: auto;
}

.hero__botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  margin: var(--espacio-md) 0;
}

.hero__eslogan {
  font-weight: 600;
  font-style: italic;
  color: var(--color-terracota);
  margin-top: var(--espacio-sm);
}

.hero__foto-abajo {
  max-width: 420px;
  margin: var(--espacio-lg) auto 0;
}

/* --------------------------------------------------------------------------
   CITA DESTACADA
   Para frases importantes dentro de un texto largo (ej: "Sobre mí").
   Reutiliza el mismo recurso visual que las tarjetas (borde izquierdo
   en terracota) para mantener una sola identidad en todo el sitio.
   -------------------------------------------------------------------------- */
.cita {
  border-left: 3px solid var(--color-terracota);
  padding: var(--espacio-sm) var(--espacio-md);
  margin: var(--espacio-lg) 0;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-azul);
  max-width: 60ch;
}


/* --------------------------------------------------------------------------
   7. TARJETAS
   Se usa la misma tarjeta base para: situaciones (Empresas), formatos
   (Personas), tipos de capacitación, beneficios y resultados.
   En vez de sombra, usamos un borde izquierdo en terracota: es un
   recurso más discreto y sirve como "marca" repetida del sitio.
   -------------------------------------------------------------------------- */
.grid-tarjetas {
  display: grid;
  gap: var(--espacio-md);
}

.grid-tarjetas--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-tarjetas--3 {
  grid-template-columns: repeat(3, 1fr);
}

.tarjeta {
  background-color: var(--color-superficie);
  border-left: 3px solid var(--color-terracota);
  padding: var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
}

.tarjeta h3 {
  margin-bottom: var(--espacio-xs);
}

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

/* Tarjeta "destacada" (ej: Mentoría individual) con un poco más de peso */
.tarjeta--destacada {
  border-left-width: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tarjeta--destacada .boton,
.tarjeta--destacada .boton-secundario {
  margin-top: var(--espacio-md);
  align-self: flex-start;
}


/* --------------------------------------------------------------------------
   8. PASOS NUMERADOS (metodología de Empresas)
   Acá sí tiene sentido usar números grandes: el contenido es
   literalmente una secuencia de 4 pasos.
   -------------------------------------------------------------------------- */
.pasos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-lg);
}

.paso {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--espacio-md);
  align-items: start;
  padding-bottom: var(--espacio-lg);
  border-bottom: 1px solid var(--color-borde);
}

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

.paso__numero {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-terracota);
  line-height: 1;
}


/* --------------------------------------------------------------------------
   9. BLOQUES DE DOS COLUMNAS
   (ej: "Quién solicita" / "Quién participa")
   -------------------------------------------------------------------------- */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-lg);
}

.dos-columnas h3 {
  margin-bottom: var(--espacio-xs);
}

/* Bloque con foto + texto, usado antes del cierre en Empresas */
.bloque-foto-texto {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--espacio-lg);
  align-items: center;
}


/* --------------------------------------------------------------------------
   10. FORMULARIOS
   Por ahora son solo visuales: no envían datos todavía.
   Eso lo resolvemos con JavaScript (validación) y PHP (envío) más adelante.
   -------------------------------------------------------------------------- */
.formulario-caja {
  background-color: var(--color-superficie);
  border-radius: var(--radio-borde);
  padding: var(--espacio-lg);
  max-width: 760px;
  margin: 0 auto;
}

.campo {
  margin-bottom: var(--espacio-md);
}

.campo label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--espacio-xs);
  color: var(--color-azul);
}

.campo input,
.campo textarea {
  width: 100%;
  font-family: var(--fuente-principal);
  font-size: 1rem;
  color: var(--color-texto);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  background-color: #fffdfa;
}

.campo textarea {
  resize: vertical;
  min-height: 120px;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--color-azul);
}

/* Fila de campos cortos en una misma línea (Nombre / Empresa / Cargo, etc.) */
.campos-en-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-sm);
}

/* Arreglo de alineación: cuando un label ocupa dos líneas (ej: "Cantidad
   aproximada de personas") empujaba su input más abajo que los labels
   de una sola línea de al lado. Reservamos siempre el mismo alto de
   label (2 líneas) y alineamos el texto abajo, así todos los inputs de
   la fila arrancan a la misma altura, tengan una o dos líneas de label. */
.campos-en-fila .campo label {
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
}

/* Foto de perfil circular (usada en Sobre mí, debajo del título).
   object-fit: cover recorta la foto para que llene el círculo sin
   deformarse; object-position mueve el "centro" del recorte hacia
   donde está la cara  */
.foto-perfil {
  display: block;
  width: 280px;
  height: 280px;
  margin: var(--espacio-md) auto 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  border: 4px solid var(--color-terracota);
}

/* --------------------------------------------------------------------------
   VALIDACIÓN DE FORMULARIOS (ver js/main.js)
   Estado de error para un campo: borde rojo + mensaje chico debajo.
   -------------------------------------------------------------------------- */
.campo--invalido input,
.campo--invalido textarea {
  border-color: #c0392b;
}

.campo__error {
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  min-height: 1em; /* reserva el espacio para que no "salte" el formulario */
}

.formulario-caja .boton {
  width: 100%;
  text-align: center;
  margin-top: var(--espacio-sm);
}

/* Mensaje de éxito tras enviar. Lo dejamos oculto por defecto;
   cuando conectemos JavaScript, esto se muestra y se oculta el formulario. */
.mensaje-exito {
  display: none;
  background-color: var(--color-superficie);
  border-left: 4px solid var(--color-terracota);
  padding: var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
}

.mensaje-exito.visible {
  display: block;
}

/* Mensaje de error de envío (cuando enviar.php responde con un fallo,
   o cuando no se pudo conectar con el servidor). Mismo criterio de
   color que los errores de campo. */
.mensaje-error-envio {
  display: none;
  color: #c0392b;
  background-color: #fbeae8;
  border-left: 4px solid #c0392b;
  padding: var(--espacio-sm) var(--espacio-md);
  margin-top: var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
  font-size: 0.9rem;
}

.mensaje-error-envio.visible {
  display: block;
}


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-borde);
  padding: var(--espacio-lg) 0;
}

.footer__contacto {
  display: flex;
  justify-content: center;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-texto);
}

.footer__contacto a:hover {
  color: var(--color-azul);
}

/* ---------- VIDEOS ---------- */
.grid-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* los que sobran en la última fila quedan centrados */
  gap: var(--espacio-lg) var(--espacio-md);
}

.video {
  /* 3 por fila: (100% - 2 espacios entre columnas) / 3 */
  flex: 0 1 calc((100% - 2 * var(--espacio-md)) / 3);
}
@media (max-width: 900px) {
  .video { flex-basis: calc((100% - var(--espacio-md)) / 2); } /* 2 por fila */
}
@media (max-width: 640px) {
  .video { flex-basis: 100%; } /* 1 por fila */
}

.video__marco {
  aspect-ratio: 16 / 9;                /* proporción de video, en cualquier pantalla */
  background-color: var(--color-azul); /* se ve mientras el video carga */
  border-radius: var(--radio-borde);
  overflow: hidden;
}

.video__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__titulo { margin-top: var(--espacio-sm); }

.video__descripcion {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ---------- RECURSOS DESCARGABLES ---------- */
/* Cada recurso usa la misma tarjeta (.tarjeta) que el resto del sitio;
   .recurso agrega el acomodo en grilla, la portada arriba y el botón al pie. */
.grid-recursos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* las que sobran en la última fila quedan centradas */
  gap: var(--espacio-lg) var(--espacio-md);
  /* Ancho máximo = 3 tarjetas + 2 espacios: así nunca entran más de 3 por fila.
     Para tarjetas más grandes o más chicas, cambiá solo el 260px (aparece
     2 veces: acá y en .recurso). */
  max-width: calc(3 * 260px + 2 * var(--espacio-md));
  margin: 0 auto;
}

.recurso {
  flex: 0 1 260px;     /* ancho de cada tarjeta; en pantallas chicas se achica solo */
  display: flex;
  flex-direction: column;
  padding: 0;          /* sin margen interno: la portada llega hasta los bordes */
  overflow: hidden;    /* recorta la portada en las esquinas redondeadas */
  box-shadow: 0 2px 10px rgba(46, 66, 89, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.recurso:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(46, 66, 89, 0.14);
}

/* Portada: siempre en formato 4:3, la imagen se recorta para llenar el
   espacio sin deformarse. object-position: top muestra la parte de
   arriba (donde suele estar el título de una portada de PDF). */
.recurso__portada {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  background-color: var(--color-azul); /* se ve si la imagen no carga */
}

/* Texto y botón */
.recurso__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;                      /* ocupa el resto de la altura de la tarjeta */
  padding: var(--espacio-sm) var(--espacio-md) var(--espacio-md);
}
.recurso__cuerpo h3 {
  font-size: 1.05rem;
}
.recurso__cuerpo p {
  font-size: 0.9rem;
  margin-bottom: var(--espacio-sm);
}
.recurso__cuerpo .boton {
  padding: 0.6rem 1.2rem;       /* botón más compacto */
  font-size: 0.85rem;
  margin-top: auto;             /* pega el botón al fondo, aunque las descripciones difieran */
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   TESTIMONIOS
   Diseño abierto, sin tarjeta (sin fondo ni borde): apoyado directo
   sobre el fondo de la página, como en la referencia que pasó Christian.

   Usamos flexbox en vez de grid a propósito: con "flex-wrap: wrap" +
   "justify-content: center", si la última fila queda con menos de 3
   testimonios, esos sobrantes se centran solos en vez de quedar pegados
   a la izquierda. Eso con CSS grid no pasa automáticamente.
   -------------------------------------------------------------------------- */
.grid-testimonios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-xl) var(--espacio-lg);
}

.testimonio {
  flex: 1 1 300px;   /* se achica/agranda, pero nunca baja de 300px de ancho */
  max-width: 340px;  /* tope: que no se estire de más si queda 1 solo por fila */
}

.testimonio__texto {
  font-size: 0.95rem;
  margin: 0 0 var(--espacio-md);
}

.testimonio__autor {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

.testimonio__foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonio__datos {
  display: flex;
  flex-direction: column;
}

.testimonio__nombre {
  font-weight: 700;
  color: var(--color-azul);
  font-size: 0.95rem;
}

/* Línea opcional debajo del nombre (rol, ciudad, lo que prefieras) */
.testimonio__rol {
  font-size: 0.8rem;
  color: var(--color-texto);
  opacity: 0.75;
}


/* --------------------------------------------------------------------------
   REDES SOCIALES (página Contacto)
   Círculos con el mismo lenguaje visual que el resto del sitio: azul
   petróleo de base, terracota al pasar el mouse. A propósito NO usamos
   los colores de marca de cada red (Instagram, Facebook, etc.), para
   que se sientan parte del sitio y no un widget pegado.
   -------------------------------------------------------------------------- */
.redes-sociales {
  display: flex;
  gap: var(--espacio-sm);
  margin-top: var(--espacio-xs);
}

.red-social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-azul);
  color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.red-social svg {
  width: 20px;
  height: 20px;
}

.red-social:hover,
.red-social:focus-visible {
  background-color: var(--color-terracota);
  color: var(--color-azul);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   MI RECORRIDO — línea de tiempo vertical (Empresas y Sobre mí)
   La línea la da el border-left del <ul>; cada <li> dibuja su propio
   puntito con ::before, centrado sobre esa línea. El último paso (el
   emprendimiento actual) se destaca con el punto y el texto en azul.
   -------------------------------------------------------------------------- */
.recorrido {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  border-left: 2px solid var(--color-terracota);
  padding-left: var(--espacio-md);
}

.recorrido__item {
  position: relative;
  padding-bottom: var(--espacio-md);
}

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

.recorrido__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--espacio-md) - 6px); /* centra el puntito sobre la línea */
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-fondo);
  border: 2px solid var(--color-terracota);
}

.recorrido__texto {
  margin: 0;
}

.recorrido__item--actual::before {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
}

.recorrido__item--actual .recorrido__texto {
  font-weight: 700;
  color: var(--color-azul);
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE
   Reglas para tablet (≤900px) y celular (≤600px).
   Mobile-first hubiese sido otra opción; acá partimos del diseño de
   escritorio (que es como lo pidió el brief) y lo vamos simplificando.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-tarjetas--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dos-columnas,
  .bloque-foto-texto {
    grid-template-columns: 1fr;
  }

  .bloque-foto-texto .imagen-placeholder {
    order: -1; /* en tablet mostramos la foto arriba del texto */
  }

  .imagen-placeholder--ancha {
  max-width: none;
  margin-left: 0;
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__grid .imagen-placeholder {
    order: 2; /* texto, botón y después foto, como pide el PDF de Personas */
  }

  .grid-tarjetas--2,
  .grid-tarjetas--3 {
    grid-template-columns: 1fr;
  }

  .campos-en-fila {
    grid-template-columns: 1fr;
  }

  .paso {
    grid-template-columns: 56px 1fr;
  }

  .paso__numero {
    font-size: 2.2rem;
  }

  .formulario-caja {
    padding: var(--espacio-md);
  }

  /* Menú: en celular ocultamos la lista y mostramos un botón hamburguesa.
     Sin JavaScript por ahora, usamos el truco del checkbox invisible. */
  .nav__boton-menu {
    display: block;
  }

  .nav__lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    padding: var(--espacio-md);
    gap: var(--espacio-sm);
  }

  .nav__toggle:checked ~ .nav__lista {
    display: flex;
  }

  .header__cta {
    display: none; /* en celular priorizamos el botón hamburguesa */
  }

  .footer__contacto {
    flex-direction: column;
    gap: var(--espacio-xs);
  }
}


/* ==========================================================================
   BOTONES FLOTANTES — WhatsApp + "volver arriba"
   Fijos abajo a la derecha, siguen el scroll (position: fixed).
   El de WhatsApp siempre está visible; el de "volver arriba" aparece
   recién cuando la persona bajó un poco (lo controla js/main.js).
   ========================================================================== */
.flotantes {
  position: fixed;
  right: var(--espacio-md);
  bottom: var(--espacio-md);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

.flotante-boton {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.flotante-boton:hover {
  transform: translateY(-3px);
}

.flotante-boton svg {
  width: 24px;
  height: 24px;
}

/* Verde característico de WhatsApp: acá sí lo usamos tal cual, porque es
   el color por el que la gente reconoce el botón (no es parte de la
   paleta de la marca, es una excepción a propósito). */
.flotante-boton--whatsapp {
  background-color: #25d366;
  color: #ffffff;
}

.flotante-boton--whatsapp:hover {
  background-color: #1ebc59;
}

/* Botón "volver arriba": con los colores de la marca, oculto hasta que
   main.js le agregue la clase "visible" (cuando se hizo bastante scroll). */
.flotante-boton--arriba {
  background-color: var(--color-azul);
  color: var(--color-fondo);
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.flotante-boton--arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.flotante-boton--arriba:hover {
  background-color: var(--color-azul-oscuro);
}

@media (max-width: 640px) {
  .flotantes {
    right: var(--espacio-sm);
    bottom: var(--espacio-sm);
  }

  .flotante-boton {
    width: 46px;
    height: 46px;
  }

  .flotante-boton svg {
    width: 21px;
    height: 21px;
  }
}