/* ============================================================
   brutal.css — rediseño "cuadrícula y tiza" de la portada ArcGestor (2026-10-06, modo prueba).
   SOLO lo carga landing/index.html, al FINAL de los <link>: sobrescribe tokens y componentes de
   v2/tokens.css, v2/componentes.css, index.css e isla.css sin tocarlos (mitic.html sigue igual).
   Lenguaje: fondo crema con cuadrícula fina · bordes negros gruesos · sombras duras sin desenfoque
   (6px 6px 0) · acento amarillo #FFD23F con texto negro · titulares muy gruesos · etiquetas en
   mayúsculas · botones bloque · decoraciones sueltas (estrellas de 4 puntas, flechas, puntos).
   El logo (#logo-arco) NO se toca: conserva sus degradados; solo la viga y los centros siguen al tema.
   Oscuro: negro cálido, bordes y sombras en crema, mismo amarillo.
   ============================================================ */

/* ───────── Tokens ───────── */
:root{
  --amarillo:#FFD23F;--amarillo-2:#FFE27A;--amarillo-suave:#FFF4C2;
  --negro:#0B0B0B;--crema:#F2EFE9;
  --linea:var(--negro);           /* color de bordes y sombras (crema en oscuro) */
  --sombra-c:var(--negro);
  --bw:3px;
  --dura:6px 6px 0 var(--sombra-c);--dura-sm:4px 4px 0 var(--sombra-c);--dura-xs:3px 3px 0 var(--sombra-c);--dura-lg:8px 8px 0 var(--sombra-c);
  --grid-l:rgba(11,11,11,.10);--grid-s:48px;

  --marca:var(--amarillo);--marca-fuerte:var(--amarillo);--marca-hover:var(--amarillo-2);--marca-claro:var(--amarillo);
  --marca-txt:var(--negro);--marca-suave:var(--amarillo-suave);--marca-borde:var(--negro);
  --fondo:#F6F3EA;--superficie:#FFFFFF;--superficie-2:var(--amarillo-suave);--superficie-inv:var(--negro);
  --tinta:var(--negro);--tinta-2:rgba(11,11,11,.84);--tinta-3:rgba(11,11,11,.68);--tinta-inv:var(--crema);
  --borde:var(--linea);--borde-fuerte:var(--linea);--foco:var(--negro);
  --al-dia-txt:#14532D;--por-vencer-txt:#78350F;--vencido-txt:#991B1B;
  --chip-al-dia:#BBF7D0;--chip-por-vencer:#FDE68A;--chip-vencido:#FECACA;
  --sombra-1:none;--sombra-2:none;--sombra-3:none;--sombra-btn:none;
  --r-btn:4px;--r-card:6px;--r-lg:8px;--r-chip:4px;--r-input:4px;
  --ic-acc:var(--negro);
  /* paleta por negocio → todo al amarillo/negro */
  --v-mitic:var(--amarillo);--v-mitic-t:var(--negro);--v-taller:var(--amarillo);--v-taller-t:var(--negro);--v-salon:var(--amarillo);--v-salon-t:var(--negro);
  --v-tienda:var(--amarillo);--v-tienda-t:var(--negro);--v-resto:var(--amarillo);--v-resto-t:var(--negro);--v-clinica:var(--amarillo);--v-clinica-t:var(--negro);--v-violeta:var(--amarillo);--v-violeta-t:var(--negro);
  --grad-marca:none;--vc:var(--amarillo);--vc-t:var(--negro);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --linea:var(--crema);--sombra-c:var(--crema);--grid-l:rgba(242,239,233,.09);
    --fondo:#141210;--superficie:#1E1B18;--superficie-2:#2B2621;--superficie-inv:var(--crema);
    --tinta:var(--crema);--tinta-2:rgba(242,239,233,.84);--tinta-3:rgba(242,239,233,.68);--tinta-inv:var(--negro);
    --marca-txt:var(--crema);--foco:var(--amarillo);
    --al-dia-txt:#14532D;--por-vencer-txt:#78350F;--vencido-txt:#991B1B;
    --chip-al-dia:#BBF7D0;--chip-por-vencer:#FDE68A;--chip-vencido:#FECACA;
    --v-mitic-t:var(--crema);--v-taller-t:var(--crema);--v-salon-t:var(--crema);--v-tienda-t:var(--crema);--v-resto-t:var(--crema);--v-clinica-t:var(--crema);--v-violeta-t:var(--crema);--vc-t:var(--crema);
  }
}
:root[data-theme="dark"]{
  --linea:var(--crema);--sombra-c:var(--crema);--grid-l:rgba(242,239,233,.09);
  --fondo:#141210;--superficie:#1E1B18;--superficie-2:#2B2621;--superficie-inv:var(--crema);
  --tinta:var(--crema);--tinta-2:rgba(242,239,233,.84);--tinta-3:rgba(242,239,233,.68);--tinta-inv:var(--negro);
  --marca-txt:var(--crema);--foco:var(--amarillo);
  --al-dia-txt:#14532D;--por-vencer-txt:#78350F;--vencido-txt:#991B1B;
  --chip-al-dia:#BBF7D0;--chip-por-vencer:#FDE68A;--chip-vencido:#FECACA;
  --v-mitic-t:var(--crema);--v-taller-t:var(--crema);--v-salon-t:var(--crema);--v-tienda-t:var(--crema);--v-resto-t:var(--crema);--v-clinica-t:var(--crema);--v-violeta-t:var(--crema);--vc-t:var(--crema);
}
/* texto verde suelto (no chip) sobre fondo oscuro: tono claro legible */
html[data-theme="dark"] .cf-sub b.ok{color:#4ADE80}
html[data-theme="dark"] .cf-fill{fill-opacity:.4}

/* ───────── Base: cuadrícula, tipografía, foco ───────── */
body{background-color:var(--fondo);
  background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);
  background-size:var(--grid-s) var(--grid-s);background-position:center top}
h1,h2,h3,h4{letter-spacing:-.03em}
h1{font-weight:800}
h2{font-weight:800;letter-spacing:-.035em}
.num{font-weight:600}
.marca{color:var(--marca-txt)}
::selection{background:var(--amarillo);color:var(--negro)}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:2px}
.skip{border:var(--bw) solid var(--linea);border-radius:4px;box-shadow:var(--dura-sm);background:var(--amarillo);color:var(--negro)}

/* Etiqueta (eyebrow): caja blanca con borde, MAYÚSCULAS mono, cuadradito amarillo */
.eyebrow{background:var(--superficie);color:var(--tinta);border:2px solid var(--linea);padding:5px 10px 5px 8px;border-radius:3px;
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;gap:8px;box-shadow:var(--dura-xs)}
.eyebrow::before{width:10px;height:10px;border-radius:1px;background:var(--amarillo);border:2px solid var(--linea)}
.hero .eyebrow,html[data-theme="dark"] .hero .eyebrow{color:var(--tinta)}
.isla .eyebrow,html[data-theme="dark"] .isla .eyebrow{color:var(--negro);background:#fff;border-color:var(--negro);box-shadow:3px 3px 0 var(--amarillo)}
.isla .eyebrow::before,html[data-theme="dark"] .isla .eyebrow::before{background:var(--amarillo);border-color:var(--negro)}

/* ───────── Botones bloque ───────── */
.btn{border:var(--bw) solid var(--linea);border-radius:var(--r-btn);box-shadow:var(--dura-sm);font-weight:800;letter-spacing:-.01em;
  transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out),background-color var(--d-2) var(--ease-out)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--dura)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sombra-c)}
.btn-primario,.btn-primario:hover,html[data-theme="dark"] .btn-primario:hover,.btn-primario:active{background-image:none;background-color:var(--amarillo);color:var(--negro);border-color:var(--linea)}
.btn-primario:hover,html[data-theme="dark"] .btn-primario:hover{background-color:var(--amarillo-2);box-shadow:var(--dura)}
.btn-primario:active{background-color:var(--amarillo);box-shadow:2px 2px 0 var(--sombra-c)}
.btn-primario .ic{--ic-acc:var(--negro)}
.btn-secundario{background:var(--superficie);color:var(--tinta);border-color:var(--linea)}
.btn-secundario:hover,.btn-secundario:active{background:var(--superficie-2);border-color:var(--linea)}
.btn-hierro{background:var(--negro);color:var(--crema);border-color:var(--linea)}
.btn-hierro:hover,html[data-theme="dark"] .btn-hierro:hover{background:var(--negro);color:var(--amarillo)}
.btn-fantasma{border:0;box-shadow:none;background:transparent;color:var(--tinta);font-weight:700}
.btn-fantasma:hover,.btn-fantasma:active{transform:none;box-shadow:none;color:var(--tinta)}
.btn-fantasma::after{background:var(--amarillo);height:3px}
.btn-icono{border-radius:var(--r-btn);background:var(--superficie);color:var(--tinta);border:2px solid var(--linea);box-shadow:var(--dura-xs)}
.btn-icono:hover{background:var(--amarillo);color:var(--negro);border-color:var(--linea)}
/* invertido (sobre islas negras): borde y sombra en el color del texto */
.btn-inv{background:transparent;color:inherit;border-color:currentColor;box-shadow:4px 4px 0 currentColor}
.btn-inv:hover{background:rgba(255,255,255,.08);border-color:currentColor;box-shadow:6px 6px 0 currentColor}
html[data-theme="dark"] .isla-foto .btn-inv:hover{background:rgba(0,0,0,.06)}
.ctas-nota{font-family:var(--f-mono);font-size:13px;color:var(--tinta-2)}
.ctas-nota .ic{--ic-acc:var(--negro);color:var(--tinta)}

/* ───────── Chips ───────── */
.chip{border:2px solid var(--linea);border-radius:var(--r-chip);background:var(--superficie);color:var(--tinta);font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;height:26px}
.chip-ok,.chip-warn,.chip-risk{border-color:var(--linea)}
.chip-ok{background:var(--chip-al-dia);color:var(--al-dia-txt)}.chip-warn{background:var(--chip-por-vencer);color:var(--por-vencer-txt)}.chip-risk{background:var(--chip-vencido);color:var(--vencido-txt)}
.mini-chip{border:2px solid var(--linea);border-radius:var(--r-chip);background:var(--superficie);color:var(--tinta);font-weight:700}
.mini-chip.ok{background:var(--chip-al-dia);color:var(--al-dia-txt);border-color:var(--linea);--ic-acc:var(--al-dia-txt)}

/* ───────── Tarjetas ───────── */
.card{background:var(--superficie);border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura)}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--dura-lg);border-color:var(--linea)}
.card::after,html[data-theme="dark"] .card::after{display:none}
.card .card-ic,.card:hover .card-ic{background:var(--amarillo);color:var(--negro);--ic-acc:var(--negro);border:2px solid var(--linea);border-radius:4px}
.card:hover .card-ic{transform:none}
.card p{color:var(--tinta-2)}
.card-hierro,.card-hierro:hover{background:var(--superficie-inv);color:var(--tinta-inv);border-color:var(--linea)}
html[data-theme="dark"] .card-hierro,html[data-theme="dark"] .card-hierro:hover{box-shadow:6px 6px 0 var(--amarillo)}
.franja-dueno .card-ic,html[data-theme="dark"] .franja-dueno .card-ic{background:var(--amarillo);color:var(--negro);--ic-acc:var(--negro)}
.telefono{box-shadow:none;border:var(--bw) solid var(--linea);border-bottom:0;border-radius:30px 30px 0 0}
.card .paso-n{color:var(--negro);background:var(--amarillo);border:2px solid var(--linea);border-radius:3px;padding:3px 8px;font-size:12px;font-weight:600;letter-spacing:.06em}

/* ───────── Secciones ───────── */
.sec{position:relative}
.sec-alt{background:rgba(255,255,255,.55);border-top:var(--bw) solid var(--linea);border-bottom:var(--bw) solid var(--linea)}
html[data-theme="dark"] .sec-alt{background:rgba(255,255,255,.03)}

/* ───────── Barra de navegación: caja con borde grueso y sombra dura ─────────
   La isla sigue viva (isla.js), pero en este lenguaje la barra NO se contrae al bajar: queda entera (como la referencia).
   La sombra vive fuera de la caja, así que el clip-path se extiende 8px a la derecha y abajo para dejarla ver. */
.nav,html[data-theme="dark"] .nav{--isla-h:56px;--isla-r:4px;--isla-bg:var(--superficie);--isla-bg2:var(--amarillo-suave);--isla-line:var(--linea);
  --isla-tx:var(--tinta);--isla-tx2:var(--tinta-2);--isla-tx3:var(--tinta-3);--isla-res:360ms}
html[data-theme="dark"] .nav{--isla-bg2:#2B2621}
.nav-isla{border:var(--bw) solid var(--linea);border-radius:var(--isla-r);box-shadow:var(--dura);-webkit-backdrop-filter:none;backdrop-filter:none;
  clip-path:inset(0 -9px -9px 0 round var(--isla-r))}
.nav-isla .nav-logo{--logo-viga:var(--tinta);--logo-centro:var(--superficie)}
.nav-isla .nav-logo:focus-visible,.nav-isla .nav-links>li>a:focus-visible,.nav-isla .btn-fantasma:focus-visible,.nav-isla .btn-icono:focus-visible,.nav-isla .btn-primario:focus-visible,.burger:focus-visible,.mmenu .btn:focus-visible,.mmenu>ul>li>a:focus-visible{outline-color:var(--foco)}
.nav-isla .nav-links>li>a{font-weight:600;color:var(--tinta-2)}
.nav-isla .nav-links>li>a:hover,.nav-isla .nav-links>li>a[aria-current="true"]{color:var(--tinta)}
.nav-isla .nav-ind{background:var(--amarillo);border:2px solid var(--linea);border-radius:4px}
html[data-theme="dark"] .nav-isla .nav-ind{background:var(--amarillo)}
.nav-isla .nav-ind ~ li > a[aria-current="true"],.nav-isla .nav-links>li>a:hover{color:var(--negro)}
html[data-theme="dark"] .nav-isla .nav-links>li>a:hover,html[data-theme="dark"] .nav-isla .nav-links>li>a[aria-current="true"]{color:var(--negro)}
.nav-isla .btn-fantasma{color:var(--tinta);font-weight:700}
.nav-isla .btn-fantasma:hover{color:var(--tinta)}
.nav-isla .btn-fantasma::after{background:var(--amarillo)}
.nav-isla .btn-icono{background:var(--superficie);color:var(--tinta);border:2px solid var(--linea);box-shadow:none}
.nav-isla .btn-icono:hover{background:var(--amarillo);color:var(--negro);border-color:var(--linea)}
.nav-isla .btn-primario{box-shadow:var(--dura-xs)}
.nav-isla .btn-primario:hover{box-shadow:var(--dura-sm)}
.isla-estado{display:none}
@media(min-width:921px){
  .nav-isla.compacta{--isla-i:0px}
  .nav-isla.compacta .nav-logo,.nav-isla.compacta .nav-r{transform:none;pointer-events:auto}
  .nav-isla.compacta .logo-pal{display:inline;opacity:1;visibility:visible}
  .nav-isla.compacta .nav-links{display:flex;opacity:1;visibility:visible;transform:none}
  .nav-isla.compacta .btn-fantasma,.nav-isla.compacta .btn-icono{display:inline-flex;opacity:1;visibility:visible}
  .nav-isla.compacta .isla-estado{display:none}
}
@media(max-width:920px){
  .nav-isla{clip-path:inset(0 -9px calc(100% - var(--isla-h) - 9px) 0 round var(--isla-r))}
  .nav-isla.abierta{clip-path:inset(0 -9px -9px 0 round var(--isla-r))}
  .burger{border:2px solid var(--linea);border-radius:4px;background:var(--superficie)}
  .burger:hover{background:var(--amarillo)}
  .burger span{background:var(--tinta)}
  .burger:hover span{background:var(--negro)}
  .mmenu{border-top:var(--bw) solid var(--linea);margin:0 -0px;padding-top:6px}
  .mmenu>ul>li>a{color:var(--tinta);border-bottom:2px solid var(--linea);font-weight:800}
  .mmenu>ul>li:last-child>a{border-bottom:0}
  .mmenu>ul>li>a .ic{color:var(--tinta)}
  .mmenu .btn-secundario{background:var(--superficie);color:var(--tinta);border-color:var(--linea);box-shadow:var(--dura-sm)}
  .mmenu .btn-secundario:hover{background:var(--superficie-2);border-color:var(--linea)}
  .mmenu-meta{color:var(--tinta-3);font-family:var(--f-mono);font-size:12px}
  .mmenu-meta .btn-sm{box-shadow:var(--dura-xs)}
  .isla-velo{background:rgba(11,11,11,.5)}
}

/* ───────── Héroe ───────── */
.hero{padding-top:calc(64px + clamp(40px,5vw,72px))}
.hero::before,.aurora,html[data-theme="dark"] .aurora{display:none}
.hero h1{letter-spacing:-.035em}
/* "Todo en uno." → bloque amarillo con borde y sombra, en MAYÚSCULAS, texto negro (sin el degradado de texto de index.css) */
.hero h1 .marca,html[data-theme="dark"] .hero h1 .marca{display:inline-block;background:var(--amarillo);background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--negro);-webkit-text-fill-color:var(--negro);text-transform:uppercase;border:var(--bw) solid var(--linea);border-radius:4px;
  padding:.02em .14em .04em;margin:.06em 0 8px;line-height:1;box-shadow:var(--dura-sm)}
.hero .lead{color:var(--tinta-2)}
.hero .ctas-nota{color:var(--tinta-2)}
.hero-foto,html[data-theme="dark"] .hero-foto{border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura-lg);background:var(--negro)}
.hero-foto-capa{border-radius:3px}
.hero-foto-capa::after,html[data-theme="dark"] .hero-foto-capa::after{box-shadow:none}
.hero-tel{border:4px solid var(--linea);border-radius:18px;box-shadow:var(--dura)}
.sello,html[data-theme="dark"] .sello{background:var(--negro);border:var(--bw) solid var(--amarillo);box-shadow:4px 4px 0 var(--amarillo)}
.sello::before{border-color:rgba(242,239,233,.2)}
@media(min-width:921px){
  .hero-in h1{font-size:clamp(30px,3.3vw,50px);width:min(1060px,100%);line-height:1.02;margin-bottom:10px}
  .hero-grid{row-gap:14px}
  .hero-in .lead{margin-top:10px}
}
@media(max-width:920px){.hero{padding-top:calc(64px + 36px)}}
/* decoraciones sueltas (aria-hidden): puntos, estrellas de 4 puntas y flechas. Solo escritorio, fuera del área de lectura. */
.deco{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.deco>*{position:absolute;color:var(--linea)}
.dk-puntos{width:72px;height:72px;background-image:radial-gradient(var(--linea) 1.8px,transparent 2px);background-size:12px 12px;background-position:center}
.dk-puntos.chico{width:48px;height:48px}
.dk-estrella,.dk-flecha{display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dk-estrella{fill:currentColor;stroke:none}
.deco-hero .d1{left:3.5%;top:30%}
.deco-hero .d2{right:4%;top:28%}
.deco-hero .d3{left:6%;top:50%;width:30px;height:30px}
.deco-hero .d4{right:6.5%;top:54%;width:26px;height:26px}
.deco-hero .d5{left:4.5%;bottom:24%;width:56px;height:56px}
.deco-hero .d6{right:4%;bottom:26%;width:56px;height:56px}
.deco-hero .d7{left:8%;top:57%;width:14px;height:14px}
.deco-hero .d8{right:9%;top:61%;width:14px;height:14px}
.deco-sec .d1{right:4%;top:72px;width:44px;height:44px}
.deco-sec .d2{right:7%;top:132px;width:18px;height:18px}
.deco-sec .d3{left:3%;bottom:72px}
@media(max-width:1180px){.deco-hero .d1,.deco-hero .d2,.deco-hero .d5,.deco-hero .d6{display:none}}
@media(max-width:920px){.deco{display:none}}

/* ───────── Franja "qué ofrecemos": rejilla con líneas negras ───────── */
.banda-sec{background:transparent;border:0;padding:8px 0 0}
.banda{gap:var(--bw);padding:0;background:var(--linea);border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura);overflow:hidden}
.banda li{background:var(--superficie);padding:18px 18px 20px;gap:6px}
.b-ic{background:var(--amarillo);color:var(--negro);--ic-acc:var(--negro);border:2px solid var(--linea);border-radius:4px}
.banda b{color:var(--tinta);font-weight:600}
.banda li>span:last-child{color:var(--tinta-2)}
@media(max-width:560px){.banda{gap:var(--bw)}.banda li{padding:14px}}

/* ───────── Fotos de escena y mini-ilustraciones ───────── */
.foto{border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura);background:var(--superficie)}
.foto figcaption{border-top:var(--bw) solid var(--linea);color:var(--tinta-2)}
.mini,html[data-theme="dark"] .mini{background:var(--superficie-2);border:2px solid var(--linea);border-radius:4px}
.mb-bars i{background:var(--amarillo);border:2px solid var(--linea);border-bottom:0;border-radius:2px 2px 0 0}
.mb-bars i.hi{background:var(--linea)}
.mf-row i{background:var(--amarillo);color:var(--negro);border:2px solid var(--linea);font-size:9px;line-height:18px}
.mc-ic{background:var(--chip-al-dia);color:var(--al-dia-txt);--ic-acc:var(--al-dia-txt);border:2px solid var(--linea);border-radius:4px}
.ma-bell,.mo-ic,.ml-globe{background:var(--amarillo);color:var(--negro);--ic-acc:var(--negro);border:2px solid var(--linea);border-radius:4px}
.ma-badge{box-shadow:0 0 0 2px var(--linea)}
.mo-bar{background:var(--superficie);border:2px solid var(--linea);height:9px}
.mo-bar i{background:var(--amarillo)}
.ma-t small,.mo-t small,.mc-t small,.mf-row small{color:var(--tinta-2)}

/* ───────── Cifras: gráficos en amarillo y negro ───────── */
.cf-ingresos .cf-big,.cf-activos .cf-big{color:var(--tinta)}
.cf-sub{color:var(--tinta-2)}
.cf-bars rect{fill:var(--amarillo);stroke:var(--linea);stroke-width:2}
.cf-bars rect.hi{fill:var(--linea)}
.cf-lab text{fill:var(--tinta-2)}
.cf-val text,.cf-val text.hi{fill:var(--tinta)}
.cf-grid line{stroke:var(--linea);stroke-dasharray:3 4;opacity:.5}
.cf-fill{fill:var(--amarillo);fill-opacity:.55}
.cf-line,html[data-theme="dark"] .cf-line{stroke:var(--linea);stroke-width:3}
.cf-dot{fill:var(--amarillo);stroke:var(--linea);stroke-width:3}
.cf-dona .pista{stroke:var(--superficie-2)}
.cf-dona-c small{color:var(--tinta-2)}
.cf-leg .chip{height:24px}
.cf-h .meta{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--tinta-2)}

/* ───────── Mitic (producto disponible) ───────── */
.vert{border:var(--bw) solid var(--linea);box-shadow:var(--dura)}
.vert img{border-right:var(--bw) solid var(--linea)}
@media(max-width:820px){.vert img{border-right:0;border-bottom:var(--bw) solid var(--linea)}}
.vert h3 .ic{color:var(--tinta);--ic-acc:var(--tinta)}
.pronto-nota{color:var(--tinta-2)}
.pronto-nota a{color:var(--tinta);text-decoration-thickness:3px;text-decoration-color:var(--amarillo)}

/* ───────── Islas (primeros clientes, CTA final) ───────── */
.isla{border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--amarillo)}
.isla-foto{box-shadow:6px 6px 0 var(--amarillo)}
.isla-img::before{background:linear-gradient(90deg,var(--superficie-inv) 0%,transparent 32%)}
.isla-cta{background:var(--negro);color:var(--crema);box-shadow:6px 6px 0 var(--amarillo)}
.isla-cta .cta-marca{--logo-viga:var(--crema);--logo-centro:var(--negro)}
.cta-foto::before{background:linear-gradient(90deg,var(--negro) 0%,rgba(11,11,11,.6) 18%,transparent 52%)}
.cta-brillo,html[data-theme="dark"] .cta-brillo{display:none}
.isla-foto .btn-primario,.isla-cta .btn-primario{border-color:var(--crema);box-shadow:4px 4px 0 var(--crema)}
.isla-foto .btn-primario:hover,.isla-cta .btn-primario:hover{box-shadow:6px 6px 0 var(--crema)}
html[data-theme="dark"] .isla-foto .btn-primario{border-color:var(--negro);box-shadow:4px 4px 0 var(--negro)}
html[data-theme="dark"] .isla-foto .btn-primario:hover{box-shadow:6px 6px 0 var(--negro)}
@media(max-width:820px){
  .isla-img::before{background:linear-gradient(180deg,transparent 55%,var(--superficie-inv) 100%)}
  .cta-foto::before{background:linear-gradient(180deg,transparent 55%,var(--negro) 100%)}
}

/* ───────── Precios ───────── */
.precio{border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura);background:var(--superficie)}
.precio-gratis{background:var(--amarillo);color:var(--negro);border-right:var(--bw) solid var(--linea)}
.precio-gratis .eyebrow{background:#fff;color:var(--negro);border-color:var(--negro);box-shadow:3px 3px 0 var(--negro)}
.precio-gratis .eyebrow::before{border-color:var(--negro)}
.precio-big,html[data-theme="dark"] .precio-big{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--negro);-webkit-text-fill-color:var(--negro);font-weight:600}
.precio-big sup{color:var(--negro)}
.precio-sub{color:var(--negro)}
.precio-gratis .meta{color:rgba(11,11,11,.72)}
.planes>div{border-bottom:2px solid var(--linea)}
.planes dt{text-transform:uppercase;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em}
.planes dd small{color:var(--tinta-2)}
.nota-precio{color:var(--tinta-2)}
@media(max-width:820px){.precio-gratis{border-right:0;border-bottom:var(--bw) solid var(--linea)}}

/* ───────── Preguntas frecuentes ───────── */
.faq{border:var(--bw) solid var(--linea);border-radius:var(--r-card);box-shadow:var(--dura);background:var(--superficie);overflow:hidden}
.faq details{border-bottom:var(--bw) solid var(--linea)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:16px 18px;font-weight:700}
.faq summary:hover{color:var(--tinta);background:var(--superficie-2)}
.faq details[open] summary{background:var(--superficie-2);border-bottom:2px solid var(--linea)}
.faq summary::before{background:var(--amarillo);color:var(--negro);border:2px solid var(--linea);border-radius:3px;min-width:30px;height:26px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600}
.faq summary .ic{color:var(--tinta)}
.faq-a{padding:14px 18px 18px 62px;color:var(--tinta-2)}

/* ───────── Pie ───────── */
.pie{border-top:var(--bw) solid var(--linea);background:var(--superficie)}
.pie-col h3{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.pie-col a{color:var(--tinta-2)}
.pie-col a:hover{color:var(--tinta);text-decoration-thickness:3px;text-decoration-color:var(--amarillo)}
.pie-marca p{color:var(--tinta-2)}
.pie-bot{color:var(--tinta-2)}
.pie-bot::before{height:2px;background:var(--linea)}
.pie-bot .ic{color:var(--tinta);--ic-acc:var(--tinta)}

/* ───────── Aviso de cookies ───────── */
.ck{background:var(--superficie);border-top:var(--bw) solid var(--linea);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--tinta-2)}
.ck a{color:var(--tinta);text-decoration-thickness:2px;text-decoration-color:var(--amarillo)}
.ck .btn-hierro{box-shadow:var(--dura-xs)}

/* ───────── Movimiento reducido: sin saltos en hover ───────── */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.card:hover{transform:none}
  .btn-primario,.btn-primario:hover{background-position:0 0}
}