/* ══════════════════════════════════════════════════════════════════════════════
   VITRINA AUTOPRIME — hoja de estilos compartida
   ──────────────────────────────────────────────────────────────────────────────
   Sistema visual de la portada aprobada (commit 402d3f0), extendido al resto de
   las pantallas de Comercializadora Autoprime SPA.

   AISLAMIENTO: todo cuelga de `html[data-tema="autoprime"]`. Ese atributo lo pone
   `js/vitrina-autoprime.js` SOLO cuando el tenant es empresa 1 + slug
   autoprimechile + dominio autoprimechile.cl. Sin ese atributo, este archivo no
   pinta ni un píxel: la plataforma y las vitrinas de las demás empresas quedan
   exactamente como están, aunque el archivo se sirva.

   ORDEN: 1 fichas · 2 estructura compartida · 3 piezas reutilizables
          4 adaptación de las pantallas existentes · 5 móvil
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Fichas de diseño ──────────────────────────────────────────────────── */
html[data-tema="autoprime"]{
  --ap-navy:#061a32;          /* cabecera y pie */
  --ap-navy-2:#0d1f35;        /* texto principal */
  --ap-cyan:#08acd0;          /* acento */
  --ap-cyan-dk:#087b92;       /* acento sobre claro */
  --ap-franja:#061a32;        /* franja superior: el MISMO marino del pie */
  --ap-ink:#0d1f35;
  --ap-muted:#65748a;
  --ap-line:#dbe3eb;
  --ap-surface:#ffffff;
  --ap-ground:#f5f8fb;
  --ap-ok:#16a34a;
  --ap-err:#dc2626;
  --ap-warn:#f59e0b;
  /* Los dos colores con que la agenda separa sus dos familias de servicio:
     celeste = reserva directa · ámbar = requiere cotización. Cada uno con su
     borde y su fondo apenas teñido, sacados de la maqueta. */
  --ap-ambar:#fb9000;
  --ap-cyan-bd:#b4e0f0;   --ap-cyan-bg:#f3fbfe;
  --ap-ambar-bd:#fdd3b6;  --ap-ambar-bg:#fef8f3;

  --ap-r:10px;                /* radio de tarjeta */
  --ap-r-sm:8px;              /* radio de control */
  --ap-r-pill:24px;
  --ap-shadow:0 5px 18px rgba(7,27,49,.13);
  --ap-shadow-sm:0 2px 10px rgba(7,27,49,.05);
  --ap-ancho:1356px;          /* ancho del contenido */

  --ap-f-titulo:'Barlow Condensed','Montserrat',system-ui,sans-serif;
  --ap-f-texto:'Montserrat','Inter',system-ui,sans-serif;
}

html[data-tema="autoprime"] body{
  background:var(--ap-ground);
  color:var(--ap-ink);
  font-family:var(--ap-f-texto);
}

/* ── 2 · Estructura compartida ─────────────────────────────────────────────── */
.ap-wrap{width:min(var(--ap-ancho),calc(100% - 32px));margin-left:auto;margin-right:auto}

/* Franja informativa */
.ap-utility{background:var(--ap-franja);color:#fff;
  font-size:12px;font-weight:700;font-family:var(--ap-f-texto);
  border-bottom:1px solid rgba(255,255,255,.09)}
.ap-utility .ap-wrap{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ap-util-group{display:flex;align-items:center;gap:22px;white-space:nowrap}
.ap-util-group span{display:inline-flex;align-items:center;gap:7px}
.ap-util-group a{color:inherit;text-decoration:none}
.ap-util-group i{font-size:12px;opacity:.9}
/* Barras verticales solo en el grupo de la izquierda */
.ap-util-sep span+span{padding-left:22px;position:relative}
.ap-util-sep span+span:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:rgba(255,255,255,.4)}
/* ⚠️ La franja NO cabe entera bajo 1375 px: sus siete ítems piden 1.343 px
   (563 el grupo de la izquierda + 780 el de la derecha) y ahí empezaba a
   empujar la página hacia afuera — hasta 402 px de desborde en 981, o sea todo
   el rango de los notebooks. Como abajo de 980 la franja ya se esconde entera,
   el hueco pasaba desapercibido.
   Se sueltan ítems de a uno y por orden de importancia, siempre desde el final:
   el teléfono y los horarios —lo único que alguien viene a buscar acá— nunca se
   van; lo que se retira son las promesas, que además están repetidas en el pie.
   Los cortes salen de la cuenta, no a ojo: cada ítem mide su ancho + 22 de
   separación, y el corte se pone con holgura sobre el ancho en que deja de
   entrar, contando también los 24 px que separan un grupo del otro (olvidarlos
   dejaba 8 px de desborde justo en el primer corte). */
@media(max-width:1398px){                 /* sin "Soporte personalizado" */
  .ap-util-group:last-child span:nth-child(4){display:none}
}
@media(max-width:1239px){                 /* sin "Transferencia o Efectivo" */
  .ap-util-group:last-child span:nth-child(3){display:none}
}
@media(max-width:1060px){                 /* sin "Garantía en todos los productos" */
  .ap-util-group:last-child span:nth-child(2){display:none}
}

/* Cabecera */
.ap-header{position:sticky;top:0;z-index:1000;background:var(--ap-navy);color:#fff;
  box-shadow:0 2px 18px rgba(6,26,50,.3)}
/* 138 + 23: el buscador queda a la altura del reloj de la franja. */
/* 75 y no 84: al subir 9 px el logo con su teléfono, esos 9 px quedaron de aire
   muerto abajo, así que se le quitan a la cabecera. La barra baja de 84 a 75 sin
   mover nada de lo que hay adentro. */
.ap-hd{display:grid;grid-template-columns:138px minmax(240px,333px) 1fr auto;gap:23px;
  align-items:center;min-height:75px}
/* El grupo (logo + teléfono) sube 9 px: así la línea del teléfono termina a la
   MISMA altura que la caja de búsqueda de al lado. Centrado a secas, el número
   caía 9 px por debajo del borde de la caja y se leía descolgado.
   Va con `position:relative`+`top` a propósito: sólo corre el dibujo y no toca
   el alto de la cabecera ni empuja al buscador. ⚠️ El mismo ajuste va en
   `index.html`, que mantiene su copia de la cabecera. */
.ap-brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;
  position:relative;top:-9px}
/* Mismo tamaño que el logo del pie (.ap-ft-logo img). */
.ap-brand img{display:block;width:138px;height:56px;object-fit:contain;object-position:left center}
/* El teléfono se pega al logo: el archivo del logo trae margen vacío dentro de
   la propia imagen. Solo se mueve el teléfono; la caja del logo no se toca. */
.ap-brand-wsp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  color:var(--ap-cyan);text-decoration:none;margin-top:-10px}
.ap-search{position:relative;display:flex;align-items:center}
.ap-search input{width:100%;height:46px;background:rgba(255,255,255,.05);border:1px solid #486078;
  border-radius:var(--ap-r-pill);color:#fff;padding:0 46px 0 20px;font-size:13px;
  font-family:inherit;outline:none;transition:border-color .2s}
.ap-search input::placeholder{color:#9cacbd}
.ap-search input:focus{border-color:var(--ap-cyan)}
.ap-search i{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#9cacbd;
  font-size:15px;pointer-events:none}
/* Mientras se resuelve un código antes de navegar: la lupa gira. Sin esto,
   entre el Enter y el salto de página no pasa nada visible. */
.ap-search.buscando input,body.tema-t7 .sb.buscando input{opacity:.65}
.ap-search.buscando i,body.tema-t7 .sb.buscando i{color:var(--ap-cyan);
  animation:ap-girar .8s linear infinite}
.ap-search.buscando i:before,body.tema-t7 .sb.buscando i:before{content:"\f110"}
@keyframes ap-girar{to{transform:translateY(-50%) rotate(360deg)}}
/* Alineado a la izquierda y corrido 21 px: la «R» de REPUESTOS cae sobre el
   primer «0» de «16:00» de la franja, igual que en la portada. */
.ap-nav{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;min-width:0;row-gap:2px;gap:2px;padding-left:21px}
.ap-nav-item{position:relative;display:flex;align-items:center}
.ap-nav-item>a{color:rgba(255,255,255,.92);display:flex;align-items:center;gap:5px;padding:6px 8px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;border-radius:5px;
  text-decoration:none;white-space:nowrap;transition:background .15s}
.ap-nav-item>a:hover{background:rgba(255,255,255,.1)}
.ap-nav-dd{position:absolute;top:100%;left:0;padding-top:4px;display:none;z-index:3000}
.ap-nav-item:hover .ap-nav-dd{display:block}
.ap-nav-dd-inner{background:rgba(6,26,50,.96);min-width:220px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.ap-nav-dd-inner a{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  font-size:12.5px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;white-space:nowrap;transition:background .1s}
.ap-nav-dd-inner a:hover{background:rgba(0,0,0,.18)}
.ap-actions{display:flex;align-items:center;gap:14px}
.ap-cart{display:inline-flex;align-items:center;gap:9px;color:#fff;height:42px;padding:0 6px;
  font-weight:800;font-size:13px;text-decoration:none}
.ap-cart i{font-size:19px}
.ap-cart-badge{background:var(--ap-cyan);color:#04263a;min-width:20px;height:20px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;padding:0 5px}
.ap-acc{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;text-decoration:none}
.ap-acc.logged{box-shadow:0 0 0 2px var(--ap-cyan)}
.ap-burger{display:none;width:42px;height:42px;background:none;border:0;color:#fff;font-size:19px;
  cursor:pointer;align-items:center;justify-content:center}

/* Pie */
/* 15,5 y no 20: se le quitan al pie los mismos 9 px de alto que se le quitaron
   a la cabecera (4,5 arriba y 4,5 abajo). El medio pixel es a propósito —es la
   única forma de repartir 9 en dos lados iguales— y el navegador lo resuelve sin
   problema. */
.ap-footer{background:var(--ap-navy);color:#fff;padding:15.5px 0;margin-top:8px}
.ap-ft{display:grid;grid-template-columns:220px 1fr 1fr 1fr 160px;gap:24px;align-items:start}
.ap-ft-logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ap-ft-logo img{width:138px;height:56px;object-fit:contain;object-position:left center}
.ap-ft-col strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:11px;color:#fff}
.ap-ft-col p,.ap-ft-col a{display:block;margin:6px 0;color:#d7e1eb;font-size:12px;
  text-decoration:none;line-height:1.45}
.ap-ft-col a:hover{color:#fff}
.ap-ft-line{display:flex;align-items:flex-start;gap:8px;margin:6px 0;color:#d7e1eb;font-size:12px}
.ap-ft-line i{margin-top:2px;opacity:.8}
.ap-socials{display:flex;gap:9px}
.ap-soc{width:32px;height:32px;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:13px;text-decoration:none;transition:background .15s}
.ap-soc:hover{background:rgba(255,255,255,.12)}
/* El copyright es ahora una COLUMNA más, no un renglón al pie: se le sacan el
   borde de arriba y la separación que lo despegaban del resto. */
.ap-copy{font-size:11px;color:rgba(255,255,255,.35);align-self:center}

/* ── 3 · Piezas reutilizables ──────────────────────────────────────────────── */
html[data-tema="autoprime"] .ap-card{background:var(--ap-surface);border:1px solid var(--ap-line);
  border-radius:var(--ap-r);box-shadow:var(--ap-shadow-sm)}
html[data-tema="autoprime"] .ap-title{font-family:var(--ap-f-texto);font-size:23px;font-weight:900;
  line-height:1.05;margin:0;color:var(--ap-ink)}
html[data-tema="autoprime"] .ap-title:after{content:"";display:block;width:28px;height:3px;
  background:var(--ap-cyan);margin-top:11px;border-radius:2px}

/* Botones: uno principal, uno secundario. Todo botón de las pantallas se remite
   a estos dos en la sección 4. */
html[data-tema="autoprime"] .ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ap-cyan-dk);color:#fff;border:1px solid transparent;border-radius:var(--ap-r-sm);
  padding:11px 20px;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s}
html[data-tema="autoprime"] .ap-btn:hover{background:#0a6478}
html[data-tema="autoprime"] .ap-btn-2{background:transparent;color:var(--ap-cyan-dk);
  border-color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] .ap-btn-2:hover{background:#edfaff}

/* Campos de formulario */
html[data-tema="autoprime"] .ap-field label,
html[data-tema="autoprime"] .ap-lbl{display:block;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-muted);margin-bottom:6px}
html[data-tema="autoprime"] .ap-input{width:100%;height:44px;background:#fff;
  border:1px solid var(--ap-line);border-radius:var(--ap-r-sm);padding:0 14px;
  font-family:inherit;font-size:13.5px;color:var(--ap-ink);outline:none;
  transition:border-color .15s,box-shadow .15s}
html[data-tema="autoprime"] .ap-input:focus{border-color:var(--ap-cyan);
  box-shadow:0 0 0 3px rgba(8,172,208,.14)}

/* ── 4 · Adaptación de las pantallas existentes ────────────────────────────────
   Se re-viste el marcado que YA existe en cada página: no se cambia una sola
   etiqueta, solo se le aplican las fichas de arriba. Así el rediseño no toca la
   lógica ni el contenido dinámico. */

/* 4.1 · Encabezado de página y migas */
html[data-tema="autoprime"] .page-hd,
html[data-tema="autoprime"] .bc-wrap{background:transparent}
html[data-tema="autoprime"] .page-title{font-size:23px;font-weight:900;color:var(--ap-ink)}

/* 4.2 · Tarjeta de producto (catálogo, relacionados y sugeridos) */
html[data-tema="autoprime"] .prod-card,
html[data-tema="autoprime"] .rel-card,
html[data-tema="autoprime"] .sug-card{background:var(--ap-surface);border:1px solid var(--ap-line);
  border-radius:var(--ap-r);box-shadow:var(--ap-shadow-sm);overflow:hidden;
  transition:transform .18s,box-shadow .18s}
html[data-tema="autoprime"] .prod-card:hover,
html[data-tema="autoprime"] .rel-card:hover,
html[data-tema="autoprime"] .sug-card:hover{transform:translateY(-2px);box-shadow:var(--ap-shadow)}
html[data-tema="autoprime"] .prod-name,
html[data-tema="autoprime"] .rel-body a,
html[data-tema="autoprime"] .sug-body a{color:var(--ap-ink);font-weight:700}
html[data-tema="autoprime"] .prod-price,
html[data-tema="autoprime"] .rel-price,
html[data-tema="autoprime"] .sug-price{font-family:var(--ap-f-titulo);font-weight:900;
  color:var(--ap-ink);letter-spacing:.2px}
html[data-tema="autoprime"] .prod-add,
html[data-tema="autoprime"] .rel-add-btn{background:var(--ap-cyan-dk);color:#fff;border:0;
  border-radius:var(--ap-r-sm);font-weight:800;font-family:inherit;transition:background .15s}
html[data-tema="autoprime"] .prod-add:hover,
html[data-tema="autoprime"] .rel-add-btn:hover{background:#0a6478}
html[data-tema="autoprime"] .badge-ultimas{background:#fff4e5;color:#8a5300;border:1px solid #f4d9ae;
  border-radius:999px;font-weight:800}
html[data-tema="autoprime"] .rel-marca-tag{border-radius:999px;font-weight:800}

/* 4.3 · Barra lateral de filtros */
html[data-tema="autoprime"] .aside-card{background:var(--ap-surface);border:1px solid var(--ap-line);
  border-radius:var(--ap-r);box-shadow:var(--ap-shadow-sm);overflow:hidden}
html[data-tema="autoprime"] .aside-hd{background:var(--ap-navy);color:#fff;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
html[data-tema="autoprime"] .filter-group{border-bottom:1px solid var(--ap-line)}
html[data-tema="autoprime"] .filter-select,
html[data-tema="autoprime"] .price-input{height:40px;border:1px solid var(--ap-line);
  border-radius:var(--ap-r-sm);font-family:inherit;font-size:13px;color:var(--ap-ink);
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
html[data-tema="autoprime"] .filter-select:focus,
html[data-tema="autoprime"] .price-input:focus{border-color:var(--ap-cyan);
  box-shadow:0 0 0 3px rgba(8,172,208,.14)}

/* 4.4 · Ordenar y ver */
html[data-tema="autoprime"] .sort-btn{border:1px solid var(--ap-line);background:#fff;
  border-radius:999px;font-weight:700;font-size:12.5px;color:var(--ap-muted);font-family:inherit}
html[data-tema="autoprime"] .sort-btn.on,
html[data-tema="autoprime"] .sort-btn.active{background:var(--ap-navy);border-color:var(--ap-navy);color:#fff}

/* 4.5 · Ficha de producto */
html[data-tema="autoprime"] .gallery-card,
html[data-tema="autoprime"] .prod-wrap>div{border-radius:var(--ap-r)}
html[data-tema="autoprime"] .gallery-card{background:var(--ap-surface);border:1px solid var(--ap-line);
  box-shadow:var(--ap-shadow-sm)}
html[data-tema="autoprime"] .rel-hdr,
html[data-tema="autoprime"] .rel-wrap>h2{font-size:19px;font-weight:900;color:var(--ap-ink)}

/* 4.6 · Checkout: secciones, filas de opción y resumen */
html[data-tema="autoprime"] .form-section,
html[data-tema="autoprime"] .summary-card{background:var(--ap-surface);border:1px solid var(--ap-line);
  border-radius:var(--ap-r);box-shadow:var(--ap-shadow-sm);overflow:hidden}
html[data-tema="autoprime"] .section-hd,
html[data-tema="autoprime"] .summary-hd{background:var(--ap-navy);color:#fff;font-weight:800;
  letter-spacing:.04em}
html[data-tema="autoprime"] .field input,
html[data-tema="autoprime"] .field select,
html[data-tema="autoprime"] .field textarea{height:44px;border:1px solid var(--ap-line);
  border-radius:var(--ap-r-sm);padding:0 14px;font-family:inherit;font-size:13.5px;
  color:var(--ap-ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
html[data-tema="autoprime"] .field textarea{height:auto;padding:12px 14px}
html[data-tema="autoprime"] .field input:focus,
html[data-tema="autoprime"] .field select:focus,
html[data-tema="autoprime"] .field textarea:focus{border-color:var(--ap-cyan);
  box-shadow:0 0 0 3px rgba(8,172,208,.14)}
html[data-tema="autoprime"] .field input.err,
html[data-tema="autoprime"] .field select.err{border-color:var(--ap-err);
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}
html[data-tema="autoprime"] .opt-card{border:1.5px solid var(--ap-line);border-radius:var(--ap-r-sm);
  background:#fff;transition:border-color .15s,box-shadow .15s}
html[data-tema="autoprime"] .opt-card.selected{border-color:var(--ap-cyan);
  box-shadow:0 0 0 3px rgba(8,172,208,.13)}
html[data-tema="autoprime"] .btn-submit{background:var(--ap-cyan-dk);border-radius:var(--ap-r-sm);
  font-family:inherit;font-weight:800;letter-spacing:.01em}
html[data-tema="autoprime"] .btn-submit:hover{background:#0a6478}

/* 4.7 · Mi cuenta: su barra propia queda como barra de ACCIONES de la página
   —«Volver a la tienda» y «Salir»— debajo de la cabecera de la tienda. Se oculta
   solo la marca duplicada; el botón de salir NO se toca, porque su comportamiento
   está enganchado a ese elemento por id. */
html[data-tema="autoprime"] .topbar{background:#0a2340;border-bottom:1px solid rgba(255,255,255,.08)}
html[data-tema="autoprime"] .topbar-in{max-width:var(--ap-ancho);margin:0 auto;
  padding:0 16px;min-height:44px;display:flex;align-items:center;justify-content:flex-end}
html[data-tema="autoprime"] .topbar .brand{display:none}
html[data-tema="autoprime"] .topbar .tlink{font-size:12.5px;font-weight:700}

/* 4.8 · Seguimiento: la tarjeta se alinea con el resto de las pantallas */
html[data-tema="autoprime"] .card{border-radius:var(--ap-r);border:1px solid var(--ap-line);
  box-shadow:var(--ap-shadow-sm)}

/* 4.9 · Botón flotante de WhatsApp: igual que en la portada */
html[data-tema="autoprime"] .wf{right:26px;bottom:18px;padding:0;border:none;border-radius:50%;
  background:#20d664;box-shadow:0 8px 24px rgba(10,141,72,.32)}
html[data-tema="autoprime"] .wf .wf-ic{width:58px;height:58px;background:transparent}
html[data-tema="autoprime"] .wf .wf-ic svg{width:28px;height:28px}
html[data-tema="autoprime"] .wf .wf-tx{display:none}

/* 4.10 · Página de Contacto ─────────────────────────────────────────────────
   Rediseño aprobado (maqueta 2026-08-14). El ancho es el MISMO de la cabecera y
   el pie (`--ap-ancho`), así la tarjeta arranca justo bajo el logo y termina
   bajo el último ítem del pie. La columna izquierda es fija y el mapa toma lo
   que sobra: en pantallas anchas el mapa crece, la ficha de datos no. */
html[data-tema="autoprime"] .apc-wrap{
  width:min(calc(100% - 32px),var(--ap-ancho));margin:0 auto;padding:32px 0 34px}
html[data-tema="autoprime"] .apc-bc{display:flex;align-items:center;gap:9px;
  font-size:13px;color:#6d7c8c;margin-bottom:16px}
html[data-tema="autoprime"] .apc-bc a{color:inherit;text-decoration:none}
html[data-tema="autoprime"] .apc-bc a:hover{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] .apc-bc em{font-style:normal;color:#93a1b1}
html[data-tema="autoprime"] .apc-h1{margin:0;font-family:var(--ap-f-texto);font-size:34.5px;
  font-weight:800;letter-spacing:-.022em;line-height:1.05;color:var(--ap-navy)}
html[data-tema="autoprime"] .apc-sub{margin:12px 0 0;font-size:13px;color:#5a6675}

html[data-tema="autoprime"] .apc-grid{display:grid;grid-template-columns:510px minmax(0,1fr);
  gap:24px;align-items:stretch;margin-top:24px}

/* Los iconos de trazo se dimensionan con el `font-size` de su contenedor, así
   cada lugar sigue teniendo un solo número que tocar. */
html[data-tema="autoprime"] .apc-svg{width:1.25em;height:1.25em;display:block;flex:none}
html[data-tema="autoprime"] .apc-btn .apc-svg{width:16px;height:16px}

/* Ficha de la sucursal */
html[data-tema="autoprime"] .apc-card{background:#fff;border:1px solid #edf1f5;
  border-radius:16px;box-shadow:0 6px 22px rgba(9,30,56,.07);padding:24px 24px 28px;
  display:flex;flex-direction:column}
html[data-tema="autoprime"] .apc-chd{display:flex;gap:16px;align-items:flex-start}
html[data-tema="autoprime"] .apc-chd-ic{width:54px;height:54px;flex:0 0 54px;border-radius:14px;
  background:linear-gradient(150deg,#12293f,#061627);color:var(--ap-cyan);
  display:grid;place-items:center;font-size:24px;box-shadow:0 5px 14px rgba(6,22,39,.24)}
html[data-tema="autoprime"] .apc-chd-tx h2{margin:0;font-size:18.5px;font-weight:800;
  line-height:1.2;letter-spacing:-.012em;color:var(--ap-navy)}
html[data-tema="autoprime"] .apc-chd-tx p{margin:6px 0 0;font-size:13px;line-height:1.38;
  color:#4b5563}

html[data-tema="autoprime"] .apc-datos{list-style:none;margin:15px 0 0;padding:0}
html[data-tema="autoprime"] .apc-fila{display:flex;align-items:center;gap:19px;
  padding:9.5px 0;border-top:1px solid #eceff3}
html[data-tema="autoprime"] .apc-fila-ic{width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:#f0f7fa;color:var(--ap-cyan);display:grid;place-items:center;font-size:22px}
html[data-tema="autoprime"] .apc-fila-tx{min-width:0}
html[data-tema="autoprime"] .apc-fila-tx b{display:block;font-size:13.5px;font-weight:700;
  color:var(--ap-navy)}
html[data-tema="autoprime"] .apc-fila-tx span{display:block;margin-top:3px;font-size:13px;
  color:#4b5563}
html[data-tema="autoprime"] .apc-fila-tx a{color:inherit;text-decoration:none}
html[data-tema="autoprime"] .apc-fila-tx a:hover{color:var(--ap-cyan-dk)}

html[data-tema="autoprime"] .apc-acc{display:grid;grid-template-columns:235fr 214fr;gap:12px;
  margin-top:auto;padding-top:27px}
html[data-tema="autoprime"] .apc-btn{height:46px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:14px;
  font-weight:700;text-decoration:none;white-space:nowrap;
  transition:filter .15s,background .15s}
html[data-tema="autoprime"] .apc-btn-wsp{background:var(--ap-cyan);color:#fff}
html[data-tema="autoprime"] .apc-btn-wsp:hover{filter:brightness(1.07)}
html[data-tema="autoprime"] .apc-btn-tel{background:#fff;color:var(--ap-navy);
  border:1.5px solid rgba(6,26,50,.58)}
html[data-tema="autoprime"] .apc-btn-tel:hover{background:#f5f8fb}

/* Mapa + tarjeta flotante */
html[data-tema="autoprime"] .apc-mapa{position:relative;border-radius:16px;overflow:hidden;
  background:#e8eef3;box-shadow:0 6px 22px rgba(9,30,56,.07);min-height:404px}
html[data-tema="autoprime"] .apc-mapa-box{position:absolute;inset:0}
html[data-tema="autoprime"] .apc-mapa iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block}
html[data-tema="autoprime"] .apc-mapa-no{position:absolute;inset:0;display:grid;place-items:center;
  color:#93a1b1;font-size:14px}
/* Pin propio: el marcador del mapa embebido no se puede colorear, y este además
   queda donde lo pide el diseño (arriba de la tarjeta de "Cómo llegar"). */
html[data-tema="autoprime"] .apc-pin{position:absolute;left:50%;top:39%;transform:translate(-50%,-100%);
  color:var(--ap-cyan);font-size:52px;line-height:1;pointer-events:none;
  filter:drop-shadow(0 4px 7px rgba(6,26,50,.34))}
html[data-tema="autoprime"] .apc-llegar{position:absolute;left:26px;bottom:21px;width:324px;
  max-width:calc(100% - 52px);background:#fff;border-radius:14px;padding:16px;
  box-shadow:0 10px 28px rgba(9,30,56,.17)}
html[data-tema="autoprime"] .apc-llegar-hd{display:flex;gap:15px;align-items:flex-start}
html[data-tema="autoprime"] .apc-llegar-ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;
  background:linear-gradient(150deg,#12293f,#061627);color:var(--ap-cyan);
  display:grid;place-items:center;font-size:21px}
html[data-tema="autoprime"] .apc-llegar-tx b{display:block;font-size:15.5px;font-weight:800;
  line-height:1.2;color:var(--ap-navy)}
html[data-tema="autoprime"] .apc-llegar-tx p{margin:4px 0 0;font-size:13px;line-height:1.4;
  color:#4b5563}
html[data-tema="autoprime"] .apc-btn-maps{width:100%;height:42px;margin-top:14px;background:#fff;
  color:var(--ap-navy);border:1.5px solid rgba(6,26,50,.58);font-size:13.5px}
html[data-tema="autoprime"] .apc-btn-maps:hover{background:#f5f8fb}

/* Franja de beneficios */
html[data-tema="autoprime"] .apc-bene{margin-top:15px;background:#fff;border-radius:16px;
  box-shadow:0 6px 22px rgba(9,30,56,.07);display:grid;grid-template-columns:repeat(3,1fr)}
html[data-tema="autoprime"] .apc-bene-it{display:flex;align-items:center;gap:17px;padding:15px 24px}
html[data-tema="autoprime"] .apc-bene-it+.apc-bene-it{border-left:1px solid #e7eaef}
html[data-tema="autoprime"] .apc-bene-ic{width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  background:#f0f7fa;color:var(--ap-cyan);display:grid;place-items:center;font-size:23px}
html[data-tema="autoprime"] .apc-bene-tx b{display:block;font-size:14px;font-weight:700;
  color:var(--ap-navy)}
html[data-tema="autoprime"] .apc-bene-tx span{display:block;margin-top:4px;font-size:12.5px;
  color:#4b5563}

/* 4.11 · Checkout ───────────────────────────────────────────────────────────
   Rediseño aprobado (maqueta 2026-08-14). Es RESTILADO, no reconstrucción: el
   marcado y toda la lógica de `checkout.html` (validaciones, cotización de
   envío, métodos de pago, envío del pedido) quedan intactos. Acá sólo cambia
   cómo se ve, y `js/vitrina-autoprime.js` agrega las piezas que el diseño pide
   y no existían (título, "Pago seguro", "Compra protegida", tarjeta de ayuda).
   Los cuatro pasos dejan de ser cuatro tarjetas sueltas con barra oscura y
   pasan a ser UNA tarjeta con divisiones. */
html[data-tema="autoprime"]:has(#checkout-form) main{padding-bottom:8px}
/* El contenido se alinea con la cabecera y el pie, igual que en Contacto: la
   tarjeta arranca bajo el logo y el resumen termina bajo el último ítem del pie. */
html[data-tema="autoprime"]:has(#checkout-form) .bc{max-width:none;width:min(calc(100% - 32px),var(--ap-ancho));
  padding:0;margin:26px auto 0;font-size:13px;color:#6d7c8c;gap:9px}
html[data-tema="autoprime"]:has(#checkout-form) .bc a{color:#6d7c8c;font-weight:500}
html[data-tema="autoprime"]:has(#checkout-form) .bc a:hover{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"]:has(#checkout-form) .bc i{font-size:9px;color:#a9b6c4}
html[data-tema="autoprime"]:has(#checkout-form) .apk-bc-sep{color:#b3bfcb}
html[data-tema="autoprime"]:has(#checkout-form) .apk-bc-actual{font-weight:750;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .apk-hd{max-width:none;width:min(calc(100% - 32px),var(--ap-ancho));
  margin:14px auto 0;padding:0}
html[data-tema="autoprime"]:has(#checkout-form) .apk-hd h1{margin:0;font-size:29px;font-weight:800;
  letter-spacing:-.022em;line-height:1.06;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .apk-hd p{margin:9px 0 0;font-size:13px;color:#5a6675}
html[data-tema="autoprime"]:has(#checkout-form) .wrap{max-width:none;width:min(calc(100% - 32px),var(--ap-ancho));
  padding:0;margin:20px auto 40px;grid-template-columns:minmax(0,1fr) 448px;gap:30px}

/* Una sola tarjeta con los 4 pasos adentro */
html[data-tema="autoprime"]:has(#checkout-form) #checkout-form{background:#fff;border:1px solid #edf1f5;
  border-radius:16px;box-shadow:0 6px 22px rgba(9,30,56,.07);padding-bottom:22px}
html[data-tema="autoprime"]:has(#checkout-form) .form-section{background:transparent;border:0;border-radius:0;
  box-shadow:none;margin:0;overflow:visible}
html[data-tema="autoprime"]:has(#checkout-form) .form-section+.form-section{border-top:1px solid #eceff3}
html[data-tema="autoprime"]:has(#checkout-form) .section-hd{background:transparent;padding:18px 24px 0;gap:11px}
html[data-tema="autoprime"]:has(#checkout-form) .section-num{width:25px;height:25px;background:#0c3557;
  font-size:12px;font-weight:800}
html[data-tema="autoprime"]:has(#checkout-form) .section-title{font-size:14.5px;font-weight:800;color:var(--ap-navy);
  letter-spacing:-.01em}
html[data-tema="autoprime"]:has(#checkout-form) .section-icon{display:none}
/* Sello "Pago seguro" a la derecha del paso 3 */
html[data-tema="autoprime"]:has(#checkout-form) .apk-seguro{margin-left:auto;display:inline-flex;align-items:center;
  gap:7px;font-size:12.5px;color:#6d7c8c}
html[data-tema="autoprime"]:has(#checkout-form) .apk-seguro .apc-svg{width:15px;height:15px}
html[data-tema="autoprime"]:has(#checkout-form) .form-body{padding:15px 24px 20px}

/* Campos */
html[data-tema="autoprime"]:has(#checkout-form) .row{gap:16px;margin-bottom:15px}
/* El RUT ocupa media fila, como en el diseño: al lado no va nada. */
html[data-tema="autoprime"]:has(#checkout-form) .row.one:has(#f-rut){grid-template-columns:1fr 1fr}
html[data-tema="autoprime"]:has(#checkout-form) .field label{font-size:12px;font-weight:700;color:var(--ap-navy);
  letter-spacing:.03em;margin-bottom:7px}
html[data-tema="autoprime"]:has(#checkout-form) .field label i{color:var(--ap-navy);font-size:12px}
html[data-tema="autoprime"]:has(#checkout-form) .field label .req{color:#e11d48}
html[data-tema="autoprime"]:has(#checkout-form) .field input,
html[data-tema="autoprime"]:has(#checkout-form) .field select,
html[data-tema="autoprime"]:has(#checkout-form) .field textarea,
html[data-tema="autoprime"]:has(#checkout-form) #f-origen{height:42px;border:1.5px solid #e7edf3;border-radius:8px;
  padding:0 14px;font-size:13.5px;background:#fff}
html[data-tema="autoprime"]:has(#checkout-form) .field textarea{height:42px;padding:11px 14px;resize:vertical}
html[data-tema="autoprime"]:has(#checkout-form) .field input:focus,
html[data-tema="autoprime"]:has(#checkout-form) .field select:focus,
html[data-tema="autoprime"]:has(#checkout-form) .field textarea:focus{border-color:var(--ap-cyan);
  box-shadow:0 0 0 3px rgba(8,172,208,.13)}
html[data-tema="autoprime"]:has(#checkout-form) .field input::placeholder,
html[data-tema="autoprime"]:has(#checkout-form) .field textarea::placeholder{color:#9aa8b6}

/* Paso 2 · entrega: las dos opciones lado a lado */
html[data-tema="autoprime"]:has(#checkout-form) #envio-group{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html[data-tema="autoprime"]:has(#checkout-form) .opt-card{border:1.5px solid #e8edf3;border-radius:12px;
  padding:14px 16px;gap:14px;box-shadow:none;align-items:center}
html[data-tema="autoprime"]:has(#checkout-form) .opt-card:hover{border-color:#c9d8e4}
html[data-tema="autoprime"]:has(#checkout-form) .opt-card.selected{border-color:var(--ap-cyan);background:#fff;
  box-shadow:none}
html[data-tema="autoprime"]:has(#checkout-form) .opt-card input[type=radio]{accent-color:var(--ap-cyan);
  width:19px;height:19px;order:0}
/* En entrega el icono va a la IZQUIERDA del texto (en pago queda a la derecha). */
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-card{gap:10px;padding:14px 15px}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-icon{order:1;width:42px;height:42px;border:0;
  border-radius:10px;font-size:18px}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-text{order:2}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-badge{order:3}
html[data-tema="autoprime"]:has(#checkout-form) #opt-retiro .opt-icon{background:#fdf1d4!important;
  border-color:transparent!important;color:#c88724!important}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-icon.green{background:#e1fae4;color:#1fa34a}
html[data-tema="autoprime"]:has(#checkout-form) .opt-name{font-size:14.5px;font-weight:750;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .opt-desc{font-size:13px;color:#5a6675;margin-top:2px;line-height:1.4}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-name{font-size:14px}
html[data-tema="autoprime"]:has(#checkout-form) #envio-group .opt-desc{font-size:12px}
html[data-tema="autoprime"]:has(#checkout-form) .opt-badge{font-size:12px;font-weight:750;padding:5px 11px;
  border-radius:8px;background:#fef2d3!important;color:#a9741d!important;border-color:transparent!important}

/* Paso 3 · pago */
html[data-tema="autoprime"]:has(#checkout-form) #pago-group{gap:12px}
html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-card.selected{background:#eff7fb}
html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-badge{background:#e6f4fa!important;
  color:#0b6e8f!important}
/* Cada marca en su propia caja, como en el diseño */
html[data-tema="autoprime"]:has(#checkout-form) .opt-marcas{gap:12px}
/* Cajas del MISMO tamaño: si cada una se ajusta a su logo quedan desparejas. */
html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-marcas img{box-sizing:border-box;
  width:106px;height:46px;max-width:none;padding:8px 14px;object-fit:contain;
  border:1.5px solid #e8edf3;border-radius:10px;background:#fff}
/* El sello "Seguro" de la fila sobra: el paso 3 ya dice "Pago seguro" arriba. */
html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-card:has(.opt-marcas) .opt-badge{display:none}
/* Los medios que no son tarjeta ocupan ese mismo lugar con una caja ancha que
   lleva su icono y su nombre — es lo que muestra el diseño para transferencia. */
html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-icon{width:auto;min-width:250px;
  height:46px;padding:0 20px;gap:11px;border:1.5px solid #e8edf3!important;border-radius:10px;
  background:#fff!important;color:var(--ap-navy)!important;font-size:19px}
html[data-tema="autoprime"]:has(#checkout-form) .apk-marca-txt{font-size:14px;font-weight:800;
  letter-spacing:.03em;color:var(--ap-navy)}

/* Paso 4 · los dos campos lado a lado */
html[data-tema="autoprime"]:has(#checkout-form) .form-section:nth-of-type(4) .form-body{display:grid;
  grid-template-columns:1fr 1fr;gap:16px;align-items:start}
html[data-tema="autoprime"]:has(#checkout-form) .form-section:nth-of-type(4) .form-body .field{margin-top:0!important}

/* Botón + promesa, dentro de la tarjeta */
html[data-tema="autoprime"]:has(#checkout-form) .btn-submit{margin:4px 24px 0;width:calc(100% - 48px);height:50px;
  border-radius:10px;background:#006e9b;font-size:15px;font-weight:750;box-shadow:none}
html[data-tema="autoprime"]:has(#checkout-form) .btn-submit:hover:not(:disabled){background:#0b7fae}
html[data-tema="autoprime"]:has(#checkout-form) .apk-promesa{display:flex;align-items:center;justify-content:center;
  gap:8px;margin:13px 24px 0;font-size:13.5px;color:#6d7c8c}
html[data-tema="autoprime"]:has(#checkout-form) .apk-promesa .apc-svg{width:16px;height:16px}
html[data-tema="autoprime"]:has(#checkout-form) .alerta-error{margin:0 24px 12px}

/* Resumen del pedido */
html[data-tema="autoprime"]:has(#checkout-form) .summary-card{border:1px solid #edf1f5;border-radius:16px;
  box-shadow:0 6px 22px rgba(9,30,56,.07)}
html[data-tema="autoprime"]:has(#checkout-form) .summary-hd{background:var(--ap-navy);padding:16px 20px;gap:11px}
html[data-tema="autoprime"]:has(#checkout-form) .summary-hd-title{font-size:14.5px;font-weight:750;
  text-transform:none;letter-spacing:0}
html[data-tema="autoprime"]:has(#checkout-form) .summary-hd i{color:#fff;opacity:.85;font-size:16px}
html[data-tema="autoprime"]:has(#checkout-form) .summary-items{padding:18px 20px}
/* El precio se saca de la columna y se ancla abajo a la derecha: si es una
   columna más, le come el ancho al nombre y el nombre se corta. */
html[data-tema="autoprime"]:has(#checkout-form) .sum-item{position:relative;gap:14px;align-items:flex-start}
html[data-tema="autoprime"]:has(#checkout-form) .sum-item img{width:62px;height:62px;border-radius:10px;
  border:1px solid #edf1f5;background:#fff;object-fit:contain;padding:4px;flex:none}
html[data-tema="autoprime"]:has(#checkout-form) .sum-item-name{font-size:13px;font-weight:750;color:var(--ap-navy);
  text-transform:uppercase;line-height:1.35;letter-spacing:.01em}
html[data-tema="autoprime"]:has(#checkout-form) .sum-item-qty{font-size:13px;color:#5a6675;margin-top:10px}
html[data-tema="autoprime"]:has(#checkout-form) .sum-item-price{position:absolute;right:0;bottom:0;
  font-size:15.5px;font-weight:800;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .summary-foot{background:#fff;border-top:1px solid #eceff3;
  padding:16px 20px 0}
html[data-tema="autoprime"]:has(#checkout-form) .sum-row{font-size:14px;margin-bottom:11px}
html[data-tema="autoprime"]:has(#checkout-form) .sum-row .label{color:#5a6675}
html[data-tema="autoprime"]:has(#checkout-form) .sum-row span:last-child{color:#3f4b59}
html[data-tema="autoprime"]:has(#checkout-form) .sum-row.total{border-top:1px solid #eceff3;margin:0;
  padding:15px 0 17px;font-size:20px;font-weight:800;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .sum-row.total .label{color:var(--ap-navy);font-size:20px}
html[data-tema="autoprime"]:has(#checkout-form) .lock-note{justify-content:center;gap:9px;font-size:14px;
  color:#5a6675;padding:0 0 18px}
html[data-tema="autoprime"]:has(#checkout-form) .lock-note .apc-svg{width:19px;height:19px;color:var(--ap-cyan-dk)}
html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid #eceff3;padding:16px 20px}
html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta>span{font-size:13.5px;color:#5a6675}
html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta .opt-marcas{display:flex;align-items:center;gap:14px}
/* Cada marca a su tamaño propio: forzarlas todas al mismo alto deforma el peso
   óptico (un logotipo de palabra al alto de un símbolo queda enorme). */
html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta img{height:auto;width:auto;
  max-height:32px;object-fit:contain;display:block}

/* Tarjeta de ayuda */
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda{margin-top:16px;background:#fff;border:1px solid #edf1f5;
  border-radius:16px;box-shadow:0 6px 22px rgba(9,30,56,.07);padding:20px}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda-hd{display:flex;align-items:center;gap:12px}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda-hd .apc-svg{width:26px;height:26px;color:var(--ap-cyan)}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda-hd b{font-size:16px;font-weight:800;color:var(--ap-navy)}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda p{margin:12px 0 0;font-size:14px;line-height:1.5;
  color:#5a6675}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda a{margin-top:16px;height:48px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#eef4f8;
  border:1px solid #dde7ef;border-radius:10px;color:#0b6e8f;font-size:16px;font-weight:750;
  text-decoration:none;transition:background .15s}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda a:hover{background:#e3edf4}
html[data-tema="autoprime"]:has(#checkout-form) .apk-ayuda a .apc-svg{width:21px;height:21px}

/* 4.12 · Agenda — paso 1 (elegir servicio) ──────────────────────────────────
   Rediseño aprobado (maqueta 2026-08-15). Como en el checkout: se RE-ESTILA, no
   se reconstruye. El asistente de reserva tiene cuatro pasos, historial del
   navegador, cupos y validaciones; nada de eso se toca. `js/vitrina-autoprime.js`
   agrega las piezas que el diseño pide y no existían.
   Las clases `ag-*` sólo existen en `web-agenda.html`, así que no hace falta
   acotarlas por pantalla como en el checkout. */
html[data-tema="autoprime"] .apa-bc{width:min(calc(100% - 32px),var(--ap-ancho));margin:22px auto 12px;
  display:flex;align-items:center;gap:9px;font-size:13px;color:#6d7c8c}
html[data-tema="autoprime"] .apa-bc a{color:var(--ap-cyan-dk);text-decoration:none;font-weight:600}
html[data-tema="autoprime"] .apa-bc em{font-style:normal;color:#93a1b1}

html[data-tema="autoprime"] .ag-wrap{max-width:none;width:min(calc(100% - 32px),var(--ap-ancho));
  margin-left:auto;margin-right:auto}
html[data-tema="autoprime"] .ag-card{background:#fff;border:1px solid #edf1f5;border-radius:16px;
  box-shadow:0 6px 22px rgba(9,30,56,.07);border-top:3px solid var(--ap-cyan);padding:0 26px 26px;
  overflow:visible}

/* En el paso 1 el diseño tiene UNA sola tarjeta blanca: la del encabezado con
   los pasos. Todo lo que va abajo —rótulos de sección, tarjetas de servicio,
   acordeón y barra final— va sobre el FONDO de la página, porque cada uno ya es
   su propia cajita blanca; un blanco arriba de otro blanco borra el contraste.
   Medido en la maqueta: la tarjeta del encabezado va de x315 a x1388 y todo lo
   de abajo de x332 a x1371, o sea 17 px hacia adentro por lado.
   El HTML trae una sola tarjeta larga, así que la de afuera queda de envoltorio
   transparente y el JS agrupa lo de abajo en `.apa-cuerpo` —que NO pinta fondo,
   sólo separa y mete hacia adentro—. Los pasos 2 a 4 conservan su tarjeta única:
   su diseño no se tocó. */
html[data-tema="autoprime"] #ag-p1 .ag-card{background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:0}
html[data-tema="autoprime"] #ag-p1 .ag-panel-head{background:#fff;border:1px solid #edf1f5;
  border-top:3px solid var(--ap-cyan);border-radius:16px;box-shadow:0 6px 22px rgba(9,30,56,.07);
  margin:0;padding:22px 26px 18px}
html[data-tema="autoprime"] .apa-cuerpo{background:transparent;border:0;box-shadow:none;
  padding:0 17px;margin-top:22px}

/* Encabezado: pasa de barra marina a fila blanca */
html[data-tema="autoprime"] .ag-panel-head{background:transparent;margin:0 -26px 0;padding:24px 26px 0;
  border-radius:0;flex-wrap:wrap;align-items:flex-start;gap:16px}
html[data-tema="autoprime"] .ag-panel-head-ico{width:54px;height:54px;border-radius:14px;
  background:linear-gradient(150deg,#12293f,#00132d);border:0;color:var(--ap-cyan);font-size:23px;
  box-shadow:0 5px 14px rgba(6,22,39,.24)}
html[data-tema="autoprime"] .ag-panel-head-tx h3{font-size:26px;font-weight:800;color:var(--ap-navy);
  letter-spacing:-.02em;line-height:1.15}
html[data-tema="autoprime"] .ag-panel-head-tx p{font-size:14px;color:#5a6675;margin-top:5px}
html[data-tema="autoprime"] .ag-panel-head-badge{display:none}
/* La consulta de reserva deja de flotar arriba y entra al encabezado */
/* ⚠️ Mismo motivo que el banner de servicios: el disparador de "¿Ya tienes una
   reserva?" se esconde por CSS y no por JS. Escondiéndolo por JS —que corre
   cuando llega la configuración— la barra vieja se veía 503 ms arriba de la
   tarjeta y después desaparecía de golpe. Y si la segunda puerta quita
   `data-tema`, vuelve sola: con un `style` puesto a mano quedaba escondida y
   esa vitrina se quedaba sin forma de consultar su reserva. */
/* El !important es necesario, no comodidad: el disparador trae su
   `style="display:flex…"` escrito en el marcado de la página, y un estilo en
   línea le gana a cualquier hoja. Al quitarse `data-tema` la regla deja de
   aplicar y el disparador vuelve solo, que es lo que se busca. */
html[data-tema="autoprime"] #ag-buscar-toggle{display:none!important}
html[data-tema="autoprime"] .apa-reserva{margin-left:auto;display:flex;align-items:center;gap:9px;
  border:1.5px solid #bfe4ef;background:#fff;border-radius:10px;padding:11px 17px;font-size:13.5px;
  color:#5a6675;white-space:nowrap}
html[data-tema="autoprime"] .apa-reserva .apc-svg{width:17px;height:17px;color:var(--ap-navy)}
html[data-tema="autoprime"] .apa-reserva b{color:var(--ap-cyan-dk);font-weight:750;cursor:pointer}

/* Pasos: un RIEL CONTINUO de lado a lado de la tarjeta, con los círculos
   ensartados encima —así está en el diseño—. Dos cosas que hay que respetar
   para que salga así y no cortado:

   a) El riel asoma por los DOS extremos: un tramo corto celeste ANTES del paso 1
      y una cola gris DESPUÉS del paso 4 (`:before` / `:after` del stepper). Sin
      eso el riel arranca y termina en seco sobre los círculos.
   b) El rótulo y su número salen del flujo (`position:absolute`). Si no, el
      rótulo —que es más ancho que el círculo— ensancha el paso, y como las
      líneas van ENTRE pasos quedan cortas, con un hueco blanco a cada lado del
      círculo. Con el rótulo fuera, cada paso mide lo que mide su círculo y las
      líneas llegan hasta tocarlo. */
/* El riel arranca alineado con el TÍTULO, no con el cuadrado del icono: 54 px de
   cuadrado + 16 px de separación. Así está en el diseño. */
html[data-tema="autoprime"] .ag-stepper{width:calc(100% - 70px);max-width:none;
  margin:24px 0 4px 70px;padding:0 0 30px;align-items:center;flex-shrink:1}
html[data-tema="autoprime"] .ag-stepper:before,
html[data-tema="autoprime"] .ag-stepper:after{content:"";height:3px;border-radius:3px;flex:0 0 auto}
html[data-tema="autoprime"] .ag-stepper:before{width:18px;background:#aedce6;margin-right:5px}
/* La cola es más larga que el muñón porque abajo de ella va el número del último
   paso; con menos, el "4" se saldría de la tarjeta. */
html[data-tema="autoprime"] .ag-stepper:after{width:66px;background:#cdd1d9;margin-left:5px}
html[data-tema="autoprime"] .ag-step{position:relative;flex-direction:column;align-items:center;
  gap:0;flex:0 0 auto}
html[data-tema="autoprime"] .ag-step-circle{width:40px;height:40px;border-radius:50%;background:#fff;
  border:1.5px solid #e2e3e8;color:var(--ap-navy);font-size:17px;display:grid;place-items:center;
  box-shadow:none;font-weight:400}
html[data-tema="autoprime"] .ag-step-circle .apc-svg{width:22px;height:22px;stroke-width:var(--apa-gr,2)}
/* El paso en curso es más grande y va relleno; los círculos quedan igual
   centrados sobre el riel porque el stepper alinea al centro. */
html[data-tema="autoprime"] .ag-step.active .ag-step-circle,
html[data-tema="autoprime"] .ag-step.done .ag-step-circle{width:46px;height:46px;
  background:var(--ap-cyan);border-color:var(--ap-cyan);color:#fff}
html[data-tema="autoprime"] .ag-step.active .ag-step-circle .apc-svg,
html[data-tema="autoprime"] .ag-step.done .ag-step-circle .apc-svg{width:25px;height:25px}
/* La página pinta los pasos pendientes para el encabezado marino: borde blanco
   sobre fondo transparente. Sobre blanco eso los deja invisibles, y su selector
   `.ag-step:not(.active):not(.done) .ag-step-circle` pesa más que el de arriba,
   así que hay que repetirlo con el mismo peso para poder ganarle. */
html[data-tema="autoprime"] .ag-step:not(.active):not(.done) .ag-step-circle{background:#fff;
  border-color:#e2e3e8;color:var(--ap-navy)}
/* El rótulo del paso activo lo pinta de blanco la página (era para el encabezado
   marino). Hay que repetir su mismo selector para poder ganarle. */
html[data-tema="autoprime"] .ag-step-label,
html[data-tema="autoprime"] .ag-step.active .ag-step-label,
html[data-tema="autoprime"] .ag-step.done .ag-step-label{position:absolute;top:calc(100% + 11px);
  left:50%;transform:translateX(-50%);margin:0;font-size:13.5px;font-weight:750;
  color:var(--ap-navy);text-transform:none;letter-spacing:0;white-space:nowrap;opacity:1}
html[data-tema="autoprime"] .ag-step:not(.active):not(.done) .ag-step-label{color:#3d4658}
html[data-tema="autoprime"] .ag-step-line{flex:1;height:3px;background:#cdd1d9;margin:0 5px;
  border-radius:3px;min-width:26px}
/* El tramo que sigue al paso actual va en celeste: marca hasta dónde se llegó,
   como en el diseño. */
html[data-tema="autoprime"] .ag-step-line.done,
html[data-tema="autoprime"] .ag-step.active+.ag-step-line{background:#009abb}
/* El número va pegado a la DERECHA del rótulo, no en medio de la línea: así se
   lee "Tu vehículo ②", como en el diseño. El paso 1 no lleva número. El
   `data-num` lo pone el JS de la agenda (el rótulo no puede leer el `data-step`
   del paso, que es su padre). */
html[data-tema="autoprime"] .ag-step-label[data-num]:not([data-num="1"]):after{content:attr(data-num);
  position:absolute;left:calc(100% + 15px);top:50%;transform:translateY(calc(-50% - 4px));
  width:23px;height:23px;border-radius:50%;border:1.5px solid #e2e3e8;background:#fff;
  color:#8a93a5;font-size:11.5px;font-weight:700;display:grid;place-items:center}

/* Rótulos de sección: cada uno abre con su NÚMERO en un círculo de color —celeste
   la sección 1, naranja la 2— y ese color se repite en el borde y el fondo de las
   tarjetas que cuelgan de ella. Es lo que separa de un vistazo "reserva directa"
   de "requiere cotización".
   La barrita de color de la página se reaprovecha como ese círculo: ya está en el
   lugar correcto del marcado. El número lo pone el CSS porque el `<span>` viene
   vacío, y `.warn` —que la página ya usa para la sección de cotización— es el que
   decide si va el 1 o el 2. */
html[data-tema="autoprime"] .ag-sec-label{gap:11px;margin:22px 0 13px;align-items:center}
/* La segunda sección respira más que la primera: son dos formas distintas de
   contratar (reservo directo vs pido cotización) y el corte tiene que leerse. */
html[data-tema="autoprime"] .ag-sec-label.warn{margin-top:38px}
html[data-tema="autoprime"] .ag-sec-bar{display:grid;place-items:center;width:21px;height:21px;
  border-radius:50%;background:var(--ap-cyan);color:#fff;font-size:12px;font-weight:800;flex:none}
html[data-tema="autoprime"] .ag-sec-label .ag-sec-bar:before{content:"1"}
html[data-tema="autoprime"] .ag-sec-label.warn .ag-sec-bar{background:var(--ap-ambar)}
html[data-tema="autoprime"] .ag-sec-label.warn .ag-sec-bar:before{content:"2"}
html[data-tema="autoprime"] .ag-sec-tt{font-size:17px;font-weight:800;color:var(--ap-navy);
  text-transform:none;letter-spacing:-.01em}
html[data-tema="autoprime"] .ag-sec-pill{background:#0398c6;color:#fff;font-size:11.5px;
  font-weight:750;padding:4px 11px;border-radius:20px;text-transform:none;letter-spacing:0}
html[data-tema="autoprime"] .ag-sec-pill.amber{background:var(--ap-ambar)}
html[data-tema="autoprime"] .ag-sec-rule{display:none}

/* Servicios de reserva directa: la tarjeta pasa a horizontal */
html[data-tema="autoprime"] .ag-directos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Las dos secciones dejan de ser cajas con barra de color: en el diseño el
   contenido va suelto sobre la tarjeta blanca. Llevan `id`, así que el selector
   necesita el atributo del tema para pesar más. */
html[data-tema="autoprime"] #ag-directos-section,
html[data-tema="autoprime"] #ag-cot-section{background:transparent;border-left:0;border-radius:0;
  padding:0;margin:0 0 4px}
/* La imagen ocupa la columna izquierda entera; el texto, la derecha. Sin decirlo
   explícito, los seis hijos se acomodan solos en la grilla y quedan desparejos. */
html[data-tema="autoprime"] .ag-tipo{position:relative;display:grid;
  grid-template-columns:100px minmax(0,1fr);column-gap:14px;align-items:start;text-align:left;
  border:1.5px solid var(--ap-cyan-bd);border-radius:14px;padding:13px 15px;
  background:var(--ap-cyan-bg);box-shadow:none;min-height:0}
html[data-tema="autoprime"] .ag-tipo>.ag-tipo-ico{grid-column:1;grid-row:1;align-self:center}
/* Todo el texto en un solo bloque: así la tarjeta mide lo que mide su contenido,
   con o sin descripción cargada. */
html[data-tema="autoprime"] .apa-tx{grid-column:2;grid-row:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;min-width:0}
html[data-tema="autoprime"] .apa-tx .ag-tipo-desc{margin:0}
html[data-tema="autoprime"] .apa-tx .apa-sel{margin:0}
/* "Seleccionado" va DEBAJO de la imagen, en su columna: si se posiciona suelto
   sobre la tarjeta termina encima del dibujo. */
html[data-tema="autoprime"] .ag-tipo>.apa-elegido{grid-column:1;grid-row:2;justify-self:start}
html[data-tema="autoprime"] .ag-tipo:hover{border-color:var(--ap-cyan);background:var(--ap-cyan-bg)}
html[data-tema="autoprime"] .ag-tipo.on{background:#ecf6fa;border-color:var(--ap-cyan);box-shadow:none}
/* El recuadro de la foto va en FLEX y no en grid: en grid su única fila es
   automática, o sea de alto indefinido, y entonces el `height:100%` de la imagen
   no tiene contra qué resolver — se cae a `auto` y la foto se sale de la tarjeta
   por abajo (pasó con "Revisión general", 69 px dentro de un recuadro de 56).
   En flex el porcentaje sí resuelve contra el alto fijo del recuadro. El
   `overflow:hidden` queda de red: ninguna foto puede desbordar, venga como venga. */
html[data-tema="autoprime"] .ag-tipo-ico{width:100px;height:56px;margin:0;background:transparent;
  border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:34px}
html[data-tema="autoprime"] .ag-tipo-ico img{width:100%;height:100%;object-fit:contain}
/* Título de tarjeta SIN negrita (decisión del dueño): la maqueta los trae en
   negrita, pero con ocho tarjetas seguidas pesaba demasiado. */
html[data-tema="autoprime"] .ag-tipo-label{font-size:16.5px;font-weight:500;color:var(--ap-navy);
  line-height:1.25;margin:0}
html[data-tema="autoprime"] .ag-tipo.on .ag-tipo-label{color:var(--ap-navy)}
html[data-tema="autoprime"] .ag-tipo-desc{font-size:13.5px;color:#5a6675;line-height:1.4;margin-top:4px}
/* "Seleccionar →" y el check de elegido los agrega el componente */
html[data-tema="autoprime"] .apa-sel{margin-top:12px;display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:750;color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] .apa-sel .apc-svg{width:16px;height:16px}
html[data-tema="autoprime"] .apa-check{position:absolute;top:16px;right:16px;width:30px;height:30px;
  border-radius:50%;background:var(--ap-cyan);color:#fff;display:none;place-items:center;font-size:14px}
html[data-tema="autoprime"] .ag-tipo.on .apa-check{display:grid}
html[data-tema="autoprime"] .apa-elegido{display:none;background:#d7eef7;color:var(--ap-cyan-dk);
  font-size:11.5px;font-weight:750;padding:3px 11px;border-radius:20px;margin-top:10px}
html[data-tema="autoprime"] .ag-tipo.on .apa-elegido{display:block}

/* Servicios que requieren cotización */
html[data-tema="autoprime"] .ag-cot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
html[data-tema="autoprime"] .ag-cot-item{display:grid;grid-template-columns:100px minmax(0,1fr);
  column-gap:12px;align-items:center;border:1.5px solid var(--ap-ambar-bd);border-radius:14px;
  padding:13px 14px;background:var(--ap-ambar-bg);text-align:left;min-height:0}
html[data-tema="autoprime"] .ag-cot-item>.ag-cot-img,
html[data-tema="autoprime"] .ag-cot-item>i{grid-column:1;grid-row:1}
html[data-tema="autoprime"] .ag-cot-item>.ag-cot-item-txt{grid-column:2;grid-row:1;min-width:0}
html[data-tema="autoprime"] .ag-cot-item:hover{border-color:var(--ap-ambar);
  background:var(--ap-ambar-bg)}
html[data-tema="autoprime"] .ag-cot-item.on{background:#ecf6fa;border-color:var(--ap-cyan)}
/* Sin recuadro gris detrás del dibujo: en el diseño la foto va directo sobre el
   fondo teñido de la tarjeta. */
html[data-tema="autoprime"] .ag-cot-img{width:100px;height:56px;margin:0;object-fit:contain;
  background:transparent;border-radius:10px;padding:2px}
html[data-tema="autoprime"] .ag-cot-item>i{width:100px;height:56px;background:transparent;
  border-radius:10px;display:grid;place-items:center;font-size:28px;color:var(--ap-navy)}
html[data-tema="autoprime"] .ag-cot-item-txt h4{font-size:14.5px;font-weight:500;color:var(--ap-navy);
  line-height:1.3}
html[data-tema="autoprime"] .apa-previa{margin-top:7px;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:#5a6675}
html[data-tema="autoprime"] .apa-previa:before{content:"";width:8px;height:8px;border-radius:50%;
  background:#fda31f;flex:none}

/* Mantención por kilometraje: es la cabecera de la sección de cotización, así
   que lleva su mismo ámbar. La pista de la derecha la agrega el componente. */
html[data-tema="autoprime"] .ag-mant-header{border:1.5px solid var(--ap-ambar-bd);border-radius:12px;
  padding:10px 16px;background:var(--ap-ambar-bg)}
html[data-tema="autoprime"] .ag-mant-header:hover{border-color:var(--ap-ambar);background:var(--ap-ambar-bg);
  box-shadow:none}
html[data-tema="autoprime"] .ag-mant-ttl{font-size:14.5px;font-weight:750;color:var(--ap-navy)}
html[data-tema="autoprime"] .apa-hint{margin-left:auto;margin-right:16px;font-size:13px;color:#5a6675}
html[data-tema="autoprime"] .ag-mant-arrow{color:var(--ap-navy);font-size:14px}
/* Con el acordeón abierto, la cabecera y su panel se pegan y comparten el ámbar. */
html[data-tema="autoprime"] .ag-mant-header.on{border-color:var(--ap-ambar);
  border-bottom-left-radius:0;border-bottom-right-radius:0}
html[data-tema="autoprime"] .ag-mant-body{border:1.5px solid var(--ap-ambar);border-top:0;
  border-radius:0 0 12px 12px;background:var(--ap-ambar-bg);padding:14px 18px}

/* "Describe brevemente el problema" — el panel que aparece al elegir un servicio
   de reserva directa. El marcado y toda su lógica (el archivo adjunto, el
   contador, la validación) son de la página; acá sólo cambia cómo se ve. */
html[data-tema="autoprime"] #ag-desc-fld{background:#fff;border:1.5px solid #eaeef3;
  border-radius:14px;padding:16px 18px;margin-top:22px}
html[data-tema="autoprime"] #ag-desc-fld textarea{min-height:118px;border:1.5px solid #e6ebf0;
  border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ap-ink)}
html[data-tema="autoprime"] #ag-desc-fld textarea::placeholder{color:#93a1b1}
html[data-tema="autoprime"] #ag-desc-fld textarea:focus{border-color:var(--ap-cyan)}
/* Adjuntar foto o video: caja LLENA en gris claro, sin borde de puntos. El borde
   punteado es el lenguaje de "arrastrá un archivo acá"; el diseño la trata como
   una fila más del formulario. */
html[data-tema="autoprime"] .ag-foto-drop{border:0;border-radius:12px;background:#f5f7f9;
  padding:16px 18px;margin-top:12px}
html[data-tema="autoprime"] .ag-foto-drop:hover{border:0;background:#eef2f6}
html[data-tema="autoprime"] .ag-foto-ico{width:42px;height:42px;border-radius:11px;background:#e4ecee;
  color:var(--ap-navy);font-size:17px}
html[data-tema="autoprime"] .ag-foto-main{font-size:14.5px;font-weight:650;color:var(--ap-navy)}
html[data-tema="autoprime"] .ag-foto-sub{font-size:12.5px;color:#6d7c8c}
/* Con archivo elegido la caja se pone verde: es la única señal de que quedó
   adjuntado, así que ese estado NO se neutraliza. */
html[data-tema="autoprime"] .ag-foto-drop.has-file{background:#eefaf1;
  box-shadow:inset 0 0 0 1.5px #bfe6cc}

/* Barra de acción al pie */
/* Pie: SOLO los dos botones, centrados, con el paso debajo. Antes llevaba un
   aviso ("estos servicios necesitan revision previa") y una caja con el servicio
   elegido; los dos repetian algo que la pantalla ya dice —cada tarjeta de
   cotizacion trae su "Revision previa", y la elegida queda sola, resaltada y con
   su tilde—, asi que se quitaron. Sin linea divisoria arriba: servia cuando todo
   esto vivia dentro de una tarjeta blanca.
   Los DOS botones de navegar —volver y avanzar— son el MISMO circulo, el que
   pone la pagina. Por eso aca no hay ninguna regla para `#ag-next-btn`:
   cualquier estilo propio volveria a separarlos. */
/* Fila centrada, NO columna: los pasos 2 a 4 tienen tres botones en esta misma
   barra (volver · "Sí, es mi vehículo" · seguir) y en columna quedaban apilados
   uno debajo del otro. El paso de "Paso 1 de 4" a su propia línea se resuelve
   con `flex-basis:100%` y el envoltorio que envuelve, no forzando la columna. */
html[data-tema="autoprime"] .ag-nav{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:14px;margin:26px 0 0;padding:0;border:0}
html[data-tema="autoprime"] .apa-btns{display:flex;align-items:center;gap:16px}
html[data-tema="autoprime"] .apa-paso{flex:0 0 100%;text-align:center;font-size:12.5px;
  color:#6d7c8c;margin:0}
/* Todos los botones de la barra comparten alto y forma de pastilla: los que sólo
   llevan flecha quedan redondos (46×46 con radio 23 es un círculo) y el que
   lleva texto queda alargado, pero se leen como un mismo juego en vez de como
   tres botones prestados de tres lugares distintos. */
html[data-tema="autoprime"] .ag-nav .btn{height:46px;border-radius:23px;font-size:14px}
html[data-tema="autoprime"] .ag-nav .btn.btn-next-navy{width:46px;min-width:46px;padding:0}
/* "Buscar" NO es navegación sino una acción del campo, así que sigue siendo un
   rectángulo — pero del mismo alto y el mismo radio que el campo al que está
   pegado, que es lo que le faltaba (46 contra 38 px). */
/* Métodos de pago del paso 4 (también los reusa el selector de sucursal del
   paso 3, que comparte estas clases). Venían con la tipografía chica y gris de
   la página, muy por debajo del resto de la pantalla. */
html[data-tema="autoprime"] .ag-metodo{border:1.5px solid #e6ebf1;border-radius:12px;
  padding:13px 16px;gap:14px;background:#fff}
html[data-tema="autoprime"] .ag-metodo:hover{border-color:var(--ap-cyan);background:#f6fcfe}
html[data-tema="autoprime"] .ag-metodo.on{border-color:var(--ap-cyan);background:#f0f9fd}
html[data-tema="autoprime"] .ag-metodo-ico{width:40px;height:40px;border-radius:10px}
html[data-tema="autoprime"] .ag-metodo-ttl,
html[data-tema="autoprime"] .ag-metodo.on .ag-metodo-ttl{font-size:15px;font-weight:700;
  color:var(--ap-navy)}
html[data-tema="autoprime"] .ag-metodo-sub{font-size:12.5px;color:#6d7c8c;margin-top:2px}
html[data-tema="autoprime"] .ag-metodo-badge{font-size:11px;font-weight:750;padding:3px 10px;
  background:#e6f4fb;color:var(--ap-cyan-dk);border-color:#c9e7f5}
html[data-tema="autoprime"] .ag-section-ttl{font-size:12.5px;font-weight:800;color:var(--ap-navy);
  letter-spacing:.05em}

/* ⚠️ El `flex:none` no es de adorno: el campo trae `flex:1` y su contenedor va
   en COLUMNA, así que ese 1 manda sobre el alto y `height` queda ignorado —ni
   siquiera un estilo en línea lo movía—. Con `flex:none` el alto vuelve a
   mandar. */
html[data-tema="autoprime"] .ag-patente-inp{flex:none;height:46px;border-radius:10px}
html[data-tema="autoprime"] .ag-patente-btn{border-radius:10px}

/* 4.13 · Servicios ──────────────────────────────────────────────────────────
   Rediseño aprobado (maqueta servicios.png). RE-ESTILADO: el endpoint, los datos
   y el dibujo de las secciones siguen siendo de `web-servicios.html`; la hoja
   cambia cómo se ven y el componente agrega las piezas que no existían.
   Las clases `serv-*` sólo viven en esa página, así que no hace falta acotarlas
   por pantalla como en el checkout. */
html[data-tema="autoprime"] .apv-wrap{width:min(calc(100% - 32px),var(--ap-ancho));
  margin-left:auto;margin-right:auto}

/* ⚠️ El banner viejo se esconde por CSS y NO por JS. El atributo `data-tema` se
   pone al cargar el script, antes del primer pintado, así que esta regla ya está
   puesta cuando la página se dibuja. Escondiéndolo por JS —que corre recién
   cuando llega la configuración— el banner oscuro alcanzaba a verse 396 ms y
   después desaparecía de golpe.
   De paso arregla la vuelta atrás: si la segunda puerta decide que la vitrina NO
   es de Autoprime y quita `data-tema`, el banner reaparece solo. Con un
   `style="display:none"` puesto a mano se habría quedado escondido para
   siempre y esa vitrina se quedaba sin encabezado. */
html[data-tema="autoprime"] #serv-banner{display:none}

/* Barra de título: reemplaza al banner oscuro con foto. La barrita celeste de la
   izquierda es la misma marca que usan los rótulos de sección del diseño. */
html[data-tema="autoprime"] .apv-hd{background:#fff;border-bottom:1px solid #e7ecf1}
html[data-tema="autoprime"] .apv-hd .apv-wrap{display:flex;align-items:center;gap:16px;
  padding:18px 0}
html[data-tema="autoprime"] .apv-hd h1{flex:1;min-width:0;margin:0;font-size:24px;font-weight:800;
  color:var(--ap-navy);letter-spacing:-.02em;display:flex;align-items:center;gap:14px}
html[data-tema="autoprime"] .apv-hd h1:before{content:"";width:4px;height:26px;flex:none;
  border-radius:2px;background:var(--ap-cyan)}
html[data-tema="autoprime"] .apv-btn{display:inline-flex;align-items:center;gap:10px;flex:none;
  background:var(--ap-cyan);color:#fff;font-size:14px;font-weight:750;padding:11px 20px;
  border-radius:10px;text-decoration:none;white-space:nowrap}
html[data-tema="autoprime"] .apv-btn:hover{filter:brightness(1.06)}
html[data-tema="autoprime"] .apv-btn .apc-svg{width:17px;height:17px}

/* Franja de beneficios: la misma pieza de Contacto, sin la tarjeta blanca porque
   acá va sobre su propia banda. */
html[data-tema="autoprime"] .apv-bene{background:#f4fafc;border-bottom:1px solid #e7ecf1}
/* ⚠️ `margin:0` a secas pisaba el `margin-left/right:auto` del envoltorio y la
   franja se iba pegada al borde izquierdo, 42 px más afuera que todo el resto de
   la página. Va `0 auto` para conservar el centrado. */
html[data-tema="autoprime"] .apv-bene .apc-bene{margin:0 auto;background:transparent;border:0;
  box-shadow:none;border-radius:0;display:grid;grid-template-columns:repeat(3,1fr)}
/* El primer icono arranca a ras del contenido —en la misma vertical que la "N"
   de "Nuestros servicios"—; el relleno lateral queda sólo entre columnas. */
html[data-tema="autoprime"] .apv-bene .apc-bene-it:first-child{padding-left:0}
html[data-tema="autoprime"] .apv-bene .apc-bene-ic{width:44px;height:44px;flex:0 0 44px;
  background:transparent;color:var(--ap-cyan)}
html[data-tema="autoprime"] .apv-bene .apc-bene-ic .apc-svg{width:30px;height:30px}

/* Encabezado de la grilla: título con subrayado celeste y, a la derecha, cuántos
   servicios hay (sale del dato, no de un número escrito a mano). */
html[data-tema="autoprime"] .apv-sec-hd{width:min(calc(100% - 32px),var(--ap-ancho));
  margin:26px auto 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
html[data-tema="autoprime"] .apv-sec-hd h2{margin:0;font-size:19px;font-weight:800;
  color:var(--ap-navy);letter-spacing:-.01em;padding-bottom:7px;
  border-bottom:3px solid var(--ap-cyan)}

/* La grilla: dos columnas de tarjetas horizontales. Antes eran seis bloques a
   todo el ancho, de 250 a 400 px de alto cada uno, y la página medía 3.000 px. */
/* `max-width`/`padding` propios de la página los dejaban 76 px más angostos que
   el encabezado y la barra de reserva, y se notaba el escalón. */
html[data-tema="autoprime"] #serv-secciones{width:min(calc(100% - 32px),var(--ap-ancho));
  max-width:none;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:12px 22px;align-items:start}
html[data-tema="autoprime"] .serv-sep{display:none}
html[data-tema="autoprime"] .serv-seccion{display:grid;grid-template-columns:245px minmax(0,1fr);
  gap:0;margin:0;padding:0;min-height:0;background:#fff;border:1px solid #e7ecf1;
  border-left:3px solid var(--ap-cyan);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(9,30,56,.05);align-items:stretch}
/* ⚠️ La página invierte foto y texto en las tarjetas pares (`order`) para que
   queden en zigzag. Acá TODAS van con la foto a la izquierda, así que hay que
   anular ese `order`; y como los separadores cuentan para `nth-child`, la
   página terminaba invirtiéndolas todas. También hay que soltar el
   `width:38%` de la foto y el `min-height:180px` de la tarjeta: sin eso el
   alto no baja por más que se achique el contenido. */
html[data-tema="autoprime"] .serv-seccion .serv-sec-img{order:0;width:auto}
html[data-tema="autoprime"] .serv-seccion .serv-sec-body{order:1}
/* La barrita de color va en el BORDE de la tarjeta, no al lado del título. */
html[data-tema="autoprime"] .serv-sec-title:before{display:none}
/* La foto llena su columna: en el diseño no queda aire alrededor. */
/* ⚠️ La foto va POSICIONADA, no en el flujo. Si se deja `height:100%` a secas,
   la fila de la grilla es automática —alto indefinido— y ese porcentaje se cae a
   `auto`: entonces manda la proporción de la foto y el alto de la tarjeta pasa
   a depender de qué imagen subieron (acá iban de 151 a 225 px en la misma fila).
   Con la foto absoluta, el alto lo fija el TEXTO y todas las tarjetas miden
   igual, venga la foto como venga. */
html[data-tema="autoprime"] .serv-sec-img{position:relative;margin:0;padding:0;border-radius:0;
  overflow:hidden;min-height:118px;background:#eef2f6}
html[data-tema="autoprime"] .serv-sec-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
html[data-tema="autoprime"] .serv-sec-body{padding:13px 18px 14px;display:flex;
  flex-direction:column;align-items:flex-start;justify-content:center;gap:0;background:#fff}
/* El número va en una pastilla de borde celeste, como en el diseño. */
html[data-tema="autoprime"] .apv-num{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:22px;padding:0 9px;border:1.5px solid var(--ap-cyan);border-radius:7px;
  background:#fff;color:var(--ap-navy);font-size:12px;font-weight:750;letter-spacing:.06em}
html[data-tema="autoprime"] .serv-sec-title{margin:9px 0 0;font-size:17px;font-weight:800;
  color:var(--ap-navy);letter-spacing:-.01em;text-transform:none}
/* Dos renglones y el resto se despliega con "Ver detalle": los textos del taller
   son párrafos largos y el diseño muestra un resumen. */
html[data-tema="autoprime"] .serv-sec-text{margin:6px 0 0;font-size:13.5px;line-height:1.5;
  color:#5a6675;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
html[data-tema="autoprime"] .serv-seccion.apv-abierto .serv-sec-text{-webkit-line-clamp:unset;
  overflow:visible}
html[data-tema="autoprime"] .apv-ver{margin-top:8px;padding:0;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:750;color:var(--ap-cyan-dk);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

/* Barra de reserva */
html[data-tema="autoprime"] .apv-cta{margin:26px 0 0}
html[data-tema="autoprime"] .apv-cta .apv-wrap{display:flex;align-items:center;gap:22px;
  background:var(--ap-navy);border-radius:12px;padding:14px 24px}
html[data-tema="autoprime"] .apv-cta-tx{flex:1;min-width:0;display:flex;align-items:center;gap:14px;
  color:#fff;font-size:16px;font-weight:750}
html[data-tema="autoprime"] .apv-cta-tx .apc-svg{width:21px;height:21px;flex:none}
html[data-tema="autoprime"] .apv-cta-tel{display:inline-flex;align-items:center;gap:11px;flex:none;
  color:#fff;font-size:16px;font-weight:750;text-decoration:none}
html[data-tema="autoprime"] .apv-cta-tel .apc-svg{width:19px;height:19px;color:var(--ap-cyan)}

/* Nuestro trabajo */
html[data-tema="autoprime"] .serv-videos-section{width:min(calc(100% - 32px),var(--ap-ancho));
  max-width:none;margin:30px auto 0;padding:0;background:transparent}
html[data-tema="autoprime"] .serv-section-hd{margin:0 0 14px;padding:0;border:0}
html[data-tema="autoprime"] .serv-section-hd h2{margin:0;font-size:19px;font-weight:800;
  color:var(--ap-navy);letter-spacing:-.01em}
html[data-tema="autoprime"] .serv-videos-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px}
html[data-tema="autoprime"] .serv-video-card{border-radius:12px;overflow:hidden;border:1px solid #e7ecf1;
  background:#0d1b2a;width:100%}
/* Los videos del taller son VERTICALES (grabados con el teléfono) y la página
   les fija su proporción real con un style en línea. No se recortan a apaisado:
   de un 9:16 recortado a 4:3 queda una franja del medio que casi nunca se
   entiende. Se respeta la forma del video y sólo se enmarca. */
html[data-tema="autoprime"] .serv-video-thumb video,
html[data-tema="autoprime"] .serv-video-thumb iframe,
html[data-tema="autoprime"] .serv-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* 4.14 · Mi Cuenta ──────────────────────────────────────────────────────────
   Rediseño aprobado (maqueta cuenta.png). RE-ESTILADO: el marcado y la lógica de
   `cuenta.html` (login, registro, recuperar clave, pedidos, agendas) no se tocan.
   El cambio es de fondo: la página se pintaba ENTERA de marino con degradado y
   puntos, y la tarjeta era un vidrio translúcido que se confundía con el fondo.
   El diseño quiere lo contrario —fondo claro y UNA tarjeta marina sólida— para
   que el formulario destaque y el texto se lea.
   ⚠️ Las reglas de la página usan `body:has(#vAuth…)` y `#vAuth …`, que pesan
   más que un selector de clase; por eso cada regla de acá repite el mismo
   selector con el atributo del tema adelante. Sin eso no ganan. */
html[data-tema="autoprime"] body:has(#vAuth:not([style*="none"])){background:#f2f4f8}

/* ⚠️ EL "DOBLE ENCABEZADO" AL CARGAR. Las TRES vistas de esta pantalla (login,
   panel y suspendida) nacen con `display:none` y la página elige cuál mostrar
   recién cuando responde el servidor. Durante ese segundo no hay NADA entre la
   cabecera y el pie, y el pie —que también es marino— sube y queda pegado
   debajo: se ven dos franjas marinas apiladas y parece un segundo encabezado.
   El pie se ancla al fondo de la ventana con el patrón de siempre (cuerpo en
   columna + `margin-top:auto`), así el hueco queda EN BLANCO y ya no se lee
   como una barra. Acotado con `:has(#vAuth)` para que sólo aplique a Mi
   Cuenta: cambiar el cuerpo a columna en toda la vitrina sería otra cosa. */
html[data-tema="autoprime"] body:has(#vAuth){min-height:100vh;display:flex;
  flex-direction:column}
html[data-tema="autoprime"] body:has(#vAuth) #footer-root{margin-top:auto}
/* ⚠️ Y esto es la CONSECUENCIA de la línea de arriba, no un adorno. `.wrap`
   lleva `margin:0 auto`, y adentro de un contenedor flex los márgenes
   automáticos del eje transversal apagan el `stretch`: el bloque deja de ocupar
   el ancho disponible y pasa a medir lo que mide su contenido. Vacío no se
   notaba; con datos adentro sí — Pedidos/Vehículo/Citas quedaban en 818 px y
   Mis Datos, que va en dos columnas, saltaba a 1322, así que la barra de
   pestañas cambiaba de ancho al cambiar de pestaña. Se le devuelve el ancho
   completo; el `max-width` de cada vista sigue mandando. */
html[data-tema="autoprime"] body:has(#vAuth) > .wrap{width:100%}
html[data-tema="autoprime"] #vAuth{background:#f2f4f8;padding:34px 16px 54px;
  min-height:0;align-items:flex-start}
html[data-tema="autoprime"] #vAuth:before{display:none}   /* patrón de puntos */

/* ⚠️ DOBLE ENCABEZADO. Esta página trae su propia barra superior —marca a la
   izquierda, "Volver a la tienda" y "Salir" a la derecha— pensada para cuando la
   pantalla vivía sola. Con la cabecera del tema arriba quedaban DOS barras
   apiladas: 128 px de cabecera y otros 64-70 px de franja marina abajo, que se
   lee como un segundo encabezado.
   La franja se apaga: la marca ya está en la cabecera y "Volver a la tienda"
   sobra —el logo y todo el menú llevan a la tienda—. Lo único que NO se puede
   perder es "Salir", que no existe en la cabecera, así que se conserva suelto y
   discreto arriba a la derecha, sin barra que lo contenga. */
html[data-tema="autoprime"] .topbar{background:transparent;border-bottom:0;box-shadow:none;
  position:static}
html[data-tema="autoprime"] .topbar-in{max-width:var(--ap-ancho);padding:14px 0 0;
  justify-content:flex-end;min-height:0}
html[data-tema="autoprime"] .topbar .brand{display:none}
html[data-tema="autoprime"] #backLink{display:none}
/* ⚠️ El selector lleva `.top-actions` de más a propósito. Sin él pesa (1,2,1),
   exactamente lo mismo que `body:has(#vAuth…) .tlink` de la página —el `:has()`
   aporta el peso de su argumento, que es un id—, y ante empate gana la hoja que
   va después: la de la página, porque la compartida se carga al principio del
   <head>. El resultado era "Salir" en blanco sobre fondo claro, o sea invisible. */
/* Queda como enlace rojo pelado y no como botón con recuadro: el marcado le pone
   `background:none;border:none` EN LÍNEA, y un estilo en línea le gana a la hoja.
   Para dibujarle el recuadro haría falta `!important` en cada propiedad, y no vale
   la pena por decoración: en rojo sobre el fondo claro se lee igual de bien. */
html[data-tema="autoprime"] .topbar .top-actions #btnLogout{display:inline-flex;
  align-items:center;gap:8px;padding:8px 4px;font-size:13.5px;font-weight:750;color:#c0392b}
html[data-tema="autoprime"] .topbar .top-actions #btnLogout:hover{color:#8f2117}

/* La tarjeta: marino sólido, sin transparencia ni desenfoque, con el filo celeste
   arriba que llevan todas las tarjetas de esta vitrina. */
html[data-tema="autoprime"] #vAuth .auth-card{max-width:420px;background:#1c324d;
  border:1px solid #24395a;border-top:3px solid var(--ap-cyan);border-radius:16px;
  padding:30px 30px 26px;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 18px 44px rgba(9,22,40,.18)}
html[data-tema="autoprime"] #vAuth .auth-logo .lb{width:64px;height:64px;border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
html[data-tema="autoprime"] #vAuth .auth-title{font-size:23px;letter-spacing:1.4px}
html[data-tema="autoprime"] #vAuth .auth-sub{color:var(--ap-cyan);letter-spacing:2.4px;
  font-size:11.5px}
/* El chip con el nombre de la tienda sobra: el mismo nombre está dos renglones
   más arriba, en celeste, debajo de "MI CUENTA". En el diseño no está.
   Lleva !important porque el JS de la página le escribe `style="display:flex"`
   al detectar la tienda, y un estilo en línea le gana a cualquier hoja. */
html[data-tema="autoprime"] #vAuth .tenant{display:none!important}

/* Campos: el texto tiene que LEERSE. Antes quedaba oscuro sobre fondo oscuro. */
html[data-tema="autoprime"] #vAuth .lbl{color:rgba(255,255,255,.72);font-size:10px;
  letter-spacing:1.3px}
html[data-tema="autoprime"] #vAuth .iw input{height:48px;background:#2b3d57;
  border:1px solid #3a4c68;color:#fff;font-size:14.5px;font-weight:600}
html[data-tema="autoprime"] #vAuth .iw input::placeholder{color:rgba(255,255,255,.42);
  font-weight:500}
html[data-tema="autoprime"] #vAuth .iw .il{color:var(--ap-cyan)}
html[data-tema="autoprime"] #vAuth .iw .eye{color:rgba(255,255,255,.75)}

/* El celeste de la marca, el MISMO de "Agendar servicio" y "Reservar una hora":
   así toda la vitrina tiene un solo color de acción. Antes era el verde azulado
   de la maqueta, que no se repetía en ninguna otra pantalla. */
html[data-tema="autoprime"] #vAuth .btn.pri{height:50px;background:var(--ap-cyan);color:#fff;
  border-radius:10px;font-size:15px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase}
html[data-tema="autoprime"] #vAuth .btn.pri:hover{filter:brightness(1.08)}
html[data-tema="autoprime"] #vAuth .switch{color:rgba(255,255,255,.72)}
html[data-tema="autoprime"] #vAuth .switch button{color:var(--ap-cyan)}

/* 4.15 · Mi Cuenta — panel del cliente ──────────────────────────────────────
   Rediseño aprobado (maqueta cuenta.html.png). RE-ESTILADO: el formulario, sus
   validaciones y el guardado siguen siendo de la página; acá cambia cómo se ve y
   el componente agrega los iconos, la franja de "datos protegidos" y el botón de
   salir dentro de la ficha.
   ⚠️ Casi todas las reglas de la página van con `#vMe …` (un id), así que cada
   regla de acá repite el mismo id con el atributo del tema adelante o pierde. */
/* ⚠️ Mi Cuenta NO usa el ancho de la vitrina (1356). Lo que se lee acá es una
   lista corta —un pedido, una cita, una ficha de taller— y a 1356 cada tarjeta
   quedaba como un renglón perdido en medio de un campo vacío. A 1080 el bloque
   se lee de una sola pasada y las cuatro pestañas se ven igual de llenas.
   Es el mismo ancho que la pantalla trae de fábrica: no se le impone otro. */
html[data-tema="autoprime"] #vMe.wrap{max-width:1080px;padding:22px 16px 44px}

/* Ficha del perfil: filo celeste arriba, avatar redondo y el botón de salir
   adentro, arriba a la derecha. */
html[data-tema="autoprime"] #vMe .profile{position:relative;border:1px solid #e7ecf1;
  border-top:3px solid var(--ap-cyan);border-radius:14px;padding:22px 24px;gap:20px}
html[data-tema="autoprime"] #vMe .avatar{width:74px;height:74px;border-radius:50%;font-size:30px;
  background:linear-gradient(145deg,#0aa6c8,#1f5f6e)}
html[data-tema="autoprime"] #vMe .p-name{font-size:20px;font-weight:800;color:var(--ap-navy)}
/* ⚠️ El bloque del nombre tiene que poder ACHICARSE. Sin `min-width:0` no baja de
   lo que miden el nombre y el correo en una línea, y en tablet eso empujaba la
   ficha —y con ella toda la página— 83 px más allá de la pantalla. El correo se
   corta con puntos suspensivos en vez de estirar. */
html[data-tema="autoprime"] #vMe .p-info{min-width:0}
html[data-tema="autoprime"] #vMe .p-mail{min-width:0}
html[data-tema="autoprime"] #vMe .p-mail span{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
html[data-tema="autoprime"] #vMe .p-stats{gap:0}
html[data-tema="autoprime"] #vMe .p-stat{padding:0 26px}
html[data-tema="autoprime"] #vMe .p-stat .apu-ic{display:block;color:var(--ap-cyan);margin-bottom:5px}
html[data-tema="autoprime"] #vMe .p-stat .apu-ic .apc-svg{width:19px;height:19px}
html[data-tema="autoprime"] #vMe .p-stat-n{font-size:23px;font-weight:800;color:var(--ap-navy)}
html[data-tema="autoprime"] #vMe .p-stat-l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#7d8b9c}
/* El botón de salir va arriba a la derecha de la ficha, con su recuadro rojo.
   El hueco a la derecha lo reserva el `padding` de la ficha: sin eso las cifras
   se metían por debajo del botón. */
html[data-tema="autoprime"] #vMe .profile{padding-right:130px}
html[data-tema="autoprime"] #vMe .profile #btnLogout{position:absolute;top:20px;right:22px;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font-size:13px;font-weight:700;
  color:#d0342c;background:#fff;border:1.5px solid #f0c2bd;border-radius:9px}
html[data-tema="autoprime"] #vMe .profile #btnLogout:hover{background:#fff6f5;border-color:#e08b83}

/* Las pestañas, en su propia tarjeta */
html[data-tema="autoprime"] #vMe .tabs{background:#fff;border:1px solid #e7ecf1;border-radius:12px;
  padding:0 8px;margin-bottom:16px}
/* Las cuatro pestañas se reparten el ancho en partes iguales, como en el diseño;
   apretadas contra la izquierda dejaban media tarjeta vacía. */
html[data-tema="autoprime"] #vMe .tabs{display:flex}
/* ⚠️ Las CUATRO pestañas se escriben igual. La página le daba peso 500 a las
   inactivas y 700 a la activa, así que "Mis Datos" se leía más grande que sus
   tres hermanas y la barra quedaba despareja. Acá el único distintivo de la
   activa es el color, el fondo y el filo de abajo — nunca el tamaño de la letra.
   Medido contra el diseño: sus etiquetas son un 20% más anchas que las de 13 px,
   de ahí los 15 px (y el ícono sube a 13 para no quedar enano al lado). */
/* ⚠️ El `min-width:0` no sobra. Un renglón flexible no se encoge por debajo de
   lo que mide su contenido, así que en cuanto las cuatro dejan de caber la más
   larga ("Mis Pedidos") se queda ancha y las otras ceden: entre 560 y 620 px
   daban 145/140/123/128 en vez de cuatro iguales. Con el piso en cero se
   reparten parejo siempre, y el ícono se retira antes (ver abajo) para que el
   texto no quede apretado. */
html[data-tema="autoprime"] #vMe .tab{flex:1;min-width:0;justify-content:center;height:54px;
  font-size:15px;font-weight:700}
html[data-tema="autoprime"] #vMe .tab i{font-size:13px}
html[data-tema="autoprime"] #vMe .tab.on{color:var(--ap-navy);border-bottom-color:var(--ap-cyan);
  background:#f4fbfd}

/* "Mis datos" y "Seguridad" van APILADAS, una debajo de la otra. Estuvieron un
   tiempo lado a lado, como en la maqueta, pero eso obligaba a un bloque ancho
   para que entraran las dos, y ese ancho es el que después dejaba a las otras
   tres pestañas —que muestran una lista corta— con media pantalla vacía. Manda
   que las cuatro se vean parejas.
   ⚠️ Va con `.on` y NO a secas. La página muestra y esconde las pestañas con
   `.pane{display:none}` / `.pane.on{display:block}`, y un selector con id le gana
   a ese `display:none`: sin el `.on`, este panel quedaba visible en las CUATRO
   pestañas y "Mis datos" aparecía también en Pedidos, Vehículo y Citas. */
html[data-tema="autoprime"] #pane-datos.on{display:grid;grid-template-columns:1fr;gap:16px;
  align-items:start}
/* ⚠️ El filo celeste NO va en todas las tarjetas. Lo llevaban TODAS, y con dos
   ya competían entre sí; con diez la pestaña era una escalera de rayas. Un
   acento que se repite en cada fila deja de acentuar. Queda para lo que manda
   —el perfil, las fichas de "Mis datos", la próxima cita— y las filas de lista
   se quedan con su borde fino. */
html[data-tema="autoprime"] #vMe .card{border:1px solid #e7ecf1;
  border-radius:14px;padding:20px 22px;margin:0}
html[data-tema="autoprime"] #vMe .profile,
html[data-tema="autoprime"] #pane-datos .card,
html[data-tema="autoprime"] #vMe .cita-prox{border-top:3px solid var(--ap-cyan)}

/* Las listas respiran: sin separación las tarjetas se leían como una sola. */
html[data-tema="autoprime"] #pane-pedidos .card+.card,
html[data-tema="autoprime"] #pane-citas .card+.card,
html[data-tema="autoprime"] #pane-vehiculo .card+.card{margin-top:12px}

/* Historial por vehículo: el auto encabeza en navy, sus visitas van más suaves. */
html[data-tema="autoprime"] #vMe .ot{padding:0;overflow:hidden}
html[data-tema="autoprime"] #vMe .ot-auto{background:#fbfdfe;border-bottom-color:#eaeff4}
html[data-tema="autoprime"] #vMe .ot-auto>i{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] #vMe .ot-auto-t{color:var(--ap-navy);font-size:15.5px}
html[data-tema="autoprime"] #vMe .ot-auto-n{color:#93a1b1}
html[data-tema="autoprime"] #vMe .ot-item i{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] #vMe .ot-foot .tot{color:var(--ap-navy);font-size:17px}

/* La próxima cita: la hoja de almanaque en navy y el mes en celeste. */
html[data-tema="autoprime"] #vMe .cita-prox{padding:22px 24px}
html[data-tema="autoprime"] #vMe .cp-cal{border-color:#e2eaf1}
html[data-tema="autoprime"] #vMe .cp-dia{color:var(--ap-navy)}
html[data-tema="autoprime"] #vMe .cp-mes{background:var(--ap-cyan-dk)}
html[data-tema="autoprime"] #vMe .cp-eyebrow{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] #vMe .cp-serv{color:var(--ap-navy);font-size:20px}
html[data-tema="autoprime"] #vMe .cp-meta i{color:var(--ap-cyan-dk)}
html[data-tema="autoprime"] #vMe .cp-acc .btn{height:38px;padding:0 15px;font-size:13px}

html[data-tema="autoprime"] #vMe .lc-code{color:var(--ap-navy);font-size:14.5px}
html[data-tema="autoprime"] #vMe .sec-t{color:#93a1b1}
html[data-tema="autoprime"] #vMe .cierre{border-color:#dfe7ee;background:#fbfdfe;color:#6d7c8c}
html[data-tema="autoprime"] #vMe .cierre .btn{height:38px;padding:0 16px;font-size:13px}
html[data-tema="autoprime"] #vMe .card-t{display:flex;align-items:center;gap:11px;font-size:18px;
  font-weight:800;color:var(--ap-navy)}
html[data-tema="autoprime"] #vMe .card-t .apu-ct-ic{display:inline-flex;color:var(--ap-cyan)}
html[data-tema="autoprime"] #vMe .card-t .apu-ct-ic .apc-svg{width:22px;height:22px}
html[data-tema="autoprime"] #vMe .card-d{font-size:13px;color:#6d7c8c;margin:2px 0 0 33px}

/* Franja "Tus datos están protegidos" */
html[data-tema="autoprime"] .apu-prot{display:flex;align-items:center;gap:12px;margin:16px 0 0;
  padding:13px 16px;border:1px solid #d6eef5;border-radius:10px;background:#f3fbfd;
  font-size:13.5px;color:var(--ap-navy)}
html[data-tema="autoprime"] .apu-prot .apc-svg{width:19px;height:19px;color:var(--ap-cyan-dk)}

/* Campos con su icono adentro */
html[data-tema="autoprime"] #vMe .fgrid{gap:16px 18px;margin-top:16px}
/* ⚠️ `min-width:0` no es de adorno: los desplegables de Región y Comuna traen
   un ancho mínimo por su texto ("— Elegí región —" más el hueco del icono), y
   como cada columna de la grilla es `1fr` —que por defecto no baja de ese
   mínimo— la tarjeta se plantaba en 819 px y desbordaba la pantalla en tablet. */
html[data-tema="autoprime"] #vMe .fg{position:relative;min-width:0}
html[data-tema="autoprime"] #vMe .fg label{font-size:13px;font-weight:700;color:var(--ap-navy)}
html[data-tema="autoprime"] #vMe .fg .ro{font-weight:500;color:#93a1b1}
html[data-tema="autoprime"] #vMe .fg input,
html[data-tema="autoprime"] #vMe .fg select{height:46px;padding-left:44px;border:1.5px solid #e2e8ef;
  border-radius:10px;font-size:14px;color:var(--ap-navy);background-color:#fff}
html[data-tema="autoprime"] #vMe .fg input:disabled,
html[data-tema="autoprime"] #vMe .fg select:disabled{background-color:#f6f8fa;color:#7d8b9c}
html[data-tema="autoprime"] #vMe .fg input:focus,
html[data-tema="autoprime"] #vMe .fg select:focus{border-color:var(--ap-cyan)}
/* El icono se dibuja encima del campo; `pointer-events:none` para que no le robe
   el clic al desplegable de Región/Comuna. */
html[data-tema="autoprime"] .apu-fg-ic{position:absolute;left:14px;bottom:13px;line-height:0;
  color:var(--ap-cyan-dk);pointer-events:none}
html[data-tema="autoprime"] .apu-fg-ic .apc-svg{width:19px;height:19px}

/* ⚠️ `.pri` y `.gh` NO pueden verse igual. Estaban las dos pintadas de teal
   sólido: daba lo mismo cuando los únicos botones de la pantalla eran "Guardar
   cambios" y "Actualizar contraseña", pero al aparecer acciones secundarias
   —agendar, ver catálogo, bajar el calendario— toda la pantalla se llenaba de
   botones oscuros del mismo peso y ya nada guiaba la vista. El lleno queda para
   la acción principal de cada tarjeta; el resto va de contorno.
   `#btnPwd` viene marcado `.gh` desde la página aunque es el botón principal de
   su tarjeta, así que se lo trae de vuelta al lleno por id. */
html[data-tema="autoprime"] #vMe .btn{height:44px;padding:0 22px;border-radius:10px;
  font-size:14px;font-weight:750}
html[data-tema="autoprime"] #vMe .btn.pri,
html[data-tema="autoprime"] #vMe #btnPwd{background:#0b7386;color:#fff;border:0}
html[data-tema="autoprime"] #vMe .btn.pri:hover,
html[data-tema="autoprime"] #vMe #btnPwd:hover{filter:brightness(1.08)}
html[data-tema="autoprime"] #vMe .btn.gh{background:#fff;border:1.5px solid #dce4ec;
  color:var(--ap-navy)}
html[data-tema="autoprime"] #vMe .btn.gh:hover{border-color:var(--ap-cyan);
  color:var(--ap-cyan-dk);background:#f7fcfe}
html[data-tema="autoprime"] #vMe .btn.gh i{color:var(--ap-cyan-dk)}

/* ── 5 · Móvil ─────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  /* Servicios a una columna: a dos, con la foto de 245 px, al texto le quedaban
     240 px y los titulos empezaban a partirse en dos renglones. */
  html[data-tema="autoprime"] #serv-secciones{grid-template-columns:1fr}
  .ap-hd{grid-template-columns:170px 1fr auto;gap:16px;padding:10px 0}
  .ap-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .ap-ft{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .ap-ft-logo{grid-column:1/-1}
}
@media(max-width:1180px){
  html[data-tema="autoprime"] .apc-grid{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
}
@media(max-width:980px){
  .ap-utility{display:none}
  /* (Las dos tarjetas de Mi Cuenta ya van apiladas en todo ancho; acá no hace
     falta repetirlo.) */
  html[data-tema="autoprime"] #vMe .profile{flex-wrap:wrap;padding-right:110px}
  html[data-tema="autoprime"] #vMe .p-stat{padding:0 18px}
  /* Servicios: la franja de beneficios se apila. */
  /* ⚠️ Bajo 900 px la página le da a la foto un alto FIJO de 260 px: era para su
     diseño apilado (foto arriba, texto abajo). Acá la foto sigue al costado, así
     que ese alto hay que soltarlo o la tarjeta se estira a 262 px. */
  html[data-tema="autoprime"] .serv-sec-img{height:auto}
  html[data-tema="autoprime"] .apv-bene .apc-bene{grid-template-columns:1fr}
  html[data-tema="autoprime"] .apv-bene .apc-bene-it+.apc-bene-it{border-left:0;
    border-top:1px solid #e7eaef}
  html[data-tema="autoprime"] .serv-videos-grid{grid-template-columns:repeat(2,1fr)}
  /* El mapa pasa abajo y la tarjeta de "Cómo llegar" DEJA DE FLOTAR sobre él:
     en una pantalla angosta le tapaba casi todo, incluido el pin. Acá va
     apoyada debajo, y el mapa recupera su alto completo. */
  html[data-tema="autoprime"] .apc-grid{grid-template-columns:1fr;gap:16px}
  html[data-tema="autoprime"] .apc-mapa{min-height:0;overflow:visible;
    background:transparent;box-shadow:none;border-radius:0}
  html[data-tema="autoprime"] .apc-mapa-box{position:relative;inset:auto;height:300px;
    border-radius:16px;overflow:hidden;background:#e8eef3;box-shadow:0 6px 22px rgba(9,30,56,.07)}
  html[data-tema="autoprime"] .apc-llegar{position:static;width:auto;max-width:none;
    margin-top:14px;box-shadow:0 6px 22px rgba(9,30,56,.07)}
  html[data-tema="autoprime"] .apc-bene{grid-template-columns:1fr}
  html[data-tema="autoprime"] .apc-bene-it+.apc-bene-it{border-left:0;border-top:1px solid #e7eaef}
  /* Agenda: de 3 y 4 columnas a 2, y la barra de acción se apila. */
  html[data-tema="autoprime"] .ag-directos-grid{grid-template-columns:1fr 1fr}
  html[data-tema="autoprime"] .ag-cot-grid{grid-template-columns:1fr 1fr}
  html[data-tema="autoprime"] .apa-reserva{margin-left:0;width:100%;justify-content:center}
  /* Checkout: el resumen pasa abajo y las opciones dejan de ir de a dos.
     La primera línea es imprescindible: la grilla de dos columnas del tema tiene
     más peso que el colapso del CSS base y, sin esto, el formulario queda
     aplastado y el resumen se le monta encima. */
  html[data-tema="autoprime"]:has(#checkout-form) .wrap{grid-template-columns:1fr}
  html[data-tema="autoprime"]:has(#checkout-form) .summary-card{position:static}
  html[data-tema="autoprime"]:has(#checkout-form) #envio-group{grid-template-columns:1fr}
  html[data-tema="autoprime"]:has(#checkout-form) .form-section:nth-of-type(4) .form-body{grid-template-columns:1fr}
  html[data-tema="autoprime"]:has(#checkout-form) .row.one:has(#f-rut){grid-template-columns:1fr}
  .ap-hd{grid-template-columns:auto 1fr auto;gap:12px}
  .ap-burger{display:flex}
  .ap-nav{display:none}
  .ap-header.abierto .ap-nav{display:flex;flex-direction:column;align-items:stretch;
    grid-column:1/-1;grid-row:3;background:#fff;border-radius:var(--ap-r-sm);padding:6px}
  .ap-header.abierto .ap-nav-item>a{color:var(--ap-ink);padding:11px 14px}
  .ap-search{grid-column:1/-1;grid-row:2}
  .ap-search input{height:40px}
}
/* Los cuatro nombres CON su ícono piden 145 px cada uno, y por debajo de ~620 px
   de ventana ya no entran los cuatro. Antes de que se aprieten, el ícono se
   retira: sin él cada pestaña necesita 116 y las cuatro siguen midiendo igual
   hasta bien abajo. El corte va con holgura sobre el ancho donde deja de entrar,
   no a ojo. */
@media(max-width:660px){
  html[data-tema="autoprime"] #vMe .tab i{display:none}
  html[data-tema="autoprime"] #vMe .tab{padding:0 6px}
}
@media(max-width:560px){
  /* ⚠️ En teléfono la ficha NO se apila del todo. Apilada —avatar de 74 px,
     nombre, correo, contadores y el botón de salir, todo uno debajo del otro—
     se comía 370 px, más de un tercio de la pantalla, para decir quién sos.
     El avatar vuelve al costado del nombre, se achica, y los contadores bajan
     completos en su propio renglón: la misma información en ~250 px.
     El botón de salir sí vuelve al flujo: anclado en la esquina quedaba encima
     del nombre. */
  html[data-tema="autoprime"] #vMe .profile{flex-direction:row;text-align:left;
    flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px}
  html[data-tema="autoprime"] #vMe .avatar{width:52px;height:52px;font-size:21px;flex:0 0 auto}
  html[data-tema="autoprime"] #vMe .p-info{flex:1 1 0;min-width:0}
  html[data-tema="autoprime"] #vMe .p-name{font-size:17px}
  html[data-tema="autoprime"] #vMe .p-stats{flex:1 0 100%;order:3}
  html[data-tema="autoprime"] #vMe .profile #btnLogout{order:2;flex:0 0 auto;
    padding:7px 13px;font-size:12.5px}
  html[data-tema="autoprime"] #vMe .profile #btnLogout{position:static;align-self:center}
  html[data-tema="autoprime"] #vMe .fgrid{grid-template-columns:1fr}
  html[data-tema="autoprime"] #vMe .p-stat{padding:0 14px}
  html[data-tema="autoprime"] #vMe .tab{font-size:12px;padding:0 4px}
  /* Servicios en teléfono: el encabezado y la barra de reserva se apilan, y la
     foto de la tarjeta baja a 108 px para que quede lugar al texto. */
  html[data-tema="autoprime"] .apv-hd .apv-wrap{flex-direction:column;align-items:stretch;gap:12px}
  html[data-tema="autoprime"] .apv-hd h1{font-size:20px}
  html[data-tema="autoprime"] .apv-btn{justify-content:center}
  html[data-tema="autoprime"] .serv-seccion{grid-template-columns:108px minmax(0,1fr)}
  html[data-tema="autoprime"] .serv-sec-body{padding:11px 13px 12px}
  html[data-tema="autoprime"] .serv-sec-title{font-size:15.5px}
  html[data-tema="autoprime"] .apv-sec-hd{flex-direction:column;align-items:flex-start;gap:6px}
  html[data-tema="autoprime"] .apv-cta .apv-wrap{flex-direction:column;align-items:stretch;gap:13px;
    padding:16px}
  html[data-tema="autoprime"] .apv-cta-tel{justify-content:center}
  .ap-wrap{width:min(calc(100% - 20px),var(--ap-ancho))}
  html[data-tema="autoprime"] .apc-wrap{width:calc(100% - 20px);padding:16px 0 26px}
  html[data-tema="autoprime"] .apc-h1{font-size:28px}
  html[data-tema="autoprime"] .apc-sub{font-size:13.5px}
  html[data-tema="autoprime"] .apc-card{padding:18px;border-radius:14px}
  html[data-tema="autoprime"] .apc-chd-tx p{max-width:none}
  html[data-tema="autoprime"] .apc-fila{gap:14px;padding:14px 0}
  html[data-tema="autoprime"] .apc-fila-ic{width:42px;height:42px;flex:0 0 42px;font-size:16px}
  /* Los dos botones apilados: en 390 px ninguno de los dos cabe con su texto. */
  html[data-tema="autoprime"] .apc-acc{grid-template-columns:1fr;padding-top:18px}
  html[data-tema="autoprime"] .apc-mapa-box{height:250px;border-radius:14px}
  html[data-tema="autoprime"] .apc-llegar{padding:15px;border-radius:12px}
  html[data-tema="autoprime"] .apc-pin{top:44%;font-size:42px}
  html[data-tema="autoprime"] .apc-bene{border-radius:14px}
  html[data-tema="autoprime"] .apc-bene-it{padding:14px 18px;gap:14px}
  html[data-tema="autoprime"] .apc-bene-ic{width:48px;height:48px;flex:0 0 48px;font-size:18px}
  /* Agenda en 390: una columna, y los pasos sin los números sueltos (no entran). */
  html[data-tema="autoprime"] .ag-card{padding:0 15px 20px}
  html[data-tema="autoprime"] .ag-panel-head{margin:0 -15px 0;padding:18px 15px 0}
  html[data-tema="autoprime"] #ag-p1 .ag-card{padding:0}
  html[data-tema="autoprime"] #ag-p1 .ag-panel-head{padding:18px 15px 12px}
  html[data-tema="autoprime"] .apa-cuerpo{padding:0 2px;margin-top:16px}
  html[data-tema="autoprime"] .ag-panel-head-tx h3{font-size:21px}
  html[data-tema="autoprime"] .ag-directos-grid,
  html[data-tema="autoprime"] .ag-cot-grid{grid-template-columns:1fr}
  /* En 390 px los números no entran al lado del rótulo: se apagan. El riel
     tampoco asoma por los extremos —no sobra ancho— y los círculos achican. */
  html[data-tema="autoprime"] .ag-step-label[data-num]:not([data-num="1"]):after{display:none}
  /* En móvil el encabezado se apila, así que el riel vuelve al borde. */
  html[data-tema="autoprime"] .ag-stepper{width:100%;margin:20px 0 4px;padding:0 0 26px}
  html[data-tema="autoprime"] .ag-stepper:before,
  html[data-tema="autoprime"] .ag-stepper:after{display:none}
  html[data-tema="autoprime"] .ag-step-circle{width:34px;height:34px;font-size:14px}
  html[data-tema="autoprime"] .ag-step.active .ag-step-circle,
  html[data-tema="autoprime"] .ag-step.done .ag-step-circle{width:38px;height:38px}
  html[data-tema="autoprime"] .ag-step-circle .apc-svg{width:18px;height:18px}
  html[data-tema="autoprime"] .ag-step.active .ag-step-circle .apc-svg,
  html[data-tema="autoprime"] .ag-step.done .ag-step-circle .apc-svg{width:20px;height:20px}
  html[data-tema="autoprime"] .ag-step-label{font-size:11px;top:calc(100% + 8px)}
  html[data-tema="autoprime"] .ag-step-line{margin:0 4px;min-width:10px}
  /* En móvil los dos botones siguen centrados; sólo achican. */
  html[data-tema="autoprime"] .ag-nav .btn{width:44px;min-width:44px;height:44px}
  html[data-tema="autoprime"] .apa-btns{gap:14px}
  html[data-tema="autoprime"]:has(#checkout-form) .apk-hd h1{font-size:26px}
  html[data-tema="autoprime"]:has(#checkout-form) .section-hd{padding:17px 16px 0}
  html[data-tema="autoprime"]:has(#checkout-form) .form-body{padding:13px 16px 18px}
  html[data-tema="autoprime"]:has(#checkout-form) .btn-submit{margin:4px 16px 0;width:calc(100% - 32px)}
  html[data-tema="autoprime"]:has(#checkout-form) .apk-promesa,
  html[data-tema="autoprime"]:has(#checkout-form) .alerta-error{margin-left:16px;margin-right:16px}
  html[data-tema="autoprime"]:has(#checkout-form) .row{grid-template-columns:1fr}
  /* Las marcas de tarjeta bajan de fila: al lado del texto no entran en 390 px. */
  html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-card{flex-wrap:wrap}
  html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-marcas{order:4;width:100%;gap:8px}
  html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-marcas img{width:96px;height:40px;padding:7px 11px}
  html[data-tema="autoprime"]:has(#checkout-form) #pago-group .opt-icon{min-width:0;width:100%;
    order:4;margin-top:4px}
  html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta{gap:12px}
  html[data-tema="autoprime"]:has(#checkout-form) .apk-acepta .opt-marcas{gap:12px;flex-wrap:wrap}
  .ap-hd{min-height:auto;padding:10px 0}
  /* mismo tamaño que el pie, también acá */
  .ap-cart .ap-cart-txt{display:none}
  .ap-ft{grid-template-columns:1fr;gap:18px}
  .ap-footer{margin-top:6px;padding:18px 0 76px}
  html[data-tema="autoprime"] .wf{right:16px;bottom:16px}
  html[data-tema="autoprime"] .wf .wf-ic{width:44px;height:44px;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
  html[data-tema="autoprime"] .wf .wf-ic svg{width:22px;height:22px}
}