/* =========================================================
   CodeHec — landing de la agencia

   Tono: minimalista, profesional, futurista.

   Tema oscuro fijo y deliberado: todos los colores son
   explícitos, no hay variante clara que herede del navegador.
   Lo "futurista" se construye con tres recursos y nada más
   (si se agregan más, deja de ser minimalista):

     1. Retícula fina de fondo en el hero, desvanecida.
     2. Un halo cian/verde muy tenue detrás del titular.
     3. Filetes de 1 px y un solo acento cian sobre casi-negro.

   Sin sombras difusas, sin degradados en los botones, sin
   iconos de relleno. La sensación de "producto de software"
   viene de la retícula y de los números en monoespaciada.

   Los nombres de los tokens son los mismos del proyecto de
   referencia de la agencia aunque el color haya cambiado:
   --oro es aquí el cian. Se mantienen a propósito para que
   cambiar de paleta siga siendo reemplazar este bloque.

   Los colores salen del logo, muestreados del archivo y no
   calculados a ojo: el cian de "Hec" (#00E1FF), el verde del
   ">" y del guion bajo (#2CFF8F) y el azul marino del fondo
   (#0A1322), que es el que tiñe toda la escala de grises.
   Por eso el negro de la página no es neutro: si lo fuera, el
   logo se vería recortado encima.
   ========================================================= */

:root {
  --negro:      #060A12;   /* fondo */
  --carbon:     #0A0F1A;   /* superficies */
  --carbon-2:   #0E1521;   /* superficies elevadas */
  --acero:      #1C2433;   /* filetes */
  --acero-soft: #151B27;
  --oro:        #00E1FF;   /* acento: el cian del logo */
  --oro-luz:    #6BEEFF;
  --verde:      #2CFF8F;   /* segundo acento del logo: el ">" y el "_" */
  --humo:       #7E8899;   /* texto secundario */
  --hueso:      #EAF0F7;   /* texto principal */
  --tinta:      #04070C;   /* texto sobre el acento */
  --danger:     #FF8A8A;
  --danger-bg:  #2A1218;

  --maxw:   1180px;
  --radius: 4px;
  --ease:   cubic-bezier(.4, 0, .2, 1);

  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: .98; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }

p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--oro); }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* Toda cifra de la página va en monoespaciada y con dígitos de ancho fijo. */
.mono-nums, .slot, .free-slot, .step, .freebar-head .v,
.precio-cifra strong, .paso-num, .ticket-total strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 28px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
}

.muted { color: var(--humo); font-size: .92rem; }
.muted a:hover { color: var(--oro); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.9rem;
  border: 1px solid var(--oro);
  border-radius: var(--radius);
  background: var(--oro);
  color: var(--tinta);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: var(--oro-luz); border-color: var(--oro-luz); color: var(--tinta); }

.btn-ghost { background: transparent; color: var(--hueso); border-color: var(--acero); }
.btn-ghost:hover { background: transparent; border-color: var(--hueso); color: var(--hueso); }

.btn-sm { padding: .58rem 1.15rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7, 8, 11, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--acero-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--oro); }
.brand:hover { color: var(--oro); }

.brand-mark { flex: none; }

.brand-name {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--hueso);
}
/* La marca escrita repite el logo tal cual: "Code" en blanco, "Hec" en
   cian y el guion bajo en verde. Es la única forma de que el nombre en
   texto y el logo en imagen se lean como la misma marca. */
.brand-name em { font-style: normal; color: var(--oro); }
.brand-cursor { color: var(--verde); }

.nav { display: flex; gap: 2rem; font-size: .9rem; font-weight: 400; color: var(--humo); }
.nav a { position: relative; padding-block: .25rem; }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--oro);
  transition: width .25s var(--ease);
}
.nav a:hover::after { width: 100%; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(84vh, 760px);
  padding-top: clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}

/* Retícula: dos degradados de 1 px, desvanecidos con máscara para que
   no lleguen a los bordes ni compitan con el texto. */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--acero-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--acero-soft) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 22% 34%, #000 12%, transparent 76%);
          mask-image: radial-gradient(ellipse 78% 62% at 22% 34%, #000 12%, transparent 76%);
}

/* Halo: repite el degradado del anillo del logo, cian a verde, y es el
   único lugar de la página donde los dos acentos se mezclan. */
.hero-glow {
  position: absolute;
  top: -18%;
  left: -12%;
  width: 68vw;
  height: 68vw;
  max-width: 900px;
  max-height: 900px;
  background:
    radial-gradient(circle at 38% 40%, rgba(0, 225, 255, .13) 0%, transparent 58%),
    radial-gradient(circle at 62% 58%, rgba(44, 255, 143, .09) 0%, transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-inner { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.hero h1 { margin: 1.2rem 0 1.6rem; }

.lead {
  max-width: 50ch;
  font-size: 1.05rem;
  font-weight: 300;
  color: #AFB9C7;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }

/* ---------- Firma: barra de horarios libres ---------- */

.freebar {
  position: relative;
  border-top: 1px solid var(--acero);
  background: rgba(7, 8, 11, .8);
  backdrop-filter: blur(6px);
}

.freebar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.15rem;
}

.freebar-head { display: flex; flex-direction: column; gap: .15rem; }
.freebar-head .k {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.freebar-head .v { font-size: .86rem; color: #AFB9C7; }

.freebar-slots { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; min-width: 0; }

.free-slot {
  padding: .45rem .85rem;
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--hueso);
  font-size: .84rem;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.free-slot:hover { background: var(--oro); border-color: var(--oro); color: var(--tinta); }

.freebar-none { font-size: .9rem; color: var(--humo); }

/* Punto que late: indica que la agenda está viva, sin prometer nada. */
.status {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  font-size: .84rem;
  color: var(--humo);
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 0 rgba(0, 225, 255, .5);
  animation: latido 2.4s var(--ease) infinite;
}

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(0, 225, 255, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 225, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 225, 255, 0); }
}

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

/* El header es fijo: sin este margen, al saltar desde el menú el título
   de la sección queda escondido debajo. */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; scroll-margin-top: 92px; }
.section-alt { background: var(--carbon); border-block: 1px solid var(--acero-soft); }

.section-head { margin-bottom: 3rem; }
.section-head h2 { margin: .85rem 0 0; }
.section-intro { margin-top: 1.05rem; max-width: 54ch; color: var(--humo); font-weight: 300; }

/* ---------- Piezas del servicio ---------- */

/* Dos columnas fijas, no auto-fit: son cuatro piezas y en una retícula
   de tres quedaba una sola colgando en la segunda fila. */
.piezas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.pieza {
  position: relative;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--carbon);
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
/* Filete de acento en el borde superior: aparece al pasar el mouse. */
.pieza::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 0; height: 2px;
  background: var(--oro);
  transition: width .35s var(--ease);
}
.pieza:hover { border-color: #2C3340; transform: translateY(-3px); }
.pieza:hover::before { width: 46px; }

.pieza-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--oro);
}
.pieza h3 { margin: .75rem 0 .6rem; }
.pieza p { font-size: .9rem; font-weight: 300; color: var(--humo); text-wrap: pretty; }

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

.precio {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: center;
  margin-top: 3rem;
  padding: 2.2rem 2rem;
  background: var(--carbon-2);
  border: 1px solid var(--acero);
  /* Sin radio abajo: el bloque de diferencias se pega a este y los dos
     se leen como una sola pieza. */
  border-radius: var(--radius) var(--radius) 0 0;
}

.precio-cifra { display: flex; flex-direction: column; gap: .35rem; }
.precio-label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
}
.precio-cifra strong {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--oro);
}
.precio-nota { font-size: .86rem; color: var(--humo); }

/* La segunda cifra, más chica y sin el acento cian: las dos están a la
   vista, pero la que manda en la decisión es la de arriba. Si las dos
   fueran del mismo tamaño, el bloque se leería como un plan por
   suscripción, que es justo lo que no somos. */
.precio-mantencion {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--acero);
}
.precio-mantencion strong {
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--hueso);
}

.precio-texto { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.precio-texto p { font-size: .95rem; font-weight: 300; color: #AFB9C7; max-width: 52ch; }
.precio-texto .muted { font-size: .84rem; }
/* La alternativa sin agendamiento va al pie y en gris: existe para el
   negocio que no toma hora, no para que el que sí toma hora la elija. */
.precio-texto .muted strong { color: var(--hueso); font-weight: 500; }
.precio-texto .btn { margin-top: .4rem; }

/* ---------- Diferencias ----------
   Va pegada al bloque del precio, sin separación: es el argumento de por
   qué ese precio se paga así y no como una suscripción. Deliberadamente sobria,
   sin tabla ni columnas de "nosotros / ellos". */

.diferencias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--acero);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--carbon);
}

.diferencia { padding: 1.5rem 1.6rem 1.7rem; border-left: 1px solid var(--acero); }
.diferencia:first-child { border-left: 0; }

/* Filete corto de acento: marca la línea sin gastar un icono. */
.diferencia::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 1.1rem;
  background: var(--oro);
}

.diferencia h3 { margin-bottom: .5rem; }
.diferencia p { font-size: .88rem; font-weight: 300; color: var(--humo); text-wrap: pretty; }

/* ---------- Soluciones ----------
   Lo que hacemos además de la landing: agentes de WhatsApp, paneles y
   automatizaciones. Se distinguen del bloque del servicio por el acento:
   la landing con agenda usa el cian y va con precio a la vista; esto usa
   el verde y se cotiza en la reunión. El color hace el trabajo de decir
   "esto es otra cosa" sin un título que lo explique. */

.soluciones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.solucion {
  position: relative;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--carbon);
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.solucion::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 0; height: 2px;
  background: var(--verde);
  transition: width .35s var(--ease);
}
.solucion:hover { border-color: #2C3340; transform: translateY(-3px); }
.solucion:hover::before { width: 46px; }

.solucion-etiqueta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
}
.solucion h3 { margin: .75rem 0 .6rem; }
.solucion p { font-size: .9rem; font-weight: 300; color: var(--humo); text-wrap: pretty; }

/* Cierre del bloque: aquí no hay precio público porque no hay un solo
   alcance posible. Decirlo es mejor que dejar el vacío. */
.soluciones-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--acero);
  font-size: .9rem;
  font-weight: 300;
  color: #AFB9C7;
}

/* ---------- Pasos ---------- */

/* Mismo criterio que las piezas: cuatro pasos, en dos filas parejas,
   y en una sola línea cuando hay ancho de sobra. */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}

@media (min-width: 940px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.paso { padding-top: 1.1rem; border-top: 1px solid var(--acero); }
.paso-num {
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--oro);
}
.paso h3 { margin: .7rem 0 .55rem; }
.paso p { font-size: .9rem; font-weight: 300; color: var(--humo); text-wrap: pretty; }

/* ---------- Agenda ---------- */

.booking {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 3.5rem;
  align-items: start;
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.9rem 1.6rem;
  margin: 0;
}

.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-wide { grid-column: 1 / -1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

.label {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  margin-bottom: .75rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}

.step {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--acero);
  border-radius: 3px;
  color: var(--oro);
  font-size: .66rem;
}

/* ---------- Tipo de reunión (tarjetas seleccionables) ----------
   Va en tarjetas y no en un <select> a propósito: el tipo de reunión
   es la decisión que ordena todo lo demás, y en un desplegable el
   cliente nuevo no alcanza a leer para quién es cada opción. */

/* Dos columnas fijas y no auto-fit: son cuatro opciones y en una
   retícula de tres quedaba una sola colgando en la segunda fila. */
.tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.tipo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--hueso);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.tipo:hover { border-color: #2C3340; }
.tipo[aria-checked="true"] { border-color: var(--oro); background: var(--carbon-2); }

.tipo-para {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.tipo[aria-checked="true"] .tipo-para { color: var(--oro); }
.tipo-nombre { font-size: .98rem; font-weight: 500; letter-spacing: -.01em; }
.tipo-desc { font-size: .84rem; font-weight: 300; line-height: 1.5; color: var(--humo); }
.tipo-min {
  margin-top: .2rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--humo);
}

/* ---------- Plataforma ---------- */

.picker { display: flex; flex-wrap: wrap; gap: .5rem; }

/* La marca arriba y el nombre abajo. Puestos uno al lado del otro no cabían
   —"Google Meet" con el logo al lado necesita 149 px y hay 131— y el texto
   se partía en dos líneas. Apilados dentro del botón, el ancho que manda es
   solo el del texto, así que los dos botones vuelven a caber en una fila. */
.plataforma {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 1 1 130px;
  padding: .95rem 1rem;
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--hueso);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.plataforma svg { flex: none; }
.plataforma:hover { border-color: #2C3340; }

/* Seleccionado marca con el filete cian, no rellenando el botón: el relleno
   dejaba los logos de Meet y Zoom flotando sobre cian, que se veía mal y les
   quitaba el color que es justo lo que los hace reconocibles. Es además el
   mismo gesto que usan las tarjetas de tipo de reunión más arriba. */
/* Seleccionado: fondo más claro y el filete cian doblado con un anillo sin
   desenfoque. No es una sombra difusa —de esas no lleva la página— sino un
   segundo filete pegado al borde, que se nota de inmediato sin tapar los
   colores del logo, que es lo que pasaba cuando el botón se rellenaba. */
.plataforma[aria-checked="true"] {
  border-color: var(--oro);
  background: var(--carbon-2);
  box-shadow: 0 0 0 1px var(--oro);
  font-weight: 500;
}

/* ---------- Campos ---------- */

select, input, textarea {
  width: 100%;
  padding: .88rem 1rem;
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--hueso);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s var(--ease);
}
select:hover, input:hover, textarea:hover { border-color: #2C3340; }
select:focus, input:focus, textarea:focus { border-color: var(--oro); outline: none; }
textarea { resize: vertical; }
::placeholder { color: #5F6878; }

/* El selector de fecha nativo es claro por defecto en algunos navegadores. */
input[type="date"] { color-scheme: dark; }
/* Y el desplegable de países abre con fondo blanco si no se le dice esto. */
select { color-scheme: dark; }

/* País y número, uno al lado del otro. El ancho del país lo manda la opción
   más larga —"Venezuela +58"—: si se queda corto, el nombre sale cortado en
   el teléfono y el cliente no sabe qué eligió. */
.tel-grupo {
  display: grid;
  grid-template-columns: minmax(0, 9.6rem) minmax(0, 1fr);
  gap: .5rem;
}
.tel-grupo select { padding-inline: .7rem; }

.hint { margin-top: .55rem; font-size: .82rem; color: var(--humo); }
.hint-tight { margin-top: 0; margin-bottom: 1rem; }

/* Más presencia que un `.hint`: no es una aclaración, es una pregunta que
   queremos que contesten. Por eso va más clara y con la pregunta en blanco. */
.pregunta-dolor {
  margin: .2rem 0 .65rem;
  font-size: .88rem;
  font-weight: 300;
  color: #AFB9C7;
}
.pregunta-dolor strong { color: var(--hueso); font-weight: 500; }

/* Las horas van agrupadas por bloque (mañana / tarde) y no en una sola
   fila corrida: la regla de las 24 horas de anticipación solo se entiende
   si está escrita al lado de las horas a las que se aplica. */
.slots { display: grid; gap: 1.15rem; }

.slots-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  margin-bottom: .55rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.slots-nota {
  letter-spacing: .04em;
  text-transform: none;
  color: var(--humo);
}
.slots-fila { display: flex; flex-wrap: wrap; gap: .45rem; }

.slot {
  padding: .55rem .9rem;
  border: 1px solid var(--acero);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--hueso);
  font-size: .84rem;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--oro); }
.slot[aria-checked="true"] { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.slot:disabled { opacity: .28; cursor: not-allowed; text-decoration: line-through; }

.form-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: .8rem 1rem;
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: .9rem;
}

/* ---------- Resumen de la reunión ---------- */

.ticket {
  position: sticky;
  top: 100px;
  padding: 1.8rem 1.7rem 2rem;
  background: var(--carbon-2);
  border: 1px solid var(--acero);
  border-radius: var(--radius);
}
/* Esquina viva: un solo detalle gráfico, en el ángulo superior derecho. */
.ticket::before {
  content: '';
  position: absolute;
  top: -1px; right: -1px;
  width: 46px; height: 46px;
  border-top: 2px solid var(--oro);
  border-right: 2px solid var(--oro);
  border-radius: 0 var(--radius) 0 0;
}

.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--acero);
}
.ticket-brand {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.04em;
}
.ticket-tag {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
}

.ticket-list { margin: 0; display: grid; gap: .8rem; }
.ticket-list > div { display: flex; justify-content: space-between; gap: 1rem; }
.ticket-list dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
  padding-top: .2rem;
}
.ticket-list dd { margin: 0; font-size: .9rem; text-align: right; max-width: 64%; }

.ticket-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1.5rem 0 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--acero);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
.ticket-total strong {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--oro);
}

.ticket-note { margin-top: 1rem; font-size: .76rem; line-height: 1.5; color: var(--humo); }

/* ---------- Confirmación ---------- */

.confirmation {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--negro);
}
/* Sin esta línea el `display: grid` de arriba le gana al atributo `hidden`
   del navegador y la confirmación tapa el formulario desde que carga. */
.confirmation[hidden] { display: none; }

.confirmation-card {
  max-width: 460px;
  padding: 3rem 2.2rem;
  text-align: center;
  background: var(--carbon-2);
  border: 1px solid var(--acero);
  border-radius: var(--radius);
}

.check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1.6rem;
  border: 1px solid var(--oro);
  border-radius: 50%;
  color: var(--oro);
}

.confirmation-card h3 { margin-bottom: 1rem; font-size: 1.5rem; }
.confirmation-card p { margin-bottom: 2rem; color: var(--humo); font-size: .95rem; font-weight: 300; }
.confirmation-card strong { color: var(--hueso); font-weight: 500; }

/* Bloque opcional de WhatsApp: va separado por un filete para que se lea
   como un extra y no como un paso pendiente del formulario. */
.confirmation-card .confirmation-extra {
  margin: 0 0 .9rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--acero);
  font-size: .88rem;
}

.confirmation-card .btn-ghost { margin-bottom: 1.3rem; }

/* "Pedir otra hora" baja de botón a enlace: con dos botones iguales la
   pantalla no dice cuál importa, y el que importa es el de WhatsApp. */
.link-suave {
  display: inline-block;
  padding: .2rem;
  border: 0;
  background: none;
  color: var(--humo);
  font-family: inherit;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.link-suave:hover { color: var(--hueso); }

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--carbon);
  border-top: 1px solid var(--acero-soft);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
}

/* En el pie va el logo de verdad, no la versión dibujada del header: a
   este tamaño el nombre dentro del círculo se lee, y es el único lugar
   de la página donde la marca puede aparecer completa sin apretarse. */
.footer-logo { width: 104px; height: 104px; margin-bottom: 1.1rem; }

.footer-cols { display: flex; flex-wrap: wrap; gap: 3.5rem; }
.footer-title {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .7rem;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--acero-soft);
}

/* ---------- Animación de entrada ---------- */

.hero-inner > * { animation: rise .75s var(--ease) both; }
.hero-inner > *:nth-child(2) { animation-delay: .07s; }
.hero-inner > *:nth-child(3) { animation-delay: .14s; }
.hero-inner > *:nth-child(4) { animation-delay: .21s; }
.freebar { animation: rise .75s var(--ease) .3s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .booking { grid-template-columns: 1fr; gap: 2.5rem; }
  /* `relative` y no `static`: la esquina de acento del resumen se
     posiciona contra la tarjeta, y con `static` se iría al ancestro. */
  .ticket { position: relative; top: auto; }
  .precio { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem 1.5rem; }
  .status { margin-left: 0; }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .booking-form { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-cols { gap: 2.2rem; }
  .footer-logo { width: 84px; height: 84px; }

  /* Las diferencias se apilan: el filete que las separa pasa de
     vertical a horizontal. */
  .diferencias { grid-template-columns: 1fr; }
  .diferencia { border-left: 0; border-top: 1px solid var(--acero); }
  .diferencia:first-child { border-top: 0; }

  /* La barra de horarios se apila: rótulo arriba, chips a lo ancho. */
  .freebar-inner { flex-direction: column; align-items: stretch; gap: .85rem; }
  .freebar-slots { flex: none; }
}

/* En pantallas angostas la marca y el botón se peleaban el ancho. */
@media (max-width: 560px) {
  .header-inner { gap: .75rem; min-height: 68px; }
  .brand { gap: .5rem; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 1.1rem; }
  .btn-sm { padding: .52rem .95rem; font-size: .76rem; }
  .container { padding-inline: 20px; }
  .tipos { grid-template-columns: 1fr; }
  .piezas, .pasos, .soluciones { grid-template-columns: 1fr; }
}