/* ==========================================================================
   Zeltra Labs — sistema de diseno
   Fuente de verdad de los valores: docs/marca.md
   Si cambias un color aqui, actualiza tambien ese documento.
   ========================================================================== */

:root {
  /* Paleta. Ver docs/marca.md para el porque del ambar. */
  --grafito: #0e1520;
  --acero: #18222f;
  --acero-claro: #22303f;
  --ambar: #f2a83b;
  --ambar-oscuro: #d98e1f;
  --verde: #2fa36b;
  --rojo: #d9534f;
  --texto: #f3f6f9;
  --texto-suave: #9aa9ba;

  /* Roles semanticos: los componentes usan estos, nunca la paleta directa.
     Asi el modo claro se resuelve reasignando ocho variables. */
  --fondo: var(--grafito);
  --superficie: var(--acero);
  --superficie-alta: #1e2a38;
  --borde: var(--acero-claro);
  --tinta: var(--texto);
  --tinta-suave: var(--texto-suave);
  --acento: var(--ambar);
  --acento-hover: var(--ambar-oscuro);
  /* El texto sobre ambar es SIEMPRE grafito. Ambar sobre blanco no llega a
     4.5:1, asi que blanco sobre ambar tampoco. No es opinable. */
  --sobre-acento: #0e1520;

  --titular: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --cuerpo: "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --ancho: 1140px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #fbfaf8;
    --superficie: #ffffff;
    --superficie-alta: #f4f2ee;
    --borde: #e3ded6;
    --tinta: #101822;
    --tinta-suave: #5c6775;
  }
}
/* El interruptor de tema del usuario gana en las dos direcciones. */
:root[data-tema="dark"] {
  --fondo: var(--grafito); --superficie: var(--acero); --superficie-alta: #1e2a38;
  --borde: var(--acero-claro); --tinta: var(--texto); --tinta-suave: var(--texto-suave);
}
:root[data-tema="light"] {
  --fondo: #fbfaf8; --superficie: #ffffff; --superficie-alta: #f4f2ee;
  --borde: #e3ded6; --tinta: #101822; --tinta-suave: #5c6775;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titular); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 620; }
p { margin: 0 0 1rem; }
a { color: inherit; }

/* Una matricula es un identificador: siempre monoespaciada, o se confunden
   0/O y 1/I al leerla en voz alta por telefono. */
.matricula {
  font-family: var(--mono); font-weight: 600; letter-spacing: .06em;
  background: var(--superficie-alta); border: 1px solid var(--borde);
  border-radius: var(--r-s); padding: .12em .45em; white-space: nowrap;
}

/* ---------- estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }
.seccion { padding: clamp(56px, 9vw, 108px) 0; }
.seccion--alt { background: var(--superficie); border-block: 1px solid var(--borde); }
.centrado { text-align: center; }
.medida { max-width: 62ch; }
.medida.centrado { margin-inline: auto; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cuerpo); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: var(--r-s);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--acento); color: var(--sobre-acento); }
.boton--principal:hover { background: var(--acento-hover); }
.boton--fantasma { background: transparent; color: var(--tinta); border-color: var(--borde); }
.boton--fantasma:hover { border-color: var(--acento); color: var(--acento); }
.boton--ancho { width: 100%; justify-content: center; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.cabecera__nav { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
.cabecera__nav a { color: var(--tinta-suave); text-decoration: none; font-size: .95rem; font-weight: 500; }
.cabecera__nav a:hover { color: var(--tinta); }
@media (max-width: 800px) { .cabecera__nav .oculta-movil { display: none; } }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); }
.logo__marca { color: var(--acento); flex: none; }
.logo__texto { font-family: var(--titular); font-size: 1.22rem; letter-spacing: -0.02em; }
.logo__texto b { font-weight: 700; }
.logo__texto span { font-weight: 400; color: var(--tinta-suave); }

/* ---------- hero ---------- */
.hero { padding: clamp(58px, 10vw, 118px) 0 clamp(44px, 7vw, 84px); }
.hero__parrafo { font-size: clamp(1.05rem, 2.1vw, 1.28rem); color: var(--tinta-suave); max-width: 60ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__nota { margin-top: 1.1rem; font-size: .92rem; color: var(--tinta-suave); }

.etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  color: var(--acento); background: color-mix(in srgb, var(--ambar) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambar) 32%, transparent);
  border-radius: 999px; padding: .34rem .85rem; margin-bottom: 1.4rem;
}

/* ---------- rejillas ---------- */
.rejilla { display: grid; gap: 1.2rem; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 1.6rem;
}
.seccion--alt .tarjeta { background: var(--superficie-alta); }
.tarjeta__num {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--acento); letter-spacing: .1em; display: block; margin-bottom: .7rem;
}
.tarjeta p { color: var(--tinta-suave); margin: 0; }
.tarjeta p:not(:last-child) { margin-bottom: .8rem; }

/* ---------- cifras ---------- */
.cifra__valor {
  font-family: var(--titular); font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 700; line-height: 1; color: var(--acento); letter-spacing: -0.03em;
}
.cifra__texto { color: var(--tinta-suave); font-size: .95rem; margin-top: .55rem; }
.cifra__fuente { color: var(--tinta-suave); font-size: .78rem; opacity: .75; margin-top: .3rem; }

/* ---------- alterna texto / visual ---------- */
.alterna { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .alterna { grid-template-columns: 1fr 1fr; } .alterna--invertida .alterna__visual { order: -1; } }

/* ---------- transcripcion de la demo ---------- */
.charla { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); padding: 1.3rem; }
.charla__linea { display: flex; gap: .8rem; margin-bottom: 1rem; font-size: .96rem; }
.charla__linea:last-child { margin-bottom: 0; }
.charla__quien { flex: none; width: 5.4rem; font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .18rem; }
.charla__quien--ia { color: var(--acento); }
.charla__quien--cliente { color: var(--tinta-suave); }
.charla__texto { color: var(--tinta); }
.charla__meta { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); font-size: .87rem; color: var(--tinta-suave); }

/* ---------- lista de ventajas ---------- */
.lista { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.lista li { display: flex; gap: .7rem; margin-bottom: .8rem; color: var(--tinta-suave); }
.lista li::before { content: "›"; color: var(--acento); font-weight: 700; flex: none; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; padding: 1.15rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--tinta-suave); padding-bottom: 1.15rem; margin: 0; max-width: 70ch; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--borde); padding: 2.8rem 0; color: var(--tinta-suave); font-size: .9rem; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; }
.pie a { color: var(--tinta-suave); text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* ---------- formularios ---------- */
.panel-auth { max-width: 430px; margin: 0 auto; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .38rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .72rem .9rem; font: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--r-s);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.campo__ayuda { font-size: .84rem; color: var(--tinta-suave); margin-top: .32rem; }
/* El error se senala en el campo, no con una alarma al principio de la pagina:
   asi el usuario ve DONDE esta el problema, no solo que lo hay. */
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); }
.campo__error { font-size: .87rem; color: var(--rojo); margin-top: .32rem; }

.aviso { border-radius: var(--r-s); padding: .85rem 1rem; margin-bottom: 1.2rem; font-size: .93rem; border: 1px solid; }
.aviso--error { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); background: color-mix(in srgb, var(--rojo) 10%, transparent); }
.aviso--ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: color-mix(in srgb, var(--verde) 10%, transparent); }

/* ---------- tablas ---------- */
/* Toda tabla vive dentro de .scroll-x: en movil se desplaza ella, nunca la pagina. */
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 650; }

.pastilla { display: inline-block; font-size: .78rem; font-weight: 650; padding: .16rem .58rem; border-radius: 999px; border: 1px solid; }
.pastilla--ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.pastilla--aviso { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
.pastilla--mal { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.pastilla--neutro { color: var(--tinta-suave); border-color: var(--borde); }

/* ---------- calendario semanal ---------- */
/* Una columna por dia. Un taller tiene ~7 franjas al dia, no 48, asi que una
   rejilla horaria estricta desperdicia espacio: se listan las franjas y ya. */
.semana { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: .7rem; min-width: max-content; }
@media (max-width: 720px) { .semana { grid-auto-columns: minmax(148px, 1fr); } }

.dia { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; }
.dia--hoy { border-color: var(--acento); }
.dia__cabeza { padding: .7rem .8rem; border-bottom: 1px solid var(--borde); background: var(--superficie-alta); }
.dia--hoy .dia__cabeza { background: color-mix(in srgb, var(--ambar) 14%, transparent); }
.dia__nombre { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 650; }
.dia--hoy .dia__nombre { color: var(--acento); }
.dia__num { font-family: var(--titular); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.dia__cuerpo { padding: .55rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }

.franja {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--r-s);
  padding: .5rem .6rem; font-size: .88rem; transition: border-color .12s ease, background .12s ease;
}
.franja__hora { font-family: var(--mono); font-size: .82rem; font-weight: 650; }

.franja--libre { border-style: dashed; color: var(--tinta-suave); }
.franja--libre:hover, .franja--libre:focus-visible { border-color: var(--acento); border-style: solid; color: var(--acento); }
/* "Reservar" SIEMPRE visible. Estaba con opacity:0 hasta el :hover, y en movil
   no hay hover: el jefe de taller veia un recuadro con una hora y nada que
   dijera que se podia pulsar. */
.franja--libre .franja__accion { font-size: .78rem; opacity: .8; }
.franja--libre:hover .franja__accion, .franja--libre:focus-visible .franja__accion { opacity: 1; }

.franja--ocupada { background: var(--superficie-alta); border-color: var(--acero-claro); }
.franja--ocupada:hover { border-color: var(--acento); }
.franja--ia { border-left: 3px solid var(--verde); }
/* .55 y no .42: por debajo de eso el contraste se cae del minimo legible. */
.franja--pasada { opacity: .55; }

/* Franja tapada por una cita larga que empezo antes. Apagada pero visible: un
   blanco se lee como "aqui no hay nada". */
.franja--continuacion {
  background: var(--superficie-alta); border-style: solid;
  border-left: 3px solid var(--acero-claro); color: var(--tinta-suave); opacity: .7;
}
.franja--continuacion .franja__accion { font-size: .76rem; opacity: .8; }

/* Cita fuera de la rejilla de franjas (hora no alineada, u horario cambiado
   despues de crearla). Antes no se pintaba en ningun sitio y desaparecia. */
.franja--suelta { border-color: var(--ambar); border-style: dotted; }

/* Foco de teclado visible en el calendario: las franjas son enlaces y solo los
   inputs tenian estilo de foco. */
.franja:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.dia__cerrado { padding: 1.4rem .6rem; text-align: center; color: var(--tinta-suave); font-size: .85rem; }

.barra-agenda { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.barra-agenda__rango { font-weight: 650; margin-inline: .3rem; }

/* ---------- prosa de los articulos ---------- */
/* Medida de linea corta a proposito: 68 caracteres es donde el ojo deja de
   perder el renglon. Un articulo a todo el ancho no se lee, se abandona. */
.prosa { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; }
.prosa h2 { margin-top: 2.6rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.prosa h3 { margin-top: 1.9rem; font-size: 1.15rem; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.15rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .5rem; }
.prosa a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.prosa strong { color: var(--tinta); font-weight: 650; }
.prosa blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--acento); color: var(--tinta-suave);
}
.prosa code { font-family: var(--mono); font-size: .92em; background: var(--superficie-alta); padding: .1em .35em; border-radius: 4px; }
.prosa table { margin: 1.6rem 0; }
.prosa hr { border: none; border-top: 1px solid var(--borde); margin: 2.4rem 0; }

.ficha-articulo {
  display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
  color: var(--tinta-suave); font-size: .9rem; margin-bottom: 1.6rem;
}

.tarjeta-articulo {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m); padding: 1.4rem; text-decoration: none; color: inherit;
  transition: border-color .14s ease;
}
.tarjeta-articulo:hover { border-color: var(--acento); }
.tarjeta-articulo h3 { margin: 0; font-size: 1.1rem; }
.tarjeta-articulo p { margin: 0; color: var(--tinta-suave); font-size: .94rem; }
.tarjeta-articulo__meta { font-size: .8rem; color: var(--tinta-suave); display: flex; gap: .7rem; flex-wrap: wrap; }

.fuentes { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--borde); font-size: .9rem; color: var(--tinta-suave); }
.fuentes ol { padding-left: 1.2rem; }

img, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}