/* ============================================================
   LEDXON — Pantallas LED
   ------------------------------------------------------------
   Sistema visual. Tres reglas que gobiernan todo lo de abajo:

   1. Espaciado: sólo los valores de la escala. Nada intermedio.
   2. Tipografía: sólo los pasos de la escala. Nada arbitrario.
   3. Fondos planos. El único degradado permitido está sobre
      texto (el titular del hero y el resaltado de marca).

   El elemento gráfico de la marca es la matriz de píxeles: una
   pantalla LED vista de cerca. Se dibuja en canvas, no con
   degradados difusos.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* ---- TIPOGRAFÍA ----
     Archivo: grotesca variable de Omnibus-Type, fundición
     argentina, pensada para alto impacto. Su eje de ancho la
     lleva a expandida en los títulos: el gesto del cartel de ruta.
     IBM Plex Mono: pixel pitch, nits y Hz son cifras de ficha
     técnica y se leen mejor en monoespaciada con cifras tabulares. */
  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* escala tipográfica (tamaño / interlineado) */
  --t-xs:0.75rem;    --lh-xs:1rem;        /* 12 / 16 */
  --t-sm:0.875rem;   --lh-sm:1.25rem;     /* 14 / 20 */
  --t-base:1rem;     --lh-base:1.5rem;    /* 16 / 24 */
  --t-lg:1.125rem;   --lh-lg:1.75rem;     /* 18 / 28 */
  --t-xl:1.25rem;    --lh-xl:1.75rem;     /* 20 / 28 */
  --t-2xl:1.5rem;    --lh-2xl:2rem;       /* 24 / 32 */
  --t-3xl:1.875rem;  --lh-3xl:2.25rem;    /* 30 / 36 */
  --t-4xl:2.25rem;   --lh-4xl:2.5rem;     /* 36 / 40 */
  --t-5xl:3rem;                            /* 48 / 1  */
  --t-6xl:3.75rem;                         /* 60 / 1  */

  /* ---- ESPACIADO ---- */
  --s-0:0;      --s-25:2px;   --s-50:4px;   --s-75:8px;
  --s-100:12px; --s-200:16px; --s-300:24px; --s-400:32px;
  --s-500:40px; --s-600:48px; --s-700:64px; --s-800:80px;
  --s-900:96px;

  /* ---- SUPERFICIES ---- */
  --bg-0:#000000;
  --bg-1:#181818;
  --bg-2:#1F1F1F;
  --bg-3:#272727;
  --bg-4:#313131;
  --linea:rgba(255,255,255,.10);
  --linea-fuerte:rgba(255,255,255,.18);

  /* ---- MARCA ---- */
  --naranja:#FF7F27;
  --naranja-hi:#FF9448;
  --violeta:#450FA8;
  --violeta-claro:#7B44E0;
  --verde:#61CE70;
  --wasap:#25D366;

  /* ---- TEXTO ---- */
  --tx:#FFFFFF;
  --tx-2:#B9B9C2;
  --tx-3:#83838F;

  /* ---- RADIOS (escala Tailwind) ---- */
  --r-sm:0.25rem;   /* 4  */
  --r-md:0.375rem;  /* 6  */
  --r-lg:0.5rem;    /* 8  */
  --r-xl:0.75rem;   /* 12 */
  --r-2xl:1rem;     /* 16 */
  --r-3xl:1.5rem;   /* 24 */
  --r-full:9999px;

  /* ---- MOTION ----
     Las curvas nativas de CSS son débiles. Estas tienen el
     empuje que hace que el movimiento se lea intencional. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);

  --d-press:160ms;   /* respuesta al click   */
  --d-hover:200ms;   /* cambio de color      */
  --d-menu:240ms;    /* desplegables         */
  --d-panel:320ms;   /* paneles, drawers     */
  --d-reveal:800ms;  /* entrada por scroll   */

  --wrap:1200px;
  --medida:680px;    /* ancho máximo de titular y bajada */

  --sombra:0 18px 48px -16px rgba(0,0,0,.85);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--s-800);
  overflow-x:clip;
}
body{
  font-family:var(--f-body);
  font-variation-settings:"wdth" 100;
  font-size:var(--t-base);
  line-height:var(--lh-base);
  color:var(--tx);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 118;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  text-wrap:balance;
}
p{text-wrap:pretty}
:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
svg[viewBox]{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:min(100% - var(--s-400), var(--wrap));margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:var(--s-100) var(--s-300);
  background:var(--naranja);color:#000;
  font-weight:600;font-size:var(--t-sm);
  border-radius:0 0 var(--r-lg) 0;
}
.skip-link:focus{left:0}

/* ============================================================
   ENTRADA POR SCROLL
   El desenfoque acompaña al desplazamiento: sin él se ven dos
   estados superpuestos, con él se lee como un solo movimiento.
   ============================================================ */
/* El punto de partida oculto se aplica SÓLO si el JS está vivo (.js en
   <html>). Sin esa clase el contenido se muestra tal cual: si el script
   no carga, la página se lee igual en vez de quedar en negro. */
.js .reveal{opacity:1;transform:none;filter:none}
.js .reveal.is-in{opacity:1;transform:none;filter:blur(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none;transition:opacity 200ms ease}
  .matriz{display:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Los elementos que aparecen y desaparecen con visibility necesitan la
     transición DESACTIVADA, no acortada. Con una duración casi cero el
     navegador deja la transición corriendo para siempre y congela el valor
     inicial: el menú de Productos no llegaba a abrirse nunca para quien
     tiene activado "reducir movimiento" en su sistema. */
  .submenu,.totop{transition-property:none !important}
}

/* ============================================================
   TIPOGRAFÍA COMÚN
   ============================================================ */
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja);
  margin-bottom:var(--s-200);
  display:flex;align-items:center;gap:var(--s-75);
}
.eyebrow::before{
  content:"";width:24px;height:2px;flex:none;
  background:var(--naranja);
}

/* resaltado de marca: subrayado que se dibuja al entrar.
   Va por background-image para poder cortarse en varias líneas
   sin desbordar la pantalla en celulares. */
.mark{
  color:var(--naranja);
  background-color:transparent;
  background-image:linear-gradient(rgba(255,127,39,.45),rgba(255,127,39,.45));
  background-repeat:no-repeat;
  background-position:0 90%;
  background-size:0% .08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size var(--d-reveal) var(--ease-out) 240ms;
}
.is-in .mark{background-size:100% .08em}

.ck{width:1em;height:1em;flex:none;color:var(--verde);stroke-width:2.5}

/* ============================================================
   MATRIZ LED — el elemento gráfico de la marca
   Una pantalla LED vista de cerca. Reemplaza a los halos
   difusos que traía la versión anterior.
   ============================================================ */
.matriz{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --btn-bg:var(--naranja);
  --btn-fg:#000000;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s-75);
  padding:var(--s-75) var(--s-100);
  min-height:44px;
  font-size:var(--t-base);line-height:var(--lh-base);
  font-weight:600;
  font-variation-settings:"wdth" 104;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid transparent;
  border-radius:var(--r-full);
  cursor:pointer;
  transition:transform var(--d-press) var(--ease-out),
             background-color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out);
}
/* Feedback al presionar. Sin esto la interfaz no confirma
   que escuchó el click. */
.btn:active{transform:scale(.97)}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{--btn-bg:var(--naranja-hi)}
  .btn--ghost:hover{--btn-bg:rgba(255,255,255,.06);border-color:var(--naranja)}
  .btn--wa:hover{--btn-bg:#31E877}
  .btn:hover .btn__ico{transform:translateX(3px)}
}

.btn--primary{--btn-bg:var(--naranja);--btn-fg:#000000}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--tx);border-color:var(--linea-fuerte)}
.btn--wa{--btn-bg:var(--wasap);--btn-fg:#05230F}

.btn--lg{padding:var(--s-100) var(--s-300);min-height:52px}
.btn--sm{padding:var(--s-50) var(--s-100);min-height:36px;font-size:var(--t-sm);line-height:var(--lh-sm)}
.btn--block{width:100%}

.btn__ico{
  width:1.1em;height:1.1em;flex:none;
  transition:transform var(--d-hover) var(--ease-out);
}
.btn--wa .btn__ico{stroke:none;fill:currentColor}

/* estado de envío */
.btn__spin{
  position:absolute;width:1.1em;height:1.1em;
  border:2px solid rgba(0,0,0,.25);border-top-color:#000;
  border-radius:50%;opacity:0;
  animation:spin 600ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none}
.btn.is-loading .btn__label,.btn.is-loading .btn__ico{opacity:0}
.btn.is-loading .btn__spin{opacity:1}
.btn.is-ok{--btn-bg:var(--verde);--btn-fg:#05230F}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-50);
  font-weight:600;font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--naranja);
  padding-block:var(--s-50);
  transition:color var(--d-hover) var(--ease-out);
}
.link-arrow svg{width:1em;height:1em;transition:transform var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover{color:var(--naranja-hi)}
  .link-arrow:hover svg{transform:translateX(3px)}
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out),
             transform var(--d-panel) var(--ease-drawer);
}
.hdr.is-stuck{
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--linea);
}
.hdr.is-hidden{transform:translateY(-102%)}

.hdr__in{display:flex;align-items:center;gap:var(--s-300);min-height:72px}
.hdr__logo img{width:140px}
.hdr__logo{transition:opacity var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hdr__logo:hover{opacity:.75}}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:var(--s-25)}
.nav__link{
  position:relative;display:block;
  padding:var(--s-75) var(--s-100);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:500;color:var(--tx-2);
  border-radius:var(--r-full);
  transition:color var(--d-hover) var(--ease-out);
}
.nav__link::after{
  content:"";position:absolute;
  left:var(--s-100);right:var(--s-100);bottom:var(--s-50);
  height:2px;background:var(--naranja);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-menu) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__link:hover{color:var(--tx)}
  .nav__link:hover::after{transform:scaleX(1);transform-origin:left}
}
.nav__link.is-active{color:var(--tx)}
.nav__link.is-active::after{transform:scaleX(1)}

.hdr__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:var(--naranja);
  opacity:0;transition:opacity var(--d-hover) var(--ease-out);
}
.hdr.is-stuck .hdr__progress{opacity:1}

.burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  border-radius:var(--r-lg);
}
.burger span{
  display:block;width:20px;height:2px;background:var(--tx);
  transition:transform var(--d-menu) var(--ease-out),
             opacity 120ms var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-block:var(--s-900) var(--s-800);
  overflow:hidden;
  border-bottom:1px solid var(--linea);
}
.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:var(--s-700);
  align-items:center;
}
.hero__title{
  font-size:var(--t-6xl);
  font-weight:700;
  font-variation-settings:"wdth" 108;
  letter-spacing:-.03em;
  max-width:var(--medida);
  margin-bottom:var(--s-300);
  /* único degradado permitido: sobre el texto del titular */
  background:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hero__title .mark{
  -webkit-text-fill-color:var(--naranja);
  color:var(--naranja);
}
.hero__lead{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--tx-2);
  max-width:var(--medida);
  margin-bottom:var(--s-400);
}
.hero__lead strong{color:var(--tx);font-weight:600}

.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-100);margin-bottom:var(--s-400)}

.hero__trust{display:grid;gap:var(--s-75)}
.hero__trust li{
  display:flex;align-items:center;gap:var(--s-75);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
}

/* marco de la imagen: gabinete de pantalla LED */
.hero__media{position:relative}
.hero__frame{
  position:relative;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r-2xl);
  overflow:hidden;
  background:var(--bg-1);
  box-shadow:var(--sombra);
}
.hero__frame img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  /* gap de 0 respecto al marco: el radio interno iguala al externo */
  border-radius:calc(var(--r-2xl) - 1px);
}

/* En el modo de alto contraste de Windows el degradado sobre texto se
   descarta y el título quedaría transparente, es decir invisible. */
@media (forced-colors: active){
  .hero__title{
    background:none;
    -webkit-text-fill-color:currentColor;
    color:CanvasText;
  }
  .hero__title .mark{-webkit-text-fill-color:currentColor;color:CanvasText}
  .matriz{display:none}
  .card::after,.nav__link::after{background:CanvasText}
}

/* ============================================================
   CLIENTES
   ============================================================ */
.clients{
  padding-block:var(--s-600);
  border-bottom:1px solid var(--linea);
  background:var(--bg-1);
}
.clients__title{
  text-align:center;
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-3);
  margin-bottom:var(--s-500);
}
.clients__grid{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:var(--s-300) var(--s-700);
}
.clients__grid li{
  display:grid;place-items:center;
  padding:var(--s-75) var(--s-200);
  border-radius:var(--r-xl);
  transition:background-color var(--d-hover) var(--ease-out);
}
.clients__grid img{
  height:auto;width:auto;
  max-height:calc(56px * var(--esc,1));
  max-width:180px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.7);
  opacity:.62;
  transition:filter var(--d-panel) var(--ease-out),
             opacity var(--d-panel) var(--ease-out),
             transform var(--d-panel) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .clients__grid li:hover{background:rgba(255,255,255,.04)}
  .clients__grid li:hover img{
    filter:grayscale(0) brightness(1);
    opacity:1;
    transform:scale(1.18);
  }
}

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{padding-block:var(--s-900);position:relative}
.sec--alt{background:var(--bg-1);border-block:1px solid var(--linea)}
.sec__head{max-width:var(--medida);margin-bottom:var(--s-700)}
.sec__title{font-size:var(--t-4xl);margin-bottom:var(--s-200)}
.sec__lead{font-size:var(--t-lg);line-height:var(--lh-lg);color:var(--tx-2)}

/* ---------- TARJETAS DE SOLUCIONES ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  overflow:hidden;
  transition:transform var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out),
             background-color var(--d-panel) var(--ease-out);
}
.card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--accent,var(--naranja));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-panel) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--linea-fuerte);
    background:var(--bg-3);
  }
  .card:hover::after{transform:scaleX(1)}
  .card:hover .card__media img{transform:scale(1.05)}
  .card:hover .card__ico{transform:translateY(-3px)}
}

.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg-3)}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease-out);
}
.card__body{padding:var(--s-300);position:relative;flex:1}
.card__ico{
  position:absolute;top:-24px;left:var(--s-300);
  display:grid;place-items:center;
  width:48px;height:48px;
  border-radius:var(--r-xl);
  background:var(--accent,var(--naranja));
  color:#000;
  transition:transform var(--d-panel) var(--ease-out);
}
.card__ico svg{width:22px;height:22px;stroke-width:1.9}
.card__title{
  font-size:var(--t-xl);line-height:var(--lh-xl);
  margin:var(--s-200) 0 var(--s-75);
  color:var(--accent,var(--naranja));
}
.card__body>p{
  color:var(--tx-2);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  margin-bottom:var(--s-200);
}
.card__specs{
  display:grid;gap:var(--s-50);
  border-top:1px solid var(--linea);
  padding-top:var(--s-200);
}
.card__specs li{
  display:flex;align-items:center;gap:var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.card__specs li::before{
  content:"";width:4px;height:4px;flex:none;
  background:var(--accent,var(--naranja));
}

/* ---------- FICHAS DE PRODUCTO ---------- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.prod{
  display:grid;grid-template-rows:auto 1fr;
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  overflow:hidden;
  transition:transform var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out),
             background-color var(--d-panel) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .prod:hover{transform:translateY(-4px);border-color:rgba(255,127,39,.4);background:var(--bg-3)}
  .prod:hover .prod__media img{transform:scale(1.04)}
}
.prod__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.prod__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.prod__tag{
  position:absolute;top:var(--s-100);left:var(--s-100);
  padding:var(--s-50) var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#000;background:var(--naranja);
  border-radius:var(--r-full);
}
.prod__body{padding:var(--s-300);display:flex;flex-direction:column;gap:var(--s-200)}
.prod__title{font-size:var(--t-lg);line-height:var(--lh-lg);font-variation-settings:"wdth" 108}
.prod__body>p{color:var(--tx-2);font-size:var(--t-sm);line-height:var(--lh-sm)}

.prod__specs{display:grid;border-top:1px solid var(--linea)}
.prod__specs>div{padding-block:var(--s-75);border-bottom:1px solid var(--linea)}
.prod__specs dt{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);
  margin-bottom:var(--s-25);
}
.prod__specs dd{
  font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:500;color:var(--tx);
  font-variant-numeric:tabular-nums;
}
.prod__body .link-arrow{margin-top:auto;align-self:start}

/* ---------- APLICACIONES ---------- */
.proys{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.proy{
  position:relative;
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--linea);
  background:var(--bg-2);
  aspect-ratio:4/3;
  transition:transform var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .proy:hover{transform:translateY(-4px);border-color:rgba(255,127,39,.4)}
  .proy:hover img{transform:scale(1.06)}
  .proy:hover .proy__info{transform:translateY(0)}
}
.proy img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.proy__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.9) 100%);
}
.proy__info{
  position:absolute;inset:auto 0 0 0;
  padding:var(--s-300);
  transform:translateY(var(--s-75));
  transition:transform var(--d-panel) var(--ease-out);
}
.proy__tag{
  display:inline-block;margin-bottom:var(--s-75);
  padding:var(--s-25) var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--naranja);
  background:rgba(255,127,39,.12);
  border:1px solid rgba(255,127,39,.3);
  border-radius:var(--r-full);
}
.proy__title{font-size:var(--t-lg);line-height:var(--lh-lg);margin-bottom:var(--s-25)}
.proy__meta{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-2);
  display:flex;align-items:center;gap:var(--s-50);
}
.proy__meta svg{width:1em;height:1em;flex:none;color:var(--naranja)}

.proy--propio::before{
  content:"Proyecto propio";
  position:absolute;top:var(--s-100);right:var(--s-100);z-index:2;
  padding:var(--s-25) var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:#05230F;background:var(--verde);
  border-radius:var(--r-full);
}

/* listado de respaldo cuando no hay JS */
.proys-lista{display:grid;gap:var(--s-100);margin-top:var(--s-300)}
.proys-lista li{
  padding:var(--s-200);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
}
.proys-lista strong{color:var(--tx);display:block;margin-bottom:var(--s-25)}

.proys__cta{
  margin-top:var(--s-600);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-300);
  padding:var(--s-400);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  text-align:center;
}
.proys__cta p{color:var(--tx-2);font-weight:500}

/* ============================================================
   REVELADO DE LEMA
   Cada palabra pasa de apagada a encendida al cruzar la línea
   de lectura, como una pantalla que se enciende por módulos.
   ============================================================ */
.lema{
  padding-block:var(--s-900);
  border-block:1px solid var(--linea);
  background:var(--bg-0);
  position:relative;
  overflow:hidden;
}
.lema__in{position:relative;z-index:1;max-width:var(--medida)}
.lema__txt{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 112;
  font-size:var(--t-4xl);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
.lema__w{
  /* El apagado no baja de .5: es texto que hay que poder leer aunque el
     JS no lo encienda. A .5 sobre negro da 5,2:1 y pasa AA; por debajo
     de eso el contraste cae a 2,3:1 y deja de ser legible. */
  color:rgba(255,255,255,.5);
  transition:color 500ms var(--ease-out);
}
.lema__w.is-on{color:var(--tx)}
.lema__w.lema__w--acento.is-on{color:var(--naranja)}

.lema__pie{
  margin-top:var(--s-500);
  font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-3);
}

/* ============================================================
   NOSOTROS
   ============================================================ */
.nos{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--s-700);align-items:start;
}
.nos__copy>p{color:var(--tx-2);margin-bottom:var(--s-200);max-width:var(--medida)}
.nos__points{display:grid;gap:var(--s-300);margin-top:var(--s-500)}
.nos__points li{display:flex;gap:var(--s-100);align-items:flex-start}
.nos__points .ck{margin-top:var(--s-50)}
.nos__points strong{display:block;font-size:var(--t-base);margin-bottom:var(--s-25)}
.nos__points span{display:block;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3)}

.nos__stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  overflow:hidden;
  position:sticky;top:var(--s-800);
}
.stat{
  background:var(--bg-2);
  padding:var(--s-300);
  transition:background-color var(--d-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.stat:hover{background:var(--bg-3)}}
.stat__n{
  display:block;
  font-family:var(--f-mono);
  font-size:var(--t-2xl);line-height:var(--lh-2xl);
  font-weight:600;color:var(--naranja);
  font-variant-numeric:tabular-nums;
}
.stat__l{
  display:block;margin-top:var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.06em;color:var(--tx-3);
}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-300)}
.faq__item{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--d-hover) var(--ease-out),
             background-color var(--d-hover) var(--ease-out);
}
.faq__item[open]{border-color:var(--linea-fuerte);background:var(--bg-3)}
@media (hover:hover) and (pointer:fine){
  .faq__item:hover{border-color:var(--linea-fuerte)}
}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-200);
  padding:var(--s-300);
  font-size:var(--t-base);line-height:var(--lh-base);
  font-weight:600;
  cursor:pointer;
  list-style:none;
  min-height:44px;
}
.faq__q::-webkit-details-marker{display:none}
.faq__ico{
  width:20px;height:20px;flex:none;margin-top:2px;
  color:var(--naranja);
  transition:transform var(--d-menu) var(--ease-out);
}
.faq__item[open] .faq__ico{transform:rotate(45deg)}
.faq__a{
  padding:0 var(--s-300) var(--s-300);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
}
.faq__a a{color:var(--naranja);text-decoration:underline}

/* ============================================================
   CONTACTO
   ============================================================ */
.cta{position:relative;padding-block:var(--s-900);overflow:hidden}
.cta__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-700);align-items:start;
}
.cta__title{font-size:var(--t-4xl);margin-bottom:var(--s-200);max-width:var(--medida)}
.cta__lead{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--tx-2);margin-bottom:var(--s-400);max-width:var(--medida);
}
.cta__contact{display:grid;gap:var(--s-200);margin-bottom:var(--s-400)}
.cta__contact li{
  display:flex;align-items:center;gap:var(--s-100);
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2);
}
.cta__contact svg{width:20px;height:20px;flex:none;color:var(--naranja)}
.cta__contact a{transition:color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cta__contact a:hover{color:var(--naranja)}}
.cta__note{
  display:flex;align-items:center;gap:var(--s-75);
  margin-top:var(--s-200);
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3);
}

/* ---------- FORMULARIO ---------- */
.formcard{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  padding:var(--s-400);
}
.formcard__title{font-size:var(--t-xl);line-height:var(--lh-xl);margin-bottom:var(--s-50)}
.formcard__sub{
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-3);margin-bottom:var(--s-400);
}

.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-300) var(--s-200)}
.field{position:relative}
.field--full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field input,.field select,.field textarea{
  width:100%;
  padding:var(--s-300) var(--s-100) var(--s-75);
  background:var(--bg-1);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  color:var(--tx);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  min-height:52px;
  transition:border-color var(--d-hover) var(--ease-out),
             background-color var(--d-hover) var(--ease-out),
             box-shadow var(--d-hover) var(--ease-out);
}
.field textarea{resize:vertical;min-height:112px}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383838F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-100) center;background-size:18px;
  padding-right:var(--s-500);
}
.field select option{background:var(--bg-2);color:var(--tx)}

.field label{
  position:absolute;left:var(--s-100);top:var(--s-200);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-3);
  pointer-events:none;
  transform-origin:left top;
  transition:transform var(--d-menu) var(--ease-out),
             color var(--d-menu) var(--ease-out);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-12px) scale(.78);
  color:var(--naranja);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--naranja);
  background:var(--bg-3);
  box-shadow:0 0 0 3px rgba(255,127,39,.15);
}

.field.is-error input,.field.is-error select,.field.is-error textarea{
  border-color:#FF5A5A;box-shadow:0 0 0 3px rgba(255,90,90,.13);
}
.field.is-error label{color:#FF8A8A}
.field__err{
  display:block;
  font-size:var(--t-xs);line-height:var(--lh-xs);color:#FF8A8A;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--d-hover) var(--ease-out),
             transform var(--d-hover) var(--ease-out);
}
.field.is-error .field__err{opacity:1;transform:none;margin-top:var(--s-50)}
.field.is-ok input,.field.is-ok select,.field.is-ok textarea{border-color:rgba(97,206,112,.55)}

.field__count{
  position:absolute;right:var(--s-75);bottom:var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

.btn--submit{grid-column:1/-1;margin-top:var(--s-25)}
.form__legal{
  grid-column:1/-1;
  font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--tx-3);
}
.form__msg{
  grid-column:1/-1;
  font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:500;
  padding:0;max-height:0;overflow:hidden;
  border-radius:var(--r-2xl);
  transition:max-height var(--d-panel) var(--ease-out),
             padding var(--d-panel) var(--ease-out);
}
.form__msg.is-visible{max-height:200px;padding:var(--s-200)}
.form__msg.is-ok{background:rgba(97,206,112,.12);border:1px solid rgba(97,206,112,.35);color:var(--verde)}
.form__msg.is-err{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.32);color:#FF8A8A}
.form__msg a{text-decoration:underline}

/* ============================================================
   PIE
   ============================================================ */
.ftr{background:var(--bg-1);border-top:1px solid var(--linea);padding-top:var(--s-800)}
.ftr__in{
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;
  gap:var(--s-600);padding-bottom:var(--s-600);
}
.ftr__brand img{width:140px;margin-bottom:var(--s-200)}
.ftr__brand p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3);max-width:34ch}
.ftr h2{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx);margin-bottom:var(--s-200);
  font-variation-settings:normal;
}
.ftr__nav ul,.ftr__contact ul{display:grid;gap:var(--s-75)}
.ftr__nav a,.ftr__contact a{
  display:inline-block;
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3);
  padding-block:var(--s-25);
  transition:color var(--d-hover) var(--ease-out),
             transform var(--d-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ftr__nav a:hover,.ftr__contact a:hover{color:var(--naranja);transform:translateX(3px)}
}
.ftr__contact li{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3)}

.ftr__social{display:flex !important;gap:var(--s-75);margin-top:var(--s-300)}
.ftr__social a{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--linea);border-radius:var(--r-full);
  color:var(--tx-2);
  transition:color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             background-color var(--d-hover) var(--ease-out),
             transform var(--d-hover) var(--ease-out);
}
.ftr__social svg{width:18px;height:18px}
.ftr__social a:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .ftr__social a:hover{
    color:var(--naranja);border-color:var(--naranja);
    background:rgba(255,127,39,.1);transform:translateY(-2px);
  }
}

.ftr__legal{border-top:1px solid var(--linea);padding-block:var(--s-300)}
.ftr__legal-in{
  display:flex;flex-wrap:wrap;gap:var(--s-100) var(--s-300);
  align-items:center;justify-content:space-between;
}
.ftr__legal p,.ftr__legal a{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--tx-3);
}
.ftr__legal-links{display:flex;gap:var(--s-300)}
.ftr__legal-links a{transition:color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ftr__legal-links a:hover{color:var(--naranja)}}

/* ============================================================
   FLOTANTES
   ============================================================ */
.wa-float{
  position:fixed;right:var(--s-300);bottom:var(--s-300);z-index:90;
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:var(--r-full);
  color:#fff;background:var(--wasap);
  box-shadow:0 12px 28px -8px rgba(37,211,102,.6);
  transition:transform var(--d-press) var(--ease-out);
}
.wa-float svg{width:28px;height:28px}
.wa-float:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.wa-float:hover{transform:scale(1.07)}}

.totop{
  position:fixed;right:var(--s-300);bottom:var(--s-800);z-index:90;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--r-full);
  color:var(--tx);
  background:rgba(31,31,31,.9);
  border:1px solid var(--linea-fuerte);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--d-menu) var(--ease-out),
             visibility var(--d-menu) var(--ease-out),
             transform var(--d-menu) var(--ease-out),
             color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out);
}
.totop.is-visible{opacity:1;visibility:visible;transform:none}
.totop:active{transform:scale(.94)}
.totop svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .totop:hover{color:var(--naranja);border-color:var(--naranja);transform:translateY(-2px)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .prods{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr;gap:var(--s-600)}
  .hero__media{order:-1;max-width:640px}
  .hero__title{font-size:var(--t-5xl)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .proys{grid-template-columns:repeat(2,1fr)}
  .nos{grid-template-columns:1fr}
  .nos__stats{position:static;grid-template-columns:repeat(4,1fr)}
  .cta__in{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}

@media (max-width:860px){
  .hdr__cta{display:none}
  .burger{display:flex}
  .nav{
    position:fixed;inset:72px 0 auto 0;
    margin:0;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(24px);
    border-bottom:1px solid var(--linea);
    padding:var(--s-200) var(--s-300) var(--s-400);
    clip-path:inset(0 0 100% 0);
    transition:clip-path var(--d-panel) var(--ease-drawer);
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{
    padding:var(--s-200) var(--s-75);
    font-size:var(--t-lg);line-height:var(--lh-lg);
    border-bottom:1px solid var(--linea);
    border-radius:0;
    min-height:44px;
    opacity:0;transform:translateY(-8px);
    transition:opacity var(--d-menu) var(--ease-out) var(--i,0s),
               transform var(--d-menu) var(--ease-out) var(--i,0s),
               color var(--d-hover) var(--ease-out);
  }
  .nav.is-open .nav__link{opacity:1;transform:none}
  .nav__link::after{left:var(--s-75);right:auto;width:24px;bottom:0}
  body.is-locked{overflow:hidden}

  .faq{grid-template-columns:1fr}
}

@media (max-width:640px){
  /* área táctil mínima en los enlaces de texto */
  .link-arrow{min-height:44px;align-items:center}
  html{scroll-padding-top:var(--s-700)}
  .hdr__in{min-height:64px}
  .nav{inset:64px 0 auto 0}
  .hero{padding-block:var(--s-800) var(--s-700)}
  .hero__title{font-size:var(--t-4xl)}
  .sec,.lema,.cta{padding-block:var(--s-700)}
  .sec__title,.cta__title{font-size:var(--t-3xl)}
  .lema__txt{font-size:var(--t-2xl)}
  .cards,.prods,.proys{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .nos__stats{grid-template-columns:1fr 1fr}
  .ftr__in{grid-template-columns:1fr;gap:var(--s-500)}
  .clients__grid{gap:var(--s-300) var(--s-400)}
  .hero__actions .btn{width:100%}
  .proys__cta{flex-direction:column}
  .wa-float{right:var(--s-200);bottom:var(--s-200);width:52px;height:52px}
  .totop{right:var(--s-200);bottom:var(--s-700)}
  .ftr__legal-in{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   MENÚ DESPLEGABLE DE PRODUCTOS
   Se abre al pasar el mouse y también con el teclado, porque un
   menú que sólo responde al hover deja afuera a quien navega con
   Tab y a quien entra desde el celular.
   ============================================================ */
.tiene-menu{position:relative}

.nav__btn{
  display:flex;align-items:center;gap:var(--s-50);
  padding:var(--s-75) var(--s-100);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:500;color:var(--tx-2);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:color var(--d-hover) var(--ease-out);
}
.nav__btn svg{
  width:14px;height:14px;
  transition:transform var(--d-menu) var(--ease-out);
}
.nav__btn[aria-expanded="true"]{color:var(--tx)}
.nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .nav__btn:hover{color:var(--tx)}
}

.submenu{
  position:absolute;top:calc(100% + var(--s-75));left:0;
  min-width:288px;
  padding:var(--s-75);
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(18px);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  box-shadow:var(--sombra);
  /* arranca apenas encogido: nada aparece de la nada */
  opacity:0;visibility:hidden;
  transform:translateY(-6px) scale(.98);
  transform-origin:top left;
  transition:opacity var(--d-menu) var(--ease-out),
             transform var(--d-menu) var(--ease-out),
             visibility var(--d-menu);
}
.tiene-menu.is-open .submenu{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
}
/* puente invisible: deja bajar el mouse sin que el menú se cierre */
.tiene-menu::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:var(--s-75);
}

.submenu__link{
  display:block;
  padding:var(--s-100);
  border-radius:var(--r-lg);
  transition:background-color var(--d-hover) var(--ease-out);
}
.submenu__link strong{
  display:block;
  font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:600;color:var(--tx);
  margin-bottom:2px;
}
.submenu__link span{
  display:block;
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}
@media (hover:hover) and (pointer:fine){
  .submenu__link:hover{background:rgba(255,255,255,.06)}
  .submenu__link:hover strong{color:var(--naranja)}
}
.submenu__link[aria-current="page"]{background:rgba(255,127,39,.1)}
.submenu__link[aria-current="page"] strong{color:var(--naranja)}

@media (max-width:860px){
  /* en el celular el submenú se despliega en el flujo, sin capas */
  .tiene-menu{position:static}
  .submenu{
    position:static;
    opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 var(--s-100) var(--s-200);
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    display:none;
  }
  .tiene-menu.is-open .submenu{display:block}
  .nav__btn{
    width:100%;justify-content:space-between;
    padding:var(--s-200) var(--s-75);
    font-size:var(--t-lg);line-height:var(--lh-lg);
    border-bottom:1px solid var(--linea);
    border-radius:0;min-height:44px;
  }
  .submenu__link{padding:var(--s-100) var(--s-75);min-height:44px}
}

/* ============================================================
   PÁGINAS DE PRODUCTO
   ============================================================ */
.migas{
  padding-top:calc(72px + var(--s-500));
  padding-bottom:var(--s-200);
}
.migas ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}
.migas li{display:flex;align-items:center;gap:var(--s-75)}
.migas li+li::before{content:"/";color:var(--tx-3);opacity:.5}
.migas a{transition:color var(--d-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.migas a:hover{color:var(--naranja)}}
.migas [aria-current="page"]{color:var(--naranja)}

.ph{padding-bottom:var(--s-800);position:relative;overflow:hidden}
.ph__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-700);align-items:center;
}
.ph__title{font-size:var(--t-5xl);margin-bottom:var(--s-200);max-width:var(--medida)}
.ph__lead{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--tx-2);max-width:var(--medida);margin-bottom:var(--s-400);
}
.ph__acciones{display:flex;flex-wrap:wrap;gap:var(--s-100);margin-bottom:var(--s-400)}
.ph__destacados{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-xl);overflow:hidden;
}
.ph__dato{background:var(--bg-2);padding:var(--s-200)}
.ph__dato dt{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
  margin-bottom:var(--s-25);
}
.ph__dato dd{
  font-family:var(--f-mono);
  font-size:var(--t-base);line-height:var(--lh-base);
  font-weight:600;color:var(--naranja);
  font-variant-numeric:tabular-nums;
}
.ph__media{
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  overflow:hidden;background:var(--bg-1);
  box-shadow:var(--sombra);
}
.ph__media img{width:100%;height:auto;display:block}

/* tabla de especificaciones */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-xl)}
.tabla{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:var(--t-sm)}
.tabla caption{
  text-align:left;padding:var(--s-200);
  font-family:var(--f-body);font-size:var(--t-sm);color:var(--tx-3);
}
.tabla th,.tabla td{
  padding:var(--s-100) var(--s-200);
  text-align:left;
  border-bottom:1px solid var(--linea);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.tabla thead th{
  background:var(--bg-3);
  color:var(--naranja);
  font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  font-size:var(--t-xs);
}
.tabla tbody th{
  color:var(--tx-3);font-weight:400;
  background:var(--bg-2);
}
.tabla td{color:var(--tx)}
.tabla tbody tr:last-child th,.tabla tbody tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){
  .tabla tbody tr:hover td{background:var(--bg-3)}
}

/* características */
.rasgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:var(--s-300)}
.rasgo{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
}
.rasgo svg{width:26px;height:26px;color:var(--naranja);margin-bottom:var(--s-200)}
.rasgo h3{font-size:var(--t-lg);line-height:var(--lh-lg);margin-bottom:var(--s-75)}
.rasgo p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}

/* usos recomendados */
.usos{display:flex;flex-wrap:wrap;gap:var(--s-75)}
.uso{
  padding:var(--s-75) var(--s-200);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-full);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-2);
}

/* otras series */
.otras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.otra{
  display:block;
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
  transition:transform var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out);
}
.otra strong{display:block;font-size:var(--t-base);margin-bottom:var(--s-25)}
.otra span{
  display:block;font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--tx-3);
}
@media (hover:hover) and (pointer:fine){
  .otra:hover{transform:translateY(-3px);border-color:rgba(255,127,39,.42)}
  .otra:hover strong{color:var(--naranja)}
}

.nota-tecnica{
  margin-top:var(--s-300);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}

@media (max-width:1024px){
  .ph__in{grid-template-columns:1fr;gap:var(--s-500)}
  .ph__media{order:-1}
  .ph__title{font-size:var(--t-4xl)}
  .otras{grid-template-columns:1fr}
}
@media (max-width:640px){
  .migas{padding-top:calc(64px + var(--s-400))}
  .ph__title{font-size:var(--t-3xl)}
  .ph__acciones .btn{width:100%}
}

/* ============================================================
   PÁGINA DEL TÓTEM
   Estructura propia: el hero va a lo ancho con la imagen debajo
   del texto, y las funcionalidades se cuentan en bloques
   alternados. Las otras series usan la grilla de dos columnas,
   así que esta no se lee como una copia de aquellas.
   ============================================================ */
.tot-hero{
  position:relative;
  padding-bottom:var(--s-800);
  overflow:hidden;
  text-align:center;
}
.tot-hero__in{position:relative;z-index:1}
.tot-hero .eyebrow{justify-content:center}
.tot-hero__title{
  font-size:var(--t-5xl);
  margin:0 auto var(--s-300);
  max-width:16ch;
}
.tot-hero__lead{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--tx-2);
  max-width:62ch;margin:0 auto var(--s-400);
}
.tot-hero__acciones{
  display:flex;flex-wrap:wrap;gap:var(--s-100);
  justify-content:center;margin-bottom:var(--s-600);
}
.tot-hero__media{margin-bottom:var(--s-500)}
.tot-hero__media img{
  width:100%;max-width:1000px;margin-inline:auto;
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  background:var(--bg-1);
  box-shadow:var(--sombra);
}
.tot-hero__pie{
  margin-top:var(--s-200);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}
.tot-hero .ph__destacados{max-width:920px;margin-inline:auto}

/* ---- bloques alternados de funcionalidad ---- */
.bloque{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-700);align-items:center;
  padding-block:var(--s-600);
  border-top:1px solid var(--linea);
}
.bloque:first-of-type{border-top:0;padding-top:0}
.bloque--invertido .bloque__txt{order:2}
.bloque--invertido .bloque__img{order:1}

.bloque__n{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.2em;color:var(--naranja);
  margin-bottom:var(--s-100);
}
.bloque__txt h3{
  font-size:var(--t-2xl);line-height:var(--lh-2xl);
  margin-bottom:var(--s-200);
}
.bloque__txt>p{
  color:var(--tx-2);
  font-size:var(--t-base);line-height:var(--lh-base);
  margin-bottom:var(--s-300);
  max-width:52ch;
}
.bloque__lista{display:grid;gap:var(--s-75)}
.bloque__lista li{
  display:flex;align-items:flex-start;gap:var(--s-75);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}
.bloque__lista li::before{
  content:"";flex:none;margin-top:6px;
  width:5px;height:5px;border-radius:50%;
  background:var(--naranja);
}
.bloque__img{
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  overflow:hidden;background:var(--bg-1);
}
.bloque__img img{width:100%;height:auto;display:block}

/* ---- galería de modos de uso ---- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.tarjeta-uso{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:transform var(--d-panel) var(--ease-out),
             border-color var(--d-panel) var(--ease-out);
}
.tarjeta-uso img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 600ms var(--ease-out);
}
.tarjeta-uso figcaption{padding:var(--s-300)}
.tarjeta-uso strong{
  display:block;font-size:var(--t-base);
  margin-bottom:var(--s-25);
}
.tarjeta-uso span{
  display:block;
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-3);
}
@media (hover:hover) and (pointer:fine){
  .tarjeta-uso:hover{transform:translateY(-4px);border-color:rgba(255,127,39,.42)}
  .tarjeta-uso:hover img{transform:scale(1.05)}
  .tarjeta-uso:hover strong{color:var(--naranja)}
}

@media (max-width:1024px){
  .tot-hero__title{font-size:var(--t-4xl)}
  .bloque{grid-template-columns:1fr;gap:var(--s-400)}
  .bloque--invertido .bloque__txt{order:1}
  .bloque--invertido .bloque__img{order:2}
  .galeria{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tot-hero__title{font-size:var(--t-3xl);max-width:none}
  .tot-hero__acciones .btn{width:100%}
  .galeria{grid-template-columns:1fr}
  .bloque__txt h3{font-size:var(--t-xl);line-height:var(--lh-xl)}
}

/* ============================================================
   AJUSTES DE LAS IMÁGENES DEL TÓTEM
   ============================================================ */

/* El hero ya no va dentro de una caja con borde: las fotos de la
   presentación tienen fondo negro igual que la página, así que se
   funden con ella. Los bordes se desvanecen para que no se note
   dónde termina la foto y empieza el fondo. */
.tot-hero__media img{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  max-width:1100px;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
  mask-composite:intersect;
}

/* En una grilla, los elementos no bajan de su ancho de contenido salvo
   que se les diga. Sin esto una imagen ancha empuja la columna y se
   sale del recuadro, que es lo que pasaba con la comparación de
   contraste. */
.bloque{min-width:0}
.bloque__txt,.bloque__img{min-width:0}
.bloque__img img{
  width:100%;height:auto;
  max-height:520px;
  object-fit:contain;
  background:var(--bg-1);
}

/* El tótem plegado es una foto vertical: dentro de un bloque apaisado
   se centra y se limita la altura, en vez de estirar la fila. */
.bloque__img--alto{display:grid;place-items:center;padding:var(--s-300)}
.bloque__img--alto img{max-height:460px;width:auto;max-width:100%}

@media (max-width:640px){
  .bloque__img img{max-height:320px}
  .bloque__img--alto img{max-height:380px}
  .tot-hero__media img{
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* ============================================================
   AJUSTE DE LAS TABLAS TÉCNICAS
   Las filas cuyo valor es igual en todos los modelos se unen en
   una sola celda: repetir cuatro veces "Aluminio fundido a
   presión" no informa nada y era lo que obligaba a la tabla a
   desplazarse de costado.
   ============================================================ */
.tabla{table-layout:auto}

/* La columna de especificación no se parte ni se estira de más */
.tabla tbody th{
  white-space:normal;
  width:1%;
  min-width:150px;
}

/* Los valores sí pueden partirse en dos líneas antes que ensanchar
   la tabla. Con las filas unificadas casi nunca hace falta. */
.tabla td{
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Valor común a todos los modelos: se lee como un dato de la serie,
   no como un valor por columna. */
.td-comun{color:var(--tx-2)}

/* Las celdas pueden ir algo más justas: son cifras cortas */
.tabla th,.tabla td{padding:var(--s-100) var(--s-200)}

/* Todo el contenido de la tabla va centrado. Las filas con un valor
   único abarcan las cuatro columnas, así que centradas quedan sobre el
   eje de la tabla en lugar de colgadas al margen izquierdo. */
.tabla th,.tabla td,.tabla thead th,.tabla tbody th,.td-comun{
  text-align:center;
  vertical-align:middle;
}

@media (max-width:900px){
  .tabla{font-size:var(--t-xs)}
  .tabla th,.tabla td{padding:var(--s-75) var(--s-100)}
  .tabla tbody th{min-width:118px}
}

/* ============================================================
   GUÍA: ¿QUÉ PANTALLA NECESITO?
   El diagrama de distancias está rehecho en HTML en vez de
   pegar la lámina de la presentación: aquella tiene fondo
   blanco y en una página negra se lee como un parche.
   ============================================================ */
.guia-hero{
  position:relative;
  padding-bottom:var(--s-800);
  overflow:hidden;
}
.guia-hero__in{position:relative;z-index:1;max-width:760px}
.guia-hero__title{
  font-size:var(--t-6xl);
  margin-bottom:var(--s-300);
}
.guia-hero__lead{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--tx-2);margin-bottom:var(--s-200);
}
.guia-hero__lead strong{color:var(--tx);font-weight:600}
.guia-hero__lead em{font-style:normal;color:var(--naranja)}
.guia-hero__acciones{
  display:flex;flex-wrap:wrap;gap:var(--s-100);
  margin-top:var(--s-400);
}

/* ---- las cuatro preguntas del paso 1 ---- */
.preguntas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.pregunta{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
}
.pregunta__n{
  display:block;
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.2em;color:var(--naranja);
  margin-bottom:var(--s-200);
}
.pregunta h3{font-size:var(--t-lg);line-height:var(--lh-lg);margin-bottom:var(--s-100)}
.pregunta p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}

/* ---- remate de sección ---- */
.guia-remate{
  display:flex;align-items:flex-start;gap:var(--s-100);
  margin-top:var(--s-500);
  padding:var(--s-300);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-left:3px solid var(--naranja);
  border-radius:var(--r-lg);
  font-size:var(--t-base);line-height:var(--lh-base);
  color:var(--tx-2);
}
.guia-remate svg{width:22px;height:22px;flex:none;color:var(--naranja);margin-top:2px}

/* ---- qué es el pitch ---- */
.pitch-explica{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-400);
  margin-bottom:var(--s-500);
  max-width:var(--medida);
}
.pitch-explica h3{font-size:var(--t-xl);line-height:var(--lh-xl);margin-bottom:var(--s-100)}
.pitch-explica p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}
.pitch-explica strong{color:var(--tx)}

/* ---- escala de distancia contra pitch ---- */
.escala{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.escala__paso{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
}
.escala__dist{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);
  margin-bottom:var(--s-200);
}
/* la barra crece con la distancia: se ve la progresión de un vistazo */
.escala__barra{
  height:4px;background:var(--bg-4);
  border-radius:2px;overflow:hidden;
  margin-bottom:var(--s-200);
}
.escala__barra span{
  display:block;height:100%;width:var(--ancho,50%);
  background:var(--naranja);
}
.escala__pitch{
  font-family:var(--f-mono);
  font-size:var(--t-xl);line-height:var(--lh-xl);
  font-weight:600;color:var(--naranja);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--s-75);
}
.escala__nota{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}

/* ---- los cinco tipos ---- */
.tipos{display:grid;gap:var(--s-400)}
.tipo{
  display:grid;grid-template-columns:300px 1fr;
  gap:var(--s-500);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  padding:var(--s-400);
  min-width:0;
}
.tipo__media{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-1);
  align-self:start;
}
.tipo__media img{width:100%;height:auto;display:block}
.tipo__body{min-width:0}
.tipo__cat{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja);
  margin-bottom:var(--s-75);
}
.tipo__body h3{font-size:var(--t-2xl);line-height:var(--lh-2xl);margin-bottom:var(--s-200)}
.tipo__desc{
  font-size:var(--t-base);line-height:var(--lh-base);
  color:var(--tx-2);margin-bottom:var(--s-300);
  max-width:62ch;
}

.tipo__datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--s-300);
}
.tipo__datos>div{background:var(--bg-3);padding:var(--s-200)}
.tipo__datos dt{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
  margin-bottom:var(--s-25);
}
.tipo__datos dd{
  font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx);
}

/* a favor / en contra */
.balance{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-300);margin-bottom:var(--s-300)}
.balance__tit{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:var(--s-100);
}
.balance__col--pro .balance__tit{color:var(--verde)}
.balance__col--con .balance__tit{color:#FF8A8A}
.balance ul{display:grid;gap:var(--s-75)}
.balance li{
  position:relative;padding-left:var(--s-200);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
}
.balance li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
}
.balance__col--pro li::before{background:var(--verde)}
.balance__col--con li::before{background:#FF8A8A}
.balance li strong{color:var(--tx)}

/* los tres gabinetes de exterior */
.gabinetes{
  background:var(--bg-3);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  padding:var(--s-300);
  margin-bottom:var(--s-300);
}
.gabinetes .balance__tit{color:var(--naranja)}
.gabinetes ul{display:grid;gap:var(--s-100)}
.gabinetes li{
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
  padding-left:var(--s-200);position:relative;
}
.gabinetes li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;background:var(--naranja);
}
.gabinetes li strong{color:var(--tx)}

.tipo__usos{display:flex;flex-wrap:wrap;gap:var(--s-75);margin-bottom:var(--s-300)}
.tipo__usos span{
  padding:var(--s-50) var(--s-100);
  background:var(--bg-3);
  border:1px solid var(--linea);
  border-radius:var(--r-full);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  color:var(--tx-3);
}

@media (max-width:1024px){
  .guia-hero__title{font-size:var(--t-5xl)}
  .preguntas{grid-template-columns:repeat(2,1fr)}
  .escala{grid-template-columns:repeat(2,1fr)}
  .tipo{grid-template-columns:1fr;gap:var(--s-300)}
  .tipo__media{max-width:300px}
}
@media (max-width:640px){
  .guia-hero__title{font-size:var(--t-4xl)}
  .guia-hero__acciones .btn{width:100%}
  .preguntas{grid-template-columns:1fr}
  .escala{grid-template-columns:1fr}
  .balance{grid-template-columns:1fr;gap:var(--s-200)}
  .tipo{padding:var(--s-300)}
  .tipo__media{max-width:none}
}

/* ============================================================
   GUÍA "¿QUÉ PANTALLA NECESITO?"
   Réplica de la presentación, lámina por lámina, en la paleta
   oscura y con las tipografías del sitio.
   ============================================================ */

/* ---- chip "TIPO DE PANTALLA" ---- */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-75);
  padding:var(--s-75) var(--s-200);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r-full);
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-2);
  margin-bottom:var(--s-200);
}
.chip svg{width:15px;height:15px;color:var(--naranja)}

/* ---- número de paso en cuadrado ---- */
.paso-n{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--r-lg);
  background:var(--naranja);color:#000;
  font-family:var(--f-mono);
  font-size:var(--t-lg);font-weight:600;
}
.paso-n--b{background:var(--violeta-claro);color:#fff}
.paso-cab{display:flex;align-items:center;gap:var(--s-200);margin-bottom:var(--s-200)}
.paso-cab h3{font-size:var(--t-2xl);line-height:var(--lh-2xl)}

/* ---- tarjetas de pregunta con icono ---- */
.tarjetas-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.tarj{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
  text-align:center;
}
.tarj svg{width:30px;height:30px;color:var(--naranja);margin:0 auto var(--s-200)}
.tarj h4{font-size:var(--t-base);line-height:var(--lh-base);margin-bottom:var(--s-75)}
.tarj p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3)}

/* ---- banda de remate naranja (como en la lámina) ---- */
.banda{
  display:flex;align-items:center;gap:var(--s-300);
  margin-top:var(--s-400);
  padding:var(--s-300);
  background:rgba(255,127,39,.08);
  border:1px solid rgba(255,127,39,.3);
  border-radius:var(--r-xl);
}
.banda__ico{
  display:grid;place-items:center;
  width:48px;height:48px;flex:none;
  border-radius:50%;
  background:var(--naranja);color:#000;
}
.banda__ico svg{width:24px;height:24px;color:inherit}
.banda__ico{color:#000}
.banda strong{display:block;font-size:var(--t-base);margin-bottom:2px}
/* sólo el texto: el icono también es un span y quedaba naranja sobre naranja */
.banda>div span{
  display:block;
  font-size:var(--t-base);line-height:var(--lh-base);
  color:var(--naranja);font-weight:600;
}
.banda--azul{background:rgba(123,68,224,.1);border-color:rgba(123,68,224,.34)}
.banda--azul .banda__ico{background:var(--violeta-claro);color:#fff}
.banda--azul>div span{color:var(--violeta-claro)}

/* ---- caja "¿qué es el pitch?" ---- */
.caja-info{
  display:grid;grid-template-columns:1fr 340px;gap:var(--s-400);
  align-items:center;
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
  margin-bottom:var(--s-400);
}
.caja-info h4{font-size:var(--t-lg);line-height:var(--lh-lg);margin-bottom:var(--s-100);color:var(--violeta-claro)}
.caja-info p{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}
.caja-info img{width:100%;height:auto;border-radius:var(--r-lg)}

/* ---- diagrama de distancias + fila de pitch ---- */
.diagrama img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.fila-pitch{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300);
  margin-top:var(--s-300);
}
.pitch-col{text-align:center}
.pitch-col__rot{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:var(--s-75);
}
.pitch-col__val{
  font-family:var(--f-mono);
  font-size:var(--t-xl);line-height:var(--lh-xl);
  font-weight:600;margin-bottom:var(--s-75);
  font-variant-numeric:tabular-nums;
}
.pitch-col__nota{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}
.c-verde{color:#3FBF6F}.c-azul{color:#5A8DEE}.c-naranja{color:var(--naranja)}.c-violeta{color:var(--violeta-claro)}

/* ============================================================
   FICHA DE CADA TIPO DE PANTALLA (láminas 3 a 7)
   ============================================================ */
.ficha{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-2xl);
  padding:var(--s-500);
  margin-bottom:var(--s-500);
  min-width:0;
}
.ficha__top{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-500);align-items:start}
.ficha__titulo{font-size:var(--t-4xl);margin-bottom:var(--s-100)}
.ficha__sub{
  font-size:var(--t-lg);line-height:var(--lh-lg);
  color:var(--violeta-claro);font-weight:600;
  margin-bottom:var(--s-300);
}
.ficha__desc{font-size:var(--t-base);line-height:var(--lh-base);color:var(--tx-2);margin-bottom:var(--s-300)}
.ficha__media{
  background:var(--bg-1);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:grid;place-items:center;
  padding:var(--s-200);
}
.ficha__media img{width:100%;height:auto;display:block;max-height:420px;object-fit:contain}

/* recuadro destacado tipo "nota violeta" de la presentación */
.nota-violeta{
  display:flex;gap:var(--s-200);align-items:flex-start;
  padding:var(--s-300);
  background:rgba(123,68,224,.1);
  border:1px solid rgba(123,68,224,.3);
  border-radius:var(--r-lg);
  margin-bottom:var(--s-300);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  color:var(--tx-2);
}
.nota-violeta svg{width:22px;height:22px;flex:none;color:var(--violeta-claro);margin-top:2px}
.nota-violeta strong{color:var(--violeta-claro)}

/* tamaños de gabinete */
.gabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-300);margin-bottom:var(--s-300)}
.gab{
  background:var(--bg-3);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  padding:var(--s-200);
  text-align:center;
}
.gab__med{
  font-family:var(--f-mono);
  font-size:var(--t-lg);line-height:var(--lh-lg);
  font-weight:600;color:var(--naranja);
}
.gab__peso{
  font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3);
  margin-top:var(--s-25);
}

/* pros / cons / usos: las tres cajas de la lámina */
.pcu{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300);margin-top:var(--s-400)}
.pcu--2{grid-template-columns:repeat(2,1fr)}
.caja{
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  padding:var(--s-300);
  min-width:0;
}
.caja--pro{background:rgba(97,206,112,.07);border-color:rgba(97,206,112,.28)}
.caja--con{background:rgba(255,90,90,.07);border-color:rgba(255,90,90,.26)}
.caja--uso{background:rgba(90,141,238,.07);border-color:rgba(90,141,238,.26)}
.caja__cab{display:flex;align-items:center;gap:var(--s-100);margin-bottom:var(--s-200)}
.caja__cab svg{width:26px;height:26px;flex:none}
.caja__cab h4{
  font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:var(--lh-sm);
  letter-spacing:.12em;text-transform:uppercase;
}
.caja--pro .caja__cab svg,.caja--pro .caja__cab h4{color:var(--verde)}
.caja--con .caja__cab svg,.caja--con .caja__cab h4{color:#FF8A8A}
.caja--uso .caja__cab svg,.caja--uso .caja__cab h4{color:#5A8DEE}

.items{display:grid;gap:var(--s-200)}
.item{display:flex;gap:var(--s-100);align-items:flex-start}
.item svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--tx-3)}
.item strong{display:block;font-size:var(--t-sm);margin-bottom:2px}
.item span{display:block;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3)}
.caja img{width:100%;height:auto;border-radius:var(--r-lg);margin-top:var(--s-200)}

/* lista numerada de ventajas (lámina de tótems) */
.numeradas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-300)}
.num{display:flex;gap:var(--s-100);align-items:flex-start}
.num__n{
  font-family:var(--f-mono);
  font-size:var(--t-xs);color:var(--naranja);
  flex:none;margin-top:3px;
}
.num strong{display:block;font-size:var(--t-sm);margin-bottom:2px}
.num span{display:block;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-3)}

/* fila de especificaciones generales */
.specs-fila{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-xl);
  overflow:hidden;margin-top:var(--s-400);
}
.specs-fila>div{background:var(--bg-3);padding:var(--s-200);text-align:center}
.specs-fila dt{
  font-family:var(--f-mono);
  font-size:var(--t-xs);line-height:var(--lh-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
  margin-bottom:var(--s-25);
}
.specs-fila dd{
  font-family:var(--f-mono);
  font-size:var(--t-base);line-height:var(--lh-base);
  font-weight:600;color:var(--naranja);
}

/* "ideal para" con iconos */
.ideal{display:flex;flex-wrap:wrap;gap:var(--s-300);margin-top:var(--s-300)}
.ideal__it{text-align:center;width:110px}
.ideal__it svg{width:28px;height:28px;color:var(--naranja);margin:0 auto var(--s-75)}
.ideal__it span{
  display:block;
  font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--tx-2);
}

/* tres columnas de gabinete de exterior */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.col-gab{
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
  overflow:hidden;
  min-width:0;
}
.col-gab__cab{
  padding:var(--s-200);
  background:var(--violeta);
  color:#fff;
  font-size:var(--t-sm);line-height:var(--lh-sm);
  font-weight:600;text-align:center;
}
.col-gab__body{padding:var(--s-300)}
.col-gab img{width:100%;height:auto;border-radius:var(--r-lg);margin-bottom:var(--s-300)}
.col-gab .items{gap:var(--s-200)}
.col-gab__ideal{
  margin-top:var(--s-300);padding-top:var(--s-200);
  border-top:1px solid var(--linea);
  font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2);
}
.col-gab__ideal strong{
  display:block;color:var(--naranja);
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-50);
}

/* franja de características comunes */
.comunes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s-300);
  margin-top:var(--s-400);
  padding:var(--s-300);
  background:var(--bg-2);
  border:1px solid var(--linea);
  border-radius:var(--r-xl);
}
.comun{display:flex;gap:var(--s-100);align-items:flex-start}
.comun svg{width:24px;height:24px;flex:none;color:var(--naranja)}
.comun strong{display:block;font-size:var(--t-sm)}
.comun span{display:block;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--tx-3)}

/* galería de configuraciones / aplicaciones */
.galeria-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300);margin-top:var(--s-300)}
.galeria-3 figure{
  background:var(--bg-3);
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.galeria-3 img{width:100%;height:auto;display:block}
.galeria-3 figcaption{padding:var(--s-200);font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--tx-2)}
.galeria-3 strong{display:block;color:var(--tx);margin-bottom:2px}

@media (max-width:1024px){
  .tarjetas-4{grid-template-columns:repeat(2,1fr)}
  .fila-pitch{grid-template-columns:repeat(2,1fr)}
  .caja-info{grid-template-columns:1fr}
  .ficha__top{grid-template-columns:1fr}
  .pcu,.pcu--2{grid-template-columns:1fr}
  .tres{grid-template-columns:1fr}
  .numeradas{grid-template-columns:1fr}
  .galeria-3{grid-template-columns:1fr}
  .ficha{padding:var(--s-400)}
  .ficha__titulo{font-size:var(--t-3xl)}
}
@media (max-width:640px){
  .tarjetas-4{grid-template-columns:1fr}
  .fila-pitch{grid-template-columns:1fr}
  .banda{flex-direction:column;align-items:flex-start;gap:var(--s-200)}
  .ficha{padding:var(--s-300)}
  .paso-cab h3{font-size:var(--t-xl);line-height:var(--lh-xl)}
}