/* ==========================================================================
   PORTURAN — Sistema de diseño
   Silenciadores Porturan · San Martín, Caracas

   Concepto: los colores del acero templado. Cuando el acero se somete a calor
   —exactamente lo que le pasa a un sistema de escape— toma tonos azul acero y
   ámbar. La paleta es el producto.

   Todos los pares de color de este archivo están verificados contra WCAG AA.
   Las tres reglas que NO se pueden romper están anotadas en :root.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --azul-acero:    #0F2A3D;  /* Dominante. Fondos oscuros, encabezados, pie.  */
  --azul-profundo: #0A1D2B;  /* Un paso más oscuro: pie de página, capas.     */
  --ambar:         #E8892B;  /* SOLO relleno de botón, o texto sobre azul.    */
  --ambar-texto:   #A3560F;  /* Ámbar como TEXTO sobre fondo claro. 4.86:1    */
  --gris-acero:    #8C99A6;  /* Texto secundario SOLO sobre azul. 5.09:1      */
  --gris-texto:    #5A6672;  /* Texto secundario sobre claro. 5.30:1          */
  --blanco-hueso:  #F5F3EF;  /* Superficie clara, fondo general.              */
  --casi-negro:    #111619;  /* Texto principal. Texto sobre botón ámbar.     */
  --linea:         #DDD8D0;  /* Bordes y separadores sobre fondo claro.       */
  --linea-oscura:  #24405420; /* Separadores sobre azul.                      */

  /* PROHIBIDO — estas tres combinaciones fallan contraste:
       1. Texto blanco sobre --ambar ............ 2.61:1  → usa --casi-negro
       2. --ambar como texto sobre fondo claro .. 2.36:1  → usa --ambar-texto
       3. --gris-acero sobre fondo claro ........ 2.62:1  → usa --gris-texto  */

  /* --- Tipografía ------------------------------------------------------- */
  /* Pila del sistema: cero bytes descargados, cero peticiones, cero bloqueo
     de render. Decisivo en un mercado móvil de conexión lenta. Todas las
     caras de esta pila son grotescas rectas, que es justo el registro que
     queremos: firme y establecido, no la cursiva "de velocidad" del rubro. */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-fuerte:  700;
  --peso-negro:   800;

  /* Escala tipográfica fluida. clamp() evita media queries y da un salto
     continuo entre 360px y 1440px. */
  --t-xs:   0.8125rem;                              /* 13px  etiquetas       */
  --t-sm:   0.9375rem;                              /* 15px  texto auxiliar  */
  --t-base: 1.0625rem;                              /* 17px  cuerpo          */
  --t-lg:   clamp(1.125rem, 0.5vw + 1rem,  1.25rem);
  --t-xl:   clamp(1.375rem, 1vw + 1.1rem,  1.75rem);
  --t-2xl:  clamp(1.75rem,  2vw + 1.2rem,  2.5rem);
  --t-3xl:  clamp(2.25rem,  3.5vw + 1.2rem, 3.5rem);

  /* --- Espacio ---------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;

  --ancho-max:  1180px;
  --ancho-texto: 68ch;   /* medida de lectura cómoda */

  /* --- Forma y profundidad ---------------------------------------------- */
  --radio-sm: 6px;
  --radio:    10px;
  --radio-lg: 18px;
  --radio-full: 999px;

  --sombra-sm: 0 1px 2px rgb(15 42 61 / 0.06),
               0 2px 6px rgb(15 42 61 / 0.05);
  --sombra:    0 2px 6px rgb(15 42 61 / 0.07),
               0 12px 28px rgb(15 42 61 / 0.09);
  --sombra-lg: 0 4px 12px rgb(15 42 61 / 0.10),
               0 24px 48px rgb(15 42 61 / 0.14);

  /* Curvas propias. Las de CSS por defecto (ease, ease-out) son débiles y
     hacen que la interfaz se sienta blanda. Estas tienen intención. */
  --sal:    cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y respuestas   */
  --mov:    cubic-bezier(0.77, 0, 0.175, 1);     /* movimiento en pantalla  */
  --transicion: 160ms var(--sal);
}

/* ==========================================================================
   Reset mínimo
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  line-height: 1.65;
  color: var(--casi-negro);
  background: var(--blanco-hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.021em;
  font-weight: var(--peso-negro);
  color: var(--azul-acero);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl);  }
h4 { font-size: var(--t-lg);  }

p  { margin: 0 0 var(--e-4); max-width: var(--ancho-texto); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li { margin-bottom: var(--e-2); }

a { color: var(--ambar-texto); text-underline-offset: 3px; }
a:hover { color: var(--azul-acero); }

strong { font-weight: var(--peso-fuerte); }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

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

/* ==========================================================================
   Layout
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.seccion { padding-block: clamp(3rem, 7vw, 6rem); }

.seccion--oscura {
  background: var(--azul-acero);
  color: var(--blanco-hueso);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 { color: var(--blanco-hueso); }
.seccion--oscura p  { color: var(--gris-acero); }
/* :not(.boton) es imprescindible. Sin él, esta regla (especificidad 0,1,1)
   le gana a .boton--primario (0,1,0) y deja texto ámbar sobre botón ámbar:
   1.03:1 de contraste, es decir, invisible. */
.seccion--oscura a:not(.boton) { color: var(--ambar); }

/* ==========================================================================
   Marca — monograma y lockup
   ========================================================================== */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  color: inherit;
}

/* El monograma se dibuja con fill="currentColor", así que se recolorea solo
   según el contexto. El ámbar de la boca del tubo va explícito en el SVG. */
.marca__monograma { width: auto; flex: none; color: var(--azul-acero); }

.marca__texto { display: flex; flex-direction: column; line-height: 1; }

.marca__nombre {
  font-weight: var(--peso-negro);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--azul-acero);
  font-size: 1.32em;
}

.marca__bajada {
  font-size: 0.5em;
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-top: 0.42em;
}

/* Sobre fondo oscuro */
.marca--claro .marca__monograma { color: var(--blanco-hueso); }
.marca--claro .marca__nombre    { color: var(--blanco-hueso); }
.marca--claro .marca__bajada    { color: var(--gris-acero); }

/* ==========================================================================
   Botones
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.9em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radio-full);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Solo transform, background, border y sombra: nada que dispare layout. */
  transition: transform 160ms var(--sal), background 160ms var(--sal),
              border-color 160ms var(--sal), box-shadow 200ms var(--sal);
}

/* scale(0.97) al presionar: retroalimentación instantánea. Un translateY no
   comunica lo mismo — el botón tiene que sentirse hundido, no desplazado. */
.boton:active { transform: scale(0.97); }

/* Primario: ámbar con texto casi negro.
   El texto NUNCA va en blanco aquí — daría 2.61:1 y falla AA. */
.boton--primario {
  background: var(--ambar);
  color: var(--casi-negro);
  box-shadow: var(--sombra-sm);
}
.boton--primario:hover {
  background: #F09A43;
  color: var(--casi-negro);
  box-shadow: var(--sombra);
}

.boton--secundario {
  background: transparent;
  color: var(--azul-acero);
  border-color: var(--azul-acero);
}
.boton--secundario:hover { background: var(--azul-acero); color: var(--blanco-hueso); }

/* Secundario sobre fondo oscuro */
.boton--fantasma {
  background: transparent;
  color: var(--blanco-hueso);
  border-color: #FFFFFF55;
}
.boton--fantasma:hover { background: #FFFFFF18; border-color: var(--blanco-hueso); color: var(--blanco-hueso); }

.boton--grande { padding: 1.05em 1.9em; font-size: var(--t-lg); }
.boton--bloque { width: 100%; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

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

/* Contenido ancho (tablas, diagramas, bloques de código) scrollea DENTRO de su
   propia caja. La página nunca debe scrollear horizontalmente en móvil. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.scroll-x > table { min-width: 34rem; }

.etiqueta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-texto);
  margin-bottom: var(--e-3);
}
.seccion--oscura .etiqueta { color: var(--ambar); }

/* ==========================================================================
   COMPONENTES DEL SITIO
   ========================================================================== */

/* --- Marcador de dato pendiente -------------------------------------------
   Todo lo que falta confirmar con el dueño va envuelto en esto. Es imposible
   de pasar por alto en pantalla y trivial de encontrar con grep antes de
   publicar. NO debe quedar ni uno solo en producción.                       */
.pendiente {
  background: #FFF3C4;
  border-bottom: 2px dotted #B8860B;
  color: #6B4E00;
  padding: 0 .25em;
  font-style: italic;
}
.pendiente::before { content: "⚠ "; }

/* --- Salto al contenido --------------------------------------------------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ambar); color: var(--casi-negro);
  padding: .8em 1.2em; font-weight: 700; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus { left: 0; }

/* --- Barra superior ------------------------------------------------------- */
.barra-superior {
  background: var(--azul-profundo);
  color: var(--gris-acero);
  font-size: var(--t-xs);
  text-align: center;
  padding: .55em var(--e-4);
}
.barra-superior a { color: var(--blanco-hueso); text-decoration: none; font-weight: 700; }
.barra-superior a:hover { color: var(--ambar); text-decoration: underline; }

/* --- Cabecera ------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--azul-acero);
  border-bottom: 1px solid #FFFFFF14;
}
.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); padding-block: var(--e-3);
}
.nav { display: flex; align-items: center; gap: var(--e-5); }
.nav a {
  color: var(--blanco-hueso); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.nav a:hover { color: var(--ambar); }

.nav-boton {                       /* hamburguesa, solo móvil */
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5em; color: var(--blanco-hueso);
}

@media (max-width: 900px) {
  .nav-boton { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--azul-acero);
    border-bottom: 1px solid #FFFFFF22;
    padding: var(--e-3) var(--e-5) var(--e-5);
  }
  .nav[data-abierto="true"] { display: flex; }
  .nav a { padding-block: .85em; border-bottom: 1px solid #FFFFFF14; }
  .cabecera__cta { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { background: var(--azul-acero); color: var(--blanco-hueso); }
.hero__interior { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero h1 { color: var(--blanco-hueso); max-width: 15ch; }
.hero__bajada {
  color: var(--gris-acero); font-size: var(--t-lg);
  margin-top: var(--e-4); max-width: 48ch;
}
.hero__acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-5); }
.hero__micro { color: var(--gris-acero); font-size: var(--t-sm); margin-top: var(--e-4); max-width: 44ch; }

/* --- Franja de confianza -------------------------------------------------- */
.pilares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--blanco-hueso); border-bottom: 1px solid var(--linea);
}
.pilar { padding: var(--e-5); border-right: 1px solid var(--linea); }
.pilar:last-child { border-right: 0; }
.pilar__titulo { display: block; color: var(--azul-acero); font-weight: 800; margin-bottom: .35em; }
.pilar p { font-size: var(--t-sm); color: var(--gris-texto); margin: 0; }

/* --- Tarjetas genéricas --------------------------------------------------- */
.rejilla-cards { display: grid; gap: var(--e-4); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: var(--e-5);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: var(--e-3); }
.card p { font-size: var(--t-sm); color: var(--gris-texto); }
.card__pie { margin-top: auto; padding-top: var(--e-4); }

/* Tarjeta de síntoma: la voz del cliente arriba, el diagnóstico abajo */
.sintoma__voz {
  font-size: var(--t-lg); font-weight: 800; color: var(--azul-acero);
  line-height: 1.25; margin-bottom: var(--e-4);
}
.sintoma__campo { font-size: var(--t-sm); margin-bottom: var(--e-3); }
.sintoma__campo strong { color: var(--azul-acero); display: block; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2em; }

.enlace-ambar {
  color: var(--ambar-texto); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
}
.enlace-ambar:hover { text-decoration: underline; }

/* --- Garantía ------------------------------------------------------------- */
.garantia-col { border-top: 3px solid var(--linea); padding-top: var(--e-4); }
.garantia-col--cubre    { border-top-color: #1B6B3A; }
.garantia-col--no-cubre { border-top-color: #A32014; }
.garantia-col--como     { border-top-color: var(--ambar); }
.garantia-col h3 { margin-bottom: var(--e-3); font-size: var(--t-lg); }
.garantia-col ul { padding-left: 1.1em; font-size: var(--t-sm); color: var(--gris-texto); }

/* --- Vehículos ------------------------------------------------------------ */
.vehiculos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.vehiculo {
  border: 1px solid var(--linea); background: #fff;
  border-radius: var(--radio-full); padding: .5em 1em;
  font-size: var(--t-sm); font-weight: 500; color: var(--azul-acero);
}

/* --- Proceso -------------------------------------------------------------- */
.paso { display: flex; gap: var(--e-4); }
.paso__num {
  flex: none; width: 2.2em; height: 2.2em; border-radius: var(--radio-full);
  background: var(--ambar); color: var(--casi-negro);
  display: grid; place-items: center; font-weight: 800;
}
.paso h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.paso p { font-size: var(--t-sm); color: var(--gris-texto); margin: 0; }

/* --- Preguntas frecuentes (sin JS) ---------------------------------------- */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--e-4) 0;
  font-weight: 700; color: var(--azul-acero);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5em; font-weight: 400; color: var(--ambar-texto);
  flex: none; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > *:not(summary) { padding-bottom: var(--e-4); }
.faq p { font-size: var(--t-sm); color: var(--gris-texto); margin: 0; }

/* --- Formulario ----------------------------------------------------------- */
.campo { margin-bottom: var(--e-4); }
.campo label {
  display: block; font-weight: 700; font-size: var(--t-sm);
  color: var(--azul-acero); margin-bottom: .4em;
}
.campo input, .campo textarea {
  width: 100%; font-family: inherit; font-size: var(--t-base);
  padding: .8em .9em; border: 1px solid var(--linea);
  border-radius: var(--radio); background: #fff; color: var(--casi-negro);
}
.campo input:focus, .campo textarea:focus {
  outline: 3px solid var(--ambar); outline-offset: 1px; border-color: var(--azul-acero);
}
.campo__ayuda { font-size: var(--t-xs); color: var(--gris-texto); margin-top: .35em; }
.trampa { position: absolute; left: -9999px; }   /* honeypot antispam */

/* --- Pie ------------------------------------------------------------------ */
.pie { background: var(--azul-profundo); color: var(--gris-acero); font-size: var(--t-sm); }
.pie a { color: var(--blanco-hueso); text-decoration: none; }
.pie a:hover { color: var(--ambar); text-decoration: underline; }
.pie h3 { color: var(--blanco-hueso); font-size: var(--t-sm); margin-bottom: var(--e-3);
          text-transform: uppercase; letter-spacing: .1em; }
.pie h4 { color: var(--blanco-hueso); font-size: var(--t-sm); margin-bottom: var(--e-3); }
.pie ul { list-style: none; padding: 0; }
.pie__legal { border-top: 1px solid #FFFFFF1A; margin-top: var(--e-6);
              padding-top: var(--e-4); font-size: var(--t-xs); }

/* --- Capa de conversión fija ---------------------------------------------- */
/* Escritorio: burbuja flotante. Móvil: barra inferior con dos botones. */
.wa-flotante {
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 90;
  box-shadow: var(--sombra-lg);
}
.barra-movil { display: none; }

@media (max-width: 720px) {
  .wa-flotante { display: none; }
  .barra-movil {
    display: grid; grid-template-columns: 3fr 2fr; gap: var(--e-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--blanco-hueso);
    border-top: 1px solid var(--linea);
    padding: var(--e-3) var(--e-3) calc(var(--e-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px rgb(15 42 61 / .12);
  }
  .barra-movil .boton { padding: .9em .6em; font-size: var(--t-sm); }
  body { padding-bottom: 5.5rem; }   /* que la barra no tape el pie */
}

/* --- Espacio reservado para foto (andamiaje temporal) ---------------------
   Marca dónde va cada fotografía real y qué debe mostrar. Igual que
   .pendiente, NO debe quedar ninguno en producción.                        */
.foto-pendiente {
  display: grid; place-items: center; text-align: center;
  padding: var(--e-5);
  background:
    repeating-linear-gradient(45deg,
      #E9E5DD 0 12px, #F1EDE5 12px 24px);
  border: 2px dashed var(--gris-texto);
  border-radius: var(--radio-lg);
  color: var(--gris-texto);
  font-size: var(--t-sm);
  font-style: italic;
  line-height: 1.4;
}
.foto-pendiente::before {
  content: "📷 FOTO PENDIENTE";
  display: block; font-style: normal; font-weight: 800;
  font-size: var(--t-xs); letter-spacing: .1em;
  color: var(--azul-acero); margin-bottom: var(--e-2);
}

/* --- Eslogan --------------------------------------------------------------
   «Calidad y rapidez». Va en el hero, en el pie y en el material impreso.
   Tratamiento fijo: versalitas con tracking abierto y una barra ámbar
   delante, para que se lea como firma de marca y no como un titular más.   */
.eslogan {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: var(--t-sm); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul-acero);
}
.eslogan::before {
  content: ""; width: 2.2em; height: 3px; flex: none;
  background: var(--ambar); border-radius: 2px;
}
.eslogan--claro { color: var(--blanco-hueso); }

/* --- Mapa -----------------------------------------------------------------
   El iframe de Google Maps pesa cientos de KB. Va con loading="lazy" y con
   aspect-ratio fijo: así no se descarga hasta que el visitante llega abajo,
   y no provoca salto de layout (CLS) cuando aparece.                        */
.mapa {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--linea);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa-acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); }

/* --- Oferta vigente -------------------------------------------------------
   Bloque de promoción temporal. IMPORTANTE: una oferta vencida que sigue
   publicada hace más daño que no tener ninguna. Se retira o se actualiza
   cuando cambie el precio. Está delimitado en el fuente con
   <!-- OFERTA:INICIO --> / <!-- OFERTA:FIN --> para poder quitarlo entero.  */
.oferta {
  display: grid; gap: var(--e-4); align-items: center;
  grid-template-columns: 1fr auto;
  background: var(--ambar);
  color: var(--casi-negro);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
}
.oferta__tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--casi-negro); color: var(--ambar);
  padding: .3em .7em; border-radius: var(--radio-full); margin-bottom: var(--e-3);
}
.oferta__precio {
  font-size: var(--t-3xl); font-weight: 800; line-height: 1;
  color: var(--casi-negro); letter-spacing: -.02em;
}
.oferta h2, .oferta h3 { color: var(--casi-negro); }
.oferta p { color: #3A2A14; margin: 0; }
.oferta .boton--secundario { border-color: var(--casi-negro); color: var(--casi-negro); }
.oferta .boton--secundario:hover { background: var(--casi-negro); color: var(--ambar); }
@media (max-width: 720px) { .oferta { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOVIMIENTO
   --------------------------------------------------------------------------
   Criterio: se anima lo que se ve poco y comunica algo. Nada que el visitante
   vaya a repetir decenas de veces al día. Solo transform y opacity, que corren
   en la GPU y no disparan layout ni repaint.

   Todos los hover van dentro de @media (hover: hover) and (pointer: fine):
   en pantallas táctiles el "hover" se dispara al tocar y deja los elementos
   trabados en ese estado.
   ========================================================================== */

/* --- Tarjetas ------------------------------------------------------------- */
.card {
  transition: transform 200ms var(--sal), box-shadow 200ms var(--sal),
              border-color 200ms var(--sal);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: var(--gris-acero);
  }
  /* Las tarjetas que ya van sobre azul no pueden cambiar de borde: se
     resaltan solo con elevación. */
  .card[style*="azul-acero"]:hover { border-color: var(--ambar); }
}

/* La flecha de "Ver más →" avanza al pasar por encima de toda la tarjeta.
   El objetivo del movimiento es señalar que la tarjeta entera es clicable. */
.enlace-ambar { transition: color 160ms var(--sal); }
.enlace-ambar::after { content: ""; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .enlace-ambar { color: var(--azul-acero); }
}

/* --- Navegación ----------------------------------------------------------- */
/* Subrayado que crece desde la izquierda. Se dibuja con transform: scaleX
   sobre un pseudoelemento, no con border-bottom, para no reflowear. */
@media (min-width: 901px) {
  .nav a { position: relative; padding-block: .35em; }
  .nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--ambar);
    transform: scaleX(0); transform-origin: left;
    transition: transform 200ms var(--sal);
  }
  .nav a:hover::after,
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--ambar); }
}

/* --- Chips de vehículo ---------------------------------------------------- */
.vehiculo { transition: transform 160ms var(--sal), border-color 160ms var(--sal),
                        background 160ms var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .vehiculo:hover { transform: translateY(-2px); border-color: var(--azul-acero); }
}

/* --- Preguntas frecuentes ------------------------------------------------- */
/* Apertura suave del <details>. interpolate-size permite animar hacia una
   altura automática; donde no está soportado, simplemente abre de golpe,
   que es el comportamiento nativo de siempre. */
:root { interpolate-size: allow-keywords; }

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size 260ms var(--sal), opacity 200ms var(--sal),
              content-visibility 260ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }

.faq summary { transition: color 160ms var(--sal); }
.faq summary::after { transition: transform 260ms var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--ambar-texto); }
}

/* --- Botón flotante de WhatsApp ------------------------------------------- */
/* Entra una sola vez, desde abajo, cuando la página carga. No lleva pulso
   permanente: un elemento que late todo el tiempo cansa y termina leyéndose
   como publicidad. */
.wa-flotante {
  transition: transform 200ms var(--sal), background 160ms var(--sal),
              box-shadow 200ms var(--sal);
  animation: wa-entra 420ms var(--sal) 600ms backwards;
}
@keyframes wa-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
}
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }
}
.wa-flotante:active { transform: scale(0.97); }

/* --- Pilares y pasos ------------------------------------------------------ */
.pilar { transition: background 200ms var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .pilar:hover { background: #fff; }
}

.paso__num { transition: transform 200ms var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .paso:hover .paso__num { transform: scale(1.08); }
}

/* --- Oferta --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .oferta { transition: transform 200ms var(--sal), box-shadow 200ms var(--sal); }
  .oferta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
}

/* --- Enlaces del pie ------------------------------------------------------ */
.pie a { transition: color 160ms var(--sal), transform 160ms var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .pie li a:hover { display: inline-block; transform: translateX(3px); }
}

/* --- Aparición al hacer scroll -------------------------------------------- */
/* Solo se activa si el JS corre: la clase la pone porturan.js en <html>.
   Así, sin JavaScript el contenido se ve igual — nunca queda invisible.
   Ese orden importa: nada de contenido dependiendo de que un script cargue. */
.js-revelar .card,
.js-revelar .pilar,
.js-revelar .paso,
.js-revelar .garantia-col,
.js-revelar .oferta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--sal), transform 420ms var(--sal);
}
.js-revelar .visible { opacity: 1; transform: none; }

/* Escalonado dentro de una misma rejilla: 45ms entre elementos.
   Más lento que eso y la página empieza a sentirse perezosa. */
.js-revelar .card:nth-child(2),
.js-revelar .pilar:nth-child(2),
.js-revelar .garantia-col:nth-child(2) { transition-delay: 45ms; }
.js-revelar .card:nth-child(3),
.js-revelar .pilar:nth-child(3),
.js-revelar .garantia-col:nth-child(3) { transition-delay: 90ms; }
.js-revelar .card:nth-child(4),
.js-revelar .pilar:nth-child(4)        { transition-delay: 135ms; }
.js-revelar .card:nth-child(5)         { transition-delay: 180ms; }
.js-revelar .card:nth-child(6)         { transition-delay: 225ms; }

/* --- Movimiento reducido --------------------------------------------------
   No es "cero animación": se conservan los cambios de color y opacidad, que
   ayudan a entender la interfaz, y se elimina todo desplazamiento.          */
@media (prefers-reduced-motion: reduce) {
  .js-revelar .card, .js-revelar .pilar, .js-revelar .paso,
  .js-revelar .garantia-col, .js-revelar .oferta {
    opacity: 1; transform: none; transition: none;
  }
  .wa-flotante { animation: none; }
  .card:hover, .vehiculo:hover, .oferta:hover,
  .wa-flotante:hover, .pie li a:hover { transform: none; }
  .boton:active { transform: none; }
  .paso:hover .paso__num { transform: none; }
}

/* ==========================================================================
   TARJETAS DE SÍNTOMA — lenguaje de color por urgencia
   --------------------------------------------------------------------------
   Las seis tarjetas eran visualmente idénticas, así que el visitante tenía
   que leerlas todas para saber si su caso era grave. El color aquí no es
   decoración: codifica urgencia y deja escanear la sección de un vistazo.

   Los cuatro niveles pasan WCAG AA sobre tarjeta blanca (7.57 · 5.39 ·
   14.80 · 5.87). Y nunca van solos: cada uno lleva su etiqueta escrita,
   porque quien no distingue colores tiene que recibir la misma información.
   ========================================================================== */

.sintoma {
  border-top: 4px solid var(--nivel);
  position: relative;
}

.sintoma--urgente { --nivel: #A32014; }   /* riesgo real, no posponer      */
.sintoma--pronto  { --nivel: #A3560F; }   /* se encarece si se deja        */
.sintoma--puntual { --nivel: #0F2A3D; }   /* reparación acotada y barata   */
.sintoma--info    { --nivel: #5A6672; }   /* no es el escape               */

.sintoma__nivel {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nivel);
  margin-bottom: var(--e-3);
}
.sintoma__nivel::before {
  content: ""; width: .6em; height: .6em; flex: none;
  border-radius: 50%; background: var(--nivel);
}

/* La tarjeta urgente se separa un poco más del resto: fondo teñido y borde
   propio. Es la única de la lista con riesgo para la salud. */
.sintoma--urgente { background: #FDF6F4; border-color: #E5B4AD; border-top-color: var(--nivel); }

/* La tarjeta de "esto no es el escape" va oscura: rompe visualmente la
   secuencia y señala que es de otra naturaleza. */
.sintoma--info {
  background: var(--azul-acero);
  border-color: var(--azul-acero);
  border-top-color: var(--ambar);
  --nivel: var(--ambar);
}
.sintoma--info .sintoma__voz { color: var(--blanco-hueso); }
.sintoma--info .sintoma__campo { color: var(--gris-acero); }
.sintoma--info .sintoma__campo strong { color: var(--ambar); }
.sintoma--info .enlace-ambar { color: var(--ambar); }

@media (hover: hover) and (pointer: fine) {
  .sintoma:hover { border-top-color: var(--nivel); }
}

/* --- Diagrama ------------------------------------------------------------- */
.diagrama {
  width: 100%; height: auto; display: block;
  background: var(--blanco-hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--e-4);
}
/* En móvil el diagrama es demasiado ancho para leerse: scrollea dentro de su
   caja en vez de encoger hasta volverse ilegible. */
.diagrama-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagrama-caja .diagrama { min-width: 620px; }

/* --- Leyenda de urgencia --------------------------------------------------- */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.leyenda__item {
  display: inline-flex; align-items: center; gap: .55em;
  border: 1px solid var(--linea); background: #fff;
  border-radius: var(--radio-full); padding: .5em 1em;
  font-size: var(--t-sm); font-weight: 700; color: var(--azul-acero);
  text-decoration: none;
  transition: transform 160ms var(--sal), border-color 160ms var(--sal);
}
.leyenda__punto { width: .65em; height: .65em; border-radius: 50%; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .leyenda__item:hover { transform: translateY(-2px); border-color: var(--azul-acero); }
}

/* La barra superior lleva la dirección completa, así que en pantallas chicas
   envuelve en dos líneas en vez de recortarse o desbordar. */
.barra-superior { line-height: 1.5; padding-block: .6em; text-wrap: balance; }
@media (max-width: 560px) { .barra-superior { font-size: 0.75rem; } }

/* --- Lista de revisión ----------------------------------------------------
   Pasos numerados con el número en ámbar. Reemplaza a una ilustración: cuatro
   pasos concretos informan más que un dibujo del taller.                    */
.revision { list-style: none; counter-reset: paso; padding: 0; margin: 0; }
.revision li {
  counter-increment: paso;
  position: relative;
  padding-left: 3.1em;
  margin-bottom: var(--e-4);
  font-size: var(--t-base);
}
.revision li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -0.1em;
  width: 2.1em; height: 2.1em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ambar); color: var(--casi-negro);
  font-weight: 800; font-size: 0.9em;
}
.seccion--oscura .revision li { color: var(--gris-acero); }
.seccion--oscura .revision li strong { color: var(--blanco-hueso); }

/* --- Fotografía ------------------------------------------------------------
   Todas las fotos del sitio son reales, tomadas en el taller. width/height
   van explícitos en el HTML para reservar el espacio antes de que carguen y
   no provocar salto de layout (CLS).                                        */
.foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio-lg);
  border: 1px solid var(--linea);
}
.foto--recorte { aspect-ratio: 4/3; object-fit: cover; }
figure { margin: 0; }
figcaption {
  font-size: var(--t-xs); color: var(--gris-texto);
  margin-top: var(--e-2); text-align: center;
}
.seccion--oscura figcaption { color: var(--gris-acero); }