/* ==========================================================================
   IB Motronic — hoja de estilos
   --------------------------------------------------------------------------
   Modo oscuro. Fondo casi negro azulado, superficies un poco mas claras y el
   azul del logotipo como unico acento. Va a proposito en moderno y sobrio:
   quien llega con el coche parado mira el texto, no los adornos.

   Sin dependencias. Tres bloques: variables, base, bloques.
   ========================================================================== */

/* ---------- anclas y la cabecera que tapa ----------
   La cabecera es fija, asi que al saltar a un ancla el titulo de la seccion se
   queda debajo. Con scroll-padding-top en html el navegador deja el hueco antes
   de parar, y de paso lo arreglo para los scrollIntoView() de main.js, que
   tambien respetan esta propiedad.

   Medido: la cabecera mide 77 px en escritorio y 115 px en movil, porque en
   movil el reloj pasa a su propia fila. En movil hacia falta mas hueco que en
   escritorio: alli las secciones tienen bastante mas padding. Sin esto, en
   movil el titulo de cada seccion salia cortado por arriba. */
html {
  scroll-padding-top: 92px;
}

@media (max-width: 620px) {
  html { scroll-padding-top: 130px; }
}

/* ---------- variables ---------- */
:root {
  --azul: #4A9DFF;
  --azul-osc: #2F7FE0;
  --azul-claro: #7DBCFF;
  --tinta: #F2F6FC;
  --pizarra: #DCE5F0;
  --gris: #9AA8BC;
  --gris-osc: #6F7D90;
  --linea: #253141;
  --linea-fuerte: #35455A;
  --papel: #121A26;
  --papel-alto: #18222F;
  --fondo: #0A0E15;
  --fondo-alt: #0E141D;
  --verde: #25D366;
  --verde-osc: #17A94C;
  --ambar: #F7C948;
  --ambar-fondo: #2A2313;
  --ambar-linea: #4A3D1C;
  --rojo: #FF7A7A;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --sombra-s: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-m: 0 6px 22px rgba(0, 0, 0, .45);
  --sombra-l: 0 18px 46px rgba(0, 0, 0, .55);

  --ancho: 1120px;
  --alto-barra: 76px;
}

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

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--pizarra);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  color: var(--tinta);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.25rem + 3.1vw, 3.35rem); font-weight: 750; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.16rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* El titulo de la portada es largo y el cliente lo quiere entero en una
   sola linea. Se afina el tamano para que quepa en escritorio y solo se
   parte en movil, donde no hay manera de que quepa. */
/* El titulo va a todo el ancho, encima de las dos columnas, para que quepa
   entero en una linea. Si no, se parte en tres y deja de leerse de un vistazo,
   que es justo lo que tiene que hacer. */
.portada h1 {
  font-size: clamp(1.15rem, 0.72rem + 1.05vw, 1.42rem);
  letter-spacing: -.008em;
  margin-bottom: .2em;
  max-width: 26ch;
  max-width: none;
}
@media (max-width: 900px) {
  .portada h1 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); text-wrap: balance; }
}

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-claro); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul);
  color: #04121F;
  padding: .7em 1.2em;
  border-radius: 0 0 var(--r-s) 0;
  text-decoration: none;
}
.saltar:focus { left: 0; color: #04121F; }

.wrap { width: min(100% - 2.2rem, var(--ancho)); margin-inline: auto; }

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

/* ---------- botones ---------- */
.btn {
  --bg: var(--azul);
  --fg: #05131F;
  --bd: var(--azul);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .82em 1.5em;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { --bg: var(--azul-claro); --bd: var(--azul-claro); color: #05131F; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(74, 157, 255, .28); }
.btn:active { transform: translateY(0); }

.btn--wa   { --bg: var(--verde); --bd: var(--verde); color: #04220F; }
.btn--wa:hover { --bg: #4BE07F; --bd: #4BE07F; color: #04220F; box-shadow: 0 6px 20px rgba(37, 211, 102, .25); }
.btn--ghost { --bg: transparent; --fg: var(--pizarra); --bd: var(--linea-fuerte); }
.btn--ghost:hover { --bg: var(--papel-alto); --fg: var(--tinta); --bd: var(--azul); }
.btn--ancho { width: 100%; }
.btn--grande { padding: 1em 1.9em; font-size: 1.06rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 14, 21, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linea);
}
.cabecera__inner {
  min-height: var(--alto-barra);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.marca__img { width: 40px; height: 40px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre { font-size: 1.22rem; font-weight: 750; color: var(--tinta); letter-spacing: -.02em; }
.marca__nombre b { color: var(--azul); }
.marca__nota { font-size: .7rem; color: var(--gris); letter-spacing: .03em; text-transform: uppercase; }

/* El reloj del horario: verde dentro, naranja al abrir o al cerrar, rojo
   cuando ya paso. Los colores los pone main.js en data-estado. */
.reloj {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem .8rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--papel);
  font-size: .86rem;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reloj::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gris-osc);
  flex: 0 0 auto;
}
.reloj[data-estado="abierto"]    { color: #4ADE80; border-color: rgba(74, 222, 128, .45); }
.reloj[data-estado="abierto"]::before    { background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.reloj[data-estado="cerca"], .reloj[data-estado="cerrando"] { color: var(--ambar); border-color: rgba(247, 201, 72, .45); }
.reloj[data-estado="cerca"]::before, .reloj[data-estado="cerrando"]::before { background: var(--ambar); box-shadow: 0 0 0 3px rgba(247, 201, 72, .18); }
.reloj[data-estado="cerrado"]   { color: #FF8A8A; border-color: rgba(255, 122, 122, .45); }
.reloj[data-estado="cerrado"]::before   { background: #FF7A7A; box-shadow: 0 0 0 3px rgba(255, 122, 122, .18); }
.reloj__texto { color: inherit; opacity: .82; font-weight: 600; }
/* La hora va entre dos rayas verticales, con el mismo hueco a cada lado, para
   que se lea como una columna y no como un texto pegado al que tiene al lado. */
.reloj__hora {
  font-weight: 800;
  letter-spacing: -.02em;
  padding: 0 .5rem;
  border-left: 1px solid var(--linea-fuerte);
  border-right: 1px solid var(--linea-fuerte);
}
.reloj__estado { font-weight: 600; opacity: .9; }

/* Estado de vacaciones: gris. No es un rojo de "cerrado" porque no es que
   este cerrado, es que no hay nadie. */
.reloj[data-estado="vacaciones"] { color: #9AA6B8; border-color: rgba(154, 166, 184, .4); }
.reloj[data-estado="vacaciones"]::before { background: #9AA6B8; box-shadow: 0 0 0 3px rgba(154, 166, 184, .16); }
/* El aviso de vacaciones, arriba del todo y solo si se activa a mano. */
.vacaciones {
  margin: 0;
  padding: .85rem 1.1rem;
  background: #2A2118;
  border-bottom: 1px solid #4A3A22;
  color: #F0C98A;
  font-size: .92rem;
  text-align: center;
}
.vacaciones[hidden] { display: none; }

@media (max-width: 620px) {
  /* El reloj no cabe al lado del logo: pasa a su propia fila para que el
     horario se siga viendo arriba del todo, que es donde sirve. El estado se
     oculta porque el texto ya no cabe. */
  .cabecera__inner { flex-wrap: wrap; padding-bottom: .55rem; }
  .reloj {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    font-size: .78rem;
    padding: .26rem .6rem;
  }
  .reloj__estado { display: none; }

  /* Sin esto, en pantallas estrechas el descriptor del logo es mas ancho que
     el hueco que queda antes del boton de menu, y el boton se cae a una fila
     aparte debajo del logo. Con min-width a 0 y el descriptor en una sola linea
     con puntos suspensivos se recorta, pero eso solo no basta: el reparto de
     lineas de flex usa el tamaño teorico, asi que el descriptor puede seguir
     empujando el boton aunque se recorte. Por eso ademas lleva un ancho
     maximo, que es lo que de verdad garantiza que el boton se queda arriba.
     Medido: con 10rem el boton sigue en su fila a 320, 360 y 390 px. */
  .marca { min-width: 0; }
  .marca__texto { min-width: 0; max-width: 10rem; }
  .marca__nombre { white-space: nowrap; }
  .marca__nota {
    font-size: .62rem;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s);
  background: var(--papel);
  cursor: pointer;
  padding: 0;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after  { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .5em .6em;
  border-radius: var(--r-s);
  color: var(--pizarra);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav a:hover { background: var(--papel-alto); color: var(--tinta); }
.nav a.activo { color: var(--azul); background: rgba(74, 157, 255, .14); }

/* ---------- bloques comunes ---------- */
.seccion { padding: clamp(3.2rem, 1.8rem + 5vw, 5.6rem) 0; }
.seccion--alt { background: var(--fondo-alt); border-block: 1px solid var(--linea); }
.seccion--claro { background: var(--papel); border-block: 1px solid var(--linea); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .8rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
}
.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 4px rgba(74, 157, 255, .18);
}

.rotulo { color: var(--gris); font-size: 1.06rem; max-width: 62ch; }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: 1.4rem 1.35rem;
  box-shadow: var(--sombra-s);
}
.tarjeta h3 { margin-bottom: .35rem; }
.tarjeta p { color: var(--gris); font-size: .97rem; margin-bottom: 0; }

.rejilla { display: grid; gap: 1.1rem; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }



/* Los dos botones de la portada dependen del reloj de la cabecera.
   Verde   dentro del horario: los dos, llamar y escribir.
   Naranja abriendo o cerrando: solo escribir, que siempre se puede contestar.
   Rojo    fuera del horario: solo escribir, y se avisa de que es urgencias.
   Gris    de vacaciones: solo escribir, y no hay nadie.

   Todo esto va con html.js-on a proposito: sin JavaScript los dos botones se
   ven siempre, que es lo seguro. Si el JavaScript no carga, el que no puede
   escribir al menos tiene el boton de llamar. Con JS, lo unico que se hace es
   esconder el de llamar. Nunca se esconde el de WhatsApp. */
/* El telefono solo se ve con el reloj en verde. El atributo data-llamada
   va puesto en cada sitio donde aparece el telefono: el boton de la portada,
   la ficha de contacto, el pie y la barra de movil. Con una sola regla se
   ocultan los cuatro a la vez, y no hay que acordarse de cuatro sitios.

   Sin JavaScript no se oculta nada: sin JS no hay reloj y no hay forma de
   saber la hora, y dejar a alguien sin ningun contacto es peor que abrirle
   el telefono de mas. Por eso todo va con html.js-on delante. */
html.js-on[data-llamada="no"] [data-llamada] { display: none !important; }

/* Cuando solo queda el boton de WhatsApp en la barra de movil, que se
   Estire a todo el ancho en vez de quedarse en la mitad con un hueco. */
.barra-movil .btn--ghost[data-llamada] { margin-left: 0; }

/* ---------- portada ---------- */
.portada {
  position: relative;
  padding: clamp(2.6rem, 1.4rem + 5vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 4.6rem);
  background:
    radial-gradient(1100px 520px at 82% -14%, rgba(74, 157, 255, .18) 0%, rgba(74, 157, 255, 0) 60%),
    radial-gradient(760px 420px at 8% 0%, rgba(125, 188, 255, .10) 0%, rgba(125, 188, 255, 0) 62%),
    linear-gradient(180deg, #0C121C 0%, var(--fondo) 100%);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}
.portada__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(1.8rem, 1rem + 3vw, 3.6rem);
  align-items: center;
}
.portada__lema { font-size: 1.12rem; color: var(--gris); max-width: 54ch; }

.portada__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.portada__cifras div { min-width: 0; }
.portada__cifras dt { font-size: 1.5rem; font-weight: 750; color: var(--azul); line-height: 1.15; }
.portada__cifras dd { margin: .2rem 0 0; font-size: .9rem; color: var(--gris); }

.ficha {
  background: linear-gradient(180deg, var(--papel-alto) 0%, var(--papel) 100%);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-l);
  padding: 1.7rem;
  box-shadow: var(--sombra-l);
}
.ficha__logo {
  width: min(100%, 320px);
  margin: 0 auto 1rem;
}
.ficha__lema {
  margin: 0 0 .35rem;
  font-size: 1.06rem;
  font-weight: 650;
  color: var(--azul);
  text-align: center;
  letter-spacing: .01em;
}
.ficha__sublema {
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
  font-size: 1rem;
  color: var(--gris);
  text-align: center;
}
.ficha ul { margin: 0; padding: 0; list-style: none; }
.ficha li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .42rem 0;
  font-size: .97rem;
}
.ficha li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: .18em;
  border-radius: 50%;
  background: rgba(74, 157, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A9DFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ficha__pie {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: .88rem;
  color: var(--gris);
  text-align: center;
}

/* ---------- servicios ---------- */
.servicio {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: 1.45rem 1.35rem;
  box-shadow: var(--sombra-s);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.servicio:hover { border-color: rgba(74, 157, 255, .45); box-shadow: var(--sombra-m); transform: translateY(-2px); }
.servicio__num { font-size: .78rem; font-weight: 750; letter-spacing: .1em; color: var(--azul); }
.servicio p { color: var(--gris); font-size: .96rem; margin: 0; }
.servicio ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--gris); font-size: .93rem; }
.servicio li { margin-bottom: .18rem; }

/* La nota de cada servicio dice si eso lo llevo yo desde hace tiempo o si me
   estoy formando. Es importante que no se confunda con la descripcion.
   El color va en --gris y no en --gris-osc porque este ultimo se queda en 4,17
   de contraste sobre el fondo de la tarjeta, y el minimo de WCAG AA es 4,5. */
.servicio__nota {
  margin-top: .3rem !important;
  padding-top: .6rem;
  border-top: 1px solid var(--linea);
  font-size: .9rem !important;
  font-style: italic;
  color: var(--gris) !important;
}

/* ---------- etiquetas: módulos y sintomas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.chips li {
  padding: .42em .85em;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--papel);
  font-size: .92rem;
  color: var(--pizarra);
}
/* Los sintomas van mas grandes y con mas sitio: son el motivo de que la gente
   entre en la pagina. */
.chips--sintomas { gap: .6rem; margin-top: 1.8rem; }
.chips--sintomas li {
  padding: .6em 1.05em;
  font-size: .98rem;
  background: var(--papel-alto);
  border-radius: var(--r-m);
}

/* ---------- etiquetas: herramientas y modulos ---------- */
.chips li[title] { cursor: help; }

/* ---------- sintoma / causa ---------- */
.fallos { display: grid; gap: .1rem; }
.fallos__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .95rem .2rem;
  border-bottom: 1px solid var(--linea);
}
.fallos__fila:last-child { border-bottom: 0; }
.fallos__sintoma { font-weight: 650; color: var(--tinta); }
.fallos__cambio { text-align: center; color: var(--azul); font-weight: 700; }
.fallos__causa { color: var(--gris); font-size: .95rem; }

/* ---------- proceso ---------- */
.pasos { counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 1.6rem 3.4rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -.1rem;
  width: 2.3rem; height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: #05131F;
  font-weight: 700;
  font-size: 1rem;
}
.pasos li::after {
  content: "";
  position: absolute;
  left: 1.12rem; top: 2.5rem; bottom: .35rem;
  width: 2px;
  background: var(--linea);
}
.pasos li:last-child { padding-bottom: 0; }
.pasos li:last-child::after { display: none; }
.pasos h3 { margin-bottom: .2rem; }
.pasos p { color: var(--gris); font-size: .96rem; margin: 0; }

/* ---------- sitio y laboratorio ---------- */
.dos-lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }

.lista-limpia { margin: 0; padding: 0; list-style: none; }
.lista-limpia li {
  position: relative;
  padding: .5rem 0 .5rem 1.7rem;
  border-bottom: 1px solid var(--linea);
  font-size: .97rem;
}
.lista-limpia li:last-child { border-bottom: 0; }
.lista-limpia li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--azul);
}
.lista-limpia--no li::before {
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--linea-fuerte);
  top: .82em;
}
.lista-limpia--si li::before { background: var(--verde); }

.aviso {
  background: var(--ambar-fondo);
  border: 1px solid var(--ambar-linea);
  border-left: 4px solid var(--ambar);
  border-radius: var(--r-s);
  padding: 1.1rem 1.25rem;
  color: #F0DFB4;
}
.aviso h3 { color: var(--ambar); }
.aviso p { font-size: .96rem; }

.nota-legal {
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m);
  padding: 1.3rem 1.4rem;
}
.nota-legal h3 { margin-bottom: .6rem; }
.nota-legal li { color: var(--gris); }
.nota-legal b { color: var(--tinta); }

/* ---------- contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.6rem, 1rem + 2.6vw, 3rem); align-items: start; }

.datos { display: grid; gap: .8rem; }
.dato {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
a.dato:hover { border-color: rgba(74, 157, 255, .45); box-shadow: var(--sombra-s); }
.dato__icono {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(74, 157, 255, .14);
  color: var(--azul);
  font-size: 1.15rem;
}
.dato b { display: block; color: var(--tinta); font-size: .98rem; }
.dato span { font-size: .92rem; color: var(--gris); }

/* ---------- formulario ---------- */
.formulario {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: clamp(1.3rem, .9rem + 1.4vw, 2rem);
  box-shadow: var(--sombra-m);
}
.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.campo { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .92rem; font-weight: 650; color: var(--tinta); }
.campo .opt { font-weight: 400; color: var(--gris); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .78em .9em;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-s);
  background: var(--fondo-alt);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA8BC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; background-size: 17px; padding-right: 2.6em; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-osc); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: 3px solid rgba(74, 157, 255, .22); outline-offset: 0; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); }

.form-error {
  display: none;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: var(--r-s);
  background: rgba(255, 122, 122, .12);
  border: 1px solid rgba(255, 122, 122, .4);
  color: #FFB4B4;
  font-size: .95rem;
  font-weight: 600;
}
.form-error.visible { display: block; }
.formulario__pie { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.formulario__nota { margin: .8rem 0 0; font-size: .86rem; color: var(--gris); }

/* El <html> empieza con class="js-off" y el propio HTML lo cambia a "js-on"
   al cargar. El enlace de abajo es para quien no tiene JavaScript: se
   esconde en cuanto el formulario empieza a funcionar. */
.solo-sin-js { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: var(--r-s); background: var(--papel-alto); font-size: .93rem; }
html.js-on .solo-sin-js { display: none; }

.sugerencia { margin: .9rem 0 0; font-size: .92rem; color: var(--gris); }
.sugerencia b { color: var(--azul); }

/* ---------- preguntas ---------- */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: .2rem 1.2rem;
}
.faq summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 650;
  color: var(--tinta);
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .2rem; top: 1.5rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: 1.05rem; color: var(--gris); font-size: .97rem; }

/* ---------- pie ---------- */
.pie { background: #070A0F; color: var(--gris); padding: 3rem 0 1.4rem; margin-top: auto; border-top: 1px solid var(--linea); }
.pie a { color: var(--azul-claro); }
.pie a:hover { color: #fff; }
.pie__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; }
.pie__logo {
  display: inline-block;
  margin-bottom: 1rem;
  line-height: 0;
}
.pie__logo img { width: 190px; }
.pie__lema { color: var(--azul); font-weight: 650; margin: 0 0 .8rem; }
.pie__marca p { font-size: .95rem; }
.pie h3 { color: var(--tinta); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { margin-bottom: .42rem; font-size: .94rem; }
.pie__legal {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  font-size: .86rem;
  color: var(--gris-osc);
}
.pie__legal p { margin: 0; }

/* ---------- barra fija en movil ---------- */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: .6rem;
  padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10, 14, 21, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
}
.barra-movil .btn { flex: 1 1 0; padding-block: .72em; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .portada__cols { grid-template-columns: 1fr; }
  .ficha { order: -1; }
  .ficha__logo { width: min(100%, 250px); }
  .contacto { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .6rem 1.1rem 1rem;
    background: var(--fondo-alt);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-m);
    display: none;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: .72em .6em; font-size: 1rem; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .form-rejilla { grid-template-columns: 1fr; }
  .fallos__fila { grid-template-columns: 1fr; gap: .25rem; padding: .85rem .2rem; }
  .fallos__cambio { text-align: left; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
  .fallos__cambio::before { content: "causa: "; color: var(--gris); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .fallos__cambio::after { content: none; }
  .portada__cifras { gap: 1.1rem 1.8rem; }
  .barra-movil { display: flex; }
  body { padding-bottom: 76px; }
}

@media print {
  .cabecera, .barra-movil, .acciones, .formulario, .nota-legal { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .seccion { padding: 1.2rem 0; }
  .tarjeta, .servicio, .faq details, .ficha { box-shadow: none; border-color: #ccc; }
}