/* =======================================================================
   BASE.CSS - Carspro
   Estilos por DEBAJO del pliegue. Se carga sin bloquear el renderizado.
   Los tokens, el reset, la cabecera, el hero y los flotantes viven en
   critico.css, que se incrusta en el <head>.

   El responsive está repartido: el de lo que se ve sin hacer scroll está
   en critico.css y el de lo de aquí está al final de este archivo
   (sección 12). El reparto no es estético, es obligatorio: esta hoja se
   carga DESPUÉS del <style> incrustado, así que a igualdad de
   especificidad gana lo que se declare aquí, y una regla base puesta
   aquí anularía su propia @media si esta viviera en critico.css.
   ======================================================================= */

/* =======================================================================
   6. SERVICIOS
   ======================================================================= */
/* Sin grid-template-columns: una rejilla sin plantilla ya es de una sola
   columna. Declararlo aquí no añadía nada y pisaba las @media (ver la
   sección 12 al final de este archivo). */
.rejilla{display:grid;gap:18px;margin-top:36px}
.tarjeta{
  background:var(--grafito);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:all .3s ease;
}
.tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--cian);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;z-index:3;
}
.tarjeta:hover{border-color:var(--cian-3);transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 0 1px rgba(0,229,255,.12),0 0 26px rgba(0,229,255,.10)}
.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta__foto{position:relative;aspect-ratio:16/10;background:#0C0F10;overflow:hidden}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) contrast(1.1);transition:filter .3s ease,transform .4s ease}
/* Algunas tarjetas no llevan foto sino un gráfico propio. Ocupa el mismo
   hueco 16/10, así que la tarjeta mantiene la altura de las demás. */
.tarjeta__foto svg{width:100%;height:100%;display:block}
.tarjeta:hover .tarjeta__foto img{filter:grayscale(0) contrast(1.05);transform:scale(1.04)}
.tarjeta__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,28,30,.95));pointer-events:none}
.sistema{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--f-dato);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cian);background:rgba(4,25,29,.85);border:1px solid rgba(0,229,255,.35);
  padding:5px 9px;border-radius:2px;
}
.tarjeta__cuerpo{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tarjeta__cuerpo p{font-size:.95rem;color:var(--gris)}
/* Lista de lo que incluye cada servicio (estructura para fragmentos destacados) */
.incluye{display:grid;gap:6px;flex:1;margin-top:2px}
.incluye li{
  position:relative;padding-left:18px;font-size:.86rem;color:var(--hueso);line-height:1.45;
}
.incluye li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-left:2px solid var(--cian);border-bottom:2px solid var(--cian);
  transform:rotate(-45deg);
}
.tarjeta__enlace{
  font-family:var(--f-dato);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cian);display:inline-flex;align-items:center;gap:8px;padding-top:6px;
  transition:all .3s ease;
}
.tarjeta__enlace:hover{color:var(--blanco);gap:13px}

/* =======================================================================
   7. POR QUÉ CARSPRO
   ======================================================================= */
.motivos{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--r);margin-top:36px;overflow:hidden}
.motivo{background:var(--negro);padding:26px 22px;display:flex;gap:16px;align-items:flex-start;transition:all .3s ease}
.motivo:hover{background:#131618}
.motivo__marca{
  flex:none;width:38px;height:38px;border:1px solid var(--cian);border-radius:2px;
  display:grid;place-items:center;color:var(--cian);transition:all .3s ease;
}
.motivo:hover .motivo__marca{background:rgba(0,229,255,.1);box-shadow:0 0 18px rgba(0,229,255,.18)}
.motivo h3{font-size:1.15rem;margin-bottom:6px}
.motivo p{font-size:.95rem;color:var(--gris)}

/* =======================================================================
   7B. RESEÑAS DE CLIENTES
   ======================================================================= */
/* Carrusel: pista con scroll-snap (arrastre táctil nativo) + controles JS */
.carrusel{margin-top:32px;position:relative}
.carrusel__pista{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.resena{
  scroll-snap-align:start;flex:0 0 100%;min-width:0;
  background:var(--grafito);border:1px solid var(--borde);border-radius:var(--r);
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;
  transition:all .3s ease;position:relative;
}
.resena:hover{border-color:var(--cian-3);box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 26px rgba(0,229,255,.09)}
.resena--destacada{border-color:rgba(0,229,255,.45)}
.resena__tema{
  font-family:var(--f-dato);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cian);
}
/* Controles */
.carrusel__mandos{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.carrusel__flechas{display:flex;gap:10px}
.carrusel__btn{
  width:48px;height:48px;border-radius:50%;background:transparent;cursor:pointer;
  border:1px solid var(--borde-fuerte);color:var(--cian);display:grid;place-items:center;
  transition:all .3s ease;
}
.carrusel__btn:hover:not(:disabled){border-color:var(--cian);background:rgba(0,229,255,.1);box-shadow:0 0 18px rgba(0,229,255,.2)}
.carrusel__btn:disabled{opacity:.3;cursor:not-allowed}
.carrusel__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* El botón mide 48x48 (mínimo táctil recomendado) pero el punto visible se
   dibuja en ::before. El aspecto es idéntico al de antes; lo que crece es
   la zona que responde al dedo. */
.carrusel__puntos{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-end;align-items:center}
.carrusel__punto{
  width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.carrusel__punto::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1px solid var(--cian-3);background:transparent;transition:all .3s ease;
}
.carrusel__punto[aria-current="true"]::before{
  background:var(--cian);border-color:var(--cian);
  box-shadow:0 0 12px rgba(0,229,255,.55);width:26px;border-radius:99px;
}
.estrellas{display:flex;gap:3px;color:var(--cian)}
.estrellas svg{width:16px;height:16px;fill:currentColor}
.resena blockquote{font-size:1rem;color:var(--hueso);line-height:1.6;flex:1}
.resena figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--borde);padding-top:14px}
.resena .nombre{font-family:var(--f-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--blanco);letter-spacing:.01em}
.resena .auto{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cian)}
.resena .barrio{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.06em;color:var(--gris);margin-top:2px}

/* =======================================================================
   8. FAQ / AEO
   ======================================================================= */
.faq{margin-top:36px;border-top:1px solid var(--borde)}
.faq__item{border-bottom:1px solid var(--borde)}
.faq__titulo{margin:0}
.faq__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:22px 2px;color:var(--blanco);
  font-family:var(--f-display);font-size:1.15rem;font-weight:700;line-height:1.25;
  text-transform:none;transition:color .18s ease;
}
.faq__btn:hover{color:var(--cian)}
.faq__cruz{flex:none;width:26px;height:26px;position:relative;margin-top:2px}
.faq__cruz::before,.faq__cruz::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--cian);
  transform:translate(-50%,-50%);transition:transform .25s ease,opacity .25s ease;
}
.faq__cruz::before{width:15px;height:2px}
.faq__cruz::after{width:2px;height:15px}
.faq__btn[aria-expanded="true"] .faq__cruz::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__panel > div{padding:0 2px 24px;color:var(--gris);font-size:1rem}
.faq__panel strong{color:var(--hueso);font-weight:600}
/* El destacado del resumen es DECISIÓN DE DISEÑO, no énfasis semántico:
   se pinta con font-weight y filete cian, nunca con la etiqueta strong.
   Dentro del resumen, strong queda reservado para el dato clave del que
   depende la respuesta (precio, dirección, kilometraje, teléfono). */
.faq__resumen{
  border-left:2px solid var(--cian);padding-left:14px;color:var(--hueso);
  margin-bottom:12px;display:block;font-weight:600;
}
.faq__resumen strong{color:var(--blanco);font-weight:700}

/* =======================================================================
   9. UBICACIÓN Y CONTACTO
   ======================================================================= */
.contacto{display:grid;gap:26px;margin-top:36px}
.ficha{background:var(--grafito);border:1px solid var(--borde);border-radius:var(--r);padding:24px}
.ficha dl{display:grid;gap:18px}
.ficha dt{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cian);margin-bottom:4px}
.ficha dd{font-size:1.05rem;color:var(--hueso)}
.ficha dd a{border-bottom:1px solid rgba(0,229,255,.4)}
.ficha dd a:hover{color:var(--cian)}
.ficha__zonas{font-size:.95rem;color:var(--gris)}
.ficha .btn{margin-top:22px}
.horario{display:grid;gap:6px;font-size:.98rem}
.horario div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--borde);padding-bottom:5px}
.horario span:last-child{font-family:var(--f-dato);font-size:.85rem;color:var(--gris)}
/* "Cerrado" es información de horario, no decoración: se atenúa con
   opacidad tipográfica, no bajando el contraste por debajo de 4.5:1 */
.horario .cerrado span:last-child{color:var(--gris);font-style:italic}
.mapa{border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;background:var(--grafito);min-height:320px}
.mapa iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.85)}

/* =======================================================================
   10. FLOTANTES (WhatsApp + barra móvil)
   =======================================================================
   Movidos a critico.css. Son position:fixed, así que se ven sin hacer
   scroll, y su @media de escritorio (ocultar la barra a partir de 900px)
   solo funciona si está en el mismo archivo que su regla base.
   ======================================================================= */

/* =======================================================================
   10b. COMPARTIR EN REDES  (recomendación de la auditoría: "Redes Sociales")
   Sin SDK de terceros: enlaces de intención + Web Share API nativa.
   Cero cookies, cero JS externo, cero coste de rendimiento.
   ======================================================================= */
.compartir{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--borde);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.compartir__titulo{
  font-family:var(--f-dato);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cian);
  margin-right:4px;
}
.compartir a,.compartir button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 16px;
  background:var(--grafito);border:1px solid var(--borde-fuerte);border-radius:var(--r);
  color:var(--hueso);cursor:pointer;
  font-family:var(--f-dato);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:all .25s ease;
}
.compartir a:hover,.compartir button:hover{
  border-color:var(--cian);color:var(--cian);background:rgba(0,229,255,.08);
}
.compartir svg{width:17px;height:17px;fill:currentColor;flex:none}
/* El botón nativo solo aparece si el navegador soporta Web Share API */
.compartir .nativo{display:none}
.compartir .nativo.on{display:inline-flex}

/* =======================================================================
   11. PIE
   ======================================================================= */
.pie{background:#0A0B0C;border-top:1px solid var(--borde);padding:52px 0}
.pie__rejilla{display:grid;gap:36px 30px;align-items:start}
.pie__titulo{font-family:var(--f-dato);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cian);margin-bottom:14px;font-weight:700}
.pie li{margin-bottom:8px}
/* En móvil los enlaces del pie necesitan 48px de alto útil para poder
   tocarse con el pulgar sin fallar. En escritorio el pie sigue compacto. */
@media (max-width:899px){
  .pie li{margin-bottom:0}
  .pie li a,.pie li button{display:inline-flex;align-items:center;min-height:48px}
  /* Hueco para que la barra móvil fija no tape el final del pie. */
  .pie{padding-bottom:96px}
}
.pie a:hover{color:var(--cian)}
.pie p,.pie li{font-size:.92rem;color:var(--gris)}
.pie .marca{margin-bottom:12px}
.pie__base{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--borde);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--f-dato);font-size:.72rem;letter-spacing:.06em;color:var(--gris-pie);
}

/* El aviso de consentimiento está en critico.css: aparece en la primera
   pantalla y no puede esperar a que cargue esta hoja. */

/* =======================================================================
   12. RESPONSIVE DE LO QUE VA POR DEBAJO DEL PLIEGUE
   =======================================================================
   Va aquí y no en critico.css por lo que se explica en la sección 12 de
   aquel archivo: esta hoja se carga DESPUÉS del <style> incrustado, así
   que a igualdad de especificidad gana lo que se declare aquí. La regla
   base y su @media tienen que ir juntas o la @media no llega a aplicarse.
   ======================================================================= */
@media (min-width:600px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .motivos{grid-template-columns:repeat(2,1fr)}
  .pie__rejilla{grid-template-columns:repeat(2,1fr)}
  .carrusel__pista .resena{flex-basis:calc(50% - 8px)}
}
@media (min-width:900px){
  .rejilla{grid-template-columns:repeat(3,1fr)}
  .carrusel__pista .resena{flex-basis:calc(33.333% - 11px)}
  .contacto{grid-template-columns:1fr 1.15fr;align-items:stretch}
  .pie__rejilla{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px 26px}
  .mapa iframe{min-height:100%}
}
@media (min-width:1100px){
  .pie__rejilla{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px 34px}
}

