/* ==========================================================================
   Detail & Design — capa de refinamiento visual 2026
   Cárgala DESPUÉS de public_homepage_reference.css / public_support_trust.css
   / public_dc_booking.css. No introduce colores nuevos: solo reordena
   tamaños, ritmo vertical y jerarquía.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Escala compartida
   -------------------------------------------------------------------------- */
:root {
  --pol-gutter: clamp(18px, 3.6vw, 44px);
  --pol-rhythm: clamp(28px, 4vw, 52px);
  --pol-hair: rgba(255, 255, 255, 0.15);
  --pol-hair-soft: rgba(255, 255, 255, 0.08);
}

/* Color de enlace de la marca, declarado una vez para todo el sitio público.
   Sin esto, cualquier <a> que no caiga bajo un selector específico —uno nuevo
   añadido después, un placeholder, un enlace dentro de texto— se pinta con el
   azul por defecto del navegador sobre fondo negro. Es el detalle que delata
   una página a medio terminar antes que ningún otro. */
body.public-app a {
  color: inherit;
  text-decoration: none;
}

body.public-app p a,
body.public-app li a,
body.public-app address a {
  color: #f0f2f5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(229, 41, 41, 0.55);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.public-app p a:hover,
body.public-app li a:hover,
body.public-app address a:hover {
  color: #fff;
  text-decoration-color: var(--brand-red, #e52929);
}

/* --------------------------------------------------------------------------
   1. HOME — solo tamaños y posiciones. Nada de tarjetas, foto, texto o reseñas.
   Mobile first: primero lo que se ve en el teléfono, después el escritorio.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* El titular se pinta a 41.6px con interlínea 0.94 (39px): la interlínea es
     MENOR que la letra, así que en mayúsculas las líneas se tocan. Medido a
     390px son cuatro líneas pegadas. Se abre lo justo para que respiren sin
     ganar una línea. */
  .home-reference-business-intro__copy h1 {
    line-height: 1.02;
    letter-spacing: -0.01em;
  }

  /* La cabecera de panel gastaba 177px de alto antes de la primera celda:
     kicker + un h2 de 32px partido en dos líneas + 36px de padding. */
  .home-reference-panel__head h2,
  .home-reference-service-head h2 {
    font-size: clamp(1.6rem, 6.8vw, 1.9rem);
    line-height: 1.1;
  }

  .home-reference-process .home-reference-panel__head,
  .home-reference-testimonials .home-reference-panel__head,
  .home-reference-service-head {
    padding-top: 30px;
    gap: 6px;
  }

  .home-reference-process__grid {
    margin-top: 20px;
    margin-bottom: 28px;
  }

  .home-reference-testimonials__grid {
    margin-top: 24px;
    gap: 12px;
  }

  .home-reference-process__cell {
    min-height: 138px;
    padding: 16px 12px;
    gap: 6px;
  }
}

/* El titular de la intro estaba clavado en 4.85rem: en 1280px se comía la
   columna y en 1600px se veía pequeño respecto a la foto. Escala con el
   viewport dentro del mismo rango visual. */
@media (min-width: 1121px) {
  .home-reference-business-intro__copy h1 {
    font-size: clamp(3.4rem, 4.6vw, 5.1rem);
    margin: 14px 0 22px;
  }

  /* La columna de texto tenía padding vertical mayor que el horizontal, lo que
     empujaba el bloque hacia abajo y lo descentraba ópticamente frente a la
     foto. Se iguala y se deja que el centrado haga el trabajo. */
  .home-reference-business-intro__copy {
    padding: clamp(40px, 4.4vw, 64px) clamp(40px, 4.8vw, 76px);
  }
}

/* Cabeceras de panel: mismo eje que el contenido que ordenan. El grid del
   proceso arranca a 44px del borde, la cabecera también — antes había 0px de
   diferencia arriba pero el margen inferior era desigual (0 vs 36px). */
@media (min-width: 641px) {
  .home-reference-process .home-reference-panel__head,
  .home-reference-testimonials .home-reference-panel__head {
    padding: var(--pol-rhythm) var(--pol-gutter) 0;
  }

  .home-reference-process__grid {
    margin: clamp(22px, 2.4vw, 32px) var(--pol-gutter) var(--pol-rhythm);
  }

  .home-reference-testimonials__grid {
    margin: clamp(22px, 2.4vw, 32px) var(--pol-gutter) 0;
    gap: 18px;
  }

  .home-reference-testimonials__actions {
    padding: clamp(20px, 2.2vw, 28px) var(--pol-gutter) 0;
  }

  .home-reference-service-head {
    padding: var(--pol-rhythm) var(--pol-gutter) clamp(18px, 2vw, 24px);
  }
}

/* Los dos títulos de sección venían a pesos distintos (2rem con 0.06em de
   tracking contra 2.35rem con 0). A tamaño grande el tracking abierto lee
   como espaciado accidental. Se unifican. */
@media (min-width: 641px) {
  .home-reference-panel__head h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
  }

  .home-reference-service-head h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.35rem);
    line-height: 1.04;
  }
}

/* El kicker rojo iba pegado al título (display block sin margen). */
.home-reference-section-kicker {
  margin-bottom: 10px;
}

/* Las celdas del proceso tenían 150px de alto mínimo con el contenido centrado:
   en escritorio quedaban cuadradas y vacías. Se les da proporción y se alinea
   el contenido al inicio, que es como se leen cuatro pasos numerados. */
@media (min-width: 641px) {
  .home-reference-process__cell {
    min-height: 178px;
    align-content: start;
    justify-items: start;
    gap: 12px;
    padding: 24px 22px;
    text-align: left;
  }

  .home-reference-process__cell > span:not(.home-reference-process__icon) {
    order: -1;
  }
}

/* Dos botones de 246px mínimos con 16px de hueco piden 508px. En la columna
   de la intro el contenido mide 398px a 1180 de viewport, así que el segundo
   ("Get a Custom Quote") se salía 110px y la sección lo recortaba: `overflow:
   hidden`. El fallo vive entre 1121 y ~1360, justo donde la columna todavía es
   estrecha pero ya no aplica el diseño de una sola columna.
   Se corrige la restricción, no el relleno: la fila puede envolver y los
   botones dejan de exigir un ancho que la columna no tiene. */
@media (min-width: 1121px) and (max-width: 1360px) {
  .home-reference-hero__actions {
    flex-wrap: wrap;
  }

  .home-reference-hero__actions .home-reference-btn {
    min-width: 0;
    flex: 1 1 210px;
  }
}

/* --------------------------------------------------------------------------
   2. FOOTER — de una fila de enlaces a un pie con estructura.
   Mobile first: una columna, y sólo se divide cuando hay ancho.
   -------------------------------------------------------------------------- */
.home-reference-footer {
  padding: 32px var(--pol-gutter) 22px;
}

.home-reference-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 30px;
}

@media (min-width: 1041px) {
  .home-reference-footer {
    padding: clamp(32px, 4vw, 52px) var(--pol-gutter) clamp(20px, 2.4vw, 28px);
  }

  .home-reference-footer__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
    gap: clamp(28px, 3.4vw, 56px);
  }
}

.pol-foot-brand {
  display: grid;
  gap: 16px;
  align-content: start;
}

.pol-foot-logo {
  display: block;
  width: 112px;
  height: auto;
}

.pol-foot-tagline {
  margin: 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pol-foot-contact {
  display: grid;
  gap: 6px;
  margin: 0;
  font-style: normal;
}

.pol-foot-contact a,
.pol-foot-contact span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.55;
  text-decoration: none;
}

.pol-foot-contact a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pol-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.pol-foot-col {
  display: grid;
  gap: 4px;
  align-content: start;
}

.pol-foot-col h3 {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Los enlaces del pie estaban en versalitas con 0.12em de tracking, el mismo
   tratamiento que la navegación principal. En un pie con quince destinos eso
   es una pared de mayúsculas: se pasa a caja normal, que es lo que hace un
   pie legible. */
.home-reference-footer .pol-foot-col a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: color 150ms ease;
}

.home-reference-footer .pol-foot-col a:hover {
  color: #fff;
}

.pol-foot-cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  align-self: start;
  padding: 0 22px;
  border: 1px solid var(--brand-red, #e52929);
  border-radius: var(--radius-sm);
  background: var(--brand-red, #e52929);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.pol-foot-cta:hover {
  background: var(--brand-red-strong, #c91d1d);
  border-color: var(--brand-red-strong, #c91d1d);
}

.pol-foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: 20px;
  border-top: 1px solid var(--pol-hair-soft);
}

.home-reference-footer .home-reference-footer__social {
  margin: 0;
  gap: 2px;
}

.home-reference-footer .home-reference-footer__copyright {
  margin: 0;
  color: #8a929d;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.pol-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.home-reference-footer .pol-foot-legal a {
  color: #99a1ac;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  min-height: 0;
}

.home-reference-footer .pol-foot-legal a:hover {
  color: #d1d5db;
}

@media (max-width: 1040px) {
  .pol-foot-cols {
    max-width: 640px;
  }
}

@media (max-width: 820px) {
  .pol-foot-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .pol-foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
}

/* --------------------------------------------------------------------------
   3. SUPPORT PAGES (testimonios, contacto, políticas)
   Escritas de teléfono hacia arriba: los valores base son los del teléfono y
   las media queries sólo AÑADEN aire cuando hay pantalla para gastarlo.
   -------------------------------------------------------------------------- */

.support-stage {
  gap: 1.35rem;
  padding: 1.35rem;
  border-radius: var(--radius-md);
}

@media (min-width: 721px) {
  .support-stage {
    gap: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(2.25rem, 4.4vw, 3.5rem);
  }
}

/* El h1 llegaba a 4.8rem con interlínea 0.92: a ese tamaño, en mayúsculas y
   con -0.04em, las líneas se tocan. */
.support-stage h1,
.thank-you-panel h1 {
  font-size: clamp(1.95rem, 8.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

@media (min-width: 721px) {
  .support-stage h1,
  .thank-you-panel h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
}

.support-stage-heading {
  gap: 0.9rem;
  max-width: 46rem;
}

.support-stage .eyebrow {
  margin: 0;
  color: var(--brand-red, #e52929);
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.support-stage .lead,
.thank-you-panel .lead {
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.support-stage-actions {
  margin-top: 0.35rem;
}

/* Los tres paneles de contexto competían con el h1: mismo borde, misma sombra,
   mismo fondo que el escenario que los contiene. Se aplanan a una tira de
   datos, que es su función real. */
.support-stage-meta {
  gap: 0;
  border: 1px solid var(--pol-hair-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.support-stage-meta .support-panel {
  border: 0;
  border-right: 1px solid var(--pol-hair-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.1rem 1.25rem;
  gap: 0.35rem;
}

.support-stage-meta .support-panel:last-child {
  border-right: 0;
}

.support-stage-meta .support-panel::before {
  display: none;
}

.support-panel-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
}

.support-stage-meta .support-panel strong {
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.support-stage-meta .support-panel p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(224, 231, 244, 0.62);
}

/* `.section-block` pintaba un panel azul grisáceo alrededor de CADA sección.
   El resultado eran cajas dentro de cajas: el escenario negro, luego un panel
   azul, y dentro las tarjetas. Las secciones de contenido vuelven a ser
   secciones — el fondo de la página respira y las tarjetas cargan la
   superficie. Mismos colores, una capa menos. */
body.support-trust-page .section-block:not(.support-stage) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.support-trust-page .section-block:not(.support-stage)::before {
  display: none;
}

body.support-trust-page .site-main > .container > .section-block + .section-block {
  margin-top: clamp(2.25rem, 3.8vw, 3.5rem);
}

.support-section-heading h2,
.policy-panel h2 {
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: 0.01em;
  text-transform: none;
}

.support-section-heading {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--pol-hair-soft);
}

/* --- Tarjetas de reseña -------------------------------------------------- */
body.support-testimonials-page .testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

body.support-testimonials-page .testimonial-card {
  display: grid;
  gap: 0.8rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--pol-hair-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(16, 19, 25, 0.9), rgba(9, 11, 16, 0.96));
  box-shadow: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

@media (min-width: 721px) {
  body.support-testimonials-page .testimonial-card {
    gap: 0.85rem;
    padding: 1.5rem 1.6rem;
  }
}

body.support-testimonials-page .testimonial-card:hover {
  border-color: rgba(229, 41, 41, 0.32);
  transform: translateY(-2px);
}

/* La cita es el contenido; el nombre es el pie. El orden del DOM los pone al
   revés, así que se reordena visualmente sin tocar el markup ni el texto. */
body.support-testimonials-page .testimonial-quote {
  order: 1;
  margin: 0;
  color: #eef1f6;
  font-size: 1.02rem;
  line-height: 1.62;
  text-wrap: pretty;
}

body.support-testimonials-page .testimonial-stars {
  order: 0;
  margin: 0;
  color: var(--brand-red, #e52929);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
}

body.support-testimonials-page .testimonial-head {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--pol-hair-soft);
}

body.support-testimonials-page .testimonial-initial {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
}

body.support-testimonials-page .testimonial-head strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}

body.support-testimonials-page .testimonial-source {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* --- Políticas ----------------------------------------------------------- */
.policy-index-grid {
  gap: 14px;
}

.policy-card {
  padding: 1.2rem;
  border-radius: var(--radius-md);
  gap: 0.65rem;
  align-content: start;
}

.policy-panel {
  padding: 1.2rem;
  border-radius: var(--radius-md);
  gap: 0.9rem;
}

@media (min-width: 721px) {
  .policy-card,
  .policy-panel {
    padding: 1.6rem;
  }

  .policy-card { gap: 0.7rem; }
  .policy-panel { gap: 1rem; }
}

.policy-card .badge {
  justify-self: start;
  padding: 0.32rem 0.6rem;
  border: 1px solid rgba(229, 41, 41, 0.32);
  border-radius: var(--radius-xs);
  background: rgba(229, 41, 41, 0.08);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.policy-card h3 {
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 1.08rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

.policy-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
}

.policy-card > a:last-child {
  margin-top: 0.15rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 5px;
}

.policy-card > a:last-child:hover {
  text-decoration-color: var(--brand-red, #e52929);
}

.policy-detail-layout {
  gap: 14px;
}

.policy-panel ul {
  padding-left: 0;
  gap: 0;
  list-style: none;
}

.policy-panel ul li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.5rem;
  border-top: 1px solid var(--pol-hair-soft);
  font-size: 0.96rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.policy-panel ul li:first-child {
  border-top: 0;
  padding-top: 0;
}

.policy-panel ul li::before {
  content: "";
  position: absolute;
  top: 1.42em;
  left: 0;
  width: 9px;
  border-bottom: 1px solid var(--brand-red, #e52929);
}

.policy-panel ul li:first-child::before {
  top: 0.62em;
}

.policy-panel-nav a {
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.policy-panel-nav a:hover {
  border-color: rgba(229, 41, 41, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 900px) {
  .support-stage-meta {
    grid-template-columns: 1fr;
  }

  .support-stage-meta .support-panel {
    border-right: 0;
    border-bottom: 1px solid var(--pol-hair-soft);
  }

  .support-stage-meta .support-panel:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   4. RESERVA — el paso de la dirección
   -------------------------------------------------------------------------- */

/* La dirección era una sección más entre nombre, vehículo, promo y propina.
   Es el dato del que depende que el equipo llegue: se le da su propia caja. */
body.dcb-page .pol-addr {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

body.dcb-page .pol-addr > .aui-eyebrow {
  margin: 0 0 2px;
}

/* Esta línea es TODO el cambio de la dirección: es lo único que le dice al
   cliente que las sugerencias existen. Va en el tono medio (`--dcb-ink-soft`),
   no en el más tenue del sistema — escribirla en gris apagado a 12.5px es
   apagar justo el aviso que se añadió para que se leyera. */
body.dcb-page .pol-addr-hint {
  margin: 0 0 14px;
  color: var(--dcb-ink-soft, #8d9aa7);
  font-size: 13px;
  line-height: 1.5;
}

body.dcb-page .pol-addr .field + .field,
body.dcb-page .pol-addr .field + .split-grid,
body.dcb-page .pol-addr .split-grid + .field {
  margin-top: 12px;
}

/* Sugerencias: la lista existente ya funciona. Solo se le da el mismo radio
   que los campos y se marca la primera opción, que es la buena en la práctica. */
body.dcb-page .dd-addr-list {
  border-radius: var(--radius-md);
  padding: 4px;
}

body.dcb-page .dd-addr-op {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

body.dcb-page .dd-addr-nota {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

body.dcb-page .dd-addr-nota.is-ok {
  background: rgba(34, 148, 84, 0.1);
}

body.dcb-page .dd-addr-nota.is-warning {
  background: rgba(240, 180, 41, 0.1);
}


/* ==========================================================================
   5. MARKETING — dos momentos que resaltan, con datos reales detrás.
   Nada de adornos: escala y contraste sobre lo que ya existe en la base de
   datos. Si algo va a gritar en la página, que sea el número que convence.
   ========================================================================== */

/* --- Prueba social: la calificación como cifra, no como texto ------------- */
/* Las reseñas estaban ahí, pero el dato que decide —cuántas y con qué nota—
   no aparecía en ningún lado. Un cliente que llega a /testimonials tiene que
   leer "4.9 de 63" antes que cualquier otra cosa. */
.pol-proof {
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(229, 41, 41, 0.22);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(229, 41, 41, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.02);
}

.pol-proof-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(3.1rem, 13vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.pol-proof-unit {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.pol-proof-stars {
  margin: 6px 0 0;
  color: var(--brand-red, #e52929);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}

.pol-proof-meta {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  line-height: 1.5;
}

.pol-proof-meta strong {
  color: #fff;
  font-weight: 600;
}

@media (min-width: 861px) {
  /* En pantalla ancha la cifra se pone al lado del titular en vez de
     empujarlo hacia abajo. */
  body.support-testimonials-page .support-stage {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.4fr);
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  .pol-proof {
    padding: 1.4rem 1.5rem;
  }
}

/* --- Contacto: el teléfono como el elemento más grande después del titular */
/* Estaba dentro de un párrafo, al mismo peso que el horario. En un negocio
   móvil el teléfono ES la conversión. */
.pol-phone {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.pol-phone:hover,
.pol-phone:focus-visible {
  border-color: rgba(229, 41, 41, 0.5);
  background: rgba(229, 41, 41, 0.06);
}

.pol-phone-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pol-phone-number {
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(1.85rem, 8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.pol-phone-hours {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

@media (min-width: 861px) {
  body.support-contact-page .support-stage {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  body.support-contact-page .support-stage-meta {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   6. SERVICIOS — dos grupos, no una lista
   El diseño de la tarjeta NO se toca. Cambia cómo se presentan: en vez de
   cuatro opciones en fila, dos grupos con intención distinta.

   El corte no es por precio, es por lo que el cliente viene a resolver:
   mantener un carro que ya está bien, o recuperar uno que no. Es la división
   que usa el oficio (express = mantenimiento, 1-2 h; full = restauración,
   4-6 h) y es la única que un cliente puede contestar sobre sí mismo sin
   saber nada de detallado. Ordenar por precio le pide que adivine.
   ========================================================================== */

.pol-svc-group + .pol-svc-group {
  margin-top: clamp(26px, 4vw, 44px);
}

.pol-svc-head {
  display: grid;
  gap: 6px;
  padding: 0 0 14px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pol-svc-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-red, #e52929);
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* La regla que sigue al rótulo: separa los dos grupos sin una caja más. */
.pol-svc-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 41, 41, 0.5), transparent);
}

/* Los dos grupos se distinguen por PESO, no por un segundo color. El sistema
   tuvo dorado y lo remapeó a rojo de marca a propósito (--dd-gold-500 y
   --admin-premium-gold apuntan los dos a --brand-red): meter un dorado nuevo
   sería reabrir una decisión ya tomada. High Detail se marca con el rótulo en
   sólido y una regla más presente. */
.pol-svc-group.is-signature .pol-svc-eyebrow {
  color: #fff;
}

/* El rótulo sólido a 10.6px es la instancia MÁS PEQUEÑA de blanco sobre rojo
   en todo el sitio, y a ese tamaño #e52929 se queda en 4.49 contra el 4.5 que
   pide AA. --brand-red-strong ya existe en el sistema y es más oscuro: cruza
   el umbral sin meter un color nuevo. */
.pol-svc-group.is-signature .pol-svc-eyebrow span {
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: var(--brand-red-strong, #c91d1d);
  color: #fff;
}

.pol-svc-group.is-signature .pol-svc-eyebrow::after {
  height: 2px;
  background: linear-gradient(90deg, var(--brand-red, #e52929), transparent);
}

.pol-svc-group.is-signature .pol-svc-name {
  font-size: clamp(1.6rem, 6.6vw, 2.1rem);
}

.pol-svc-name {
  margin: 0;
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(1.45rem, 6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pol-svc-line {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.pol-svc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pol-svc-facts span {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pol-svc-group.is-signature .pol-svc-facts span {
  border-color: rgba(229, 41, 41, 0.34);
  background: rgba(229, 41, 41, 0.08);
  color: #fff;
}

@media (min-width: 861px) {
  .pol-svc-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 28px;
  }

  .pol-svc-eyebrow,
  .pol-svc-name,
  .pol-svc-line {
    grid-column: 1;
  }

  .pol-svc-facts {
    grid-column: 2;
    grid-row: 2 / 4;
    justify-content: flex-end;
    margin-top: 0;
  }
}


/* El encabezado del grupo tiene que medir lo mismo que la columna de tarjetas
   que rotula. En la home, `.home-services-config .services-accordion` está
   limitada a min(100%, 720px) y centrada; el encabezado es HERMANO de esa
   caja, así que no heredaba el tope y flotaba 283px por fuera a cada lado —
   un título que no parecía pertenecer a nada. Se le da el mismo tope. */
.home-services-config .pol-svc-head {
  width: min(100%, 720px);
  margin-inline: auto;
}

/* La tarjeta de presupuesto vivía dentro del mismo `.services-accordion` que
   las demás y heredaba su `gap: 12px`. Al separarla en su propia caja se
   quedó pegada a la última tarjeta del grupo anterior. */
.services-accordion--custom-wrap {
  margin-top: clamp(26px, 4vw, 44px);
}

.home-services-config .services-accordion--custom-wrap {
  width: min(100%, 720px);
  /* `margin-inline` solo no basta: la regla base
     `.home-services-config .services-accordion { margin: 0 auto }` tiene la
     misma especificidad y pone el margen superior en cero, así que la tarjeta
     de presupuesto quedaba pegada a la última del grupo anterior. */
  margin-top: clamp(26px, 4vw, 44px);
  margin-inline: auto;
}


/* ==========================================================================
   7. MOVIMIENTO
   Regla de la casa: el estado FINAL es el estado por defecto. Nada empieza
   invisible desde la hoja de estilos — el punto de partida lo pone el script
   (public_polish_motion.js) y solo si puede terminar el trabajo. Si el JS no
   carga, la página se ve entera; si el visitante pidió menos movimiento, el
   script no la toca. Una animación nunca decide si algo se puede leer.
   ========================================================================== */

/* --- Entradas escalonadas ------------------------------------------------ */
.pol-pending {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

[data-pol-item] {
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-pol-item].is-in {
  opacity: 1;
  transform: none;
}

/* --- Reglas que se dibujan ----------------------------------------------- */
[data-pol-rule]::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms;
}

[data-pol-rule].is-drawn::after {
  transform: scaleX(1);
}

/* --- La cifra ------------------------------------------------------------ */
/* Cifra tabular: sin esto el número baila de ancho mientras cuenta y arrastra
   las estrellas de al lado con él. */
.pol-proof-score,
.pol-proof-score [data-pol-count] {
  font-variant-numeric: tabular-nums;
}

.pol-proof-stars {
  will-change: clip-path;
}

/* --- Tarjetas de servicio: el borde se enciende -------------------------- */
/* La tarjeta ya tiene su hover de media. Esto añade una sola cosa: un filo
   rojo que aparece por el borde, del color de la marca, sin mover la caja. */
.services-accordion-item {
  position: relative;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services-accordion-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.services-accordion-item:hover::after,
.services-accordion-item:focus-within::after {
  border-color: rgba(229, 41, 41, 0.55);
  box-shadow: 0 0 26px rgba(229, 41, 41, 0.16);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .services-accordion-item:not([open]):hover {
    transform: translateY(-2px);
  }
}

/* --- Enlaces de navegación: subrayado que crece -------------------------- */
.home-reference-header__nav a,
.home-reference-footer .pol-foot-col a {
  position: relative;
}

.home-reference-header__nav a::after,
.home-reference-footer .pol-foot-col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--brand-red, #e52929);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-reference-header__nav a:hover::after,
.home-reference-header__nav a:focus-visible::after,
.home-reference-footer .pol-foot-col a:hover::after,
.home-reference-footer .pol-foot-col a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Foco visible -------------------------------------------------------- */
/* Un sitio se delata como amateur en el foco de teclado antes que en
   cualquier otra cosa. Anillo de marca, separado del borde, en todo lo que se
   puede alcanzar con Tab. */
.public-app a:focus-visible,
.public-app button:focus-visible,
.public-app summary:focus-visible,
.public-app [tabindex]:focus-visible {
  outline: 2px solid var(--brand-red, #e52929);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.public-app .home-reference-btn:focus-visible,
.public-app .pol-phone:focus-visible,
.public-app .pol-foot-cta:focus-visible {
  outline-offset: 4px;
}

/* --- El teléfono responde al toque --------------------------------------- */
.pol-phone {
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pol-phone:hover {
    transform: translateY(-2px);
  }
}

.pol-phone:active {
  transform: translateY(0);
}

/* --- Tarjetas de reseña y política: elevación coherente ------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .policy-card,
  .policy-panel-nav a {
    transition:
      border-color 200ms ease,
      background-color 200ms ease,
      transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .policy-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 41, 41, 0.3);
  }

  .policy-panel-nav a:hover {
    transform: translateX(3px);
  }
}

/* La flecha del enlace de política avanza con el cursor. */
.policy-panel-nav a::after {
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.policy-panel-nav a:hover::after {
  transform: translateX(4px);
}

/* --- Paralaje: el script escribe el transform, aquí solo se prepara ------ */
.home-reference-business-intro__media img {
  will-change: transform;
}

/* --- Respeto total a quien pidió menos movimiento ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pol-pending {
    opacity: 1;
    transform: none;
  }

  [data-pol-rule]::after {
    transform: scaleX(1);
  }

  .services-accordion-item,
  .pol-phone,
  .policy-card,
  .policy-panel-nav a,
  [data-pol-item] {
    transition: none;
    transform: none;
  }
}


/* ==========================================================================
   8. EDITORIAL — el paso de "ordenado" a "compuesto"
   Hasta aquí el trabajo fue ritmo y jerarquía: correcto, invisible. Esta
   sección mete escala. Un negocio premium no se ve premium por tener todo
   alineado, se ve premium por atreverse a dejar una cosa MUY grande y el
   resto muy quieto.
   ========================================================================== */

/* --- La reseña destacada -------------------------------------------------
   Una sola cita a tamaño editorial. Es la misma reseña que ya estaba en la
   rejilla, sin editar una palabra: cambia el tamaño, no el texto. Un cliente
   lee una cita de 40px; no lee seis tarjetas de 16px. */
.pol-pull {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.5rem, 4.5vw, 3rem);
  border: 1px solid var(--pol-hair-soft);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(229, 41, 41, 0.13), transparent 55%),
    linear-gradient(180deg, rgba(16, 19, 25, 0.96), rgba(8, 10, 14, 0.99));
  overflow: hidden;
}

/* La comilla es tipografía, no un icono: nace de la misma fuente que el
   titular y se queda al fondo, como una marca de agua. */
.pol-pull::before {
  content: "\201C";
  position: absolute;
  top: -0.34em;
  left: -0.04em;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(11rem, 30vw, 20rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(229, 41, 41, 0.09);
  pointer-events: none;
  user-select: none;
}

.pol-pull > * {
  position: relative;
}

.pol-pull-stars {
  margin: 0;
  color: var(--brand-red, #e52929);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
}

.pol-pull-quote {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: clamp(1.6rem, 5.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

@media (min-width: 861px) {
  .pol-pull-quote {
    max-width: 26ch;
  }
}

.pol-pull-by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pol-hair-soft);
}

.pol-pull-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: "Space Grotesk", var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
}

.pol-pull-name {
  display: block;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
}

.pol-pull-src {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

/* --- Titulares que se revelan por líneas --------------------------------
   Cada línea sube desde detrás de su propia caja, con unos milisegundos de
   diferencia. Es LA diferencia entre un titular que aparece y un titular que
   entra. El script parte el texto en líneas reales (medidas, no adivinadas) y
   deja el original intacto para los lectores de pantalla. */
.pol-line {
  display: block;
  overflow: hidden;
}

.pol-line > span {
  display: block;
  transform: translateY(105%);
  transition:
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.pol-split.is-revealed .pol-line > span {
  transform: translateY(0);
  opacity: 1;
}

/* --- Barra de progreso de lectura ---------------------------------------
   Solo en las páginas de política, que son las únicas donde alguien lee de
   arriba abajo y quiere saber cuánto falta. */
.pol-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.pol-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-red, #e52929);
  box-shadow: 0 0 12px rgba(229, 41, 41, 0.6);
  transform-origin: left center;
}

/* --- El panel de políticas relacionadas se queda a la vista -------------- */
@media (min-width: 1101px) {
  .policy-detail-layout > .policy-panel:last-child {
    position: sticky;
    top: 148px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pol-line > span {
    transform: none;
    opacity: 1;
    transition: none;
  }
}


/* --- El icono del teléfono dentro del bloque grande de /contact -----------
   El paquete de diseño se escribió sobre una versión anterior a los iconos
   monolínea de teléfono y WhatsApp, y los quitaba. Vuelven: la etiqueta pasa
   a ser una fila para que el icono y el texto compartan línea base. */
.pol-phone-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pol-phone-label svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.75;
}