/* ============================================================
   ESCUELA DE EBANISTERÍA MODERNA — PCMI · Caguas, PR
   (una división de Professional Cabinets Inc.)

   Tema: "plano de taller". El negocio es UNA ESCUELA, así que la
   base del sitio es PAPEL DE PLANO — un temario se lee en papel —
   y el negro cálido del logo queda para puntuar: hero, la franja
   de diseño digital, matrícula, formulario y pie.

   El motivo es la LÍNEA DE COTA (.dim): regla con topes verticales
   y etiqueta en mono. Sale del activo más distintivo del lead, el
   render acotado en SketchUp, que además es el diferenciador del
   curso ("únicos en enseñar diseño digital").

   OJO CON LAS FOTOS: todas las fuentes son thumbnails de Facebook
   de 414px, exportadas a 828px (LANCZOS 2x + unsharp). NINGÚN
   contenedor de foto debe pasar de ~420px de ancho en CSS o se
   ven borrosas. Ver [[fb-thumbnail-crops]].
   ============================================================ */

:root{
  --ink:#0b0908;         /* negro del logo */
  --ink-2:#141110;
  --ink-3:#1c1817;

  --beige:#f0cbab;       /* panel claro del logo — sobre oscuro */
  --tan:#e3945e;         /* acento del logo — sobre oscuro */
  --tan-d:#a2521d;       /* mismo acento, legible sobre papel */
  --brown:#4e3627;

  --paper:#efe6dc;       /* base del sitio */
  --paper-2:#e5dacd;
  --card:#fbf7f2;
  --txt:#241a12;         /* tinta sobre papel */
  --txt-2:#5a4a3c;
  --rule:rgba(36,26,18,.14);
  --rule-2:rgba(36,26,18,.26);

  --dtxt:#e7ded6;        /* texto sobre las bandas oscuras */
  --dtxt-2:#a9a09a;
  --dline:rgba(240,203,171,.16);
  --dline-2:rgba(240,203,171,.30);

  --wa:#25d366;
  --hot:#a8210f;
  --yellow:#f7d94a;

  --disp:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1180px;
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px;-webkit-text-size-adjust:100%}
/* La rejilla de papel de plano es el fondo base del sitio. Las bandas oscuras
   (hero, diseño digital, matrícula, formulario, pie) traen su propio fondo y la tapan. */
body{
  margin:0;color:var(--txt);
  background-color:var(--paper);
  background-image:linear-gradient(rgba(36,26,18,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(36,26,18,.028) 1px,transparent 1px);
  background-size:26px 26px;
  font:400 clamp(1rem,.97rem + .16vw,1.075rem)/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto es obligatorio: los <img> llevan width/height como atributos y el
   height del HTML le gana a cualquier aspect-ratio. Ver [[img-height-auto-aspect-ratio]] */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:600;line-height:1.06;
  font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 120;letter-spacing:-.015em}
p{margin:0 0 1rem}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 120;color:var(--tan-d)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--tan);color:#000;padding:.6rem 1rem;border-radius:var(--r)}
:focus-visible{outline:2px solid var(--tan-d);outline-offset:3px}

/* ── LÍNEA DE COTA — el motivo del sitio ───────────────────── */
.dim{
  display:flex;align-items:center;gap:.95rem;margin:0 0 1.15rem;
  color:var(--tan-d);font:500 .705rem/1 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;
}
.dim span{flex:none}
.dim::before,.dim::after{
  content:'';height:9px;
  border-left:1px solid currentColor;border-right:1px solid currentColor;
  background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;
  opacity:.5;
}
.dim::before{width:36px;flex:none}
.dim::after{flex:1;min-width:30px}
.dim--fig{justify-content:center;margin:1rem 0 0}
.dim--fig::before{flex:1;width:auto}
/* sobre fondo oscuro */
.hero .dim,.digi .dim,.matri-sec .dim,.sec--form .dim{color:var(--tan)}

/* ── NAV ───────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,9,8,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--dline)}
.nav__in{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:1.6rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__mark{width:40px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt b{font:600 1.02rem/1 var(--disp);font-variation-settings:'SOFT' 40,'WONK' 1;
  letter-spacing:-.01em;color:var(--beige)}
.brand__txt i{font:400 .64rem/1.4 var(--mono);font-style:normal;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dtxt-2);margin-top:.24rem}
.nav__links{display:flex;gap:1.7rem;margin-left:auto}
/* .nav__links a (0,1,1) le gana a .btn (0,1,0) → excluir botones. Ver [[css-specificity-traps]] */
.nav__links a:not(.btn){text-decoration:none;color:var(--dtxt-2);
  font:500 .845rem/1 var(--sans);padding:.5rem 0;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav__links a:not(.btn):hover{color:var(--beige);border-bottom-color:var(--tan)}
.nav__cta{display:flex;align-items:center;gap:.75rem}

.burger{display:none;background:none;border:1px solid var(--dline-2);border-radius:var(--r);
  width:44px;height:40px;padding:0;cursor:pointer;flex-direction:column;
  justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:19px;height:1.5px;background:var(--beige);transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── BOTONES ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.55rem;border:1px solid transparent;border-radius:var(--r);
  font:600 .885rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;
  cursor:pointer;transition:transform .16s,background .18s,border-color .18s,color .18s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn--sm{padding:.66rem 1.05rem;font-size:.815rem}
.btn--big{padding:1.1rem 2.1rem;font-size:.98rem}
.btn--wa{background:var(--wa);color:#04210f}
.btn--wa:hover{background:#31e874}
.btn--tan{background:var(--tan);color:#1a0d04}
.btn--tan:hover{background:var(--beige)}
.btn--ghost{border-color:var(--dline-2);color:var(--beige);background:transparent}
.btn--ghost:hover{border-color:var(--tan);background:rgba(227,148,94,.09)}

/* ── HERO (banda oscura) ───────────────────────────────────── */
.hero{position:relative;overflow:hidden;color:var(--dtxt);
  padding:clamp(3.2rem,6vw,5.4rem) 0 clamp(3rem,5vw,4.4rem)}
.hero__bg{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(227,148,94,.14),transparent 58%),
    radial-gradient(80% 70% at 8% 100%,rgba(78,54,39,.32),transparent 60%),
    var(--ink)}
.hero__bg::after{content:'';position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(var(--dline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--dline) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%)}
.hero__in{position:relative;display:grid;grid-template-columns:1.14fr .86fr;
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
.eyebrow{display:flex;align-items:center;gap:.6rem;margin:0 0 1.35rem;
  font:500 .705rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tan)}
.eyebrow__tick{width:26px;height:1px;background:currentColor;flex:none}
.hero h1{font-size:clamp(2.3rem,1.3rem + 4.1vw,4.05rem);letter-spacing:-.028em;color:#fff}
.hero h1 em{color:var(--tan)}
.lede{margin:1.5rem 0 0;max-width:46ch;color:var(--dtxt-2);font-size:1.075rem}
.lede b{color:var(--beige);font-weight:600}
.hero__open{display:inline-flex;align-items:center;gap:.55rem;margin:1.6rem 0 0;
  padding:.5rem 1rem;border:1px solid var(--dline-2);border-radius:100px;
  background:rgba(240,203,171,.06);
  font:600 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--beige)}
.pulse{width:8px;height:8px;border-radius:50%;background:#3ec26a;flex:none;
  box-shadow:0 0 0 0 rgba(62,194,106,.55);animation:pulse 2.1s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(62,194,106,0)}100%{box-shadow:0 0 0 0 rgba(62,194,106,0)}}
.hero__act{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
.hero__incl{margin:1.3rem 0 0;font-size:.875rem;color:var(--dtxt-2);max-width:44ch}
.hero__fig{margin:0}
.hero__fig .frame{max-width:420px;margin-inline:auto}
.hero .dim--fig{color:var(--tan)}

/* ── SELLOS ────────────────────────────────────────────────── */
.seals{background:var(--ink-2);border-top:1px solid var(--dline);color:var(--dtxt)}
.seals__in{display:grid;grid-template-columns:repeat(4,1fr)}
.seal{padding:clamp(1.4rem,2.6vw,2rem) 1.2rem;text-align:center;
  border-left:1px solid var(--dline)}
.seal:first-child{border-left:0}
.seal b{display:block;font:700 clamp(1.6rem,1.2rem + 1.5vw,2.3rem)/1 var(--disp);
  font-variation-settings:'SOFT' 20,'WONK' 1;color:var(--tan);margin-bottom:.5rem}
.seal span{font:400 .82rem/1.45 var(--sans);color:var(--dtxt-2)}
.seal--hot b{color:#ff8a6b}

/* ── SECCIONES (papel) ─────────────────────────────────────── */
.sec{padding:clamp(3.4rem,6.5vw,5.8rem) 0;position:relative}
.sec--alt{background:var(--paper-2)}
.sechead{max-width:62ch;margin-bottom:clamp(2.1rem,4vw,3.2rem)}
.sechead--c{max-width:64ch;margin-inline:auto;text-align:center}
.sechead--c .dim{justify-content:center}
.sechead--c .dim::before{flex:1;width:auto}
.h2{font-size:clamp(1.95rem,1.35rem + 2.3vw,3.05rem)}
.h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);margin-bottom:1.1rem}
.sechead__p{margin:1.2rem 0 0;color:var(--txt-2);font-size:1.045rem}
.sechead__p b{color:var(--txt);font-weight:600}

/* ── MARCO DE FOTO ─────────────────────────────────────────── */
.frame{position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:9px;overflow:hidden}
.frame img{border-radius:1px;width:100%}
.frame::after{content:'';position:absolute;right:9px;bottom:9px;width:26px;height:26px;
  border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  pointer-events:none}
.gal__i{margin:0}
.gal__i figcaption{margin-top:.75rem;font:400 .805rem/1.5 var(--sans);color:var(--txt-2)}
/* la foto madera/negro es vertical; se iguala con aspect-ratio (funciona porque el
   reset base pone height:auto) */
.who__pics .frame img,.grads__g .frame img{aspect-ratio:1;object-fit:cover}

/* ══ DISEÑO DIGITAL — el diferenciador, en banda oscura ══════ */
.digi{background:var(--ink);color:var(--dtxt);position:relative;overflow:hidden;
  padding:clamp(3.6rem,7vw,6rem) 0}
.digi::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--dline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--dline) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 80%)}
.digi>.wrap{position:relative}
.digi .h2{color:#fff}
.digi .h2 em{color:var(--tan)}
.digi .sechead__p{color:var(--dtxt-2)}
.digi .sechead__p b{color:var(--beige)}
.digi .frame{background:var(--ink-3);border-color:var(--dline)}
.digi .frame::after{border-color:var(--dline-2)}
.digi .frame--plan{background:#e8e4dd;border-color:rgba(240,203,171,.28)}

.stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,2.2vw,1.9rem);
  align-items:center;max-width:900px;margin-inline:auto}
.stage__i{margin:0;min-width:0}
.stage__i figcaption{margin-top:.85rem;font:400 .84rem/1.5 var(--sans);color:var(--dtxt-2)}
.tagn{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--tan);margin-bottom:.36rem}
.stage__arrow{font-size:1.5rem;color:var(--tan);opacity:.65}
.stage__note{max-width:64ch;margin:clamp(1.7rem,3vw,2.4rem) auto 0;text-align:center;
  color:var(--dtxt-2);font-size:.955rem}
.stage__note b{color:var(--beige)}

.digi__why{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1.6rem;margin-top:clamp(2.2rem,4vw,3.2rem);
  padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--dline)}
.digi__why b{display:block;font:600 1.05rem/1.3 var(--disp);color:var(--beige);margin-bottom:.4rem}
.digi__why span{font-size:.925rem;color:var(--dtxt-2)}

/* ── TEMARIO ───────────────────────────────────────────────── */
.obj__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:.55rem 1.8rem;counter-reset:o}
.obj__l li{counter-increment:o;position:relative;padding:.72rem 0 .72rem 2.6rem;
  border-bottom:1px solid var(--rule);font-size:.985rem}
.obj__l li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.82rem;
  font:500 .715rem/1 var(--mono);color:var(--tan-d)}

/* Materiales: PVC y madera */
.mats{margin-top:clamp(2.4rem,4.5vw,3.4rem);padding:clamp(1.7rem,3vw,2.4rem);
  background:var(--card);border:1px solid var(--rule);border-left:2px solid var(--tan-d)}
.mats__h p{margin:0 0 1.5rem;color:var(--txt-2);max-width:62ch}
.mats__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1.15rem 2rem}
.mats__l li{padding-left:1.15rem;position:relative;font-size:.92rem;color:var(--txt-2)}
.mats__l li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border:1px solid var(--tan-d);transform:rotate(45deg)}
.mats__l b{display:block;color:var(--txt);font-weight:600;margin-bottom:.1rem}

/* ── LAS CLASES ────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);
  max-width:900px;margin-inline:auto}
.split__i{margin:0;min-width:0}
.split__i figcaption{margin-top:.9rem;font-size:.925rem;color:var(--txt-2)}
.split__i figcaption b{color:var(--txt);font-weight:600}

.inc{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.inc__p{color:var(--txt-2);margin-bottom:1.4rem}
.inc__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:1rem}
.inc__l li{padding:1.05rem 1.2rem;background:var(--card);border:1px solid var(--rule);
  border-top:2px solid var(--tan-d)}
.inc__l b{display:block;font-size:1rem;margin-bottom:.2rem}
.inc__l span{font-size:.865rem;color:var(--txt-2)}
.inc--star{border-top-color:var(--hot)}
.inc--star b::after{content:'★';margin-left:.4rem;font-size:.72em;color:var(--hot);vertical-align:2px}

/* Seguridad */
.safe{margin-top:clamp(2.4rem,4.5vw,3.4rem);background:var(--yellow);color:#141110;
  padding:clamp(1.7rem,3vw,2.5rem)}
.safe__h h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);margin-bottom:.4rem}
.safe__h p{margin:0 0 1.7rem;font-size:.94rem;color:#4a4118}
.safe__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.safe__l li{padding-top:1rem;border-top:1.5px solid rgba(20,17,16,.4);font-size:.905rem;color:#3f3a1c}
.safe__l span{display:block;font:700 1.7rem/1 var(--disp);margin-bottom:.5rem}
.safe__l b{display:block;font-weight:700;color:#141110;margin-bottom:.15rem}

/* ── GRADUADOS ─────────────────────────────────────────────── */
.grads__g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;
  max-width:1000px}

/* ── CONVIÉRTELO EN NEGOCIO ────────────────────────────────── */
.biz{background:var(--paper-2);padding:clamp(3.4rem,6.5vw,5.6rem) 0;
  border-block:1px solid var(--rule)}
.biz__l{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin-top:clamp(2rem,3.5vw,2.8rem)}
.biz__l li{padding-top:1.3rem;border-top:1px solid var(--rule-2)}
.biz__n{display:block;font:500 .705rem/1 var(--mono);letter-spacing:.16em;
  color:var(--tan-d);margin-bottom:.8rem}
.biz__l b{display:block;font:600 1.18rem/1.2 var(--disp);margin-bottom:.5rem}
.biz__l p{margin:0;font-size:.925rem;color:var(--txt-2)}

/* ── QUIÉN ENSEÑA ──────────────────────────────────────────── */
.who{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.who__copy .h2{margin-bottom:1.3rem}
.who__copy p{color:var(--txt-2);max-width:46ch}
.who__copy p b{color:var(--txt);font-weight:600}
.who__note{margin:1.5rem 0 0;padding:.95rem 1.1rem;background:var(--card);
  border:1px solid var(--rule);font-size:.905rem}
.who__note a{color:var(--tan-d);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(162,82,29,.4);white-space:nowrap}
.who__pics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ══ MATRÍCULA (banda oscura) ═══════════════════════════════ */
.matri-sec{background:var(--ink);color:var(--dtxt);padding:clamp(3.6rem,7vw,6rem) 0}
.matri-sec .h2{color:#fff}
.matri-sec .sechead__p{color:var(--dtxt-2)}
.matri-sec .sechead__p b{color:var(--beige)}
.matri{display:grid;grid-template-columns:1fr 1.05fr;gap:1.15rem}
/* la caja del depósito tiene menos contenido que la columna de la derecha (ficha +
   contactos): se estira igual y centra su contenido, en vez de dejar un hueco negro */
.matri__box{background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--dline);border-top:2px solid var(--tan);
  padding:clamp(1.7rem,3vw,2.5rem);
  display:flex;flex-direction:column;justify-content:center}
.matri__dep{margin:0 0 .35rem;display:flex;align-items:baseline;gap:.6rem;
  font:500 .95rem/1 var(--mono);color:var(--dtxt-2)}
.matri__amt{font:700 clamp(2.6rem,2rem + 2.4vw,3.7rem)/1 var(--disp);
  font-variation-settings:'SOFT' 20,'WONK' 1;color:var(--tan)}
.matri__fine{margin:0 0 1.6rem;font-size:.87rem;color:var(--dtxt-2)}
.matri__d div{display:flex;gap:.8rem;padding:.62rem 0;border-top:1px solid var(--dline)}
.matri__d dt{flex:none;width:44%;font-size:.875rem;color:var(--dtxt-2)}
.matri__d dd{margin:0;font:500 .885rem/1.45 var(--mono);color:var(--beige)}
.matri__price{margin:1.5rem 0 1.6rem;padding:.9rem 1rem;background:rgba(240,203,171,.07);
  border-left:2px solid var(--tan);font-size:.9rem;color:var(--dtxt-2)}
.matri__side{display:grid;gap:1.15rem}

.ficha{background:var(--card);color:var(--txt);border:1px solid var(--rule);
  padding:clamp(1.5rem,2.6vw,2.1rem)}
.ficha__h{font:500 .705rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan-d);padding-bottom:.9rem;border-bottom:1px solid var(--rule);margin-bottom:.3rem}
.spec div{display:flex;align-items:baseline;gap:.6rem;padding:.58rem 0;
  border-bottom:1px dotted rgba(36,26,18,.2)}
.spec dt{flex:none;font-size:.915rem;color:var(--txt-2)}
.spec div::after{content:'';flex:1;order:1}
.spec dd{order:2;margin:0;font:600 .94rem/1 var(--mono);color:var(--txt);white-space:nowrap}
.dd--hot{color:var(--hot) !important}
.hrs{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.hrs h4{font:500 .705rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--tan-d);margin-bottom:.7rem}
.hrs p{margin:0 0 .35rem;font:500 .95rem/1.4 var(--mono);color:var(--txt)}

.matri__contacts{background:var(--card);color:var(--txt);border:1px solid var(--rule);
  padding:clamp(1.5rem,2.6vw,2.1rem)}
.matri__contacts h4{font:500 .705rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--tan-d);margin-bottom:1.1rem}
.matri__contacts li{padding:.82rem 0;border-bottom:1px dotted rgba(36,26,18,.22);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;align-items:baseline}
.matri__contacts b{font-size:.985rem}
.matri__contacts a{font:500 .93rem/1 var(--mono);color:var(--tan-d);text-decoration:none;
  border-bottom:1px solid transparent}
.matri__contacts a:hover{border-bottom-color:currentColor}
.matri__thanks{margin:1.4rem 0 0;font:italic 400 .95rem/1.55 var(--disp);
  font-variation-settings:'SOFT' 70,'WONK' 1;color:var(--txt-2)}

/* ── FORMULARIO (banda oscura) ─────────────────────────────── */
.sec--form{background:var(--ink-2);color:var(--dtxt);border-top:1px solid var(--dline)}
.sec--form .h2{color:#fff}
.sec--form .sechead__p{color:var(--dtxt-2)}
.form__wrap{max-width:820px}
.switch{display:flex;gap:.4rem;padding:.4rem;margin:0 auto clamp(1.6rem,3vw,2.3rem);
  max-width:480px;background:var(--ink-3);border:1px solid var(--dline);border-radius:var(--r)}
.switch__b{flex:1;padding:.82rem .9rem;background:none;border:0;border-radius:2px;cursor:pointer;
  font:600 .875rem/1 var(--sans);color:var(--dtxt-2);transition:background .18s,color .18s}
.switch__b:hover{color:var(--beige)}
.switch__b.is-on{background:var(--tan);color:#1a0d04}
.form{background:var(--ink-3);border:1px solid var(--dline);padding:clamp(1.5rem,3vw,2.4rem)}
.pane{display:none}
.pane.is-on{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.field{margin-bottom:1.05rem}
.grid2 .field{margin-bottom:0}
.field label{display:block;margin-bottom:.45rem;
  font:500 .755rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dtxt-2)}
.field label i{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.7}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .95rem;background:var(--ink);color:var(--dtxt);
  border:1px solid var(--dline-2);border-radius:var(--r);
  font:400 .965rem/1.45 var(--sans);transition:border-color .18s}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tan)}
.field input::placeholder,.field textarea::placeholder{color:#6b6260}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e3945e' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:11px;padding-right:2.4rem}
.field.is-bad input,.field.is-bad select{border-color:#d4553f}
.form__foot{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--dline);text-align:center}
.form__err{margin:1rem 0 0;color:#e2765f;font-size:.88rem}
.form__alt{margin:1.1rem 0 0;font-size:.9rem;color:var(--dtxt-2)}
.form__alt a{color:var(--tan);text-decoration:none;border-bottom:1px solid rgba(227,148,94,.35)}

/* ── FOOTER ────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--dtxt);border-top:1px solid var(--dline);
  padding:clamp(2.8rem,5vw,4rem) 0 0}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.2rem}
.foot__brand img{width:190px;margin-bottom:1.2rem}
.foot__brand p{color:var(--dtxt-2);font-size:.9rem;max-width:40ch}
.foot__brand b{color:var(--beige)}
.foot__col h3{font:500 .705rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--tan);margin-bottom:1.1rem}
.foot__col p{margin:0 0 .6rem;font-size:.92rem;color:var(--dtxt-2)}
.foot__col a{text-decoration:none;border-bottom:1px solid transparent;transition:.18s}
.foot__col a:hover{color:var(--beige);border-bottom-color:var(--dline-2)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  margin-top:clamp(2.2rem,4vw,3rem);padding:1.4rem 0;border-top:1px solid var(--dline)}
.foot__legal p{margin:0;font-size:.795rem;color:#6f6663}
.foot__legal a{color:var(--dtxt-2);text-decoration:none}
.foot__legal a:hover{color:var(--tan)}

/* ── FAB ───────────────────────────────────────────────────── */
.fab{position:fixed;right:16px;bottom:16px;z-index:90;width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;background:var(--wa);
  box-shadow:0 8px 26px rgba(0,0,0,.3);transition:transform .18s}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px;fill:#04210f}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1020px){
  .hero__in{grid-template-columns:1fr;gap:2.4rem}
  .hero__fig{order:-1}
  .hero__fig .frame{max-width:390px}
  .lede{max-width:56ch}
  .seals__in{grid-template-columns:1fr 1fr}
  .seal:nth-child(3){border-left:0}
  .seal:nth-child(n+3){border-top:1px solid var(--dline)}
  .matri,.who{grid-template-columns:1fr}
  .biz__l{grid-template-columns:1fr 1fr}
  .who__pics{max-width:640px}
}
@media (max-width:860px){
  .nav__links{
    position:fixed;inset:76px 0 auto;flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--dline);
    padding:.6rem 1.25rem 1.4rem;
    /* fixed sale del flujo: margin-left:auto aquí no empuja nada. El auto va en .nav__cta */
    margin-left:0;
    transform:translateY(-140%);transition:transform .26s ease;
    max-height:calc(100dvh - 76px);overflow-y:auto}
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a:not(.btn){padding:.95rem 0;border-bottom:1px solid var(--dline);font-size:1rem}
  .nav__cta{margin-left:auto} /* [[mobile-hamburger-right]] — el toggle pegado a la derecha */
  .burger{display:flex}
  .stage{grid-template-columns:1fr;max-width:420px}
  .stage__arrow{transform:rotate(90deg);justify-self:center}
  .split{grid-template-columns:1fr;max-width:420px}
  .grads__g,.who__pics{grid-template-columns:1fr 1fr;max-width:560px}
}
@media (max-width:680px){
  /* Etiquetas largas se salían del contenedor: el span era flex:none y no podía encoger. */
  .dim{gap:.6rem;font-size:.655rem;letter-spacing:.1em}
  .dim span{flex:0 1 auto;min-width:0}
  .dim::before{width:20px}
  .dim::after{min-width:14px}
  .sechead--c .dim::before,.sechead--c .dim::after{display:none}
  .seals__in{grid-template-columns:1fr}
  .seal{border-left:0}
  .seal:not(:first-child){border-top:1px solid var(--dline)}
  .biz__l{grid-template-columns:1fr;gap:1.1rem}
  .grads__g,.who__pics{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .grid2{grid-template-columns:1fr}
  .grid2 .field{margin-bottom:1.05rem}
  .foot__in{grid-template-columns:1fr;gap:1.9rem}
  .btn--sm{display:none} /* el FAB ya cubre el contacto en móvil */
  .hero__act .btn{width:100%}
  .who__note a{white-space:normal}
}
@media (max-width:420px){
  .nav__in{gap:.8rem}
  .brand__txt i{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}