/* ==========================================================================
   Autolider · home · Propuesta Web 30-10-2026
   Refinamiento de la V4 con la devolucion del cliente.
   Paleta: los seis colores del manual + el verde de WhatsApp, que es color de canal,
   no de marca, y se usa solo en lo que abre WhatsApp (pedido del cliente).
   ========================================================================== */

@font-face{font-family:'Autolider Display';
  src:url(../tipografia/AutoliderDisplay-Regular.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --azul:#2957A5; --rojo:#FF0000; --negro:#000000;
  --blanco:#FDFDFD; --azul-oscuro:#063B94; --azul-claro:#E9ECFF;
  --wa:#25D366; --wa-hover:#1FB857;          /* verde WhatsApp: siempre con texto negro */

  --titular:'Autolider Display','Arial Narrow',sans-serif;
  --texto:'Source Sans 3','Source Sans Pro',Arial,sans-serif;

  --salida:cubic-bezier(0.23,1,0.32,1);
  --entra-sale:cubic-bezier(0.77,0,0.175,1);

  /* escala de 4 */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:5.5rem;
  --gut:1.25rem; --ancho:76rem;
  --cab:4rem;
  --barra:calc(4.25rem + env(safe-area-inset-bottom,0px));
}

/* ---------- base ---------- */
*{box-sizing:border-box;min-width:0}
html{
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cab) + var(--s4));   /* las anclas no quedan bajo la cabecera */
  scroll-padding-bottom:var(--barra);                /* ni bajo la barra fija de WhatsApp */
  scrollbar-color:var(--azul) var(--blanco);
}
body{margin:0;background:var(--blanco);color:var(--negro);font-family:var(--texto);
  font-size:1.0625rem;line-height:1.6;caret-color:var(--azul);
  padding-bottom:var(--barra)}
::selection{background:var(--azul-claro);color:var(--negro)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
button,a,[role="button"],summary,label{touch-action:manipulation}
button,.btn,summary,label{-webkit-user-select:none;user-select:none}

h1,h2,h3,h4{font-family:var(--titular);font-weight:400;text-transform:uppercase;
  line-height:.98;margin:0;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(2.1rem,7.6vw,4rem)}
h2{font-size:clamp(2rem,6.8vw,3.6rem)}
h3{font-size:clamp(1.3rem,4.4vw,1.85rem)}
h4{font-size:clamp(1.1rem,3.6vw,1.35rem)}
p{margin:0 0 var(--s4)}
.lead{font-size:clamp(1.05rem,3.1vw,1.25rem);max-width:52ch}
.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}

/* encabezado de seccion centrado: quita el peso de la columna izquierda.
   Los parrafos largos de adentro siguen alineados a la izquierda. */
.sec{padding:var(--s9) 0}
.sec-cab{text-align:center;max-width:44rem;margin:0 auto var(--s7)}
.sec-cab h2{margin-bottom:var(--s4)}
.sec-cab .lead{margin:0 auto}

/* dato que tiene que confirmar Autolider: visible a proposito */
.pc{display:inline-flex;align-items:center;gap:.3rem;background:var(--azul-claro);color:var(--negro);
  font-size:.82rem;font-weight:700;line-height:1.2;padding:.18rem .45rem;vertical-align:.08em;
  white-space:nowrap}
.pc .ico{width:1em;height:1em}

/* ---------- iconos (ItsHover, Apache 2.0) ---------- */
.ico{width:1.5em;height:1.5em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico .clock-hands{transform-origin:12px 12px;transition:transform 800ms var(--entra-sale)}
.ico .pin-dot{transform-origin:12px 10px;transition:transform 240ms var(--salida)}
.ico .heart{transform-origin:12px 12px;transition:transform 260ms var(--salida)}
.ico .phone-icon{transform-origin:12px 12px;transition:transform 220ms var(--salida)}
@media (hover:hover) and (pointer:fine){
  .mueve:hover .clock-hands{transform:rotate(360deg)}
  .mueve:hover .pin-dot{transform:scale(1.3)}
  .mueve:hover .heart{transform:scale(1.15)}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;text-decoration:none;font-family:var(--titular);text-transform:uppercase;
  font-size:1.15rem;line-height:1;padding:.8rem 1.4rem;border:0;cursor:pointer;
  transition:transform 130ms var(--salida),background-color 130ms ease,color 130ms ease}
.btn:active{transform:scale(.97)}
.btn .ico{width:1.35em;height:1.35em}
/* WhatsApp: un solo lenguaje para todo lo que abre ese canal, el de la cabecera. No es una caja:
   el logo blanco vive en su circulo verde, como el icono de la app, y la accion va escrita al lado
   en el color del fondo (blanco sobre azul o negro, negro sobre claro). */
.wa-logo{width:1.6em;height:1.6em;flex:0 0 auto;fill:var(--wa)}
.wa-ico{display:grid;place-items:center;flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--wa);
  box-shadow:0 6px 16px -6px rgb(0 0 0 / .4);transition:transform 200ms var(--salida),background-color 150ms ease}
.wa-ico .wa-logo{width:56%;height:56%;fill:var(--blanco)}
.btn--wa{background:none;color:inherit;padding:0;gap:.7rem;min-height:3rem;
  font-family:var(--texto);text-transform:none;font-weight:700;font-size:1.05rem;letter-spacing:0}
.btn--wa:active{transform:none}
.btn--wa:active .wa-ico{transform:scale(.94)}
.btn--g{font-size:1.3rem;padding:1rem 1.75rem;min-height:3.5rem}
.btn--wa.btn--g{font-size:1.2rem;padding:0;min-height:3.5rem;gap:.85rem}
.btn--g .wa-ico{width:3.25rem;height:3.25rem}
.btn--sec{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
@media (hover:hover) and (pointer:fine){
  .btn--wa:hover .wa-ico,.msj:hover .wa-ico,.pie__canal:hover .wa-ico{transform:scale(1.07);background:var(--wa-hover)}
  .btn--wa:hover>span:last-child{text-decoration:underline;text-decoration-color:var(--wa);text-decoration-thickness:2px;text-underline-offset:.28em}
  .btn--sec:hover{background:var(--negro);color:var(--blanco);box-shadow:inset 0 0 0 2px var(--negro)}
}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:60;background:var(--azul-oscuro);color:var(--blanco);
  padding-top:env(safe-area-inset-top,0px)}
.cab__b{display:flex;align-items:center;gap:var(--s4);min-height:var(--cab)}
.cab__logo{margin-right:auto;display:block;padding:.5rem 0}
.cab__logo img{width:10rem}
.cab__nav{display:none}
/* WhatsApp en la cabecera: no es un boton, es el canal. El logo vive en su circulo verde, como el
   icono de la app, y el texto va en blanco sobre el azul, sin caja. En movil queda solo el circulo. */
.cab__wa{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;text-decoration:none;color:var(--blanco)}
.cab__wa-ico{width:2.6rem;height:2.6rem;
  box-shadow:0 6px 16px -6px rgb(0 0 0 / .45);transition:transform 200ms var(--salida),background-color 150ms ease}
.cab__wa-txt{display:none;line-height:1.15}
.cab__wa-txt b{display:block;font-size:.98rem}
.cab__wa:active .cab__wa-ico{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .cab__wa:hover .cab__wa-ico{transform:scale(1.07);background:var(--wa-hover)}
  .cab__wa:hover .cab__wa-txt b{text-decoration:underline;text-decoration-color:var(--wa);text-decoration-thickness:2px;text-underline-offset:.25em}
}

/* ==========================================================================
   HERO: el selector sigue siendo la pieza fuerte. El resto se calla.
   ========================================================================== */
.hero{background:var(--azul-oscuro);color:var(--blanco);position:relative;
  padding:var(--s5) 0 var(--s6)}
.hero__fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__simbolo{position:absolute;right:-14%;bottom:-12%;width:min(68vw,34rem);aspect-ratio:1;
  background:var(--azul);opacity:.55;
  -webkit-mask:url(../simbolo.svg) center/contain no-repeat;
          mask:url(../simbolo.svg) center/contain no-repeat}
.hero__grid{display:grid;position:relative;
  grid-template-areas:"texto" "preg" "lista" "panel";grid-template-columns:minmax(0,1fr)}
.hero__texto{grid-area:texto;margin-bottom:var(--s5)}
.sel__preg{grid-area:preg}
.sel__lista{grid-area:lista}
.sel__panel{grid-area:panel}
.hero h1 em{font-style:normal;color:var(--azul-claro);display:block}
.hero__sub{margin:var(--s3) 0 0;max-width:40ch}

.sel input{position:absolute;opacity:0;pointer-events:none}
.sel__preg{font-size:clamp(1.25rem,4.4vw,1.6rem);margin-bottom:var(--s3);color:var(--blanco)}
.sel__lista{display:flex;gap:var(--s2);list-style:none;margin:0 calc(-1 * var(--gut));
  padding:0 var(--gut) var(--s1);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none}
.sel__lista::-webkit-scrollbar{display:none}
.sel__lista li{flex:0 0 auto;scroll-snap-align:start}
.sel__lista label{display:flex;align-items:center;gap:.7rem;cursor:pointer;min-height:3rem;
  font-family:var(--titular);text-transform:uppercase;font-size:1.1rem;line-height:1;
  padding:.6rem .9rem;color:var(--blanco);box-shadow:inset 0 0 0 2px var(--azul);white-space:nowrap;
  transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 130ms var(--salida)}
.sel__lista label::before{content:"";width:.8rem;height:.8rem;flex:0 0 auto;
  box-shadow:inset 0 0 0 2px var(--azul-claro);transition:background-color 150ms ease}
.sel__lista label:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .sel__lista label:hover{box-shadow:inset 0 0 0 2px var(--azul-claro)}
}
/* la opcion elegida se vuelve pestaña: blanca, pegada a la tarjeta blanca de abajo */
#n1:checked~.sel__lista label[for=n1],#n2:checked~.sel__lista label[for=n2],
#n3:checked~.sel__lista label[for=n3],#n4:checked~.sel__lista label[for=n4],
#n5:checked~.sel__lista label[for=n5]{background:var(--blanco);color:var(--negro);box-shadow:none}
#n1:checked~.sel__lista label[for=n1]::before,#n2:checked~.sel__lista label[for=n2]::before,
#n3:checked~.sel__lista label[for=n3]::before,#n4:checked~.sel__lista label[for=n4]::before,
#n5:checked~.sel__lista label[for=n5]::before{background:var(--rojo);box-shadow:none}
.sel input:focus-visible~.sel__lista{outline:3px solid var(--rojo);outline-offset:4px}

.sel__panel{position:relative;overflow:hidden;margin-top:var(--s3)}
.cara{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(3px);
  transition:opacity 240ms var(--salida),transform 240ms var(--salida),filter 240ms var(--salida),visibility 0s 240ms}
#n1:checked~.sel__panel .cara--1,#n2:checked~.sel__panel .cara--2,
#n3:checked~.sel__panel .cara--3,#n4:checked~.sel__panel .cara--4,
#n5:checked~.sel__panel .cara--5{position:relative;opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}

.tarjeta{background:var(--blanco);color:var(--negro);height:100%;display:grid;grid-template-rows:auto 1fr}
/* foto real del sitio actual en su proporcion 2:1: se ve completa, sin recorte */
.tarjeta__foto{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--azul-claro)}
/* renovacion no tiene vehiculo: una banda con su icono */
.escena--icono{display:grid;place-items:center;aspect-ratio:4/1;background:var(--azul-claro)}
.escena__simbolo{display:none}
.escena__ico{width:3.5rem;height:3.5rem;color:var(--azul-oscuro)}
.tarjeta__cuerpo{padding:var(--s4) var(--s4) var(--s5);display:grid;gap:var(--s2);align-content:start}
.tarjeta__cab{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.tarjeta__cod{font-family:var(--titular);font-size:clamp(2.2rem,8vw,3rem);line-height:.82;color:var(--azul-oscuro)}
.tarjeta__cod--multi{font-size:clamp(1.7rem,6vw,2.3rem)}
.tarjeta h3{font-size:clamp(1.3rem,4.6vw,1.8rem)}
.tarjeta--titular h3{font-size:clamp(1.9rem,7vw,2.8rem);color:var(--azul-oscuro)}
.tarjeta__ico{color:var(--azul-oscuro);width:2.6rem;height:2.6rem}
.tarjeta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.1rem var(--s4);font-size:.95rem;line-height:1.45}
.tarjeta dt{font-weight:700}
.tarjeta dd{margin:0}
.tarjeta p{margin:0;font-size:.97rem}
.tarjeta .btn{justify-self:start;margin-top:var(--s1)}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero__sub,.sel{animation:sube 620ms var(--salida) both}
  .hero__sub{animation-delay:60ms}
  .sel{animation-delay:120ms}
}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- cifras: centradas y repartidas por igual ---------- */
.cifras{background:var(--negro);color:var(--blanco);padding:var(--s7) 0}
.cifras ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s6) var(--s4);text-align:center;max-width:64rem}
.cifras b{display:block;white-space:nowrap;font-family:var(--titular);font-weight:400;font-size:clamp(2.3rem,9vw,3.6rem);
  line-height:.85;font-variant-numeric:tabular-nums}
.cifras li:nth-child(2) b,.cifras li:nth-child(4) b{color:var(--azul-claro)}
.cifras span{display:block;margin:var(--s2) auto 0;font-size:.95rem;font-weight:600;max-width:16ch}

/* ---------- categorias ---------- */
.grupo{margin-top:var(--s7)}
.grupo:first-of-type{margin-top:0}
.grupo h3{color:var(--azul-oscuro);font-size:clamp(1.3rem,4.2vw,1.7rem);margin:0}
/* cada grupo abre con su linea: el ancho de la linea es el ancho del grupo, y el dato de la derecha
   dice por que son dos grupos (particular desde 16, publico desde 18) */
.grupo__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s4);
  padding-bottom:var(--s3);margin-bottom:var(--s5);border-bottom:4px solid var(--negro)}
.grupo__cab p{margin:0;font-size:.92rem;font-weight:700}
/* flex centrado: dos tarjetas quedan al centro, no pegadas a la izquierda */
.tarjetas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5)}
.tarjetas>li{flex:1 1 100%;display:flex}
.cat{display:flex;flex-direction:column;width:100%;text-decoration:none;background:var(--azul-claro);
  transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--salida)}
.cat:active{transform:scale(.99)}
.cat img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}   /* 2:1 como la foto: completa */
.cat__cuerpo{padding:var(--s5);display:flex;flex-direction:column;align-items:flex-start;flex:1}
.cat__cod{font-family:var(--titular);font-size:clamp(2.4rem,8vw,3.1rem);line-height:.82;color:var(--azul-oscuro);
  transition:color 160ms ease}
.cat__nom{font-family:var(--titular);text-transform:uppercase;font-size:clamp(1.2rem,4.2vw,1.5rem);
  line-height:1;margin:var(--s1) 0 var(--s2)}
.cat__det{font-size:.97rem;line-height:1.45}
.req{display:inline-block;margin-top:var(--s3);font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;background:var(--rojo);color:var(--negro);padding:.2rem .5rem}
.horas{display:block;width:100%;margin-top:auto;padding-top:var(--s4)}
.horas__barra{display:flex;height:.55rem;background:var(--blanco);
  width:calc((var(--t) + var(--p)) / var(--tope,65) * 100%)}
.horas__barra i{display:block}
.horas__barra .t{flex:var(--t);background:var(--azul)}
.horas__barra .p{flex:var(--p);background:var(--rojo)}
/* la leyenda va pegada a la barra, en cada tarjeta, con la muestra de color al lado */
.horas__pie{display:flex;flex-wrap:wrap;gap:.2rem var(--s4);margin-top:var(--s2);font-size:.92rem}
.horas__pie span{display:inline-flex;align-items:center}
.horas__pie span::before{content:"";width:.75rem;height:.75rem;flex:0 0 auto;margin-right:.4rem}
.horas__pie .t::before{background:var(--azul)}
.horas__pie .p::before{background:var(--rojo)}
.horas__pie b{font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .cat:hover{background:var(--negro);color:var(--blanco)}
  .cat:hover .cat__cod{color:var(--wa)}
  .cat:hover .horas__barra{background:var(--azul-oscuro)}
  .cat:hover .req{background:var(--blanco)}
}

/* ---------- proceso ---------- */
.proceso{background:var(--azul);color:var(--blanco)}
.pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:var(--s6)}
.paso{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:start}
.paso__marca{display:flex;align-items:center;gap:var(--s3);grid-row:span 2}
.paso__marca::before{content:counter(p);font-family:var(--titular);font-size:1.3rem;line-height:1;
  background:var(--rojo);color:var(--negro);width:2.2rem;height:2.2rem;display:grid;place-items:center}
.paso__marca>.ico{width:2.2rem;height:2.2rem}
.paso h3{font-size:clamp(1.15rem,3.6vw,1.4rem);align-self:center}
.paso p{margin:0;grid-column:2}
.proceso__nota{display:flex;gap:var(--s3);align-items:flex-start;max-width:44rem;margin:var(--s7) auto 0;
  font-size:.98rem}
.proceso__nota>.ico{flex:0 0 auto;margin-top:.1rem}

/* ---------- horarios ---------- */
.horarios{background:var(--blanco)}
.franjas{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.franja{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:start}
.franja>.ico{width:2rem;height:2rem;color:var(--azul);grid-row:span 3}
.franja p{margin:0}
.franja .pc{justify-self:start;margin-top:var(--s1)}

/* ---------- incluye ---------- */
.incluye{background:var(--azul-claro)}
.beneficios{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5) var(--s6)}
.beneficio{display:flex;gap:var(--s4);align-items:flex-start}
.beneficio>.ico{width:2rem;height:2rem;color:var(--azul-oscuro)}
.beneficio b{display:block;font-size:1.05rem}
.beneficio span{display:block;font-size:.97rem;margin-top:.15rem}
.incluye .pc,.sec--claro .pc{background:var(--blanco)}   /* sobre azul claro la marca va en blanco */
.beneficio .pc{display:inline-flex;white-space:normal;margin-top:var(--s2);font-size:.8rem}
.incluye__validar{text-align:center;margin:var(--s6) 0 0}
.precio{background:var(--azul-oscuro);color:var(--blanco);margin-top:var(--s7);padding:var(--s6) var(--s5);
  display:grid;gap:var(--s6);align-items:center}
.precio__txt{display:grid;gap:var(--s4)}
.precio h3{font-size:clamp(1.7rem,5.5vw,2.4rem)}
.precio p{margin:0;max-width:52ch}
.runt{display:flex;gap:var(--s3);align-items:flex-start;background:var(--blanco);color:var(--negro);
  padding:var(--s4);font-weight:600}
.runt>.ico{color:var(--azul-oscuro)}
/* cotizacion: la accion no flota sola, es el pie de una tarjeta que muestra que se envia y que se recibe */
.cot{background:var(--blanco);color:var(--negro);display:flex;flex-direction:column;align-self:stretch;
  box-shadow:0 22px 40px -26px rgb(0 0 0 / .55)}
.cot .cot__t{margin:0;max-width:none;padding:var(--s5) var(--s5) 0;font-family:var(--titular);text-transform:uppercase;font-size:1.35rem;
  line-height:1;color:var(--azul-oscuro)}
.cot .cot__msj{position:relative;margin:var(--s4) var(--s5) 0;padding:var(--s3) var(--s4);background:var(--azul-claro);
  font-size:1rem;font-weight:600;line-height:1.4;max-width:30ch}
.cot .cot__msj::after{content:"";position:absolute;left:var(--s4);bottom:-.55rem;border:.3rem solid transparent;
  border-top:.3rem solid var(--azul-claro);border-left:.3rem solid var(--azul-claro)}
.cot .cot__sub{max-width:none;margin:var(--s5) var(--s5) var(--s2);font-size:.9rem;font-weight:700}
.cot__lista{list-style:none;margin:0 var(--s5) var(--s5);padding:0;display:grid;gap:var(--s2);font-size:.97rem}
.cot__lista li{display:flex;gap:var(--s2);align-items:flex-start}
.cot__lista .ico{width:1.2rem;height:1.2rem;color:var(--azul);margin-top:.15rem}
.cot__btn{margin-top:auto;display:flex;align-items:center;gap:var(--s3);min-height:4.5rem;padding:var(--s3) var(--s5);
  border-top:1px solid var(--azul-claro);text-decoration:none;color:var(--negro);font-weight:700;font-size:1.15rem;
  transition:background-color 150ms ease}
.cot__btn .wa-ico{width:3rem;height:3rem}
.cot__f{margin-left:auto;width:1.4rem;height:1.4rem;color:var(--azul);transition:transform 180ms var(--salida)}
.cot__btn:active .wa-ico{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .cot__btn:hover{background:var(--azul-claro)}
  .cot__btn:hover .wa-ico{transform:scale(1.07);background:var(--wa-hover)}
  .cot__btn:hover .cot__f{transform:translateX(4px)}
}

/* ---------- sedes ---------- */
.leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4) var(--s6);margin:0 auto var(--s6);
  list-style:none;padding:0;max-width:52rem}
.leyenda li{display:grid;gap:var(--s2);justify-items:center;text-align:center;max-width:20rem}
.leyenda b{display:block}
.tipo{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;padding:.22rem .5rem;white-space:nowrap}
.tipo--sede{background:var(--azul-oscuro);color:var(--blanco)}
.tipo--punto{background:var(--blanco);color:var(--azul-oscuro);box-shadow:inset 0 0 0 2px var(--azul-oscuro)}
.sedes__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5)}
.sedes__lista>li{flex:1 1 100%;display:flex}
.sede{width:100%;background:var(--blanco);box-shadow:inset 0 0 0 2px var(--negro);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3)}
.sede h3{font-size:clamp(1.3rem,4.4vw,1.6rem)}
.sede>.pc{align-self:flex-start}
.sede__zona{font-weight:600;color:var(--azul-oscuro);margin:0}
.sede__dir{display:flex;align-items:flex-start;gap:var(--s2);margin:0}
.sede__dir>.ico{color:var(--azul);margin-top:.05rem;width:1.35rem;height:1.35rem}
.sede__dir a{font-weight:700;display:inline-block;padding:.55rem 0;margin:-.55rem 0}
.sede__servicios{margin:0;padding:0;list-style:none;border-top:1px solid var(--azul-claro);padding-top:var(--s3);
  display:grid;gap:var(--s2);font-size:.95rem}
.sede__servicios li{display:flex;gap:var(--s2);align-items:flex-start}
.sede__servicios li>.ico{width:1.2rem;height:1.2rem;color:var(--azul);margin-top:.15rem}

/* ---------- empresas ---------- */
.empresas{background:var(--negro);color:var(--blanco)}
.empresas__grid{display:grid;gap:var(--s6);align-items:center}
.empresas h2{color:var(--blanco)}
.servicios-e{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.servicios-e li{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4)}
.servicios-e li>.ico{width:2rem;height:2rem;color:var(--azul-claro);grid-row:span 2}
.servicios-e b{display:block;font-size:1.1rem}

/* ---------- preguntas ---------- */
.faq__lista{max-width:48rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--negro)}
.faq details:first-child{border-top:1px solid var(--negro)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:3.5rem;padding:var(--s3) 0;font-weight:700;font-size:1.08rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--azul);transition:transform 200ms var(--salida)}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq__resp{padding:0 0 var(--s5)}
.faq__resp p,.faq__resp ul{margin:0 0 var(--s3);max-width:65ch}
.faq__resp ul{padding-left:1.15rem}
.faq__resp li{margin-bottom:.3rem}
.faq__resp :last-child{margin-bottom:0}


/* ---------- preguntas por tema: la logica del hero en claro ----------
   Selector a la izquierda (el cuadrado se vuelve rojo), panel blanco con las respuestas a la derecha. */
.faq--temas{background:var(--azul-claro)}
.faq-t{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "temas" "grupos" "mas"}
.faq-t>input{position:absolute;opacity:0;pointer-events:none}
.faq-t__cab{grid-area:cab;margin-bottom:var(--s5)}
.faq-t__cab h2{margin-bottom:var(--s3)}
.faq-t__temas{grid-area:temas;list-style:none;display:flex;gap:var(--s2);margin:0 calc(-1 * var(--gut)) var(--s4);
  padding:0 var(--gut) var(--s1);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
  overscroll-behavior-x:contain;scrollbar-width:none}
.faq-t__temas::-webkit-scrollbar{display:none}
.faq-t__temas li{flex:0 0 auto;scroll-snap-align:start}
.faq-t__temas label{display:flex;align-items:center;gap:.7rem;min-height:3rem;padding:.6rem .9rem;cursor:pointer;white-space:nowrap;
  font-family:var(--titular);text-transform:uppercase;font-size:1.05rem;line-height:1;color:var(--negro);
  box-shadow:inset 0 0 0 2px var(--negro);
  transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 130ms var(--salida)}
.faq-t__temas label::before{content:"";width:.8rem;height:.8rem;flex:0 0 auto;box-shadow:inset 0 0 0 2px var(--azul-oscuro);
  transition:background-color 150ms ease}
.faq-t__temas label:active{transform:scale(.985)}
.faq-t__n{margin-left:auto;font-family:var(--texto);font-weight:700;font-size:.85rem}
@media (hover:hover) and (pointer:fine){.faq-t__temas label:hover{background:var(--blanco)}}
.faq-t__grupos{grid-area:grupos;background:var(--blanco);padding:var(--s2) var(--s5) var(--s4)}
.faq-g__t{font-size:clamp(1.3rem,4.4vw,1.7rem);color:var(--azul-oscuro);padding:var(--s4) 0 var(--s3)}
.faq--temas .faq-g details:first-of-type{border-top:1px solid var(--negro)}
.faq--temas .faq-g details:last-child{border-bottom:0}
.faq-t__mas{grid-area:mas;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:var(--s5) 0 0;font-weight:700}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.faq-g{animation:aparece 240ms var(--salida)}}
#ft1:checked~.faq-t__grupos .faq-g:not([data-g="1"]){display:none}
#ft2:checked~.faq-t__grupos .faq-g:not([data-g="2"]){display:none}
#ft3:checked~.faq-t__grupos .faq-g:not([data-g="3"]){display:none}
#ft4:checked~.faq-t__grupos .faq-g:not([data-g="4"]){display:none}
#ft5:checked~.faq-t__grupos .faq-g:not([data-g="5"]){display:none}
#ft6:checked~.faq-t__grupos .faq-g:not([data-g="6"]){display:none}
#ft7:checked~.faq-t__grupos .faq-g:not([data-g="7"]){display:none}
#ft8:checked~.faq-t__grupos .faq-g:not([data-g="8"]){display:none}
#ft1:checked~.faq-t__temas label[for=ft1],#ft2:checked~.faq-t__temas label[for=ft2],#ft3:checked~.faq-t__temas label[for=ft3],#ft4:checked~.faq-t__temas label[for=ft4],#ft5:checked~.faq-t__temas label[for=ft5],#ft6:checked~.faq-t__temas label[for=ft6],#ft7:checked~.faq-t__temas label[for=ft7],#ft8:checked~.faq-t__temas label[for=ft8]{background:var(--azul-oscuro);color:var(--blanco);box-shadow:none}
#ft1:checked~.faq-t__temas label[for=ft1]::before,#ft2:checked~.faq-t__temas label[for=ft2]::before,#ft3:checked~.faq-t__temas label[for=ft3]::before,#ft4:checked~.faq-t__temas label[for=ft4]::before,#ft5:checked~.faq-t__temas label[for=ft5]::before,#ft6:checked~.faq-t__temas label[for=ft6]::before,#ft7:checked~.faq-t__temas label[for=ft7]::before,#ft8:checked~.faq-t__temas label[for=ft8]::before{background:var(--rojo);box-shadow:none}
.faq-t>input:focus-visible~.faq-t__temas{outline:3px solid var(--rojo);outline-offset:4px}
@media (min-width:60rem){
  .faq-t{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);column-gap:var(--s8);
    grid-template-areas:"cab grupos" "temas grupos" "mas grupos";grid-template-rows:auto auto 1fr;align-items:start}
  .faq-t__temas{display:grid;grid-template-columns:1fr;gap:var(--s1);margin:0;padding:0;overflow:visible}
  .faq-t__temas label{white-space:normal;min-height:2.9rem}
  .faq-t__grupos{padding:var(--s3) var(--s6) var(--s5)}
}

/* ---------- cierre: azul institucional, texto blanco, WhatsApp verde ----------
   Retoma el lenguaje del hero: titular a tamaño completo, el simbolo grande recortado y las
   mismas cinco necesidades del selector, ahora como mensajes listos para enviar. */
.cierre{background:var(--azul);color:var(--blanco);position:relative}
.cierre__fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cierre__simbolo{position:absolute;left:-18%;bottom:-22%;width:min(92vw,40rem);aspect-ratio:1;
  background:var(--azul-oscuro);opacity:.55;
  -webkit-mask:url(../simbolo.svg) center/contain no-repeat;
          mask:url(../simbolo.svg) center/contain no-repeat}
.cierre__grid{position:relative;display:grid;gap:var(--s6);align-items:center}
.cierre h2{font-size:clamp(2.6rem,9vw,5rem);max-width:10ch;margin-bottom:var(--s5)}
.cierre__txt p{max-width:40ch;font-size:1.12rem;margin:0 0 var(--s4)}
.cierre__alt{font-size:1rem!important}
.cierre__alt a{font-weight:700;display:inline-block;padding:.6rem 0;margin:-.6rem 0}
.mensajes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.mensajes>li:first-child .msj{border-top:1px solid var(--azul-claro)}
.msj{display:flex;align-items:center;gap:var(--s4);min-height:4rem;padding:var(--s3) var(--s2);
  text-decoration:none;background:transparent;color:var(--blanco);border-bottom:1px solid var(--azul-claro);
  transition:background-color 150ms ease,color 150ms ease,transform 130ms var(--salida)}
.msj:active{transform:scale(.99)}
.msj__logo{width:2.4rem;height:2.4rem}
.msj__cuerpo{flex:1}
.msj b{display:block;font-family:var(--titular);font-weight:400;text-transform:uppercase;font-size:1.2rem;line-height:1}
.msj__txt{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.35}
.msj__tuya{display:none;margin-bottom:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;background:var(--blanco);color:var(--negro);padding:.2rem .45rem;white-space:nowrap}
.mensajes__otra{order:10;margin-top:var(--s3)}
.mensajes__otra .btn{width:auto}
@media (hover:hover) and (pointer:fine){
  .msj:hover b{text-decoration:underline;text-decoration-color:var(--wa);text-decoration-thickness:2px;text-underline-offset:.25em}
}
/* si la persona ya eligio arriba, ese mensaje sube, se pinta como la pestaña elegida del hero
   y se marca. Solo despues de una eleccion real: la opcion marcada por defecto no cuenta. */
body.eligio:has(#n1:checked) .mensajes li:has(.msj[data-n=n1]),
body.eligio:has(#n2:checked) .mensajes li:has(.msj[data-n=n2]),
body.eligio:has(#n3:checked) .mensajes li:has(.msj[data-n=n3]),
body.eligio:has(#n4:checked) .mensajes li:has(.msj[data-n=n4]),
body.eligio:has(#n5:checked) .mensajes li:has(.msj[data-n=n5]){order:-1}
body.eligio:has(#n1:checked) .msj[data-n=n1],body.eligio:has(#n2:checked) .msj[data-n=n2],
body.eligio:has(#n3:checked) .msj[data-n=n3],body.eligio:has(#n4:checked) .msj[data-n=n4],
body.eligio:has(#n5:checked) .msj[data-n=n5]{background:var(--azul-oscuro);color:var(--blanco)}
body.eligio:has(#n1:checked) .msj[data-n=n1] .msj__tuya,body.eligio:has(#n2:checked) .msj[data-n=n2] .msj__tuya,
body.eligio:has(#n3:checked) .msj[data-n=n3] .msj__tuya,body.eligio:has(#n4:checked) .msj[data-n=n4] .msj__tuya,
body.eligio:has(#n5:checked) .msj[data-n=n5] .msj__tuya{display:inline-block}

/* ==========================================================================
   NAVEGACION DEL SITIO: mega menu en escritorio, grupos plegables en movil.
   Un solo arbol de datos (MENU en _sitio.py) alimenta los dos y el pie.
   ========================================================================== */
.sr.saltar:focus{position:fixed;left:var(--s4);top:var(--s4);width:auto;height:auto;clip:auto;z-index:100;
  background:var(--blanco);color:var(--negro);padding:.75rem 1rem;font-weight:700}

/* enlace interno con flecha: lleva a otra pagina */
.enl{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;font-weight:700;color:var(--azul-oscuro);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-color:var(--azul-claro);
  transition:text-decoration-color 140ms ease}
.enl__f{width:1.15em;height:1.15em;transition:transform 180ms var(--salida)}
.nw{white-space:nowrap}
.nw .enl__f,.cat__ver .enl__f{display:inline-block;vertical-align:-.22em;margin-left:.3rem}
.enl--claro{color:var(--blanco);text-decoration-color:var(--azul-claro)}
@media (hover:hover) and (pointer:fine){
  .enl:hover{text-decoration-color:currentColor}
  .enl:hover .enl__f{transform:translateX(3px)}
}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6)}
.sec-pie{text-align:center;margin:var(--s7) 0 0}
.tarjeta__acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);margin-top:var(--s1)}
.tarjeta__acc .btn{margin-top:0}
.cat__ver{display:block;margin-top:var(--s4);font-weight:700;line-height:1.35;color:var(--azul-oscuro);
  transition:color 160ms ease}
.sede__enl{text-decoration:none}
.sede__ver{margin-top:auto;align-self:flex-start}
.servicios-e b a{text-decoration:underline;text-decoration-color:var(--azul-claro);text-underline-offset:.25em}
@media (hover:hover) and (pointer:fine){
  .cat:hover .cat__ver{color:var(--blanco)}
  .sede__enl:hover{text-decoration:underline}
}

/* ---------- mega menu (escritorio) ---------- */
.mm__raiz{display:flex;list-style:none;margin:0;padding:0;gap:var(--s4);height:var(--cab)}
.mm{display:flex;align-items:center}
.mm__a{display:flex;align-items:center;height:100%;text-decoration:none;font-weight:600;font-size:.98rem;color:var(--blanco);
  box-shadow:inset 0 -3px 0 transparent;transition:box-shadow 140ms ease}
.mm__a--txt{cursor:default}
.mm[data-actual] .mm__a{box-shadow:inset 0 -3px 0 var(--rojo)}
.mm__b{display:grid;place-items:center;width:1.9rem;height:2.75rem;margin-left:.1rem;padding:0;border:0;background:none;
  color:var(--blanco);cursor:pointer}
.mm__b .ico{width:1.05rem;height:1.05rem;color:var(--azul-claro);transition:transform 200ms var(--salida)}
.mm[data-abierto] .mm__b .ico{transform:rotate(180deg)}
.mm__panel{position:absolute;left:0;right:0;top:100%;background:var(--blanco);color:var(--negro);
  box-shadow:0 26px 40px -22px rgb(0 0 0 / .5);border-top:1px solid var(--azul-claro);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 150ms var(--salida),transform 150ms var(--salida),visibility 0s linear 150ms}
.mm[data-abierto] .mm__panel{opacity:1;visibility:visible;transform:none;
  transition:opacity 180ms var(--salida),transform 180ms var(--salida),visibility 0s}
@media (hover:hover) and (pointer:fine){
  .mm__a:hover{box-shadow:inset 0 -3px 0 var(--azul-claro)}
  .mm[data-actual] .mm__a:hover{box-shadow:inset 0 -3px 0 var(--rojo)}
  .mm__b:hover .ico{color:var(--blanco)}
  /* hover con intencion: 70 ms antes de abrir, para que cruzar la barra no despliegue paneles */
  .mm:hover .mm__panel{opacity:1;visibility:visible;transform:none;
    transition:opacity 180ms var(--salida) 70ms,transform 180ms var(--salida) 70ms,visibility 0s 70ms}
  .mm:hover .mm__b .ico{transform:rotate(180deg)}
  .mm__raiz.cerrado .mm:not([data-abierto]) .mm__panel{opacity:0;visibility:hidden;transition:none}
}
.mm__g{display:grid;gap:var(--s6);padding:var(--s6) 0 var(--s7)}
.mm__g--lic{grid-template-columns:1fr 1fr minmax(16rem,.9fr)}
.mm__g--tra,.mm__g--emp,.mm__g--sed{grid-template-columns:minmax(0,2fr) minmax(16rem,.9fr)}
.mm__h{font-size:1.05rem;color:var(--azul);margin:0 0 var(--s3)}
.mm__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.mm__l--2{grid-template-columns:1fr 1fr;align-content:start;gap:var(--s2) var(--s4)}
.mm__l--3{grid-template-columns:repeat(3,1fr);align-content:start;gap:var(--s2) var(--s4)}
.mm-cat,.mm-it{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3);text-decoration:none;color:inherit;
  transition:background-color 120ms ease,color 120ms ease}
.mm-cat__cod{font-family:var(--titular);font-size:2.3rem;line-height:.85;color:var(--azul-oscuro);width:2.9rem;flex:0 0 auto}
.mm-cat__txt{display:grid;gap:.35rem;flex:1}
.mm-cat__txt b{font-family:var(--titular);font-weight:400;text-transform:uppercase;font-size:1.15rem;line-height:1}
.horas--mini{padding-top:0;margin:0}
.horas--mini .horas__barra{height:.35rem;background:transparent}
.horas--mini .num{font-size:.84rem}
.mm-it>.ico{width:1.5rem;height:1.5rem;color:var(--azul);margin-top:.05rem}
.mm-it b{display:block;font-size:1.02rem;line-height:1.3}
.mm-it span span{display:block;font-size:.92rem;line-height:1.4;margin-top:.1rem}
.mm-cat[aria-current],.mm-it[aria-current]{box-shadow:inset 0 0 0 2px var(--azul-claro)}
.mm__lado{background:var(--azul-oscuro);color:var(--blanco);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);align-self:start}
.mm__lado-t{font-family:var(--titular);text-transform:uppercase;font-size:1.35rem;line-height:1;margin:0}
.mm__lado p{margin:0;font-size:.95rem}
.mm__lado .mm-it>.ico{color:var(--azul-claro)}
.mm__lado .enl{margin-top:var(--s1)}
@media (hover:hover) and (pointer:fine){
  .mm-cat:hover,.mm-it:hover{background:var(--azul-claro)}
  .mm__lado .mm-it:hover{background:var(--azul);color:var(--blanco)}
}

/* ---------- menu movil: <details> nativo, accesible sin JavaScript ---------- */
.menu-m{position:static}
.menu-m>summary{list-style:none;display:flex;align-items:center;gap:.45rem;cursor:pointer;
  min-height:2.75rem;padding:.5rem .8rem;font-weight:700;font-size:.98rem;
  box-shadow:inset 0 0 0 2px var(--azul-claro)}
.menu-m summary::-webkit-details-marker{display:none}
.menu-m .i-cerrar{display:none}
.menu-m[open] .i-abrir{display:none}
.menu-m[open] .i-cerrar{display:block}
.menu-m>nav{position:absolute;left:0;right:0;top:100%;background:var(--azul-oscuro);
  border-top:1px solid var(--azul);box-shadow:0 18px 30px -12px rgb(0 0 0 / .45);
  max-height:calc(100dvh - var(--cab) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
.menu-m__cuerpo{padding:var(--s2) var(--gut) var(--s6)}
.mg{border-bottom:1px solid var(--azul)}
.mg>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:3.5rem;cursor:pointer;
  font-family:var(--titular);text-transform:uppercase;font-size:1.3rem;line-height:1}
.mg>summary .ico{color:var(--azul-claro);transition:transform 200ms var(--salida)}
.mg[open]>summary .ico{transform:rotate(180deg)}
.mg ul,.mg__sueltos{list-style:none;margin:0;padding:0 0 var(--s3)}
.mg li a,.mg__sueltos li a{display:flex;align-items:center;gap:var(--s3);min-height:2.9rem;text-decoration:none;font-weight:600;font-size:1.05rem;color:var(--blanco)}
.mg li a[aria-current],.mg__sueltos li a[aria-current]{text-decoration:underline;text-decoration-color:var(--rojo);text-decoration-thickness:2px;text-underline-offset:.3em}
.mg__cod{font-family:var(--titular);font-weight:400;font-size:1.55rem;line-height:1;color:var(--azul-claro);width:2.2rem}   /* 24 px: texto grande, 3:1 basta */
.mg__sueltos{padding-top:var(--s2)}
.mg__sueltos li a{min-height:3.25rem;font-family:var(--titular);text-transform:uppercase;font-weight:400;font-size:1.3rem;border-bottom:1px solid var(--azul)}

/* ---------- pie: mapa del sitio ---------- */
.pie{background:var(--azul-oscuro);color:var(--blanco);padding:var(--s8) 0 var(--s6);font-size:.97rem}
.pie__logo{display:inline-block;margin-bottom:var(--s5)}
.pie__logo img{width:10rem}
.pie__g{display:grid;gap:var(--s6) var(--s5);grid-template-columns:1fr 1fr}
.pie__marca{grid-column:1/-1}
.pie h2{font-size:1.1rem;margin-bottom:var(--s2);color:var(--blanco)}
.pie__h2{margin-top:var(--s5)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li a{display:inline-flex;align-items:center;min-height:2.5rem;text-decoration:none}
.pie a{color:var(--blanco)}
.pie__canal{display:inline-flex;align-items:center;gap:var(--s3);font-weight:700;min-height:2.75rem}
.wa-ico--p{width:2rem;height:2rem;box-shadow:none}
.pie__legal{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--azul);font-size:.9rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s6)}
.pie__legal ul{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.pie__legal p{margin:0;align-self:center}
@media (hover:hover) and (pointer:fine){.pie li a:hover{text-decoration:underline;text-underline-offset:.25em}}

@media (min-width:60rem){
  .pie__g{grid-template-columns:1.5fr repeat(4,1fr)}
  .pie__marca{grid-column:auto}
}
@media (min-width:60rem) and (max-width:71.99rem){
  .cab__logo img{width:8.5rem}
  .mm__raiz{gap:var(--s3)}
  .mm__a{font-size:.93rem}
}
@media (min-width:72rem){
  .cab__wa-txt{display:block}
}

/* ---------- barra fija de WhatsApp en movil ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--azul-oscuro);color:var(--blanco);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s4);
  padding:.65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 24px -14px rgb(0 0 0 / .5);
  transition:transform 240ms var(--salida)}
.barra p{margin:0;font-weight:700;font-size:.95rem;line-height:1.2}
.barra .btn{font-size:1.05rem;min-height:2.9rem;padding:0}
.barra.oculta{transform:translateY(110%)}   /* se esconde cuando el cierre o el pie ya estan a la vista */

/* en pantallas anchas las cinco categorias van en una fila: 2 para moverte + 3 para trabajar */
@media (min-width:72rem){
  .grupos{display:grid;grid-template-columns:2fr 3fr;gap:var(--s8)}
  .grupos .grupo{margin-top:0;display:flex;flex-direction:column}
  .grupos .grupo .tarjetas{flex:1}
  .grupos .tarjetas{flex-wrap:nowrap;justify-content:flex-start}
  .grupos .tarjetas>li{flex:1 1 0}
  .grupos .cat__cuerpo{padding:var(--s4)}
  .grupos .cat__cod{font-size:2.5rem}
  .grupos .cat__nom{font-size:1.2rem}
  .grupos .cat__det{font-size:.93rem}
}

/* ---------- tableta ---------- */
@media (min-width:40rem){
  .tarjetas>li{flex:0 1 calc((100% - var(--s5)) / 2)}
  .sedes__lista>li{flex:0 1 calc((100% - var(--s5)) / 2)}
  .beneficios{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .franjas{grid-template-columns:repeat(3,1fr)}
  .precio{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding:var(--s7);align-items:stretch;column-gap:var(--s8)}
  .precio__txt{align-content:center}
  .precio .btn{justify-self:center}
}

/* ---------- escritorio ---------- */
@media (min-width:60rem){
  body{padding-bottom:0}
  html{scroll-padding-bottom:0}
  .barra{display:none}
  .menu-m{display:none}
  .cab__nav{display:block}
  .hero{padding:var(--s7) 0}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s8);
    grid-template-areas:"texto panel" "preg panel" "lista panel";grid-template-rows:auto auto 1fr;align-items:start}
  .hero__texto{margin-bottom:var(--s6)}
  .hero h1{font-size:clamp(2.6rem,3.6vw,3.25rem)}
  .hero__sub{max-width:46ch}
  /* dos columnas; la de empresa va sola abajo, a lo ancho: es otro publico */
  .sel__lista{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin:0;padding:0;overflow:visible}
  .sel__lista li:last-child{grid-column:1/-1}
  .sel__lista label{white-space:normal;font-size:1rem;min-height:2.75rem}
  .sel__panel{margin-top:0;align-self:center}
  /* encabezado de seccion a lo ancho: titulo a la izquierda, apoyo a la derecha. Ahorra scroll. */
  .sec-cab{max-width:none;text-align:left;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:var(--s8);align-items:end;margin-bottom:var(--s7)}
  .sec-cab h2{margin:0;font-size:clamp(2.4rem,3.6vw,3.3rem)}
  .sec-cab .lead{margin:0;max-width:52ch}
  .sec-cab:not(:has(.lead)){grid-template-columns:1fr}
  .sec-pie{text-align:left}
  .cifras ul{grid-template-columns:repeat(4,1fr)}
  .tarjetas>li{flex:0 1 calc((100% - 2 * var(--s5)) / 3)}
  .sedes__lista>li{flex:0 1 calc((100% - 2 * var(--s5)) / 3)}
  .pasos{grid-template-columns:repeat(4,1fr);gap:var(--s6)}
  .paso{grid-template-columns:1fr}
  .paso__marca{grid-row:auto}
  .paso p{grid-column:1}
  .paso h3{align-self:start;min-height:1.96em}
  .beneficios{grid-template-columns:repeat(3,1fr)}
  .empresas__grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .cierre__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s8)}
  .cierre__simbolo{left:-8%;bottom:-30%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .cara{transition:opacity 160ms ease,visibility 0s 160ms;transform:none;filter:none}
  .btn,.cat,.sel__lista label,.barra,.msj{transition:background-color 120ms ease,color 120ms ease}
}

/* ---------- celular: sin scroll lateral y con la información a mano (03/10/2026) ---------- */
@media (max-width:59.99rem){
  /* selector del hero: cuadrícula de dos columnas, nada que deslizar de lado */
  .sel__lista{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  .sel__lista li:last-child{grid-column:1/-1}
  .sel__lista label{white-space:normal;font-size:1rem;line-height:1.1;min-height:3rem;height:100%}
  /* temas de preguntas: cuadrícula de dos columnas, todos a la vista */
  .faq-t__temas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin:0 0 var(--s4);padding:0;overflow:visible;scroll-snap-type:none}
  .faq-t__temas label{white-space:normal;line-height:1.15;min-height:3rem;height:100%;padding:.55rem .7rem;gap:.5rem;
    font-size:.95rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .faq-t__temas label span:first-child{min-width:0}
}
@media (max-width:39.99rem){
  /* tarjetas de categoría: foto a la izquierda y datos a la derecha, la mitad de alto */
  .tarjetas{gap:var(--s3)}
  .tarjetas:not(.tarjetas--4) .cat{display:grid;grid-template-columns:40% 1fr;align-items:start}
  .tarjetas:not(.tarjetas--4) .cat img{aspect-ratio:2/1;height:auto;margin:var(--s3) 0 0 var(--s3)}   /* foto completa, sin recorte */
  .tarjetas:not(.tarjetas--4) .cat__cuerpo{padding:var(--s3) var(--s3) var(--s3) var(--s4)}
  .tarjetas:not(.tarjetas--4) .cat__cod{font-size:2rem}
  .tarjetas:not(.tarjetas--4) .cat__nom{font-size:1.05rem;margin:.15rem 0 var(--s1)}
  .tarjetas:not(.tarjetas--4) .cat__det{font-size:.92rem;line-height:1.35}
  .tarjetas:not(.tarjetas--4) .req{margin-top:var(--s2)}
  .tarjetas:not(.tarjetas--4) .horas{padding-top:var(--s2)}
  .tarjetas:not(.tarjetas--4) .cat__ver{margin-top:var(--s2);font-size:.95rem}

  /* sedes: los servicios fluyen en línea en vez de uno por renglón */
  .sedes__lista{gap:var(--s3)}
  .sede{padding:var(--s4);gap:var(--s2)}
  .sede__servicios[aria-label^="Servicios"]{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.92rem}
  .sede__servicios[aria-label^="Servicios"] li{gap:.3rem}
  .sede__servicios[aria-label^="Servicios"] li>.ico{width:1rem;height:1rem;margin-top:.2rem}

  /* qué incluye: los seis beneficios en dos columnas, icono arriba */
  .beneficios{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
  .beneficio{flex-direction:column;gap:var(--s2)}
  .beneficio>.ico{width:1.75rem;height:1.75rem}
  .beneficio b{font-size:1rem;line-height:1.2}
  .beneficio span{font-size:.92rem;line-height:1.35}

  /* cotización: menos relleno alrededor */
  .precio{padding:var(--s4)}

  /* textos chicos: mínimo legible */
  .tipo{font-size:.85rem}
}
/* objetivos táctiles de 44 px en pantallas táctiles */
@media (pointer:coarse){
  .pie li a,.pie__legal a{min-height:2.75rem}
  .pie__logo{display:inline-flex;align-items:center;min-height:2.75rem}
  .cab__wa-ico{width:2.75rem;height:2.75rem}
}