/* ==========================================================================
   Grupo Conectar Comunicaciones — hoja de estilos
   --------------------------------------------------------------------------
   Escrita a mano, sin frameworks ni dependencias. No carga NADA de internet:
   ni tipografías, ni iconos, ni scripts de terceros. Por eso la web no
   necesita banner de cookies y por eso pinta instantáneamente.

   Si quieres cambiar los colores, están todos aquí abajo en un solo sitio.
   ¡Ojo! Los colores están elegidos para que el texto se lea bien (contraste
   WCAG AA). Si los cambias, comprueba el contraste antes.
   ========================================================================== */

:root {
  /* --- Colores de marca --- */
  --naranja:        #FF7900;  /* el naranja del logo. SOLO decoración:      */
                              /* barras, fondos de icono, bordes.           */
                              /* NUNCA para texto: da 2,57:1 y no se lee.   */
  --naranja-fuerte: #C25602;  /* fondo de botón con texto blanco  (4,54:1)  */
  --naranja-texto:  #A84A02;  /* texto naranja sobre fondo claro  (5,64:1)  */
  --naranja-claro:  #FFF4EA;  /* fondos suaves                              */
  --naranja-borde:  #FFE0C4;

  /* --- Neutros --- */
  --tinta:      #121419;      /* titulares          (18,0:1)  */
  --texto:      #4B5261;      /* texto corrido      (7,7:1)   */
  --texto-flojo:#5A6070;      /* texto secundario   (6,2:1)   */
  --crema:      #FFFCF9;      /* fondo de la página */
  --crema-2:    #FFF6EE;      /* fondo de secciones alternas */
  --blanco:     #FFFFFF;
  --borde:      #F0E7DF;      /* bordes decorativos */
  --borde-campo:#8C93A1;      /* bordes de formulario (3,1:1, exigido por
                                 WCAG para controles) */
  --foco:       #0B4FCE;      /* anillo de foco del teclado (6,8:1) */

  /* --- Medidas --- */
  --ancho: 1120px;
  --radio: 14px;
  --radio-gr: 22px;
  --sombra: 0 10px 30px -12px rgba(20, 20, 30, .16);
  --sombra-nar: 0 12px 28px -12px rgba(194, 86, 2, .40);

  /* Alto del faldón fijo de abajo. Se usa para reservarle el hueco al final
     de la página y para levantar el botón flotante de WhatsApp. Si se cambia
     el contenido del faldón y crece, hay que actualizar este número. */
  --alto-faldon: 50px;
}
@media (min-width: 768px) { :root { --alto-faldon: 55px; } }

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

html {
  scroll-behavior: smooth;
  /* que el ancla no quede tapada ni por la cabecera fija ni por el faldón */
  scroll-padding-top: 84px;
  scroll-padding-bottom: var(--alto-faldon);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* hueco reservado para el faldón fijo, para que no tape el final del pie */
  padding-bottom: var(--alto-faldon);
  background: var(--crema);
  color: var(--texto);
  /* Tipografías del propio sistema: cero descargas, cero espera, y en
     cada dispositivo se ve con la fuente que ya tiene instalada. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Los navegadores dan a <figure> y <blockquote> un margen lateral de 40 px
   por defecto. Si no se quita, las tarjetas de opinión salen 80 px más
   estrechas que su hueco y descolocadas. */
figure, blockquote { margin: 0; }

h1, h2, h3 { color: var(--tinta); line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 4.4vw, 2.4rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0; }

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

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

/* Foco del teclado: visible SIEMPRE y separado del elemento, para que se
   vea igual de bien sobre un botón naranja que sobre el fondo claro. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Saltar al contenido (lectores de pantalla y navegación por teclado) */
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: #fff;
  padding: 12px 20px; z-index: 200; border-radius: 0 0 10px 0;
}
.saltar:focus { left: 0; }

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

.seccion { padding: 64px 0; }
@media (min-width: 768px) { .seccion { padding: 92px 0; } }

.centrado { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; }

/* Antetítulo de sección */
.antetitulo {
  color: var(--naranja-texto);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.entradilla { color: var(--texto-flojo); font-size: 1.06rem; margin-top: 16px; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem; font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.boton:hover { transform: translateY(-1px); }

.boton-principal { background: var(--naranja-fuerte); color: #fff; box-shadow: var(--sombra-nar); }
.boton-principal:hover { background: #A84A02; color: #fff; }

.boton-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--borde-campo); }
.boton-secundario:hover { border-color: var(--naranja-fuerte); color: var(--naranja-texto); }

.boton-wa { background: #0F7A3D; color: #fff; }  /* verde oscurecido: el
              #25D366 de WhatsApp con texto blanco da 1,7:1 y no se lee */
.boton-wa:hover { background: #0B5E2F; color: #fff; }

.boton-ancho { width: 100%; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 252, 249, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; padding: 7px 0; }
.marca img { width: 46px; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto b { color: var(--tinta); font-size: .98rem; font-weight: 800; letter-spacing: -.02em; }
.marca-texto span { color: var(--naranja-texto); font-size: .62rem; font-weight: 700; letter-spacing: .14em; }

.menu { display: none; gap: 18px; margin: 0 auto; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.menu a:hover { color: var(--naranja-texto); }
/* 1200 px y no menos. En la cabecera conviven el logo, cinco enlaces, el
   teléfono y DOS botones; por debajo de ese ancho no caben y el menú empuja
   todo fuera de la pantalla. Debajo de 1200 la web sigue siendo una sola
   página que se recorre bajando, así que no se pierde nada.
   Si se añade otro enlace o se alarga un botón, hay que volver a comprobarlo. */
@media (min-width: 1200px) { .menu { display: flex; } }

.acciones-cabecera { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tel-cabecera {
  display: none; align-items: center; gap: 7px;
  color: var(--tinta); font-weight: 700; text-decoration: none; font-size: .95rem;
  white-space: nowrap;
}
.tel-cabecera:hover { color: var(--naranja-texto); }
@media (min-width: 600px) { .tel-cabecera { display: inline-flex; } }
/* nowrap: sin esto, "Área de clientes" se parte en dos líneas y el botón
   se convierte en un óvalo alto que descoloca toda la cabecera. */
.acciones-cabecera .boton { padding: 10px 18px; font-size: .92rem; white-space: nowrap; }

/* En pantallas estrechas no caben los dos botones de la cabecera. Se queda
   el ÁREA DE CLIENTES y se va "Hablemos": quien ya es cliente entra desde el
   móvil buscando justo ese acceso, mientras que para contactar están el botón
   flotante de WhatsApp y toda la página por delante.
   ⚠️ El :not() es imprescindible: los dos botones son .boton-principal, así
   que sin él se ocultarían los dos. */
@media (max-width: 700px) {
  .acciones-cabecera .boton-principal:not(.boton-clientes) { display: none; }
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.portada { position: relative; overflow: hidden; }
.portada::before,
.portada::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 0;
  filter: blur(70px); pointer-events: none;
}
.portada::before { width: 480px; height: 480px; top: -190px; right: -160px; background: rgba(255, 121, 0, .13); }
.portada::after  { width: 380px; height: 380px; top: 220px;  left: -180px; background: rgba(255, 121, 0, .07); }

.portada-rejilla {
  position: relative; z-index: 1;
  display: grid; gap: 44px; align-items: center;
  padding: 48px 0 56px;
}
@media (min-width: 900px) {
  .portada-rejilla { grid-template-columns: 1.08fr .92fr; gap: 56px; padding: 76px 0 84px; }
}


.portada h1 { margin-top: 20px; }
.portada h1 em { color: var(--naranja-fuerte); font-style: normal; }
.portada .entradilla { max-width: 30em; font-size: 1.12rem; }

.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.nota-google {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 28px; font-size: .95rem; color: var(--texto-flojo);
}
.nota-google b { color: var(--tinta); font-size: 1.05rem; }

/* Estrellas: dibujadas, no texto, para que el lector de pantalla no lea
   "estrella estrella estrella" sino la valoración de verdad. */
.estrellas { display: inline-flex; gap: 2px; }
.estrellas svg { width: 17px; height: 17px; fill: #E8A100; }
.estrellas-gr svg { width: 22px; height: 22px; }

/* Tarjeta de la portada */
.tarjeta-portada {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-gr);
  padding: 26px;
  box-shadow: var(--sombra);
}
.tarjeta-portada > p { text-align: center; }
.tarjeta-portada .titulo-tarjeta { color: var(--tinta); font-weight: 800; font-size: 1.15rem; }
.tarjeta-portada .sub-tarjeta { color: var(--texto-flojo); font-size: .95rem; margin-top: 4px; }

.lista-ventajas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.lista-ventajas li {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--naranja-claro);
  border-radius: var(--radio);
  padding: 13px 15px;
}
.icono {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  background: var(--naranja); color: #fff;
  display: grid; place-items: center;
}
.icono svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lista-ventajas b { display: block; color: var(--tinta); font-size: .95rem; }
.lista-ventajas span { font-size: .88rem; color: var(--texto-flojo); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Faldón fijo
   --------------------------------------------------------------------------
   Anclado abajo de la pantalla, igual que la cabecera lo está arriba. La
   página navega entre los dos.

   Va en UNA SOLA LÍNEA siempre. Si se le deja envolver, en un móvil ocupa
   cuatro renglones y se come media pantalla para siempre. Cuando no cabe,
   se desliza al costado con el dedo.
   -------------------------------------------------------------------------- */
.tira {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--tinta); color: #C9CFDA;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.tira ul {
  list-style: none; margin: 0; padding: 13px 0;
  display: flex; flex-wrap: nowrap;
  /* "safe" evita que, al no caber, se recorte el primer elemento por la
     izquierda y quede inalcanzable. */
  justify-content: safe center;
  gap: 24px; font-size: .88rem;
  overflow-x: auto;
  scrollbar-width: none;                 /* la barra sobraría en una tira de 46 px */
}
.tira ul::-webkit-scrollbar { display: none; }
.tira li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tira svg { width: 17px; height: 17px; stroke: var(--naranja); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
@media (min-width: 768px) {
  .tira ul { padding: 15px 0; gap: 30px; font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   Rejillas de tarjetas
   -------------------------------------------------------------------------- */
.rejilla { display: grid; gap: 18px; margin-top: 42px; }
@media (min-width: 620px) { .rejilla-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-gr);
  padding: 26px;
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin-top: 16px; }
.tarjeta p { margin-top: 8px; font-size: .95rem; color: var(--texto-flojo); }
.tarjeta .icono { width: 46px; height: 46px; border-radius: 13px; }
.tarjeta .icono svg { width: 24px; height: 24px; }

.fondo-crema { background: var(--crema-2); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }

/* Pasos: cómo trabajamos */
.pasos { counter-reset: paso; display: grid; gap: 20px; margin-top: 42px; }
@media (min-width: 700px)  { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso { position: relative; padding-top: 8px; }
.paso .num {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--naranja-fuerte); color: #fff;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 800;
  box-shadow: var(--sombra-nar);
}
.paso h3 { margin-top: 16px; font-size: 1.12rem; }
.paso p  { margin-top: 8px; font-size: .95rem; color: var(--texto-flojo); }

/* Pastillas (servicios que redondean la oferta) */
.pastillas { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pastillas li {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 999px; padding: 9px 18px;
  font-size: .95rem; font-weight: 600; color: var(--texto);
}

/* Lista de detalles dentro de una tarjeta de servicio */
.lista-puntos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.lista-puntos li {
  position: relative; padding-left: 26px;
  font-size: .92rem; line-height: 1.55; color: var(--texto-flojo);
}
.lista-puntos li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 8px;
  border-left: 2.5px solid var(--naranja);
  border-bottom: 2.5px solid var(--naranja);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.lista-puntos b { color: var(--tinta); font-weight: 700; }

/* Banda de beneficios incluidos */
.banda-incluido {
  margin-top: 52px;
  background: var(--tinta); color: #C9CFDA;
  border-radius: var(--radio-gr);
  padding: 34px 30px;
}
.cabeza-incluido { text-align: center; max-width: 620px; margin: 0 auto; }
.cabeza-incluido h3 { color: #fff; font-size: 1.3rem; }
.cabeza-incluido p { margin-top: 10px; font-size: .93rem; color: #98A0AE; }

.rejilla-incluido { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 620px)  { .rejilla-incluido { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla-incluido { grid-template-columns: repeat(4, 1fr); } }
.rejilla-incluido li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radio);
  padding: 18px 18px 20px;
}
.rejilla-incluido b { display: block; color: #fff; font-size: 1rem; }
/* Logo de un socio (Legálitas, etc.) dentro de la banda oscura.
   Fondo blanco redondeado porque casi todos los logos corporativos están
   pensados para fondo claro y sobre negro se pierden. */
.logo-socio {
  height: 30px; width: auto; margin-bottom: 10px;
  background: #fff; border-radius: 6px; padding: 5px 8px;
}
.rejilla-incluido span { display: block; margin-top: 7px; font-size: .88rem; line-height: 1.55; color: #AEB5C2; }

/* Banda de registro de jornada */
.banda-jornada {
  display: grid; gap: 34px; align-items: center;
  background: var(--naranja-claro);
  border: 1px solid var(--naranja-borde);
  border-radius: var(--radio-gr);
  padding: 34px 28px;
}
@media (min-width: 900px) {
  .banda-jornada { grid-template-columns: 1.05fr .95fr; gap: 52px; padding: 48px 44px; }
}
.banda-jornada h2 { margin-top: 4px; }
.banda-jornada .entradilla { margin-top: 16px; }

.lista-jornada { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-jornada li {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.lista-jornada .icono { width: 40px; height: 40px; border-radius: 11px; }
.lista-jornada .icono svg { width: 21px; height: 21px; }
.lista-jornada b { display: block; color: var(--tinta); font-size: .96rem; }
.lista-jornada span span { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.5; color: var(--texto-flojo); }

/* Línea de tiempo de la historia */
.historia { list-style: none; margin: 44px 0 0; padding: 0; position: relative; }

/* El hilo vertical que une los años. Se dibuja con un pseudo-elemento para
   no ensuciar el HTML con elementos vacíos. */
.historia::before {
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 27px;
  width: 2px; background: var(--naranja-borde);
}
@media (min-width: 760px) { .historia::before { left: 74px; } }

.historia li {
  position: relative; display: grid; gap: 4px 22px;
  grid-template-columns: 56px 1fr;
  padding-bottom: 30px;
}
@media (min-width: 760px) {
  .historia li { grid-template-columns: 150px 1fr; gap: 0 34px; padding-bottom: 38px; }
}
.historia li:last-child { padding-bottom: 0; }

.anio {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  height: 40px; padding: 0 14px;
  border-radius: 999px;
  background: var(--naranja-fuerte); color: #fff;
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  box-shadow: var(--sombra-nar);
  justify-self: start;
}
@media (min-width: 760px) { .anio { justify-self: end; font-size: 1rem; height: 44px; padding: 0 18px; } }

.historia h3 { font-size: 1.15rem; }
.historia p { margin-top: 10px; color: var(--texto-flojo); font-size: .98rem; }
.historia b { color: var(--tinta); }

/* En móvil el año va encima del texto, así que el texto ocupa las dos
   columnas para no quedarse en una tira estrecha. */
@media (max-width: 759px) {
  .historia li > div { grid-column: 1 / -1; margin-top: 10px; }
}

.cierre-historia {
  max-width: 46em; margin: 0 auto;
  font-size: 1.08rem; line-height: 1.7; color: var(--texto);
}
.cierre-historia b { color: var(--tinta); }

/* Dato de experiencia */
.dato-experiencia {
  margin: 26px auto 0;
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
  background: var(--naranja-claro);
  border: 1px solid var(--naranja-borde);
  border-radius: var(--radio);
  padding: 12px 20px;
  font-size: 1rem; color: var(--texto);
}
.dato-experiencia b { color: var(--naranja-texto); }
.dato-experiencia span { color: var(--texto-flojo); }

/* --------------------------------------------------------------------------
   Reseñas
   -------------------------------------------------------------------------- */
.resenas { background: var(--tinta); color: #C9CFDA; position: relative; overflow: hidden; }
.resenas::before {
  content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  top: -320px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 121, 0, .10); filter: blur(90px); pointer-events: none;
}
.resenas h2 { color: #fff; }
.resenas .contenedor { position: relative; z-index: 1; }

.resenas-cabeza { display: grid; gap: 26px; align-items: center; }
@media (min-width: 820px) { .resenas-cabeza { grid-template-columns: 1fr auto; } }

.marcador {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radio-gr);
  padding: 22px 30px; text-align: center;
}
.marcador .nota { font-size: 3rem; font-weight: 800; color: #fff; line-height: 1; }
.marcador p { font-size: .88rem; color: #AEB5C2; margin-top: 8px; }

/* Carril de opiniones: se ven varias a la vez y se desplaza al costado.
   Usa el desplazamiento nativo del navegador, así que funciona con el dedo,
   con la rueda del ratón y con el teclado sin una línea de código extra. */
.carrusel { margin-top: 36px; position: relative; }

.pista {
  display: grid;
  grid-auto-flow: column;
  /* Ancho FIJO por tarjeta, no minmax(0, …): con un mínimo de 0 las columnas
     se encogen hasta caber todas en la pantalla y entonces no hay nada que
     desplazar. Con medida fija, el carril desborda y se desliza. */
  grid-auto-columns: 86%;                     /* móvil: asoma la siguiente */
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;             /* no arrastra la página entera */
  /* "proximity" y no "mandatory": con mandatory, el ajuste automático
     cancela el desplazamiento animado de las flechas y el carril vuelve
     solo a su sitio. Con proximity se sigue notando el imán al deslizar
     con el dedo, pero las flechas funcionan. */
  scroll-snap-type: x proximity;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) rgba(255, 255, 255, .08);
}
@media (min-width: 700px)  { .pista { grid-auto-columns: calc((100% - 18px) / 2); } }   /* 2 a la vez */
@media (min-width: 1000px) { .pista { grid-auto-columns: calc((100% - 36px) / 3); } }   /* 3 a la vez */

.pista::-webkit-scrollbar { height: 8px; }
.pista::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 999px; }
.pista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 999px; }
.pista::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }

.resena {
  scroll-snap-align: start;
  display: flex; flex-direction: column;      /* la firma queda siempre abajo */
  overflow-wrap: break-word;
  background: var(--blanco); color: var(--texto);
  border-radius: var(--radio-gr); padding: 26px;
  box-shadow: var(--sombra);
}
.resena blockquote { flex: 1; margin: 14px 0 0; font-size: 1rem; line-height: 1.6; color: var(--texto); }
.resena figcaption { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.resena figcaption > span { min-width: 0; }
.inicial {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--naranja-fuerte); color: #fff;
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0;
}
.resena figcaption b { color: var(--tinta); font-size: .92rem; display: block; }
.resena figcaption span { color: var(--texto-flojo); font-size: .8rem; }

.mandos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.mando {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .15s ease, opacity .15s ease;
}
.mando:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.mando:disabled { opacity: .3; cursor: default; }
.mando svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.pista-ayuda { color: #8E96A5; font-size: .85rem; }

.enlace-google { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; padding: 8px 4px; color: #FF9A3D; font-weight: 700; text-decoration: none; }
.enlace-google:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.contacto-rejilla { display: grid; gap: 36px; align-items: start; margin-top: 8px; }
@media (min-width: 900px) { .contacto-rejilla { grid-template-columns: 1fr 1fr; gap: 48px; } }

.canales { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.canal {
  display: flex; align-items: center; gap: 15px;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 15px 17px;
  text-decoration: none; color: inherit;
}
a.canal:hover { border-color: var(--naranja-fuerte); }
.canal b { display: block; color: var(--tinta); font-size: 1rem; }
.canal span { font-size: .92rem; color: var(--texto-flojo); }
.canal .icono { width: 44px; height: 44px; border-radius: 12px; }
.canal .icono svg { width: 22px; height: 22px; }
.icono-verde { background: #0F7A3D; }
.icono-tinta { background: var(--tinta); }

.horario {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 4px; font-size: .93rem; color: var(--texto-flojo);
}
.horario svg { color: var(--naranja-texto); flex-shrink: 0; }
.horario b { color: var(--tinta); font-weight: 700; }

/* Formulario */
.formulario {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-gr); padding: 26px;
  box-shadow: var(--sombra);
}
.formulario > h3 { font-size: 1.2rem; font-weight: 800; }
.campos { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 560px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: .87rem; font-weight: 700; color: var(--tinta); }
.campo .opcional { font-weight: 500; color: var(--texto-flojo); }
.campo input,
.campo textarea,
.campo select {
  font: inherit; font-size: .97rem;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde-campo);
  border-radius: 11px; padding: 12px 14px;
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input::placeholder, .campo textarea::placeholder { color: #6B7280; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--naranja-fuerte); }

fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: .87rem; font-weight: 700; color: var(--tinta); padding: 0; margin-bottom: 8px; }
.opciones { display: grid; gap: 9px; }
@media (min-width: 460px) { .opciones { grid-template-columns: 1fr 1fr; } }
.opcion {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--borde-campo); border-radius: 11px;
  padding: 11px 13px; font-size: .93rem; cursor: pointer;
}
.opcion:hover { border-color: var(--naranja-fuerte); }
.opcion input { accent-color: var(--naranja-fuerte); width: 17px; height: 17px; flex-shrink: 0; }
.opcion:has(input:checked) { border-color: var(--naranja-fuerte); background: var(--naranja-claro); }

.consentimiento {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .85rem; color: var(--texto-flojo); line-height: 1.5;
}
.consentimiento input { accent-color: var(--naranja-fuerte); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
/* Es el enlace legalmente más importante del formulario: conviene que sea
   fácil de acertar con el dedo, aunque vaya dentro de una frase. */
.consentimiento a { display: inline-block; padding: 3px 0; font-weight: 600; }

/* trampa antispam: invisible para personas, tentadora para robots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pie-formulario { margin-top: 14px; font-size: .8rem; color: var(--texto-flojo); text-align: center; }

.mensaje-envio {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radio);
  font-size: .93rem; display: none;
}
.mensaje-envio[data-tipo="ok"]    { display: block; background: #E7F6ED; border: 1px solid #9AD3B2; color: #14522F; }
.mensaje-envio[data-tipo="error"] { display: block; background: #FDECEC; border: 1px solid #E9AFAF; color: #7A1F1F; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie { background: var(--tinta); color: #AEB5C2; font-size: .93rem; }
.pie-rejilla { display: grid; gap: 32px; padding: 52px 0; }
@media (min-width: 640px)  { .pie-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.pie img { width: 168px; }
.pie h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* padding vertical para que cada enlace tenga al menos 24 px de alto:
   es el mínimo que se puede pulsar con el dedo sin fallar (WCAG 2.5.8) */
.pie a { color: #C9CFDA; text-decoration: none; display: inline-block; padding: 3px 0; }
.pie a:hover { color: var(--naranja); text-decoration: underline; }
.pie-legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0; font-size: .82rem; color: #98A0AE;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
}

/* Botón flotante de WhatsApp (solo en móvil) */
.wa-flotante {
  /* por encima del faldón fijo, no encima de él */
  position: fixed; right: 16px; bottom: calc(var(--alto-faldon) + 14px); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #0F7A3D; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .45);
}
.wa-flotante svg { width: 28px; height: 28px; fill: #fff; }
@media (min-width: 900px) { .wa-flotante { display: none; } }

/* --------------------------------------------------------------------------
   Páginas de texto legal
   -------------------------------------------------------------------------- */
.legal { max-width: 760px; padding-top: 44px; padding-bottom: 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); }
.legal h2 { font-size: 1.3rem; margin-top: 40px; }
.legal h3 { margin-top: 26px; }
.legal p, .legal li { color: var(--texto); margin-top: 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal .actualizado { color: var(--texto-flojo); font-size: .9rem; margin-top: 10px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .93rem; table-layout: fixed; }
.legal th, .legal td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; overflow-wrap: break-word; }
.legal th { color: var(--tinta); font-weight: 700; background: var(--crema-2); width: 34%; }

/* En el móvil, una tabla de dos columnas deja el texto en una tira
   ilegible. Se apila: primero el concepto, debajo el dato. */
@media (max-width: 560px) {
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: auto; }
  .legal tr { border-bottom: 1px solid var(--borde); padding: 6px 0; }
  .legal th { background: none; border: 0; padding: 8px 0 0; font-size: .82rem;
              text-transform: uppercase; letter-spacing: .05em; color: var(--texto-flojo); }
  .legal td { border: 0; padding: 3px 0 8px; }
}

/* --------------------------------------------------------------------------
   Aparición al desplazar — con red de seguridad
   -------------------------------------------------------------------------- */
/* Solo se ocultan si el navegador ejecuta el script (la clase la pone JS).
   Así, si el script falla, el contenido se ve igual. */
.js .aparece { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .aparece.visible { opacity: 1; transform: none; }

/* Quien pide menos movimiento en su sistema, no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .aparece { opacity: 1; transform: none; }
}

/* Impresión: que una oferta impresa no salga con fondos negros */
@media print {
  .cabecera, .wa-flotante, .mandos, .formulario { display: none; }
  .resenas, .tira, .pie { background: #fff; color: #000; }
  /* al imprimir, el faldón deja de ir fijo: si no, se repetiría en todas
     las hojas y taparía el texto */
  body { padding-bottom: 0; }
  .tira { position: static; border-top: 1px solid #ccc; }
  /* Al imprimir no hay "desplazarse al costado": las opiniones se apilan. */
  .pista { display: block; overflow: visible; }
  .resena { page-break-inside: avoid; margin-bottom: 14px; border: 1px solid #ccc; box-shadow: none; }
}