/* FullCare Campestre v3. Móvil primero.
   Azul #22338a y rojo #c01823 del logo sobre tinta azul noche y papel frío.
   Archivo variable: itálica expandida en display (eco del logo), normal en texto, condensada en cifras.
   Cada familia de paquetes tiene su acento: Basic azul, ExtraCare gemas, FullCare rojo sobre oscuro. */

@font-face { font-family: 'Archivo'; src: url('/fuentes/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fuentes/archivo-italica.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --tinta: #090e2b;
  --noche: #121a46;
  --noche-2: #19225a;
  --azul: #22338a;
  --azul-vivo: #2e45bd;
  --azul-luz: #8ea2ff;
  --rojo: #c01823;
  --rojo-vivo: #dc2a35;
  --papel: #f3f5fa;
  --blanco: #fff;
  --acero: #a9b1cc;
  --pizarra: #4a5274;
  --linea-oscura: #262f63;
  --linea-clara: #d7dcea;
  --oro: #f5b301;
  --verde: #2fbf71;

  --fondo: var(--tinta);
  --texto: var(--blanco);
  --texto-2: var(--acero);
  --borde: var(--linea-oscura);
  --acento: var(--azul-luz);
  --superficie: var(--noche);

  --cabecera: 64px;
  --margen: 16px;
  --ancho: 1240px;
  --seccion: clamp(64px, 9vw, 128px);
  --radio: 12px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --frena: cubic-bezier(.12, .82, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 24px); background: var(--tinta); }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
picture { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
th { font-weight: inherit; text-align: left; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--blanco); color: var(--tinta); transform: translateY(-200%); }
.saltar:focus { transform: none; }
.contenedor { width: min(100% - var(--margen) * 2, var(--ancho)); margin-inline: auto; }
.icono { width: 20px; height: 20px; flex: none; }

/* ---------- Tipografía ---------- */

.titulo {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  font-style: italic; font-stretch: 108%; font-weight: 850;
  line-height: 1.02; letter-spacing: -.015em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.titulo--chico { font-size: clamp(1.4rem, 3.6vw, 2rem); }
.entrada { margin-top: 12px; max-width: 52ch; color: var(--texto-2); font-size: 1.0625rem; text-wrap: pretty; }

.seccion { padding-block: var(--seccion); background: var(--fondo); color: var(--texto); }
.seccion--papel { --fondo: var(--papel); --texto: var(--tinta); --texto-2: var(--pizarra); --borde: var(--linea-clara); --acento: var(--azul); --superficie: var(--blanco); }
.seccion__cabeza { margin-bottom: clamp(28px, 4vw, 52px); }
.seccion__cabeza--fila { display: grid; gap: 14px; align-items: end; }
.seccion__cabeza--fila .entrada { margin-top: 0; }

.vigencia { display: flex; gap: 10px; align-items: flex-start; margin-top: 32px; max-width: 70ch; color: var(--texto-2); font-size: .9375rem; }
.vigencia .icono { margin-top: 2px; color: var(--acento); }
.mas-paquetes { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-block: 28px 8px; color: var(--texto-2); }

.sello {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 2px 9px; border-radius: 99px;
  background: rgb(9 14 43 / .72); color: var(--blanco);
  font-size: .6875rem; font-weight: 650; font-style: normal; letter-spacing: .01em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none;
}
.sello--real { background: rgb(47 191 113 / .9); color: #04210f; }

/* ---------- Botones y enlaces ---------- */

.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 6px;
  font-size: .9688rem; font-weight: 750; font-stretch: 104%; line-height: 1.15;
  text-decoration: none; text-align: center;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--curva);
}
.boton:active { transform: scale(.97); }
.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: var(--rojo-vivo); }
.boton--azul { background: var(--azul); color: var(--blanco); }
.boton--azul:hover { background: var(--azul-vivo); }
.boton--linea { border-color: var(--borde); color: var(--texto); }
.boton--linea:hover { border-color: var(--texto); }
.boton--claro { border-color: rgb(255 255 255 / .35); color: var(--blanco); }
.boton--chico { min-height: 42px; padding: 8px 14px; font-size: .875rem; gap: 8px; }
.boton--chico .icono { width: 18px; height: 18px; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .45; pointer-events: none; }

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; color: var(--acento); font-weight: 750; text-decoration: none; }
.enlace-flecha .icono { transition: transform .25s var(--curva); }
.enlace-flecha:hover .icono { transform: translateX(4px); }
.enlace-flecha:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Cabecera ---------- */

.cabecera { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cabecera); transition: box-shadow .25s; }
/* El fondo con desenfoque va en un pseudoelemento: un backdrop-filter en la cabecera encerraría
   al menú y al menú de servicios (position: fixed) dentro de su altura. */
.cabecera::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(9 14 43 / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s; }
.cabecera--solida, .cabecera:has(.menu--abierto), .cabecera:has(.mega--abierto) { box-shadow: 0 1px 0 var(--linea-oscura); }
.cabecera--solida::before, .cabecera:has(.menu--abierto)::before, .cabecera:has(.mega--abierto)::before { opacity: 1; }
.cabecera__fila { display: flex; align-items: center; gap: 8px; width: min(100% - var(--margen) * 2, 1440px); height: 100%; margin-inline: auto; }
.cabecera__logo { margin-right: auto; }
.cabecera__logo img { width: 116px; height: auto; }
.cabecera__menu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; color: var(--blanco); }
.cabecera__menu .icono { width: 24px; height: 24px; }
.cabecera__cotizar span { display: none; }
.cabecera__avance { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--azul-luz), var(--rojo)); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) { .cabecera__avance { animation: avance linear both; animation-timeline: scroll(root); } }
@keyframes avance { to { transform: scaleX(1); } }

.chip-vehiculo {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1.5px solid rgb(255 255 255 / .25); border-radius: 99px; color: var(--blanco);
  font-size: .875rem; font-weight: 650; transition: border-color .18s, background-color .18s;
}
.chip-vehiculo:hover { border-color: var(--blanco); }
.chip-vehiculo [data-chip-texto] { display: none; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-vehiculo--elegido { border-color: var(--azul-luz); background: rgb(142 162 255 / .14); }

/* Menú móvil (pantalla completa) */
.menu {
  position: fixed; inset: var(--cabecera) 0 0; display: flex; flex-direction: column; gap: 24px;
  padding: 16px var(--margen) 32px; background: var(--tinta); overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, visibility .25s, transform .3s var(--curva);
}
.menu--abierto { visibility: visible; opacity: 1; transform: none; }
.menu__lista > li { border-bottom: 1px solid var(--linea-oscura); }
.menu__enlace { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; font-size: 1.5rem; font-style: italic; font-stretch: 110%; font-weight: 850; text-decoration: none; }
.menu__enlace[aria-current='page'], .menu__enlace--activo { color: var(--azul-luz); }
.menu__boton { display: none; }
.menu__boton .icono { transition: transform .25s; }
.mega__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0 14px; }
.mega__division, .mega__paquetes { display: grid; gap: 2px; padding: 14px; border-radius: 10px; background: var(--noche); text-decoration: none; }
.mega__icono { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 10px; background: rgb(142 162 255 / .14); color: var(--azul-luz); }
.mega__nombre { font-weight: 800; line-height: 1.2; }
.mega__etiquetas { color: var(--acero); font-size: .8125rem; line-height: 1.35; }
.mega__paquetes { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; background: var(--azul); }
.mega__paquetes .mega__etiquetas { color: rgb(255 255 255 / .8); }
.mega__paquetes .mega__nombre, .mega__paquetes .mega__etiquetas { grid-column: 1; }
.mega__paquetes .icono { grid-column: 2; grid-row: 1 / span 2; }
.mega__atajos { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; font-size: .9375rem; }
.mega__atajos a { color: var(--acero); }
.menu__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.menu__redes { grid-column: 1 / -1; display: flex; gap: 14px; }
.menu__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-oscura); }

/* Globo para elegir vehículo */
.globo-vehiculo {
  position: fixed; inset: calc(var(--cabecera) + 8px) var(--margen) auto auto; margin: 0;
  width: min(400px, 100vw - var(--margen) * 2); padding: 20px;
  border: 1px solid var(--linea-clara); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 60px rgb(9 14 43 / .35);
  --borde: var(--linea-clara); --acento: var(--azul); --texto: var(--tinta); --texto-2: var(--pizarra); --superficie: var(--papel);
}
.globo-vehiculo__titulo { font-size: 1.125rem; font-weight: 800; }
.globo-vehiculo__texto { margin-top: 2px; color: var(--pizarra); font-size: .9375rem; }
.globo-vehiculo__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

/* ---------- Portada cinematográfica ---------- */

.portada {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(100svh, 640px);
  padding: calc(var(--cabecera) + 28px) 0 calc(12vw + 24px);
  background: radial-gradient(80% 60% at 10% 0, rgb(34 51 138 / .5), transparent 70%), #000;
}
/* Texto y auto en zonas separadas de la rejilla: nunca se enciman, ni al animar ni al hacer scroll. */
.portada__rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'cabeza' 'accion' 'auto'; }
.portada__cabeza { grid-area: cabeza; position: relative; z-index: 2; }
.portada__accion { grid-area: accion; position: relative; z-index: 2; }
.portada__escenario { grid-area: auto; position: relative; z-index: 1; margin-top: 24px; pointer-events: none; }
.portada__camara { position: relative; transform-origin: 50% 60%; }
.portada__auto { position: relative; width: 140%; margin-left: -30%; aspect-ratio: 3500 / 1820; }
.portada__auto picture, .portada__auto img { width: 100%; height: 100%; object-fit: contain; }
.portada__auto img { -webkit-box-reflect: below -9% linear-gradient(transparent 78%, rgb(255 255 255 / .16)); }
.portada__haz { position: absolute; left: 50%; top: 70%; width: 70%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgb(205 220 255 / .32), transparent); mix-blend-mode: screen; opacity: 0; }
.portada__faro { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgb(226 236 255 / .85) 7%, rgb(170 195 255 / .28) 24%, transparent 62%); mix-blend-mode: screen; opacity: 0; }
.portada__faro--cerca { left: 62.9%; top: 67.1%; width: 19%; }
.portada__faro--lejos { left: 90.4%; top: 55.6%; width: 12%; }
.portada__barrido { position: absolute; inset: 0; opacity: 0; background: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: overlay; }
.portada__piso { position: absolute; left: -10%; right: -10%; bottom: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgb(142 162 255 / .6) 50%, transparent); box-shadow: 0 0 24px 2px rgb(142 162 255 / .35); opacity: .7; }
/* Las estelas solo cruzan la zona del auto. */
.portada__estelas { position: absolute; inset: 0; overflow: hidden; }
.portada__estela { position: absolute; left: 0; height: 3px; width: 70%; border-radius: 3px; opacity: 0; background: linear-gradient(90deg, transparent, var(--rojo) 55%, #fff); box-shadow: 0 0 22px 2px var(--rojo); }
.portada__estela--a { top: 42%; }
.portada__estela--b { top: 54%; width: 45%; background: linear-gradient(90deg, transparent, var(--azul-luz) 60%, #fff); box-shadow: 0 0 18px var(--azul-luz); }
.portada__estela--c { top: 66%; width: 90%; height: 2px; }

.portada__lineas { width: 70px; color: var(--rojo); margin-bottom: 18px; }
.portada__titulo {
  font-size: clamp(2.3rem, 10.4vw, 7.4rem);
  font-style: italic; font-stretch: 122%; font-weight: 900;
  line-height: .92; letter-spacing: -.02em; text-transform: uppercase;
}
.portada__linea { display: block; }
/* Altura reservada: el titular no empuja lo de abajo cuando llega la fuente. */
.portada__titulo { min-height: calc(4 * .92em); }
/* Las palabras esperan a la fuente de marca (máx. 2.5 s) para no reacomodarse a la vista. */
.js:not(.fuentes) .palabra > span { animation-play-state: paused !important; }
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .14em .06em .02em; margin: 0 -.12em -.06em 0; }
.palabra > span { display: inline-block; }
.portada__sub { margin-top: 20px; max-width: 34ch; color: #c9d0e6; font-size: 1.125rem; }
.portada__bajar {
  position: absolute; z-index: 3; left: 50%; bottom: calc(12vw + 6px); translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: 2px;
  color: var(--acero); font-size: .8125rem; font-weight: 650; text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* 0 s: estelas de luz cruzan. 0.1 s: el auto llega y frena. 0.3 s: titular palabra por palabra.
     1.2 s: faros y luz en el piso. 1.6 s: destello en la carrocería. Después, cámara lenta. */
  .portada__estela--a { animation: estela .9s cubic-bezier(.3, .4, .2, 1) .05s both; }
  .portada__estela--b { animation: estela .8s cubic-bezier(.3, .4, .2, 1) .2s both; }
  .portada__estela--c { animation: estela 1s cubic-bezier(.3, .4, .2, 1) .35s both; }
  .portada__auto { animation: llega 1.7s var(--frena) .1s both; }
  .portada__faro { animation: enciende-faro 1.1s linear 1.15s both; }
  .portada__faro--lejos { animation-delay: 1.25s; }
  .portada__haz { animation: luz-piso 1.2s ease-out 1.3s both; }
  .portada__barrido { animation: barrido 1.4s var(--curva) 1.7s both; }
  .portada__camara { animation: camara 18s ease-in-out 3s infinite alternate; }
  .portada__lineas rect { transform-box: fill-box; transform-origin: 100% 50%; animation: estira .7s var(--curva) both; }
  .portada__lineas rect:nth-child(2) { animation-delay: .08s; }
  .portada__lineas rect:nth-child(3) { animation-delay: .16s; }
  .portada__lineas rect:nth-child(4) { animation-delay: .24s; }
  .portada__lineas circle { animation: aparece-suave .4s ease-out .5s both; }
  .portada__titulo .palabra > span { animation: palabra .9s var(--frena) both; animation-delay: calc(.3s + var(--i) * .07s); }
  .portada__sub { animation: aparece .6s var(--curva) .75s both; }
  .portada__botones { animation: aparece .45s var(--curva) .15s both; }
  .cabezal__titulo .palabra > span { animation: palabra .8s var(--frena) both; animation-delay: calc(.05s + var(--i) * .06s); }

  @supports (animation-timeline: scroll()) {
    .portada__escenario { animation: escena-sale linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .portada__cabeza, .portada__accion { animation: texto-sale linear both; animation-timeline: scroll(root); animation-range: 10vh 80vh; }
  }
}
@keyframes estela { 0% { opacity: 1; transform: translateX(150%); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-110%); } }
@keyframes llega { from { opacity: 0; transform: translate3d(38%, 1%, 0) scale(.94); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes luz-piso { to { opacity: 1; } }
@keyframes camara { to { transform: scale(1.03) translate3d(1%, -.6%, 0); } }
@keyframes palabra { from { transform: translateY(108%) skewY(9deg); } }
@keyframes escena-sale { to { transform: translate3d(7%, 5%, 0) scale(1.06); opacity: .25; } }
@keyframes texto-sale { to { transform: translateY(-10vh); opacity: 0; } }
@keyframes estira { from { transform: scaleX(0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } }
@keyframes aparece-suave { from { opacity: 0; } }
@keyframes enciende-faro { 0% { opacity: 0; transform: scale(.5); } 9% { opacity: .9; transform: scale(.8); } 15% { opacity: .2; } 24% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes barrido { from { opacity: 1; background-position: 130% 0; } to { opacity: 1; background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .portada__faro, .portada__haz { opacity: 1; } .portada__faro--lejos { opacity: .8; } }

/* Corte inclinado hacia la sección siguiente (la inclinación del logo) */
.categorias { position: relative; z-index: 3; margin-top: -12vw; padding-top: calc(var(--seccion) + 6vw); clip-path: polygon(0 12vw, 100% 0, 100% 100%, 0 100%); }

/* ---------- Cabezal (páginas interiores) ---------- */

.cabezal { position: relative; overflow: hidden; padding: calc(var(--cabecera) + 28px) 0 clamp(48px, 7vw, 96px); background: radial-gradient(60% 80% at 100% 0, rgb(34 51 138 / .55), transparent 70%), var(--tinta); }
.cabezal__lineas { position: absolute; right: -40px; top: calc(var(--cabecera) + 12px); width: 260px; color: var(--azul); opacity: .5; }
.cabezal__rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.migas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--acero); font-size: .9375rem; }
.migas a { color: var(--acero); }
.migas [aria-current] { color: var(--blanco); }
.cabezal__titulo { font-size: clamp(1.9rem, 8.2vw, 5.4rem); font-style: italic; font-stretch: clamp(108%, 100% + 1vw, 120%); font-weight: 900; line-height: .94; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.cabezal__intro { margin-top: 18px; max-width: 46ch; color: #c9d0e6; font-size: 1.125rem; }
.cabezal__imagen { position: relative; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.cabezal__imagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cabezal__imagen .sello { left: 9%; }
.cabezal__arte { display: none; }
@media (prefers-reduced-motion: no-preference) { .cabezal__imagen { animation: abre 1s var(--frena) .1s both; } }
@keyframes abre { from { clip-path: polygon(7% 0, 7% 0, 0 100%, 0 100%); } }

/* ---------- Categorías ---------- */

.categorias__rejilla { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; margin-inline: calc(var(--margen) * -1); padding: 0 var(--margen) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.categorias__rejilla::-webkit-scrollbar { display: none; }
.categoria { scroll-snap-align: start; }
.categoria a { position: relative; isolation: isolate; display: block; height: 380px; overflow: hidden; border-radius: var(--radio); background: var(--tinta); color: var(--blanco); text-decoration: none; }
.categoria__foto, .categoria__foto picture { position: absolute; inset: 0; }
.categoria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.categoria a::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgb(9 14 43 / .92)); }
.categoria__texto { position: absolute; left: 20px; right: 72px; bottom: 20px; z-index: 2; display: grid; gap: 10px; }
.categoria__nombre { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-style: italic; font-stretch: 112%; font-weight: 900; line-height: .95; text-transform: uppercase; }
.categoria__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.categoria__etiquetas span { padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .14); font-size: .8125rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.categoria__flecha { position: absolute; right: 16px; bottom: 18px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--rojo); transition: transform .35s var(--curva); }
.categoria a:hover img { transform: scale(1.06); }
.categoria a:hover .categoria__flecha { transform: translateX(4px) rotate(-30deg); }
.arte-hogar { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14%; place-items: center; padding: 18% 22% 34%; background: linear-gradient(150deg, var(--azul-vivo), var(--azul) 60%, #1a2670); color: var(--blanco); }
.arte-hogar .icono { width: 100%; height: auto; stroke-width: 1.1; opacity: .9; }
.arte-hogar--grande { position: relative; aspect-ratio: 4 / 3; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); padding: 12% 20%; }

/* ---------- Cotizador ---------- */

.seccion--buscador { background: radial-gradient(70% 60% at 100% 0, rgb(34 51 138 / .45), transparent 70%), radial-gradient(50% 50% at 0 100%, rgb(192 24 35 / .16), transparent 70%), var(--tinta); }
.buscador__cabeza { display: grid; gap: 18px; margin-bottom: 28px; }
.buscador__pasos { display: flex; gap: 6px; }
.buscador__pasos li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--linea-oscura); color: var(--acero); font-size: .875rem; font-weight: 650; transition: all .3s var(--curva); }
.buscador__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--noche-2); font-size: .8125rem; font-style: italic; font-weight: 900; }
.buscador__etiqueta { display: none; }
.buscador__pasos [data-estado='actual'] { border-color: var(--azul-luz); color: var(--blanco); }
.buscador__pasos [data-estado='actual'] .buscador__n { background: var(--azul-luz); color: var(--tinta); }
.buscador__pasos [data-estado='actual'] .buscador__etiqueta { display: inline; }
.buscador__pasos [data-estado='hecho'] .buscador__n { background: var(--azul); color: var(--blanco); }

.panel { outline: none; }
@media (prefers-reduced-motion: no-preference) { .panel:not([hidden]) { animation: panel-entra .5s var(--frena); } }
@keyframes panel-entra { from { opacity: 0; transform: translateX(28px); } }
.panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.panel__titulo { margin-bottom: 18px; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.15; outline: none; }
.panel__cabeza .panel__titulo { margin-bottom: 0; }
.panel__chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 99px; background: var(--noche); font-size: .9375rem; }
.panel__chip button, .resumen__datos button { padding: 6px 12px; border-radius: 99px; color: var(--azul-luz); font-weight: 700; font-size: .875rem; }
.panel__chip button:hover, .resumen__datos button:hover { background: rgb(142 162 255 / .14); }
.panel__nota { margin-top: 12px; color: var(--acero); font-size: .875rem; }
.panel__pie { margin-top: 22px; }
.panel__acciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; }
.panel__acciones .boton--azul { margin-left: auto; }

.necesidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.necesidad {
  position: relative; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center;
  padding: 16px; border: 1.5px solid var(--linea-oscura); border-radius: var(--radio); background: var(--noche);
  cursor: pointer; transition: border-color .2s, background-color .2s, transform .25s var(--curva);
}
.necesidad input { position: absolute; opacity: 0; pointer-events: none; }
.necesidad__icono { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: rgb(142 162 255 / .13); color: var(--azul-luz); transition: background-color .2s, color .2s; }
.necesidad__icono .icono { width: 26px; height: 26px; }
.necesidad__nombre { font-weight: 750; line-height: 1.2; }
.necesidad__linea { color: var(--acero); font-size: .875rem; line-height: 1.35; }
.necesidad:hover { border-color: var(--acero); transform: translateY(-2px); }
.necesidad:has(input:checked) { border-color: var(--azul-luz); background: var(--noche-2); }
.necesidad:has(input:checked) .necesidad__icono { background: var(--azul-luz); color: var(--tinta); }
.necesidad:has(input:focus-visible) { outline: 2px solid var(--azul-luz); outline-offset: 2px; }
.necesidad:has(input[value='nose']) { border-style: dashed; }

/* Campos de texto */
.campos { display: grid; gap: 12px; }
.campos--auto { grid-template-columns: 1fr 1fr; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .9375rem; font-weight: 650; }
.campo small { color: var(--texto-2); font-weight: 500; }
.campo input {
  width: 100%; min-width: 0; min-height: 50px; padding: 10px 14px;
  border: 1.5px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font-size: 1rem;
  transition: border-color .18s;
}
.campo input::placeholder { color: var(--texto-2); opacity: .7; }
.campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo [aria-invalid='true'] { border-color: var(--rojo-vivo); }

/* Resumen del cotizador */
.resumen { display: grid; gap: 14px; }
.resumen__tarjeta { padding: 22px; border: 1px solid var(--linea-oscura); border-radius: var(--radio); background: linear-gradient(160deg, var(--noche-2), var(--noche)); }
.resumen__datos > div { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea-oscura); }
.resumen__datos dt { grid-column: 1; color: var(--acero); font-size: .8125rem; font-weight: 600; }
.resumen__datos dd { grid-column: 1; font-weight: 750; line-height: 1.3; }
.resumen__datos button { grid-column: 2; grid-row: 1 / span 2; }
.resumen__incluye { margin-top: 16px; }
.resumen__incluye p { margin-bottom: 8px; color: var(--acero); font-size: .8125rem; font-weight: 600; }
.resumen__incluye ul { display: grid; gap: 6px; font-size: .9375rem; line-height: 1.35; }
.resumen__incluye li { position: relative; padding-left: 24px; }
.resumen__incluye li::before { content: ''; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 2.4px solid var(--azul-luz); border-bottom: 2.4px solid var(--azul-luz); transform: rotate(-45deg); }
.resumen__precio { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--linea-oscura); }
.resumen__precio span { color: var(--acero); font-weight: 600; }
.resumen__precio strong { font-size: 1.75rem; font-stretch: 80%; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.resumen__precio strong.es-texto { font-size: 1.0625rem; font-stretch: 100%; font-weight: 750; }
.resumen__envio { display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--linea-oscura); border-radius: var(--radio); background: var(--noche); }
.resumen__nota { color: var(--acero); font-size: .875rem; }
.resumen__error { padding: 10px 12px; border: 1px solid var(--rojo-vivo); border-radius: 8px; background: rgb(192 24 35 / .18); font-size: .9375rem; }
.resumen__listo { color: #7ee2a8; font-size: .9375rem; font-weight: 650; }
.panel > .resumen__error { margin-top: 16px; }

/* ---------- Vehículos ---------- */

.vehiculos__titulo { margin-bottom: 8px; color: var(--texto-2); font-size: .875rem; font-weight: 650; }
.vehiculos__opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vehiculo {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 10px 6px; border: 1.5px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--texto); font-size: .8125rem; font-weight: 650; line-height: 1.2; text-align: center;
  cursor: pointer; transition: border-color .18s, background-color .18s, color .18s;
}
.vehiculo input { position: absolute; opacity: 0; pointer-events: none; }
.vehiculo:hover { border-color: var(--texto-2); }
.vehiculo:has(input:focus-visible), .vehiculo--boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.vehiculo:has(input:checked), .vehiculo--activo { border-color: var(--azul); background: var(--azul); color: var(--blanco); }
.vehiculo__tipo { color: var(--texto-2); font-size: .75rem; font-weight: 600; }
.vehiculo__ejemplos { color: var(--texto-2); font-size: .6875rem; font-weight: 500; }
.vehiculo:has(input:checked) .vehiculo__tipo, .vehiculo:has(input:checked) .vehiculo__ejemplos, .vehiculo--activo .vehiculo__ejemplos { color: rgb(255 255 255 / .82); }
.silueta { width: 100%; max-width: 104px; height: auto; overflow: visible; margin-bottom: 4px; }
.silueta__cuerpo { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.silueta__cristal { fill: currentColor; fill-opacity: .28; }
.silueta__rueda { fill: var(--superficie); stroke: currentColor; stroke-width: 2.4; }
.silueta__suelo { stroke: currentColor; stroke-opacity: .25; stroke-width: 1.5; }
.vehiculo:has(input:checked) .silueta__rueda, .vehiculo--activo .silueta__rueda { fill: var(--azul); }
@media (prefers-reduced-motion: no-preference) { .vehiculo:has(input:checked) .silueta, .vehiculo--activo .silueta { animation: arranca .55s var(--frena); } }
@keyframes arranca { from { transform: translateX(-14px); } }

.vehiculos__opciones--detalle { grid-template-columns: 1fr 1fr; gap: 10px; }
.vehiculo--detalle { padding: 16px 10px; --superficie: var(--noche); --borde: var(--linea-oscura); --texto: var(--blanco); --texto-2: var(--acero); font-size: .9375rem; }
.vehiculo--detalle .silueta { max-width: 130px; }
.vehiculo--detalle:has(input:checked) { border-color: var(--azul-luz); background: var(--noche-2); }
.vehiculo--detalle:has(input:checked) .silueta__rueda { fill: var(--azul-luz); }

.vehiculos--fijo {
  position: sticky; top: var(--cabecera); z-index: 20;
  margin: 0 calc(var(--margen) * -1) 8px; padding: 10px var(--margen);
  background: color-mix(in srgb, var(--fondo) 92%, transparent); box-shadow: 0 1px 0 var(--borde);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vehiculos--fijo .vehiculo { padding: 6px 4px; font-size: .75rem; }
.vehiculos--fijo .silueta { max-width: 60px; }

/* ---------- Precio vivo ---------- */

.vivo { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.vivo__pre { color: var(--texto-2); font-size: .8125rem; font-weight: 600; }
.vivo__valor { font-size: 1.5rem; font-stretch: 78%; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.vivo--cotizar .vivo__valor { font-size: .9375rem; font-stretch: 96%; font-weight: 700; color: var(--texto-2); }

/* ---------- Tarjetas de paquete ---------- */

.paquete {
  --tono: var(--azul);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto);
  transition: transform .35s var(--curva), box-shadow .35s, opacity .3s;
}
.paquete:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(9 14 43 / .18); }
.paquete--basic { --tono: #4f6fff; }
.paquete--extra { --tono: var(--gema, var(--azul)); }
.paquete--full {
  --tono: var(--rojo); --superficie: #111947; --texto: var(--blanco); --texto-2: var(--acero); --borde: #2b357a; --acento: var(--azul-luz);
  background: linear-gradient(165deg, #172160, #0b1033 70%); border-color: #2b357a;
}
.paquete__foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tinta); }
.paquete__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.paquete:hover .paquete__foto img { transform: scale(1.05); }
.paquete__foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tono); }
.paquete__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 16px; }
.paquete__familia { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: .8125rem; font-weight: 700; }
.paquete__familia::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--tono); }
.paquete__nombre { margin-top: 6px; font-size: 1.75rem; font-style: italic; font-stretch: 110%; font-weight: 900; line-height: 1; text-transform: uppercase; }
.paquete__subtitulo { margin-top: 6px; font-weight: 750; line-height: 1.25; }
.paquete__linea { margin-top: 4px; color: var(--texto-2); font-size: .9375rem; line-height: 1.45; }
.paquete__beneficio { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--tono) 12%, transparent); font-size: .875rem; font-weight: 650; line-height: 1.35; }
.paquete__beneficio .icono { width: 18px; height: 18px; color: var(--tono); }
.paquete--full .paquete__beneficio .icono { color: #ff6b74; }
.paquete__incluye { display: grid; gap: 6px; margin-top: 14px; font-size: .9375rem; line-height: 1.35; }
.paquete__incluye li { display: flex; gap: 8px; align-items: flex-start; }
.paquete__incluye .icono { width: 18px; height: 18px; margin-top: 1px; color: var(--tono); stroke-width: 2.4; }
.paquete--full .paquete__incluye .icono { color: var(--azul-luz); }
.paquete__mas { margin-top: 6px; }
.paquete__mas summary { display: inline-flex; padding: 4px 0; color: var(--acento); font-size: .875rem; font-weight: 700; }
.paquete__mas summary::after { content: '+'; margin-left: 6px; }
.paquete__mas[open] summary::after { content: '−'; }
.paquete__mas .paquete__incluye { margin-top: 6px; }
.paquete__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.paquete__cuerpo > .paquete__incluye + .paquete__pie, .paquete__mas + .paquete__pie { margin-top: 16px; }
.paquete__pie { border-top: 1px solid var(--borde); }
.paquete__acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.comparar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: .8125rem; font-weight: 650; cursor: pointer; }
.comparar input { width: 18px; height: 18px; accent-color: var(--azul); }
.paquete--atenuado { opacity: .32; transform: scale(.98); }
.paquete--elegido { box-shadow: 0 0 0 2px var(--azul-luz); }

/* Servicios individuales */
.servicios-bloque { margin-top: 48px; }
.servicios-bloque__titulo { margin-bottom: 14px; font-size: 1.375rem; font-weight: 800; }
.servicios-lista { display: grid; gap: 8px; }
.opcion {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: center;
  padding: 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
}
.opcion__icono { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--acento); }
.opcion__nombre { font-size: 1rem; font-weight: 750; line-height: 1.25; }
.opcion__desc { color: var(--texto-2); font-size: .875rem; line-height: 1.4; }
.opcion__pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.opcion__pie .vivo__valor { font-size: 1.25rem; }

.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.opciones .opcion { grid-column: 1 / -1; --superficie: var(--noche); --borde: var(--linea-oscura); }
.opciones .paquete:not(.paquete--full) { --superficie: var(--noche); --texto: var(--blanco); --texto-2: var(--acero); --borde: var(--linea-oscura); --acento: var(--azul-luz); }

/* ---------- Familias de paquetes ---------- */

.familia { margin-top: 56px; scroll-margin-top: calc(var(--cabecera) + 110px); }
.familia__cabeza { display: grid; gap: 14px; margin-bottom: 22px; }
.familia__nombre { font-size: clamp(2.2rem, 7vw, 4rem); font-style: italic; font-stretch: 118%; font-weight: 900; line-height: .95; text-transform: uppercase; }
.familia--basic .familia__nombre { color: var(--azul); }
.familia--extra .familia__nombre { background: linear-gradient(90deg, #e8a23a, #d42a4a 50%, #4a6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.familia--full .familia__nombre { background: linear-gradient(90deg, var(--rojo), var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seccion:not(.seccion--papel) .familia--basic .familia__nombre { color: var(--azul-luz); }
.familia__lema { margin-top: 6px; font-size: 1.1875rem; font-weight: 750; }
.familia__resumen { margin-top: 4px; max-width: 60ch; color: var(--texto-2); }
.gemas { display: flex; flex-wrap: wrap; gap: 8px; }
.gemas li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borde); font-weight: 700; font-size: .875rem; }
.gemas li::before { content: ''; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--gema); }
.familia__paquetes { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin-inline: calc(var(--margen) * -1); padding: 4px var(--margen) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.familia__paquetes > * { scroll-snap-align: start; }
.familia__tabla { margin-top: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.familia__tabla summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; }
.familia__tabla summary .icono { color: var(--acento); }
.familia__tabla[open] summary { border-bottom: 1px solid var(--borde); }
.familia__tabla .matriz-envoltura { margin: 0; padding: 4px 12px 12px; }

.matriz-envoltura { overflow-x: auto; }
.matriz { min-width: 320px; table-layout: fixed; font-size: .875rem; }
.matriz th, .matriz td { padding: 10px 6px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.matriz td { text-align: center; }
.matriz thead tr:first-child td, .matriz thead tr:first-child th { border-bottom: 0; }
.matriz thead td:first-child { width: 36%; }
.matriz__paquete { text-align: center !important; font-size: clamp(.75rem, 3.3vw, 1.0625rem); font-style: italic; font-stretch: 100%; font-weight: 850; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; hyphens: auto; }
.matriz__precios th { color: var(--texto-2); font-size: .8125rem; font-weight: 600; }
.matriz__precios .vivo { flex-direction: column; align-items: center; gap: 0; white-space: normal; }
.matriz__precios .vivo__valor { font-size: 1.125rem; }
.matriz__precios .vivo--cotizar .vivo__valor { font-size: .75rem; }
.matriz__si { margin: auto; width: 22px; height: 22px; color: var(--azul); stroke-width: 2.4; }
.seccion:not(.seccion--papel) .matriz__si, .comparacion .matriz__si { color: var(--azul); }
.matriz__no { margin: auto; width: 16px; height: 16px; color: var(--borde); }

.recomendar { margin: 18px 0 8px; }
.recomendar__titulo { margin-bottom: 10px; font-weight: 800; font-size: 1.125rem; }
.recomendar__opciones { display: flex; gap: 8px; margin-inline: calc(var(--margen) * -1); padding: 0 var(--margen) 4px; overflow-x: auto; scrollbar-width: none; }
.recomendar__opciones button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 14px; border: 1.5px solid var(--borde); border-radius: 99px; background: var(--superficie); font-size: .9375rem; font-weight: 650; transition: all .2s; }
.recomendar__opciones button .icono { width: 18px; height: 18px; color: var(--acento); }
.recomendar__opciones [aria-pressed='true'] { border-color: var(--azul); background: var(--azul); color: var(--blanco); }
.recomendar__opciones [aria-pressed='true'] .icono { color: var(--blanco); }
.recomendar__ayuda { margin-top: 10px; color: var(--texto-2); font-size: .9375rem; }
.destacado-unico { max-width: 420px; margin-top: 40px; }

/* ---------- Paquetes destacados (inicio) ---------- */

.destacados__rejilla { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; margin-inline: calc(var(--margen) * -1); padding: 4px var(--margen) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.panel-familia { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio); text-decoration: none; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea-clara); transition: transform .4s var(--curva), box-shadow .4s; }
.panel-familia:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgb(9 14 43 / .2); }
.panel-familia__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.panel-familia__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.panel-familia:hover .panel-familia__foto img { transform: scale(1.06); }
.panel-familia__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 22px; }
.panel-familia__nombre { font-size: clamp(2rem, 4vw, 2.6rem); font-style: italic; font-stretch: 118%; font-weight: 900; line-height: .95; text-transform: uppercase; color: var(--azul); }
.panel-familia__lema { font-weight: 750; font-size: 1.0625rem; }
.panel-familia__niveles { display: grid; gap: 8px; margin: 14px 0 18px; }
.panel-familia__niveles span { display: grid; gap: 0; padding-left: 14px; border-left: 3px solid var(--azul); color: var(--pizarra); font-size: .9375rem; line-height: 1.3; }
.panel-familia__niveles b { color: inherit; font-weight: 800; color: var(--tinta); }
.panel-familia__pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea-clara); font-weight: 750; color: var(--azul); }
.panel-familia--extra { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.panel-familia--extra .panel-familia__nombre { background: linear-gradient(90deg, #e8a23a, #d42a4a 50%, #6f8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel-familia--extra .panel-familia__niveles span { border-left-color: var(--gema); color: var(--acero); }
.panel-familia--extra .panel-familia__niveles b, .panel-familia--full .panel-familia__niveles b { color: var(--blanco); }
.panel-familia--extra .panel-familia__pie { border-color: var(--linea-oscura); color: var(--azul-luz); }
.panel-familia--full { background: linear-gradient(160deg, #9d1520, #2a1450 55%, #0d1440); color: var(--blanco); border-color: transparent; }
.panel-familia--full .panel-familia__nombre { color: var(--blanco); }
.panel-familia--full .panel-familia__niveles span { border-left-color: rgb(255 255 255 / .6); color: rgb(255 255 255 / .78); }
.panel-familia--full .panel-familia__pie { border-color: rgb(255 255 255 / .2); color: var(--blanco); }

/* ---------- Experiencia ---------- */

.experiencia { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: 88svh; padding-block: var(--seccion); color: var(--blanco); background: var(--tinta); }
.experiencia__foto { position: absolute; inset: 0; z-index: -1; }
.experiencia__foto picture, .experiencia__foto img { width: 100%; height: 100%; object-fit: cover; }
.experiencia__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 14 43 / .05) 20%, rgb(9 14 43 / .6) 55%, rgb(9 14 43 / .95) 88%); }
.experiencia__foto .sello { top: auto; bottom: 14px; left: auto; right: 14px; }
.experiencia .entrada { color: #d4daee; }
.experiencia__datos { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 30px 0 28px; }
.experiencia__datos li { display: grid; }
.experiencia__datos strong { font-size: clamp(2.6rem, 7vw, 4.4rem); font-style: italic; font-stretch: 112%; font-weight: 900; line-height: 1; }
.experiencia__datos span { color: #c9d0e6; font-size: .9375rem; }
.experiencia__datos--claro span { color: var(--texto-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .experiencia__foto img { animation: paralaje linear both; animation-timeline: view(); }
  }
}
@keyframes paralaje { from { transform: translateY(-4%) scale(1.09); } to { transform: translateY(4%) scale(1.09); } }

/* ---------- Trabajo real ---------- */

.trabajo__rejilla { display: grid; gap: 14px; }
.lugar { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.lugar__foto { position: relative; overflow: hidden; border-radius: var(--radio); cursor: zoom-in; }
.lugar__foto:first-child { grid-row: span 2; }
.lugar__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva); }
.lugar__foto:first-child img { aspect-ratio: 3 / 4; }
.lugar__foto:not(:first-child) img { aspect-ratio: 4 / 3; }
.lugar__foto:hover img { transform: scale(1.05); }
.muro { position: relative; display: grid; min-height: 420px; overflow: hidden; border-radius: var(--radio); background: linear-gradient(160deg, #2a49d6, var(--azul) 55%, #141f5e); color: var(--blanco); }
.muro__portada { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; padding: 26px; }
.muro__icono { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: auto; border-radius: 14px; background: rgb(255 255 255 / .16); }
.muro__icono .icono { width: 30px; height: 30px; }
.muro__titulo { font-size: 1.6rem; font-style: italic; font-stretch: 108%; font-weight: 900; line-height: 1.05; }
.muro p { color: rgb(255 255 255 / .82); }
.muro .boton--azul { background: var(--blanco); color: var(--azul); margin-top: 8px; }
.muro__nota { font-size: .8125rem; }
.muro iframe { width: 100%; height: 100%; min-height: 560px; border: 0; background: var(--blanco); }
.publicaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 14px; }
.publicacion { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.publicacion__red { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: .875rem; font-weight: 700; }
.publicacion__titulo { font-size: 1.125rem; font-weight: 800; }
.publicacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.publicacion iframe { width: 100%; min-height: 520px; border: 0; border-radius: 8px; background: var(--blanco); }

/* ---------- Reseñas ---------- */

.resenas { background: radial-gradient(60% 70% at 0 0, rgb(34 51 138 / .45), transparent 70%), var(--tinta); }
.resenas__fichas { display: grid; gap: 14px; }
.ficha-google { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--linea-oscura); border-radius: var(--radio); background: var(--noche); }
.ficha-google__nombre { font-size: 1.25rem; font-weight: 800; }
.ficha-google__nota { display: flex; align-items: center; gap: 14px; }
.ficha-google__nota strong { font-size: 3.4rem; font-style: italic; font-stretch: 100%; font-weight: 900; line-height: 1; }
.ficha-google__total { color: var(--acero); }
.ficha-google__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ficha-google__botones .icono { color: var(--oro); }
.estrellas { position: relative; display: inline-block; line-height: 0; }
.estrellas .icono { width: 22px; height: 22px; }
.estrellas__fondo, .estrellas__lleno { display: flex; gap: 2px; }
.estrellas__fondo { color: rgb(255 255 255 / .2); }
.estrellas__lleno { position: absolute; inset: 0; width: var(--valor); overflow: hidden; color: var(--oro); }
.ficha-google__lista { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 10px; margin: 14px -24px 0; padding: 0 24px 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.resena { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; padding: 16px; border-radius: 10px; background: var(--noche-2); font-size: .9375rem; }
.resena__autor { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.resena__autor img { width: 36px; height: 36px; border-radius: 50%; }
.resena__autor a { text-decoration: none; }
.resena__fecha { color: var(--acero); font-size: .8125rem; font-weight: 500; }
.resena__texto { color: #d4daee; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.resena .estrellas .icono { width: 16px; height: 16px; }
.resenas__atribucion { margin-top: 16px; color: var(--acero); font-size: .8125rem; }

/* ---------- Ubicación ---------- */

.ubicacion__rejilla { display: grid; gap: 28px; }
.ubicacion__direccion { margin-top: 14px; font-size: 1.25rem; font-weight: 750; line-height: 1.35; }
.estado-abierto { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 99px; background: rgb(47 191 113 / .14); color: #137a43; font-size: .9375rem; font-weight: 700; }
.estado-abierto::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(47 191 113 / .2); }
.estado-abierto--cerrado { background: rgb(192 24 35 / .1); color: var(--rojo); }
.estado-abierto--cerrado::before { background: var(--rojo); box-shadow: 0 0 0 4px rgb(192 24 35 / .15); }
.horario { display: grid; margin-top: 18px; max-width: 420px; }
.horario div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.horario dt { color: var(--texto-2); }
.horario dd { font-weight: 700; }
.mapa { position: relative; min-height: 380px; overflow: hidden; border-radius: var(--radio); background: var(--tinta); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__portada {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--blanco);
  background:
    linear-gradient(28deg, transparent 47%, rgb(142 162 255 / .35) 47.5%, rgb(142 162 255 / .35) 49%, transparent 49.5%),
    linear-gradient(-62deg, transparent 58%, rgb(255 255 255 / .12) 58.3%, rgb(255 255 255 / .12) 59.4%, transparent 59.7%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgb(255 255 255 / .06) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 58px, rgb(255 255 255 / .06) 58px 60px),
    var(--tinta);
  --borde: rgb(255 255 255 / .35); --texto: var(--blanco);
}
.mapa__portada p { display: grid; color: var(--acero); font-size: .9375rem; }
.mapa__portada strong { color: var(--blanco); font-size: 1.0625rem; }
.mapa__pin { width: 44px; height: 44px; color: var(--rojo); filter: drop-shadow(0 6px 12px rgb(192 24 35 / .5)); }
@media (prefers-reduced-motion: no-preference) { .mapa__pin { animation: pin 2.4s var(--curva) infinite; } }
@keyframes pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Antes/después ---------- */

.resultados { display: grid; gap: 12px; }
.resultados__lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resultados__lado figure { position: relative; }
.resultados__lado img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.resultados__lado figcaption { margin-top: 8px; font-weight: 700; }
.comparador { --pos: 50%; position: relative; overflow: hidden; margin: 0; aspect-ratio: 1520 / 1260; border-radius: var(--radio); background: #000; touch-action: pan-y; }
.comparador__foto, .comparador__foto img { width: 100%; height: 100%; object-fit: cover; }
.comparador > .comparador__foto { position: absolute; inset: 0; }
.comparador__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparador__etiqueta { position: absolute; bottom: 12px; padding: 2px 10px; border-radius: 99px; background: rgb(9 14 43 / .78); color: var(--blanco); font-size: .875rem; font-weight: 700; pointer-events: none; }
.comparador__etiqueta--antes { left: 12px; }
.comparador__etiqueta--despues { right: 12px; }
.comparador__asa { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--blanco); color: var(--blanco); pointer-events: none; }
.comparador__asa::before { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%; background: var(--rojo); transform: translate(-50%, -50%); }
.comparador__asa .icono { position: absolute; top: 50%; width: 16px; height: 16px; max-width: none; transform: translateY(-50%); }
.comparador__asa .icono:first-of-type { right: 3px; }
.comparador__asa .icono:last-of-type { left: 3px; }
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparador:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- Listas, grupos y bloques ---------- */

.columnas-2, .columnas-3 { display: grid; gap: 40px; }
.grupo-iconos__titulo { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--texto); font-size: 1.25rem; font-weight: 800; }
.grupo-iconos li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--borde); font-weight: 650; }
.grupo-iconos .icono { width: 26px; height: 26px; color: var(--acento); }
.lista-palomitas { display: grid; gap: 12px; margin-top: 18px; }
.lista-palomitas li { display: flex; gap: 12px; align-items: flex-start; }
.lista-palomitas .icono { margin-top: 3px; color: var(--acento); stroke-width: 2.4; }
.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.beneficios li { display: grid; gap: 10px; padding: 18px; border-radius: var(--radio); background: var(--superficie); font-weight: 750; font-size: 1.0625rem; line-height: 1.25; }
.beneficios .icono { width: 26px; height: 26px; color: var(--acento); stroke-width: 2.4; }
.teflon { align-self: start; padding: 26px; border-radius: var(--radio); background: var(--superficie); }
.razones { display: grid; gap: 10px; }
.razones li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: var(--radio); background: var(--superficie); }
.razones li > .icono { width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: rgb(142 162 255 / .13); color: var(--acento); }
.razones h3 { font-size: 1.0625rem; font-weight: 800; }
.razones p { margin-top: 2px; color: var(--texto-2); font-size: .9375rem; }

/* ---------- Contacto ---------- */

.medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.medio { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); text-decoration: none; transition: border-color .18s, transform .25s var(--curva); }
.medio:hover { border-color: var(--texto-2); transform: translateY(-2px); }
.medio .icono { width: 26px; height: 26px; color: var(--acento); }
.medio span { display: grid; font-weight: 700; }
.medio strong { color: var(--texto-2); font-size: .8125rem; font-weight: 600; }
.medio--wa { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.medio--wa .icono, .medio--wa strong { color: var(--blanco); }

/* ---------- Cierre y pie ---------- */

.cierre { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); background: linear-gradient(115deg, #a3141e, var(--rojo) 30%, #3a1a5c 62%, var(--azul)); color: var(--blanco); }
.cierre__lineas { position: absolute; right: -60px; top: 50%; width: min(520px, 70vw); translate: 0 -50%; color: rgb(255 255 255 / .12); }
.cierre__rejilla { position: relative; display: grid; gap: 24px; align-items: end; }
.cierre__titulo { font-size: clamp(2.3rem, 7vw, 5rem); font-style: italic; font-stretch: 118%; font-weight: 900; line-height: .95; text-transform: uppercase; text-wrap: balance; }
.cierre__accion p { font-size: 1.125rem; color: rgb(255 255 255 / .86); }
.cierre .botones { margin-top: 18px; }
.cierre .boton--rojo { background: var(--blanco); color: var(--rojo); }
.cierre .boton--rojo:hover { background: var(--papel); }

.pie { padding: 56px 0 96px; background: #050818; color: var(--acero); font-size: .9375rem; }
.pie__rejilla { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.pie__marca { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; }
.pie__marca img { width: 150px; }
.pie__redes { display: flex; flex-wrap: wrap; gap: 10px; }
.pie__redes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linea-oscura); border-radius: 99px; color: var(--blanco); text-decoration: none; }
.pie__redes a:hover { border-color: var(--acero); }
.pie h2 { margin-bottom: 10px; color: var(--blanco); font-size: 1rem; font-weight: 800; }
.pie li + li { margin-top: 6px; }
.pie nav a, .pie ul a { text-decoration: none; }
.pie nav a:hover, .pie ul a:hover { color: var(--blanco); text-decoration: underline; }
.pie__legal { display: grid; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea-oscura); font-size: .8125rem; }

/* ---------- Comparación, flotante, visor, aviso ---------- */

.bandeja { position: fixed; left: 50%; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: 10px; background: var(--tinta); color: var(--blanco); box-shadow: 0 16px 40px rgb(9 14 43 / .45); translate: -50% 0; --borde: rgb(255 255 255 / .3); --texto: var(--blanco); }
.bandeja__texto { margin-right: 4px; font-size: .9375rem; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) { .bandeja:not([hidden]) { animation: sube .35s var(--curva); } }
@keyframes sube { from { opacity: 0; translate: -50% 20px; } }
.comparacion { width: min(1000px, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--papel); color: var(--tinta); --fondo: var(--papel); --texto: var(--tinta); --texto-2: var(--pizarra); --borde: var(--linea-clara); --acento: var(--azul); --superficie: var(--blanco); }
.comparacion::backdrop { background: rgb(9 14 43 / .7); }
.comparacion[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { .comparacion[open] { animation: desliza .4s var(--curva); } }
@keyframes desliza { from { transform: translateX(40px); opacity: 0; } }
.comparacion__cabeza { display: flex; align-items: center; gap: 16px; padding: 16px var(--margen); border-bottom: 1px solid var(--linea-clara); }
.comparacion__titulo { margin-right: auto; font-size: 1.5rem; font-style: italic; font-stretch: 116%; font-weight: 900; text-transform: uppercase; }
.comparacion__cerrar { position: static !important; translate: none !important; }
.comparacion__cuerpo { flex: 1; overflow: auto; padding: 8px var(--margen) 32px; }
.comparacion .matriz { min-width: 0; }
.comparacion .matriz__familia { display: block; color: var(--texto-2); font-size: .6875rem; font-style: normal; font-weight: 600; text-transform: none; }
.comparacion__cuerpo[data-solo-dif] tr.igual { display: none; }
.comparacion tr.diferente th { font-weight: 750; }
.comparacion .nota { margin: 8px 0 4px; color: var(--texto-2); font-size: .9375rem; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--azul); }

.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border-radius: 99px; background: #25d366; color: #062d16; font-weight: 800; text-decoration: none; box-shadow: 0 10px 28px rgb(0 0 0 / .35); transition: transform .35s var(--curva), opacity .3s; }
.flotante .icono { width: 26px; height: 26px; }
.flotante span { display: none; }
.flotante--oculto { transform: translateY(90px); opacity: 0; pointer-events: none; }
body:has(.bandeja:not([hidden])) .flotante { transform: translateY(-64px); }

.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgb(5 8 24 / .95); }
.visor img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.visor__boton { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(9 14 43 / .8); color: var(--blanco); }
.visor__cerrar { top: 12px; right: 12px; }
.visor__anterior { left: 8px; top: 50%; translate: 0 -50%; }
.visor__siguiente { right: 8px; top: 50%; translate: 0 -50%; }
.comparacion .visor__boton { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea-clara); }

.consentimiento { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 4px; max-width: 560px; padding: 16px; border-radius: var(--radio); background: var(--blanco); color: var(--tinta); box-shadow: 0 20px 50px rgb(9 14 43 / .4); font-size: .9375rem; --borde: var(--linea-clara); --texto: var(--tinta); }
.consentimiento .botones { margin-top: 10px; }
.consentimiento a { color: var(--azul); }
.aviso { padding: calc(var(--cabecera) + 48px) 0 80px; max-width: 760px; }
.aviso h2 { margin: 28px 0 8px; font-size: 1.25rem; }
.aviso p { color: var(--acero); }
.aviso p + p { margin-top: 12px; }
.aviso a { color: var(--azul-luz); }
.lista-enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 28px; }

/* ---------- Revelado con scroll (CSS; sin soporte se ve normal) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .seccion__cabeza .titulo { animation: sube-titulo linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .categoria, .panel-familia { animation: entra-tarjeta linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@keyframes sube-titulo { from { opacity: 0; transform: translateX(-32px) skewX(-6deg); } }
@keyframes entra-tarjeta { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* ---------- Tablet ---------- */

@media (min-width: 560px) {
  .chip-vehiculo [data-chip-texto], .cabecera__cotizar span, .flotante span { display: inline; }
  .buscador__etiqueta { display: inline; }
  .vehiculos--fijo .vehiculo { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 8px 10px; gap: 8px; font-size: .8125rem; }
  .vehiculos--fijo .silueta { width: 52px; margin: 0; }
  .vehiculos__opciones--detalle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opcion { grid-template-columns: 44px 1fr auto; }
  .opcion__icono { grid-row: auto; }
  .opcion__pie { grid-column: auto; margin: 0; gap: 16px; }
  .categorias__rejilla, .destacados__rejilla, .familia__paquetes { grid-auto-columns: 46%; }
  .resenas__fichas { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  :root { --margen: 32px; }
  .seccion__cabeza--fila { grid-template-columns: 1fr auto; gap: 32px; }
  .seccion__cabeza--fila > .entrada, .seccion__cabeza--fila > .enlace-flecha { justify-self: end; text-align: right; max-width: 36ch; }
  .cabezal__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
  .cabezal__arte { display: block; }
  .columnas-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
  .columnas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resultados { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .resultados__lado { grid-template-columns: 1fr; }
  .resultados__lado img { aspect-ratio: 16 / 10; }
  .ubicacion__rejilla { grid-template-columns: 1fr 1.2fr; align-items: stretch; gap: 48px; }
  .cierre__rejilla { grid-template-columns: 1.5fr 1fr; gap: 48px; }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .pie__marca { grid-column: auto; }
  .pie__legal { grid-template-columns: 1fr auto; }
  .consentimiento { left: 24px; right: auto; }
  .trabajo__rejilla { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
  .resumen { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .resumen__incluye ul { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .campos--auto { grid-template-columns: 1.2fr 1.2fr .8fr; }
  .familia__cabeza { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Escritorio ---------- */

@media (min-width: 1024px) {
  :root { --cabecera: 76px; --margen: 40px; }
  .cabecera__logo img { width: 138px; }
  .cabecera__fila { gap: 14px; }

  /* Escritorio: titular arriba a todo lo ancho; abajo, texto a la izquierda y auto en su propia columna. */
  .portada { min-height: max(100svh, 720px); padding-top: calc(var(--cabecera) + 6vh); padding-bottom: 9vw; }
  .portada__rejilla { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); grid-template-areas: 'cabeza cabeza' 'accion auto'; column-gap: 56px; align-items: start; }
  .portada__titulo { font-size: min(5.2vw, 10vh, 6.4rem); min-height: calc(2 * .92em); }
  .portada__linea { white-space: nowrap; }
  .portada__accion { padding-top: 32px; }
  .portada__sub { max-width: 28ch; }
  .portada__botones { flex-direction: column; align-items: stretch; }
  .portada__escenario { margin: 8px calc((100vw - min(100vw - var(--margen) * 2, var(--ancho))) / -2) 0 0; }
  .portada__auto { width: min(100%, 118vh); margin: 0 0 0 auto; }
  .portada__piso { left: 0; right: 0; }
  .portada__bajar { display: flex; bottom: calc(9vw + 14px); }
  .categorias { margin-top: -9vw; padding-top: calc(var(--seccion) + 4vw); clip-path: polygon(0 9vw, 100% 0, 100% 100%, 0 100%); }

  .categorias__rejilla { grid-auto-flow: row; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 300px 300px; margin: 0; padding: 0; overflow: visible; }
  .categoria a { height: 100%; }
  .categoria--carwash { grid-row: span 2; }
  .categoria--proteccion { grid-column: span 2; }

  .destacados__rejilla, .familia__paquetes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }

  .buscador__cabeza { grid-template-columns: 1fr auto; align-items: end; }
  .opciones .opcion { grid-column: 1 / -1; }
  .lugar-seccion__rejilla { grid-template-columns: 1fr 1.3fr; }
  .experiencia { min-height: 92svh; }
  .experiencia__contenido { max-width: var(--ancho); }
  .experiencia .titulo { max-width: 14ch; font-size: clamp(2.4rem, 5vw, 4.4rem); }
  .matriz { font-size: 1rem; }
  .matriz th, .matriz td { padding: 12px 10px; }
  .matriz__paquete { font-size: 1.25rem; font-stretch: 112%; }
  .vehiculos--fijo .vehiculos__opciones { max-width: 780px; }
}

@media (min-width: 1140px) {
  .cabecera__menu { display: none; }
  .menu { position: static; flex-direction: row; align-items: center; gap: 0; padding: 0; background: none; overflow: visible; visibility: visible; opacity: 1; transform: none; margin-right: 6px; }
  .menu__lista { display: flex; align-items: center; }
  .menu__lista > li { border: 0; }
  .menu__enlace { width: auto; gap: 6px; padding: 8px 12px; font-size: .9375rem; font-style: normal; font-stretch: 96%; font-weight: 650; color: var(--acero); transition: color .15s; }
  .menu__enlace:hover, .menu__enlace[aria-current='page'], .menu__enlace--activo { color: var(--blanco); }
  .menu__enlace[aria-current='page'], .menu__enlace--activo { box-shadow: inset 0 -2px 0 var(--rojo); }
  .menu__boton { display: inline-flex; }
  .menu__boton[aria-expanded='true'] { color: var(--blanco); }
  .menu__boton[aria-expanded='true'] .icono { transform: rotate(180deg); }
  .menu__pie { display: none; }
  .mega { position: fixed; left: 0; right: 0; top: var(--cabecera); padding: 24px 0 28px; background: rgb(9 14 43 / .97); box-shadow: 0 24px 50px rgb(0 0 0 / .4), inset 0 1px 0 var(--linea-oscura); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, visibility .2s, transform .3s var(--curva); }
  .mega--abierto { visibility: visible; opacity: 1; transform: none; }
  .mega__rejilla { width: min(100% - 80px, 1240px); margin: 0 auto; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 12px; padding: 0; }
  .mega__division { padding: 18px; transition: background-color .2s, transform .25s var(--curva); }
  .mega__division:hover { background: var(--noche-2); transform: translateY(-2px); }
  .mega__paquetes { grid-column: auto; padding: 18px; }
  .mega__atajos { width: min(100% - 80px, 1240px); margin: 16px auto 0; padding: 0; }
  .mega__atajos::before { content: 'Atajos:'; color: var(--blanco); font-weight: 700; }
}

@media (min-width: 1024px) and (max-height: 760px) { .portada__titulo { font-size: min(4.6vw, 9vh, 5rem); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}