/* Bacta · Design System v0.1
   Hoja única del sitio. Tokens como variables CSS en :root.
   Mobile first: las reglas base son para celular; los @media amplían. */

/* ---------- Tokens ---------- */

:root {
  /* Color */
  --tinta: #273949;            /* Texto principal, fondo del encabezado y del pie */
  --petri: #5C8589;            /* Acento de marca. No usar para texto chico */
  --petri-oscuro: #456C70;     /* Enlaces, botones, foco (5,8:1 sobre blanco) */
  --petri-claro: #E0F1F2;      /* Fondos de bloque destacado */
  --niebla: #F2F5F7;           /* Fondo de página */
  --blanco: #FFFFFF;           /* Tarjetas y bloques de contenido */
  --texto-secundario: #515D65; /* Texto secundario */
  --texto-tenue: #6B767E;      /* Notas, solo sobre blanco */
  --borde-suave: #E5EAEE;      /* Separadores */
  --borde-normal: #D3DADF;     /* Bordes de tarjeta y campos */
  --error: #A8323A;            /* Mensajes de error de formulario (6,6:1 sobre blanco) */
  --error-claro: #FBECEC;      /* Fondo de aviso de error */

  /* Tipografía */
  --fuente-titulos: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaciado (grilla de 4 px) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-12: 48px;
  --esp-16: 64px;

  /* Radios */
  --radio-chico: 4px;
  --radio-medio: 8px;
  --radio-grande: 12px;
  --radio-pildora: 999px;

  /* Sombra */
  --sombra-tarjeta: 0 1px 2px rgba(39, 57, 73, 0.08);

  /* Layout */
  --ancho-max: 1120px;
  --margen-lateral: 16px;
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* el pie queda abajo en páginas cortas */
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px;   /* cuerpo en celular: 16/24 */
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body {
    font-size: 15px; /* cuerpo en escritorio: 15/24 */
  }
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-family: var(--fuente-titulos);
}

h1 {
  font-size: 32px;
  line-height: 40px;
}

h2 {
  font-size: 24px;
  line-height: 32px;
}

h3,
h4 {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 24px;
}

.display {
  font-size: 32px;
  line-height: 40px;
}

@media (min-width: 768px) {
  .display {
    font-size: 40px;
    line-height: 48px;
  }
}

p,
ul,
ol,
dl {
  margin: 0;
}

p + p {
  margin-top: var(--esp-4);
}

a {
  color: var(--petri-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--tinta);
}

strong {
  font-weight: 600;
}

/* "hidden" siempre oculta, aunque la clase defina display (p. ej. el formulario después de enviar) */
[hidden] {
  display: none !important;
}

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

/* Foco de teclado: anillo sólido de 2 px con 2 px de separación */
:focus-visible {
  outline: 2px solid var(--petri-oscuro);
  outline-offset: 2px;
}

.chico {
  font-size: 13px;
  line-height: 20px;
}

.secundario {
  color: var(--texto-secundario);
}

.tenue {
  color: var(--texto-tenue); /* solo sobre blanco */
}

/* ---------- Utilidades de layout ---------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: var(--margen-lateral);
  padding-right: var(--margen-lateral);
}

@media (min-width: 768px) {
  .contenedor {
    --margen-lateral: 32px;
  }
}

.angosto {
  max-width: 720px;
}

.ancho {
  max-width: 1440px;
}

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

/* ---------- Saltar al contenido ---------- */

.saltar {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--blanco);
  color: var(--petri-oscuro);
  border-radius: var(--radio-medio);
  font-weight: 600;
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

/* ---------- Encabezado ---------- */

.encabezado {
  background: var(--tinta);
  color: var(--blanco);
}

.encabezado__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-6);
  padding-top: var(--esp-3);
  padding-bottom: var(--esp-3);
}

/* Logo del kit de marca (bacta-horizontal-negativo-color.svg). Nunca menos de 24 px de alto.
   El padding deja libre el área de resguardo alrededor del logo. */
.marca {
  display: block;
  padding: var(--esp-2) var(--esp-2) var(--esp-2) 0;
}

.marca img {
  height: 32px;
  width: auto;
}

.encabezado :focus-visible {
  outline-color: var(--petri-claro);
}

.nav {
  flex: 1 1 100%; /* en celular baja a una segunda fila, sin JavaScript */
}

.nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  list-style: none;
  padding: 0;
}

.nav li:last-child {
  margin-left: auto;
}

.nav a:not(.boton) {
  color: var(--blanco);
  text-decoration: none;
  padding: var(--esp-2) 0;
  display: inline-block;
}

.nav a:not(.boton):hover,
.nav a:not(.boton)[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 640px) {
  .nav {
    flex: 1 1 auto;
  }

  .nav ul {
    justify-content: flex-end;
    gap: var(--esp-6);
  }

  .nav li:last-child {
    margin-left: var(--esp-2);
  }
}

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

.boton {
  display: inline-block;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid transparent;
  border-radius: var(--radio-medio);
  background: var(--petri-oscuro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: inherit;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.boton:hover {
  background: var(--tinta);
  color: var(--blanco);
}

.boton--secundario {
  background: var(--blanco);
  color: var(--petri-oscuro);
  border-color: var(--borde-normal);
}

.boton--secundario:hover {
  background: var(--petri-claro);
  color: var(--tinta);
  border-color: var(--petri-oscuro);
}

.boton--claro {
  background: var(--petri-claro);
  color: var(--tinta);
}

.boton--claro:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

@media (min-width: 640px) {
  .acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- Secciones ---------- */

main {
  display: block;
  flex: 1 0 auto;
}

.seccion {
  padding-top: var(--esp-12);
  padding-bottom: var(--esp-12);
}

.seccion + .seccion {
  padding-top: 0;
}

@media (min-width: 768px) {
  .seccion {
    padding-top: var(--esp-16);
    padding-bottom: var(--esp-16);
  }
}

.seccion > h2,
.seccion > .contenedor > h2 {
  margin-bottom: var(--esp-6);
}

.bajada {
  color: var(--texto-secundario);
  font-size: 16px;
  line-height: 24px;
  margin-top: var(--esp-4);
}

@media (min-width: 768px) {
  .bajada {
    font-size: 18px;
    line-height: 28px;
  }
}

/* Portada */
.portada {
  padding-top: var(--esp-12);
  padding-bottom: var(--esp-12);
}

@media (min-width: 768px) {
  .portada {
    padding-top: var(--esp-16);
    padding-bottom: var(--esp-16);
  }
}

.portada .acciones {
  margin-top: var(--esp-8);
}

/* Encabezado de página interior */
.cabecera {
  padding-top: var(--esp-12);
  padding-bottom: var(--esp-8);
}

@media (min-width: 768px) {
  .cabecera {
    padding-top: var(--esp-16);
    padding-bottom: var(--esp-12);
  }
}

/* ---------- Tarjetas y bloques ---------- */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-6);
}

.tarjeta h3 {
  margin-bottom: var(--esp-2);
}

.destacado {
  background: var(--petri-claro);
  border-radius: var(--radio-grande);
  padding: var(--esp-6);
}

@media (min-width: 768px) {
  .tarjeta,
  .destacado {
    padding: var(--esp-8);
  }
}

.mt-2 { margin-top: var(--esp-2); }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.mt-6 { margin-top: var(--esp-6); }
.mt-8 { margin-top: var(--esp-8); }

/* ---------- Preguntas frecuentes ---------- */

.faq {
  display: grid;
  gap: var(--esp-3);
}

.faq details {
  background: var(--blanco);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
  padding: 0 var(--esp-6);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--esp-4) 0;
  list-style-position: outside;
}

.faq summary::marker {
  color: var(--petri-oscuro);
}

.faq details[open] summary {
  border-bottom: 1px solid var(--borde-suave);
}

.faq details p {
  padding: var(--esp-4) 0;
  color: var(--texto-secundario);
}

/* ---------- Curso (curso.html) ---------- */

/* Rótulo chico sobre el título de una sección ("Lo que vas a aprender") */
.antetitulo {
  color: var(--petri-oscuro);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: var(--esp-2);
}

/* Lista de contenidos con viñetas del color de marca */
.lista {
  padding-left: var(--esp-6);
}

.lista li + li {
  margin-top: var(--esp-3);
}

.lista li::marker {
  color: var(--petri-oscuro);
}

/* ---------- Tarjetas en grilla (nosotros.html) ---------- */

.tarjetas {
  display: grid;
  gap: var(--esp-4);
}

@media (min-width: 768px) {
  .tarjetas {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-6);
  }
}

/* ---------- Formulario de la lista de espera ---------- */

.formulario {
  margin-top: var(--esp-6);
  background: var(--blanco);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-6) var(--esp-4);
  display: grid;
  gap: var(--esp-6);
}

@media (min-width: 640px) {
  .formulario {
    padding: var(--esp-8);
  }
}

.campo {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.campo > label,
.campo > legend {
  font-weight: 600;
  padding: 0;
}

.campo > legend {
  margin-bottom: var(--esp-2);
}

.opcional {
  font-weight: 400;
  color: var(--texto-secundario);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select {
  width: 100%;
  min-height: 48px;
  padding: var(--esp-3);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-medio);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px; /* 16 px evita el zoom automático de iOS */
  line-height: 24px;
}

.campo input:focus-visible,
.campo select:focus-visible {
  border-color: var(--petri-oscuro);
}

.campo [aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--error);
}

.campo__ayuda {
  color: var(--texto-secundario);
  font-size: 13px;
  line-height: 20px;
}

.campo__error {
  color: var(--error);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.campo__error:focus {
  outline: none;
}

.opciones {
  display: grid;
  gap: var(--esp-2);
}

.opciones--fila {
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--esp-6);
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  cursor: pointer;
}

.opcion input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--petri-oscuro);
  cursor: pointer;
}

.opcion--consentimiento {
  font-weight: 400;
}

.turnstile:empty {
  display: none;
}

.formulario .boton {
  justify-self: start;
  min-width: 160px;
}

.formulario .boton:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Campo trampa: fuera de la pantalla para las personas, visible para los programas que llenan todo */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Avisos de estado (enviado, error) */
.aviso {
  background: var(--petri-claro);
  color: var(--tinta);
  border-radius: var(--radio-grande);
  padding: var(--esp-4) var(--esp-6);
  font-weight: 600;
}

.aviso--error {
  background: var(--error-claro);
  color: var(--error);
}

.aviso:focus {
  outline: none;
}

.aviso a {
  color: inherit;
}

/* ---------- Panel /admin/ ---------- */

.seccion.panel {
  padding-top: 0;
}

.encabezado__etiqueta {
  color: var(--petri-claro);
  font-weight: 600;
}

.panel__resumen {
  display: grid;
  gap: var(--esp-4);
}

@media (min-width: 640px) {
  .panel__resumen {
    grid-template-columns: 200px 1fr;
  }
}

.panel__dato {
  background: var(--blanco);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--esp-4) var(--esp-6);
}

.panel__titulo {
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 20px;
  color: var(--texto-secundario);
}

.panel__numero {
  font-family: var(--fuente-titulos);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  margin-top: var(--esp-1);
}

.panel__origenes {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
}

.panel__origenes li {
  display: flex;
  gap: var(--esp-2);
}

.panel__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-4);
}

.panel__acciones .campo {
  flex: 1 1 220px;
  max-width: 320px;
}

.tabla {
  overflow-x: auto;
  background: var(--blanco);
  border: 1px solid var(--borde-normal);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
}

.tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.tabla caption {
  text-align: left;
  font-weight: 600;
  padding: var(--esp-3) var(--esp-4);
}

.tabla th,
.tabla td {
  text-align: left;
  vertical-align: top;
  padding: var(--esp-2) var(--esp-3);
  border-top: 1px solid var(--borde-suave);
  min-width: 96px;
}

.tabla td:first-child,
.tabla th {
  white-space: nowrap;
}

.tabla th {
  font-weight: 600;
  background: var(--niebla);
}

/* ---------- Prosa (páginas de texto) ---------- */

.prosa h2 {
  margin-top: var(--esp-8);
  margin-bottom: var(--esp-3);
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa > p + p,
.prosa > p + ul,
.prosa > ul + p {
  margin-top: var(--esp-4);
}

.prosa ul {
  padding-left: var(--esp-6);
}

.prosa li + li {
  margin-top: var(--esp-2);
}

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

.pie {
  background: var(--tinta);
  color: var(--blanco);
  padding-top: var(--esp-8);
  padding-bottom: var(--esp-8);
  margin-top: var(--esp-8);
}

.pie a {
  color: var(--blanco);
}

.pie a:hover {
  color: var(--petri-claro);
}

.pie :focus-visible {
  outline-color: var(--petri-claro);
}

.pie__logo {
  height: 28px;
  width: auto;
  margin-bottom: var(--esp-6);
}

.pie__lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

@media (min-width: 640px) {
  .pie__lista {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-3);
  }

  .pie__lista li + li::before {
    content: "·";
    margin-right: var(--esp-3);
  }
}