/* ═══════════════════════════════════════════════════════════════════════════
   LA WEB PÚBLICA DE MECA SISTEMAS — mecasistemas.com

   Mismo mundo visual que la aplicación (aplicacion/src/estilos.css): grafito
   casi negro, rejilla técnica de fondo, naranja como único color de marca.
   El que entra aquí y luego en la aplicación tiene que ver la misma empresa.

   La diferencia con la aplicación: aquí NO hay guantes ni prisa. Se mira
   sentado, con calma, a menudo en un escritorio. Así que aquí sí caben
   titulares grandes, aire y animación — cosas que en el parte estorbarían.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Los colores son los mismos de la aplicación, sin inventar ninguno. */
  --fondo:         #0e1116;
  --fondo-hondo:   #0a0d11;
  --panel:         #171b22;
  --panel-alto:    #1e242e;
  --linea:         #262d38;
  --linea-clara:   #313a47;

  --tinta:         #f2f5f8;
  --tinta-media:   #b6bfcb;
  --tinta-suave:   #8a94a3;

  --naranja-500:   #ff7a1a;
  --naranja-600:   #ef670a;
  --naranja-suave: rgba(255, 122, 26, .13);

  --verde:         #35c26a;
  --verde-suave:   rgba(53, 194, 106, .14);
  --rojo:          #e5544b;
  --rojo-suave:    rgba(229, 84, 75, .14);
  --ambar:         #e9b84a;
  --azul:          #4a90e2;
  --morado:        #9b6dd6;
  --turquesa:      #2fb8ad;

  --radio:         14px;
  --radio-chico:   10px;
  --radio-grande:  22px;
  --sombra:        0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -24px rgba(0, 0, 0, .8);
  --sombra-alta:   0 2px 4px rgba(0, 0, 0, .5), 0 40px 80px -40px rgba(0, 0, 0, .95);

  --titular: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cuerpo:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cifras:  ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --ancho:   1160px;
}

* { box-sizing: border-box; }

html {
  background-color: var(--fondo);
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto, un enlace interno deja el título debajo. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--fondo);
  /* La rejilla técnica: papel milimetrado apagado, como en la aplicación. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 44px 44px;
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titular);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--naranja-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* ═══ MARCA Y BOTONES ═══════════════════════════════════════════════════ */

.marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--tinta);
}

.marca svg,
.marca img { color: var(--naranja-500); flex: none; }

.marca strong {
  font-family: var(--titular);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.boton-naranja {
  background: linear-gradient(180deg, var(--naranja-500), var(--naranja-600));
  color: #1a0d02;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 10px 30px -12px rgba(255, 122, 26, .7);
}

.boton-naranja:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 18px 40px -14px rgba(255, 122, 26, .85);
}

.boton-naranja:active { transform: translateY(0); }

.boton-linea {
  border-color: var(--linea-clara);
  background: rgba(255, 255, 255, .02);
  color: var(--tinta);
}

.boton-linea:hover {
  border-color: var(--tinta-suave);
  background: rgba(255, 255, 255, .05);
  transform: translateY(-2px);
}

.boton-grande { padding: 1.15rem 2rem; font-size: 1.06rem; }

/* ═══ CABECERA ══════════════════════════════════════════════════════════ */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: .9rem 0;
  transition: background .25s ease, border-color .25s ease, padding .25s ease;
  border-bottom: 1px solid transparent;
}

.cabecera.posada {
  background: rgba(14, 17, 22, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.menu a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color .16s ease;
}

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

.cabecera-acciones { display: flex; align-items: center; gap: .75rem; }

.cabecera-acciones .boton { padding: .7rem 1.2rem; font-size: .93rem; }

@media (max-width: 900px) {
  .menu, .oculto-movil { display: none; }
}

/* ═══ EL HÉROE ══════════════════════════════════════════════════════════ */

.heroe {
  position: relative;
  padding: 9.5rem 0 5rem;
  overflow: hidden;
}

/* Los dos focos naranjas del fondo, iguales que en la pantalla de acceso. */
.heroe::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(50rem 40rem at 78% -8%, rgba(255, 122, 26, .16), transparent 60%),
    radial-gradient(44rem 40rem at -10% 30%, rgba(255, 122, 26, .06), transparent 58%);
  pointer-events: none;
}

.heroe .contenedor { position: relative; }

.heroe-reja {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 1000px) {
  .heroe { padding: 7.5rem 0 3.5rem; }
  .heroe-reja { grid-template-columns: 1fr; gap: 2.75rem; }
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem;
  border: 1px solid var(--linea-clara);
  border-radius: 999px;
  background: var(--naranja-suave);
  color: var(--naranja-500);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.etiqueta .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--naranja-500);
  box-shadow: 0 0 0 0 rgba(255, 122, 26, .6);
  animation: latir 2.4s ease-out infinite;
}

@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 26, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 122, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
}

.heroe h1 {
  margin: 1.5rem 0 0;
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 800;
}

.heroe h1 .resalte {
  color: var(--naranja-500);
  position: relative;
  white-space: nowrap;
}

/* El subrayado del titular se dibuja solo al cargar. */
.heroe h1 .resalte::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: 3px;
  background: linear-gradient(90deg, var(--naranja-500), rgba(255, 122, 26, 0));
  transform-origin: left;
  animation: subrayar .9s .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes subrayar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.heroe-entradilla {
  margin-top: 1.4rem;
  max-width: 33rem;
  font-size: 1.16rem;
  color: var(--tinta-media);
}

.heroe-botones {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.heroe-sellos {
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
}

.heroe-sellos li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .93rem;
  color: var(--tinta-suave);
  font-weight: 500;
}

.heroe-sellos svg { color: var(--verde); flex: none; }

/* ═══ EL PARTE QUE SE PINTA SOLO ════════════════════════════════════════ */

.demo {
  background: linear-gradient(180deg, var(--panel), #13171d);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.demo:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }

@media (max-width: 1000px) { .demo { transform: none; } }

.demo-barra {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: rgba(255, 255, 255, .015);
}

.demo-luz { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-clara); }
.demo-luz:first-child { background: var(--rojo); opacity: .7; }
.demo-luz:nth-child(2) { background: var(--ambar); opacity: .7; }
.demo-luz:nth-child(3) { background: var(--verde); opacity: .7; }

.demo-titulo {
  margin-left: .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.demo-cuerpo { padding: 1.35rem 1.25rem 1.5rem; }

.demo-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.demo-cabeza strong {
  font-family: var(--titular);
  font-size: 1.05rem;
  font-weight: 700;
}

.demo-cabeza span { font-size: .82rem; color: var(--tinta-suave); }

.demo-horas {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: .5rem;
  margin-bottom: .5rem;
}

.demo-escala {
  display: flex;
  justify-content: space-between;
  font-family: var(--cifras);
  font-size: .68rem;
  color: var(--tinta-suave);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--linea);
  padding-bottom: .35rem;
}

.demo-fila {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
}

.demo-maquina {
  font-size: .74rem;
  font-weight: 600;
  color: var(--tinta-media);
  text-align: right;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-pista {
  position: relative;
  height: 34px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  /* Las divisiones de cuarto de hora, como el papel milimetrado del parte. */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .06) 0 1px,
    transparent 1px 12.5%
  );
  overflow: hidden;
}

.demo-tramo {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 5px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: pintar .5s cubic-bezier(.2, .85, .25, 1) both;
  animation-play-state: paused;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset;
}

.demo.en-marcha .demo-tramo { animation-play-state: running; }

@keyframes pintar { to { transform: scaleX(1); } }

.t-produccion   { background: linear-gradient(180deg, #3ed17a, #2ba75a); }
.t-preparacion  { background: linear-gradient(180deg, #5a9de8, #3f7fc4); }
.t-averia       { background: linear-gradient(180deg, #ec6259, #cf4239); }
.t-desayuno     { background: linear-gradient(180deg, #6d7788, #566073); }
.t-mantenimiento{ background: linear-gradient(180deg, var(--naranja-500), var(--naranja-600)); }
.t-calidad      { background: linear-gradient(180deg, #a87ce0, #8659c2); }
.t-limpieza     { background: linear-gradient(180deg, #3ecbc0, #22a49a); }

/* El cursor que barre el lienzo mientras se pinta: da sensación de tiempo. */
.demo-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--naranja-500), transparent);
  opacity: 0;
  left: 0;
}

.demo.en-marcha .demo-cursor { animation: barrer 3.4s .2s ease-in-out both; }

@keyframes barrer {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}

.demo-pie {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
}

.demo-clave {
  display: flex;
  align-items: center;
  gap: .42rem;
  font-size: .75rem;
  color: var(--tinta-suave);
  font-weight: 500;
}

.demo-clave i {
  width: 11px; height: 11px;
  border-radius: 3px;
  display: block;
}

/* ═══ SECCIONES ═════════════════════════════════════════════════════════ */

.franja { padding: 6rem 0; position: relative; }

.franja-honda {
  background: var(--fondo-hondo);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

@media (max-width: 700px) { .franja { padding: 4rem 0; } }

.rotulo {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--naranja-500);
  margin-bottom: 1rem;
}

.franja h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  font-weight: 800;
  max-width: 22ch;
}

.franja-centrada h2, .franja-centrada .entradilla { margin-inline: auto; }
.franja-centrada { text-align: center; }
.franja-centrada .rotulo { text-align: center; }

.entradilla {
  margin-top: 1.1rem;
  max-width: 46rem;
  font-size: 1.1rem;
  color: var(--tinta-media);
}

/* ═══ TARJETAS ══════════════════════════════════════════════════════════ */

.reja-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.35rem;
  margin-top: 3rem;
}

.tarjeta {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.85rem;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  overflow: hidden;
}

.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--naranja-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--linea-clara);
  background: var(--panel-alto);
}

.tarjeta:hover::after { transform: scaleX(1); }

.tarjeta h3 {
  font-size: 1.22rem;
  margin-bottom: .7rem;
  letter-spacing: -0.02em;
}

.tarjeta p { color: var(--tinta-suave); font-size: .99rem; }

.tarjeta .icono {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-chico);
  background: var(--naranja-suave);
  color: var(--naranja-500);
  margin-bottom: 1.15rem;
}

.tarjeta .cifra-suelta {
  font-family: var(--titular);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--naranja-500);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}

/* ═══ LOS PASOS ═════════════════════════════════════════════════════════ */

.pasos { margin-top: 3.5rem; display: grid; gap: 1.35rem; }

.paso {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.75rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 2rem 2.1rem;
  transition: border-color .25s ease;
}

.paso:hover { border-color: var(--linea-clara); }

@media (max-width: 860px) {
  .paso { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.6rem; }
}

.paso-numero {
  font-family: var(--titular);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--naranja-500);
  font-variant-numeric: tabular-nums;
}

.paso h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.paso p { color: var(--tinta-suave); font-size: 1rem; }

/* Las mini-maquetas que acompañan a cada paso. */
.mini {
  background: var(--fondo-hondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 1.1rem;
}

.mini-reloj {
  text-align: center;
}

.mini-reloj .hora {
  font-family: var(--cifras);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.mini-reloj .estado {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0 .8rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: .78rem;
  font-weight: 600;
}

.mini-boton {
  display: block;
  width: 100%;
  padding: .95rem;
  border-radius: var(--radio-chico);
  background: linear-gradient(180deg, #e5645b, #cf4c43);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
  border: 0;
}

.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.mini-kpi {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: .8rem .9rem;
}

.mini-kpi span {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .25rem;
}

.mini-kpi strong {
  font-family: var(--titular);
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* ═══ LOS DOS NÚMEROS ═══════════════════════════════════════════════════ */

.numerones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.35rem;
  margin-top: 3rem;
}

.numeron {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.9rem;
  text-align: left;
}

.numeron .valor {
  font-family: var(--titular);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.numeron .valor small {
  font-size: .38em;
  font-weight: 700;
  color: var(--tinta-suave);
  letter-spacing: 0;
  margin-left: .25rem;
}

.numeron .nombre {
  margin-top: .85rem;
  font-weight: 700;
  font-size: 1rem;
}

.numeron .nota {
  margin-top: .35rem;
  font-size: .9rem;
  color: var(--tinta-suave);
}

.numeron.destacado { border-color: rgba(255, 122, 26, .38); background: var(--panel-alto); }
.numeron.destacado .valor { color: var(--naranja-500); }

.remate {
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--naranja-500);
  background: var(--naranja-suave);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: 1.08rem;
}

.remate strong { color: var(--naranja-500); }

/* ═══ LISTA DE COMPROBACIÓN ═════════════════════════════════════════════ */

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 2.25rem; }
}

.lista-marcas { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .95rem; }

.lista-marcas li {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: .85rem;
  align-items: start;
  font-size: 1.02rem;
}

.lista-marcas svg { margin-top: .28rem; flex: none; }
.lista-marcas .si svg { color: var(--verde); }
.lista-marcas .no svg { color: var(--rojo); }
.lista-marcas strong { display: block; }
.lista-marcas span { color: var(--tinta-suave); font-size: .95rem; }

/* La lista de "no hace falta", con los precios tachados del hardware. */
.sin-nada { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }

.sin-nada li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-weight: 600;
}

.sin-nada .tachado {
  color: var(--tinta-suave);
  text-decoration: line-through;
  text-decoration-color: var(--rojo);
  text-decoration-thickness: 2px;
  font-weight: 500;
}

.sin-nada .cero {
  color: var(--verde);
  font-family: var(--cifras);
  font-weight: 700;
  font-size: .95rem;
}

/* ═══ ACORDEÓN DE PREGUNTAS ═════════════════════════════════════════════ */

.preguntas { margin-top: 3rem; display: grid; gap: .8rem; max-width: 52rem; }

.pregunta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  overflow: hidden;
  transition: border-color .2s ease;
}

.pregunta[open] { border-color: var(--linea-clara); }

.pregunta summary {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.04rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2px solid var(--naranja-500);
  border-bottom: 2px solid var(--naranja-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}

.pregunta[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.pregunta .respuesta {
  padding: 0 1.5rem 1.4rem;
  color: var(--tinta-suave);
  font-size: 1rem;
  animation: desplegar .28s ease both;
}

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ EL FORMULARIO ═════════════════════════════════════════════════════ */

.contacto {
  position: relative;
  padding: 6.5rem 0 7rem;
  overflow: hidden;
  border-top: 1px solid var(--linea);
}

.contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46rem 34rem at 50% 110%, rgba(255, 122, 26, .17), transparent 62%);
  pointer-events: none;
}

.contacto .contenedor { position: relative; }

.contacto-reja {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 950px) {
  .contacto-reja { grid-template-columns: 1fr; gap: 2.5rem; }
  .contacto { padding: 4.5rem 0 5rem; }
}

.caja-formulario {
  background: var(--panel);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio-grande);
  padding: 2.25rem;
  box-shadow: var(--sombra-alta);
}

@media (max-width: 560px) { .caja-formulario { padding: 1.5rem; } }

.campos { display: grid; gap: 1.15rem; }

.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

@media (max-width: 560px) { .pareja { grid-template-columns: 1fr; } }

.campo { display: grid; gap: .45rem; }

.campo label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinta-media);
}

.campo label .opcional { color: var(--tinta-suave); font-weight: 500; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--fondo-hondo);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio-chico);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.campo textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.campo select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.campo select option { background: var(--panel); color: var(--tinta); }

.campo input::placeholder, .campo textarea::placeholder { color: #5d6672; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--naranja-500);
  background: #0d1015;
  box-shadow: 0 0 0 4px var(--naranja-suave);
}

.campo.mal input,
.campo.mal select,
.campo.mal textarea { border-color: var(--rojo); }

.campo .error {
  font-size: .84rem;
  color: var(--rojo);
  font-weight: 500;
  display: none;
}

.campo.mal .error { display: block; }

/* El trampa-robots: invisible para las personas, apetecible para el robot. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.consentimiento {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .89rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

.consentimiento input {
  width: 1.5rem; height: 1.5rem;
  margin: .05rem 0 0;
  accent-color: var(--naranja-500);
  cursor: pointer;
}

.consentimiento a { color: var(--tinta-media); }

.enviar { margin-top: .35rem; width: 100%; }

.enviar[disabled] { opacity: .65; cursor: progress; }

.enviar .girando {
  width: 17px; height: 17px;
  border: 2px solid rgba(26, 13, 2, .3);
  border-top-color: #1a0d02;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  display: none;
}

.enviar[disabled] .girando { display: block; }

@keyframes girar { to { transform: rotate(360deg); } }

.aviso-envio {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio-chico);
  font-size: .95rem;
  font-weight: 500;
  display: none;
}

.aviso-envio.mal {
  display: block;
  background: var(--rojo-suave);
  border: 1px solid rgba(229, 84, 75, .4);
  color: #ff9d96;
}

/* La confirmación sustituye al formulario entero: se ha acabado la faena. */
.confirmado {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
  animation: aparecer .5s cubic-bezier(.2, .8, .2, 1) both;
}

.confirmado.visible { display: block; }

.confirmado .marca-ok {
  width: 74px; height: 74px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--verde-suave);
  display: grid;
  place-items: center;
  color: var(--verde);
}

.confirmado .marca-ok svg { stroke-dasharray: 40; animation: trazar .6s .18s ease both; }

@keyframes trazar { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

.confirmado h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.confirmado p { color: var(--tinta-suave); max-width: 30rem; margin: 0 auto; }

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

/* La columna de al lado del formulario. */
.contacto h2 { font-size: clamp(2rem, 4vw, 2.9rem); }

.contacto-datos { margin-top: 2.25rem; display: grid; gap: 1.35rem; }

.contacto-dato { display: grid; grid-template-columns: 2.6rem 1fr; gap: .95rem; align-items: start; }

.contacto-dato .icono {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-chico);
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  color: var(--naranja-500);
}

.contacto-dato strong { display: block; font-size: .97rem; }
.contacto-dato a, .contacto-dato span { color: var(--tinta-suave); font-size: .95rem; text-decoration: none; }
.contacto-dato a:hover { color: var(--naranja-500); }

/* ═══ PIE ═══════════════════════════════════════════════════════════════ */

.pie {
  border-top: 1px solid var(--linea);
  background: var(--fondo-hondo);
  padding: 3rem 0 2.5rem;
}

.pie-reja {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.pie-enlaces { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.pie-enlaces a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: .93rem;
}

.pie-enlaces a:hover { color: var(--naranja-500); }

.pie-legal {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  color: #6a7381;
  font-size: .84rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* ═══ LA APARICIÓN AL BAJAR ═════════════════════════════════════════════ */

.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1),
              transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--retraso, 0s);
}

.aparece.visible { opacity: 1; transform: none; }

/* ═══ QUIEN NO QUIERE MOVIMIENTO, NO LO TIENE ═══════════════════════════
   Regla 9 del encargo de diseño. Aquí no es un detalle: hay bastante
   animación, y a quien le marea le marea de verdad.                        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
  .demo-tramo { transform: scaleX(1); }
  .demo { transform: none; }
}

/* ═══ PÁGINAS DE TEXTO (aviso legal, privacidad) ════════════════════════ */

.legal { padding: 8.5rem 0 5rem; max-width: 46rem; }

.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 1rem; }

.legal .fecha {
  color: var(--tinta-suave);
  font-size: .9rem;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}

.legal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.75rem 0 .9rem;
  color: var(--tinta);
}

.legal p, .legal li { color: var(--tinta-media); font-size: 1.02rem; }
.legal p + p { margin-top: 1rem; }
.legal ul { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.legal a { color: var(--naranja-500); }
.legal strong { color: var(--tinta); }

.legal .ficha {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem 1.75rem;
  margin-top: 1.25rem;
}

.legal .ficha p { margin: 0; }
.legal .ficha p + p { margin-top: .4rem; }

.legal .volver {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 3.5rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}

.legal .volver:hover { color: var(--naranja-500); }