/* ================================================
   site.css — Diseno del sitio publico
   Extraido de index.html, que era la unica pagina con este diseno.
   Las demas (catalogo, empresas, nosotros, contacto) usaban base.css +
   nav.css + pages.css + footer.css, un sistema distinto: otra barra de
   navegacion, otro pie y los estilos escritos dentro del propio HTML.
   Al vivir aqui, el diseno es uno solo y se cambia en un sitio.
   ================================================ */
:root{
  --bg:#F8FAFC; --bg2:#FFFFFF; --panel:rgba(255,255,255,.72); --line:rgba(15,23,42,.10);
  --blue:#0369A1; --blue2:#0EA5E9; --blue-soft:#38BDF8; --cyan:#22D3EE;
  --txt:#0F172A; --muted:#475569; --muted2:#64748B;
  --glow:0 0 60px rgba(14,165,233,.30);
  --radius:18px;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --glass-border:rgba(255,255,255,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid #0369A1;outline-offset:2px;border-radius:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#0F172A;color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none;font-size:14px}
.skip-link:focus{left:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.08;font-weight:800}
.hero h1,.shead h2,.feat h2,.cta h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#075985}
.grad{background:linear-gradient(120deg,#0284C7,#075985 60%,#0369A1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;border-radius:99px;padding:13px 24px;cursor:pointer;border:none;transition:.22s}
.btn-primary{background:linear-gradient(135deg,#0369A1,#075985);color:#fff;box-shadow:0 10px 30px rgba(14,165,233,.45)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(14,165,233,.6)}
.btn-ghost{background:rgba(15,23,42,.04);border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{background:rgba(15,23,42,.07);border-color:rgba(14,165,233,.35)}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 78% 8%,rgba(14,165,233,.20),transparent 60%),radial-gradient(50% 40% at 10% 80%,rgba(34,211,238,.10),transparent 60%);}
.gridbg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%);mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%)}
/* La barra la pone nav.css, la misma en las cinco paginas: aqui habia otra
   distinta (.nav-in / .nlinks / .mnav) y el sitio cambiaba de cabecera al
   pasar de una pagina a otra. Solo quedan las dos variables que nav.css
   espera de base.css, que estas paginas ya no cargan. */
:root{ --nav-text:#0F172A; --nav-text-soft:#64748B; }

/* La barra de nav.css es `position: fixed`, o sea que sale del flujo. Quien
   reservaba su hueco era `body { padding-top: 64px }` de base.css; al dejar
   de cargarla, el contenido de estas paginas se metia debajo de la barra y
   en el movil tapaba justo la zona del boton del menu. */
body{ padding-top: 64px; }

/* El logo del pie sigue usando estas reglas: vivian en el bloque de la barra
   y al retirarlo se quedaba sin estilo. */
.logo{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--txt)}
.logo .mk-img{height:38px;width:auto;display:block;flex-shrink:0}
.logo small{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted2);font-weight:600}
.hero{position:relative;padding:70px 0 90px}
.hero-in{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.35);color:#075985;font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;margin-bottom:24px;box-shadow:0 6px 20px rgba(14,165,233,.14)}
.hero h1{font-size:clamp(42px,5.6vw,76px);font-weight:900;margin-bottom:20px}
.hero p{font-size:18px;color:var(--muted);max-width:480px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* `perspective` hace que el giro se vea en profundidad: sin ella, rotateY
   solo aplasta la imagen horizontalmente en vez de girarla. */
.hero-visual{position:relative;display:grid;place-items:center;min-height:480px;perspective:1400px}
.hero-visual .halo{position:absolute;width:118%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.35),transparent 60%);filter:blur(10px)}
.hero-shot{position:relative;animation:floaty 6s ease-in-out infinite;width:128%;margin-left:-14%}
/* El vaiven vertical se queda en el contenedor y el giro va en la imagen:
   las dos animaciones tocan `transform`, asi que en el mismo elemento la
   segunda anularia a la primera. */
/* La imagen llega ya recortada (PNG con transparencia), asi que no hace
   falta el degradado que antes disimulaba el rectangulo negro: los productos
   se apoyan directamente sobre el fondo de la pagina. */
.hero-shot img{width:100%;height:auto;display:block;filter:saturate(1.06) drop-shadow(0 14px 40px rgba(14,165,233,.34));
  animation:giroEje 16s ease-in-out infinite;transform-origin:center center}
/* Giro de ida y vuelta sobre el eje vertical. Una vuelta completa dejaria la
   silla y el portatil boca abajo: en una foto plana no hay reverso que
   ensenar, asi que el efecto convincente es este balanceo. */
@keyframes giroEje{0%,100%{transform:rotateY(-11deg)}50%{transform:rotateY(11deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.stats{margin-top:14px}
.stats-card{display:flex;background:var(--panel);border:1px solid var(--glass-border);border-radius:22px;padding:30px 20px;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 20px 50px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.6)}
.stat{flex:1;display:flex;gap:16px;align-items:center;justify-content:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:8%;height:84%;width:1px;background:var(--line)}
.stat .si{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.28);color:var(--blue);flex-shrink:0}
.stat .sn{font-size:34px;font-weight:900;line-height:1}
.stat .sl{font-size:13px;color:var(--muted2)}
section{padding:90px 0}
.shead{max-width:680px;margin:0 auto 56px;text-align:center}
.shead h2{font-size:clamp(30px,3.6vw,46px);margin:14px 0}
.shead p{color:var(--muted);font-size:17px}
.feat{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.feat h2{font-size:clamp(28px,3.4vw,42px);margin:12px 0 16px}
.feat .lead{color:var(--muted);font-size:17px;margin-bottom:26px}
.flist{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}
.fitem{display:flex;gap:14px}
.fitem .fi{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.28);color:var(--blue)}
.fitem h4{font-size:16px;margin-bottom:2px}
.fitem p{font-size:14px;color:var(--muted)}
.feat-img{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(15,23,42,.18)}
/* La imagen es cuadrada y con texto en los bordes: con la altura fija de
   440px que habia antes, object-fit:cover le cortaba el titulo de arriba y
   la fila de textos de abajo. Con aspect-ratio se ve completa. */
.feat-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
/* El degradado oscuro estaba para dar contraste al badge sobre una foto
   clara; sobre una imagen ya oscura solo tapa el texto del pie. El badge
   lleva su propio fondo blanco, asi que no lo necesita. */
.feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(7,11,22,.24))}
.floatc{position:absolute;left:24px;bottom:24px;display:flex;gap:13px;align-items:center;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--glass-border);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(15,23,42,.22)}
.floatc .fc-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0369A1,#22D3EE);color:#fff;box-shadow:var(--glow)}
.floatc b{font-size:15px}.floatc span{display:block;font-size:13px;color:var(--muted)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ccard{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);cursor:pointer;transition:.3s;color:inherit;display:block}
.ccard:hover{transform:translateY(-6px);border-color:rgba(14,165,233,.45);box-shadow:0 24px 50px rgba(15,23,42,.16),var(--glow)}
.ccard .cimg{height:140px;background-size:cover;background-position:center;position:relative}
.ccard .cimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,22,.25),rgba(7,11,22,.85))}
.ccard .cbody{padding:16px 16px 20px}
.ccard h3{font-size:16px;margin-bottom:5px}
.ccard p{font-size:12.5px;color:var(--muted)}
.center{text-align:center;margin-top:40px}
.cta{position:relative;border-radius:26px;overflow:hidden;margin:0 28px;border:1px solid var(--line);max-width:1180px;margin-left:auto;margin-right:auto}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* El velo oscuro que permite leer el texto estaba a la IZQUIERDA, que es
   justo donde la foto tiene la furgoneta: la tapaba entera. Se invierte el
   degradado y el texto se pasa a la derecha, de modo que el vehiculo queda
   en la zona clara y las letras sobre la oscura. */
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(255deg,rgba(7,11,22,.96) 0%,rgba(9,15,32,.92) 36%,rgba(10,20,50,.20) 52%,rgba(14,165,233,.06) 100%)}
.cta-in{position:relative;padding:70px 56px;max-width:440px;margin-left:auto}
.cta h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:12px;color:#fff}
.cta p{color:#cdd8ee;font-size:18px;margin-bottom:26px}
/* El pie lo pone footer.css, el mismo en las ocho paginas. Aqui habia otro
   distinto (.fgrid / .fbot) y cambiaba de pie al pasar de una a otra: en FAQ
   se notaba especialmente, porque solo se llega desde el menu del movil. */
.soc a:hover{color:var(--txt);border-color:rgba(14,165,233,.45)}
.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#1DA851;display:grid;place-items:center;box-shadow:0 10px 30px rgba(29,168,81,.5);z-index:60}
/* En el movil las tres cifras se apilan. `.stat` centra su contenido, que en
   fila queda bien pero apilado no: como los textos miden distinto ("12 marcas
   lideres", "24h respuesta", "Hoy entrega el mismo dia"), cada icono caia en
   una posicion distinta y el bloque se veia desalineado. Alineados a la
   izquierda, los tres iconos forman columna. */
@media(max-width:900px){.hero-in,.feat{grid-template-columns:1fr}.cgrid{grid-template-columns:1fr 1fr}.stats-card{flex-direction:column;gap:18px}.stat{justify-content:flex-start}.stat+.stat::before{display:none}.hero-shot{width:100%;margin-left:0}.cta-in{padding:48px 28px;margin-left:0}
  .cta-bg::after{background:linear-gradient(180deg,rgba(7,11,22,.86),rgba(10,20,50,.80))}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ══ PÁGINAS INTERIORES ═══════════════════════════
   Catálogo, Empresas, Nosotros y Contacto traían cada una su propio HTML con
   los estilos escritos dentro: tarjetas con otro radio, otros bordes y otros
   grises. Estas piezas les dan el mismo cristal y la misma tipografía que el
   inicio, para que el sitio se lea como uno solo. */
.phead{padding:56px 0 6px}
.phead h1{font-size:clamp(30px,5.2vw,48px);margin:12px 0 14px}
.phead p{color:var(--muted);font-size:17px;line-height:1.75;max-width:680px}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.pgrid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}

.pcard{
  background:var(--panel);
  border:1px solid var(--glass-border);
  border-radius:22px;
  padding:26px;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 20px 50px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.6);
}
a.pcard{display:block;text-decoration:none;color:inherit;transition:transform .22s,box-shadow .22s}
/* Solo sombra y desplazamiento: escalar movería el texto de alrededor. */
a.pcard:hover{transform:translateY(-3px);box-shadow:0 28px 64px rgba(15,23,42,.13)}
.pcard h2{font-size:20px;margin:0 0 14px}
.pcard h3{font-size:18px;font-weight:800;margin:14px 0 6px;color:var(--txt)}
.pcard p{color:var(--muted);font-size:15px;line-height:1.65}
.pcard .pdato{font-size:15px;color:var(--txt)}
.pcard .pdato b{display:block;color:var(--muted2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

/* Mismo círculo azul que los iconos del bloque de cifras del inicio. */
.pico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.28);color:var(--blue)}
.pico .ic{width:22px;height:22px}
.pico.verde{background:rgba(29,168,81,.12);border-color:rgba(29,168,81,.3);color:#15803D}

.plist{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.pitem{display:flex;gap:14px;align-items:flex-start}
.pitem h4{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:3px}
.pitem p{color:var(--muted);font-size:15px;line-height:1.6}

.pmapa{margin-top:22px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.pmapa iframe{display:block;width:100%;height:300px;border:0}

@media(max-width:900px){
  section{padding:56px 0}
  .phead{padding:36px 0 4px}
  .pcard{padding:22px;border-radius:18px}
}

/* Listas dentro de las tarjetas y fichas de marca, para Nosotros. */
.pcard ul{margin:12px 0 0 18px;color:var(--muted);font-size:15px;line-height:1.8}
.marcas{display:flex;flex-wrap:wrap;gap:10px}
.marca{padding:10px 20px;border-radius:99px;background:var(--panel);border:1px solid var(--glass-border);
  font-weight:700;font-size:14px;color:var(--txt);box-shadow:0 6px 18px rgba(15,23,42,.06)}

/* ══ PUENTE PARA EL CATÁLOGO Y EL CARRITO ═════════
   `catalog.css`, `cart.css` y `modals.css` son piezas funcionales (la rejilla
   de productos y el carrito) que se quedan como estaban. Leian sus colores de
   base.css, que el catalogo ya no carga; sin estas variables saldrian sin
   fondo ni bordes. Aqui se apuntan a la paleta del inicio, de modo que la
   rejilla adopta el mismo tono que el resto del sitio. */
:root{
  --bg-white:#FFFFFF; --bg-card:#FFFFFF; --bg-subtle:#F8FAFC;
  --text:#0F172A; --text-mid:#475569; --text-soft:#64748B; --text-xsoft:#64748B; --input-placeholder:#64748B;
  --border:rgba(14,165,233,.14); --border-soft:rgba(14,165,233,.07);
  --border-mid:rgba(14,165,233,.24); --card-border:rgba(14,165,233,.14);
  --gold:#0369A1; --gold-dark:#075985;
  --radius-xl:22px; --ease-out:cubic-bezier(.22,1,.36,1);
  --duration:.22s; --duration-md:.35s;
}

/* ══ CATÁLOGO CON EL LENGUAJE DEL INICIO ══════════
   La rejilla de productos y el carrito siguen funcionando con catalog.css y
   cart.css; aqui solo se les cambia el aspecto para que las tarjetas de
   producto se vean como las de categoria del inicio. Por eso site.css se
   carga la ultima en esa pagina: si fuera antes, catalog.css ganaria. */

/* Los filtros eran una barra gris pegada arriba, con su propio fondo y su
   sombra: dentro del ancho del sitio se leia como un bloque ajeno. */
.catalog-filters{
  background:none;border:none;box-shadow:none;position:static;
  padding:0 0 24px;gap:10px;
}
.filter-btn{
  border:1px solid var(--line);border-radius:99px;padding:9px 18px;
  font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.6);
  transition:background .2s,border-color .2s,color .2s;
}
.filter-btn:hover:not(.active){background:#fff;border-color:rgba(14,165,233,.35);color:var(--blue)}
.filter-btn.active{background:linear-gradient(135deg,#0369A1,#075985);border-color:transparent;color:#fff;
  box-shadow:0 10px 26px rgba(14,165,233,.35)}
.catalog-search-wrapper input{
  border:1px solid var(--line);border-radius:99px;padding:11px 20px;font-size:14px;
  font-family:var(--font-display);background:rgba(255,255,255,.7);color:var(--txt);min-width:240px;
}

/* La rejilla ya vive dentro de .wrap, que pone el ancho y el margen. */
.catalog-grid{padding:0;max-width:none;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}

/* Mismo cristal, mismo radio y mismo levantamiento que las tarjetas del inicio. */
.product-card{
  border-radius:22px;
  background:var(--panel);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 20px 50px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.6);
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,165,233,.28);
  box-shadow:0 28px 64px rgba(15,23,42,.14);
}
.product-img{background:rgba(248,250,252,.8);border-bottom:1px solid var(--line)}

@media(max-width:768px){
  .catalog-grid{grid-template-columns:1fr 1fr;gap:12px;padding:0}
  .catalog-search-wrapper input{min-width:100%}
}

/* ══ CABECERA CON EFECTO DE GALAXIA ═══════════════
   El mismo que llevan "¿Quiénes Somos?" y el catálogo: fondo claro con un
   halo azul arriba y, encima, las esferas y las estrellas de animations.css.
   Se reaprovechan esas piezas tal cual (misma clase, mismo archivo) en vez
   de copiarlas, para que las tres paginas cambien a la vez si se retocan. */
.phead.galaxia{
  position:relative;
  overflow:hidden;
  padding:96px 0 72px;
  margin-bottom:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(14,165,233,.22) 0%, transparent 62%),
    linear-gradient(160deg,#F6F9FC 0%,#EEF2F7 100%);
  border-bottom:1px solid rgba(14,165,233,.16);
}
/* Capa de brillo, igual que la de Nosotros. */
.phead.galaxia::after{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 75% 85% at 50% 50%, rgba(14,165,233,.12) 0%, transparent 62%),
    radial-gradient(ellipse 45% 60% at 12% 28%, rgba(30,71,160,.10) 0%, transparent 58%),
    radial-gradient(ellipse 40% 55% at 88% 72%, rgba(91,141,239,.10) 0%, transparent 58%),
    linear-gradient(90deg, transparent, rgba(14,165,233,.05), transparent);
}
/* El texto por encima de las esferas, que son absolutas. */
.phead.galaxia .wrap{position:relative;z-index:1}
/* Las esferas miden 780px y estas cabeceras son mas bajas que la de Nosotros:
   sin una altura minima solo se veia su borde, que ya es transparente. */
.phead.galaxia{min-height:300px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){ .phead.galaxia{padding:56px 0 44px;min-height:240px} }

/* ══ PREGUNTAS DESPLEGABLES ═══════════════════════
   Con <details>/<summary>, que es HTML nativo: se abren y cierran sin una
   linea de JavaScript, funcionan con el teclado y el buscador lee el
   contenido aunque este plegado. La version anterior necesitaba un script. */
.faq-lista{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--panel);
  border:1px solid var(--glass-border);
  border-radius:18px;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 36px rgba(15,23,42,.07);
  overflow:hidden;
}
.faq-item summary{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;cursor:pointer;list-style:none;
  font-weight:700;font-size:16px;color:var(--txt);
  transition:background .18s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:rgba(14,165,233,.05)}
.faq-item summary .pico{width:38px;height:38px;border-radius:11px}
.faq-item summary .pico .ic{width:19px;height:19px}
.faq-item .faq-sub{display:block;font-weight:500;font-size:13px;color:var(--muted2);margin-top:2px}
/* La flecha gira al abrir; se anima solo la rotacion, que no mueve nada. */
.faq-item summary .faq-flecha{margin-left:auto;flex-shrink:0;color:var(--muted2);transition:transform .22s}
.faq-item[open] summary .faq-flecha{transform:rotate(180deg)}
.faq-item[open] summary{background:rgba(14,165,233,.06)}
.faq-item .faq-cuerpo{padding:0 22px 22px 74px;color:var(--muted);font-size:15px;line-height:1.75}
@media(max-width:900px){
  .faq-item summary{padding:16px 16px;font-size:15px}
  .faq-item .faq-cuerpo{padding:0 16px 18px 16px}
}
@media(prefers-reduced-motion:reduce){
  .faq-item summary,.faq-item summary .faq-flecha{transition:none}
}