/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --ground:#F2F2EF;
  --surface:#FFFFFF;
  --ink:#2B2C28;          /* gris del logotipo */
  --ink-2:#63645E;
  --rule:#DBDCD6;
  --brand:#03B8F1;        /* cian del isotipo */
  --brand-ink:#04708F;    /* cian legible sobre claro */
  --sand:#A8763A;         /* detrito — solo en el esquema */
  /* banda oscura fija (hero) */
  --rock:#17191A; --rock-ink:#EAEBE6; --rock-ink-2:#A8AAA2; --rock-rule:#2E312F;
  --maxw:68ch;
  --pad:clamp(1.15rem,4vw,2.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191A17; --surface:#212320; --ink:#EAEBE6; --ink-2:#9B9D95;
    --rule:#33352F; --brand:#03B8F1; --brand-ink:#4CC9F5; --sand:#D2A468;
  }
}
:root[data-theme="dark"]{
  --ground:#191A17; --surface:#212320; --ink:#EAEBE6; --ink-2:#9B9D95;
  --rule:#33352F; --brand:#03B8F1; --brand-ink:#4CC9F5; --sand:#D2A468;
}

/* ── Base ───────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.09rem); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
html.lang-es .en{display:none}
html.lang-en .es{display:none}
h1,h2,h3,nav,button{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
.eyebrow,.sec-label,.k,.meta,.hero-meta,.foot-in,figcaption{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-ink);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wide{max-width:calc(var(--maxw) + 16ch)}
.xwide{max-width:min(1080px, 100%)}

/* ── Logotipo por máscara (toma el color del tema) ──────── */
.mark,.word{display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
.mark{-webkit-mask-image:url("mark-mask.png");mask-image:url("mark-mask.png");color:var(--brand)}
.word{-webkit-mask-image:url("word-mask.png");mask-image:url("word-mask.png")}

/* ── Barra superior ─────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar-in{max-width:calc(var(--maxw) + 16ch);margin-inline:auto;padding:.65rem var(--pad);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;color:var(--ink)}
.brand .mark{width:39px;height:30px}
.brand .word{width:126px;height:24px}
nav{display:flex;gap:.95rem;flex-wrap:wrap}
nav a{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);padding-block:.2rem;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
nav a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.lang{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;flex:none}
.lang button{font-size:.68rem;font-weight:700;letter-spacing:.1em;
  padding:.32rem .58rem;background:none;border:0;color:var(--ink-2);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--brand);color:#0B2A34}
@media (min-width:900px){.bar-in{flex-wrap:nowrap}nav{flex:none;flex-wrap:nowrap}}
@media (max-width:760px){nav{order:3;width:100%;gap:.85rem}}

/* ── Hero ───────────────────────────────────────────────── */
.hero{background:var(--rock);color:var(--rock-ink);border-bottom:1px solid var(--rock-rule)}
.hero-in{max-width:calc(var(--maxw) + 16ch);margin-inline:auto;
  padding:clamp(2.8rem,8vw,5.5rem) var(--pad) clamp(2.5rem,7vw,4.5rem);
  display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.hero-in{grid-template-columns:1.12fr .88fr}}
.eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);margin:0 0 1.1rem}
.hero h1{font-size:clamp(2.05rem,6vw,3.4rem);font-weight:700;line-height:1.04;
  letter-spacing:-.022em;margin:0 0 1.2rem;text-wrap:balance}
.hero p{color:var(--rock-ink-2);margin:0 0 1.5rem;max-width:47ch}
.hero .lede{color:var(--rock-ink);font-size:1.06em}
.hero-meta{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin:0;padding:1.1rem 0 0;
  border-top:1px solid var(--rock-rule);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rock-ink-2);list-style:none}
.fig{margin:0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rock-ink-2);margin-top:.9rem;line-height:1.55}

/* ── Secciones ──────────────────────────────────────────── */
section{border-bottom:1px solid var(--rule)}
section > .wrap{padding-block:clamp(3rem,7vw,4.8rem)}
.sec-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand-ink);margin:0 0 .9rem}
h2{font-size:clamp(1.48rem,3.5vw,2.05rem);font-weight:700;line-height:1.13;
  letter-spacing:-.018em;margin:0 0 1.3rem;text-wrap:balance}
h3{font-size:1rem;font-weight:600;margin:0 0 .35rem;line-height:1.3}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ── Listas / grillas ───────────────────────────────────── */
.apps{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule);counter-reset:app}
@media (min-width:760px){.apps{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,4vw,3.6rem)}}
.apps li{padding:1.35rem 0 1.45rem;border-bottom:1px solid var(--rule);counter-increment:app}
.apps h3{font-size:1.12rem;letter-spacing:-.008em;margin-bottom:.5rem}
.apps h3::before{content:counter(app,decimal-leading-zero);display:block;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:400;
  font-size:.62rem;letter-spacing:.16em;color:var(--brand-ink);margin-bottom:.6rem}
.apps p{font-size:.93em;color:var(--ink-2);margin:0}

.keys{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.35rem}
.keys li{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;align-items:start}
.keys .tick{width:.6rem;height:.6rem;margin-top:.44rem;flex:none;background:var(--brand)}
.keys p{grid-column:2;font-size:.93em;color:var(--ink-2);margin:.15rem 0 0}
.keys h3{grid-column:2;font-size:1.06rem;letter-spacing:-.006em}

.callout{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--brand);
  padding:1.3rem 1.4rem;margin:1.9rem 0 0}
.callout h3{margin-bottom:.55rem}
.callout p{font-size:.93em;color:var(--ink-2)}

/* ── Especificaciones del equipo ────────────────────────── */
.specs{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media (min-width:640px){.specs{grid-template-columns:repeat(3,1fr)}}
.specs li{background:var(--surface);padding:1.5rem 1.5rem 1.6rem}
.specs .k{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .7rem}
.specs .v{font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(1.75rem,3.2vw,2.4rem);line-height:1.02;letter-spacing:-.025em;margin:0;
  font-variant-numeric:tabular-nums}
.specs .n{font-size:.85rem;color:var(--ink-2);margin:.7rem 0 0}

/* ── Galería de obra ────────────────────────────────────── */
.gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:1.9rem;list-style:none;padding:0}
@media (min-width:780px){.gal{grid-template-columns:repeat(3,1fr);gap:12px}}
.gal li{margin:0;background:var(--surface);border:1px solid var(--rule);overflow:hidden}
.gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ── Contacto ───────────────────────────────────────────── */
.contact{display:grid;gap:1.3rem;margin-top:1.8rem}
@media (min-width:700px){.contact{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--rule);background:var(--surface);padding:1.25rem 1.35rem}
.card .k{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .5rem}
.card .v{font-family:Archivo,sans-serif;font-size:1.02rem;font-weight:600;margin:0;line-height:1.45}
.card .v + .v{margin-top:.3rem}
.card a{text-decoration:none;border-bottom:1px solid var(--brand)}
.card a:hover{color:var(--brand-ink)}
.card .sub{font-size:.86rem;color:var(--ink-2);margin:.45rem 0 0}
.qr{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
  border:1px solid var(--rule);background:var(--surface);padding:1.25rem 1.35rem;margin-top:1.3rem}
.qr img{width:118px;height:118px;display:block;background:#fff;padding:6px;border-radius:2px}
.qr div{flex:1 1 15rem}

footer{padding:2.2rem var(--pad) 3rem}
.foot-in{max-width:calc(var(--maxw) + 16ch);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.foot-in .mark{width:24px;height:19px}
/* El acceso al panel de gestión. Sigue la gramática de la barra de navegación:
   el mismo gris del pie, y al pasar por encima se enciende el cian de la marca.
   Es un dato más de la fila, no un botón: empujarlo a la derecha con un margen
   automático dejaba un hueco cuando el pie se parte en dos líneas. */
.foot-in .acceso{text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;transition:color .15s,border-color .15s}
.foot-in .acceso:hover{color:var(--ink);border-bottom-color:var(--brand)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════
   Sitio multipágina — una hoja por sección
   ══════════════════════════════════════════════════════════ */

/* La barra deja de ser sticky-transparente para ser sólida */
.bar-in{max-width:1320px}

/* ── Hero partido, a todo el ancho ───────────────────────── */
.phero{
  background:var(--rock); color:var(--rock-ink);
  border-bottom:1px solid var(--rock-rule);
  display:grid; grid-template-columns:1fr;
}
.phero-txt{
  padding:clamp(2.6rem,7vw,4.6rem) var(--pad);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.phero-in{max-width:54ch}
.phero .eyebrow{margin-bottom:1rem}
.phero h1{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1.95rem,4.4vw,3.15rem); font-weight:700; line-height:1.06;
  letter-spacing:-.022em; margin:0 0 1.15rem; text-wrap:balance;
}
.phero p{color:var(--rock-ink-2); margin:0 0 1.4rem; max-width:50ch}
.phero .lede{color:var(--rock-ink); font-size:1.06em}
.phero a{color:var(--rock-ink)}

/* panel visual */
.phero-media{position:relative; background:#0F1112; min-height:58vw}
.phero-media img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
.phero-media.diagram{display:flex; align-items:center; justify-content:center;
  padding:clamp(1.6rem,4vw,3rem); min-height:0}
.phero-media.diagram .fig{width:100%; max-width:430px}
.phero-media.plain{display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,5vw,3.4rem); min-height:0;
  background:
    linear-gradient(0deg,rgba(3,184,241,.05),rgba(3,184,241,.05)),
    repeating-linear-gradient(135deg,#141617 0 12px,#17191A 12px 24px)}

@media (min-width:960px){
  .phero{grid-template-columns:1.08fr .92fr; min-height:min(76svh,700px)}
  .phero-media{min-height:0}
  .phero-txt{padding-inline:clamp(2.6rem,5.5vw,5.2rem)}
}
@media (min-width:1600px){
  .phero-txt{padding-inline:clamp(4rem,8vw,9rem)}
  .phero-in{max-width:58ch}
}

/* ── Cuerpo de cada hoja ─────────────────────────────────── */
.sheet{max-width:1320px; margin-inline:auto;
  padding:clamp(2.7rem,6vw,4.6rem) var(--pad)}
.sheet > :first-child{margin-top:0}

@media (min-width:1040px){
  .sheet-2{display:grid; grid-template-columns:minmax(0,17ch) minmax(0,1fr);
    gap:clamp(2.2rem,5vw,5rem); align-items:start}
  .sheet-aside{position:sticky; top:5.2rem}
}
.sheet-aside{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-ink); line-height:1.6; margin:0 0 1.4rem}
.sheet-aside b{font-weight:500}

/* ── Franja fotográfica de corte, a todo el ancho ────────── */
.band{margin:0; background:var(--rock); border-bottom:1px solid var(--rule)}
.band img{display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover}
@media (min-width:900px){.band img{aspect-ratio:21/8}}

/* ── Datos duros de la portada ───────────────────────────── */
.facts{list-style:none; margin:0 0 clamp(2.2rem,5vw,3.4rem); padding:0;
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media (min-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts li{background:var(--surface); padding:1.4rem 1.45rem 1.5rem}
.facts .k{font-size:.61rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 .7rem}
.facts .v{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:clamp(1.55rem,2.7vw,2.05rem); line-height:1.02; letter-spacing:-.025em;
  margin:0; font-variant-numeric:tabular-nums}
.facts .n{font-size:.84rem; color:var(--ink-2); margin:.65rem 0 0}
.sheet-body > :first-child{margin-top:0}
.sheet-body > p{max-width:70ch}

/* h2 dentro de la hoja */
.sheet h2{font-size:clamp(1.35rem,2.4vw,1.8rem); margin-top:2.6rem}
.sheet h2:first-child{margin-top:0}

/* las grillas aprovechan el ancho en pantallas grandes */
@media (min-width:1040px){
  .keys{grid-template-columns:1fr 1fr; column-gap:clamp(2rem,4vw,3.6rem); row-gap:1.6rem}
}
@media (min-width:1400px){
  .apps{grid-template-columns:repeat(3,1fr)}
  .contact{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1240px){
  .gal{grid-template-columns:repeat(3,1fr)}
}

/* ── Índice de la portada ────────────────────────────────── */
.index-grid{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
@media (min-width:700px){.index-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.index-grid{grid-template-columns:repeat(3,1fr)}}
.index-grid a{display:block; background:var(--surface); text-decoration:none;
  padding:1.4rem 1.5rem 1.5rem; height:100%;
  transition:background .15s, color .15s}
.index-grid a:hover{background:var(--ground)}
.index-grid .n{font-family:"IBM Plex Mono",monospace; font-size:.63rem;
  letter-spacing:.18em; color:var(--brand-ink); margin:0 0 .55rem}
.index-grid h3{font-size:1.06rem; margin:0 0 .4rem}
.index-grid p{font-size:.9em; color:var(--ink-2); margin:0}

/* ── Pie de navegación entre hojas ───────────────────────── */
.pager{border-top:1px solid var(--rule); background:var(--surface)}
.pager-in{max-width:1320px; margin-inline:auto; padding:1.5rem var(--pad);
  display:flex; gap:1.2rem; justify-content:space-between; flex-wrap:wrap}
.pager a{text-decoration:none; display:block; max-width:22rem}
.pager .k{font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .3rem}
.pager .t{font-family:Archivo,sans-serif; font-weight:600; font-size:1rem; margin:0;
  border-bottom:1px solid var(--brand); display:inline-block}
.pager .next{margin-left:auto; text-align:right}

nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--brand)}

/* ── Navegación en pantallas angostas: una sola tira deslizable ── */
@media (max-width:860px){
  .bar-in{gap:.7rem}
  nav{order:3; width:100%; flex-wrap:nowrap; overflow-x:auto;
    gap:1.15rem; padding-bottom:.15rem;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}
  .brand .mark{width:33px;height:26px}
  .brand .word{width:106px;height:20px}
}

/* ══════════════════════════════════════════════════════════
   Formularios, WhatsApp y contacto directo
   ══════════════════════════════════════════════════════════ */

/* ── Fila de contacto directo (teléfono · WhatsApp · correo) ── */
.directo{list-style:none; margin:0 0 2.2rem; padding:0; display:grid; gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
@media (min-width:640px){.directo{grid-template-columns:repeat(3,1fr)}}
.directo li{background:var(--surface); padding:1.15rem 1.3rem}
.directo .k{font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-2); margin:0 0 .45rem}
.directo .v{font-family:Archivo,sans-serif; font-size:1.05rem; font-weight:600;
  margin:0; line-height:1.4}
.directo .v a{text-decoration:none; border-bottom:1px solid var(--brand)}
.directo .v a:hover{color:var(--brand-ink)}
.directo .v + .v{margin-top:.25rem}
.directo .sub{font-size:.84rem; color:var(--ink-2); margin:.4rem 0 0}

/* ── Botón de WhatsApp ──────────────────────────────────────── */
.btn-wa{display:inline-flex; align-items:center; gap:.6rem;
  font-family:Archivo,sans-serif; font-size:.95rem; font-weight:600;
  text-decoration:none; color:#fff; background:#1B5E3A;
  padding:.72rem 1.2rem; border-radius:3px; border:0;
  transition:background .15s}
.btn-wa:hover{background:#144B2D; color:#fff}
.btn-wa svg{width:1.15em; height:1.15em; fill:currentColor; flex:none}
.wa-nota{font-size:.86rem; color:var(--ink-2); margin:.7rem 0 0}

/* ── Formulario ─────────────────────────────────────────────── */
.form{border:1px solid var(--rule); background:var(--surface);
  padding:clamp(1.3rem,3vw,2rem); margin-top:.4rem}
.form-grid{display:grid; gap:1.05rem}
@media (min-width:680px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .ancho{grid-column:1 / -1}
}
.campo{display:flex; flex-direction:column; gap:.38rem; min-width:0}
.campo label{font-family:"IBM Plex Mono",monospace; font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2)}
.campo .req{color:var(--brand-ink)}
.campo input, .campo textarea, .campo select{
  font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--rule); border-radius:2px;
  padding:.62rem .75rem; width:100%; min-width:0;
  transition:border-color .15s, box-shadow .15s}
.campo textarea{resize:vertical; min-height:7.5rem; line-height:1.55}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent)}
.campo input[type=file]{padding:.5rem; background:var(--ground); cursor:pointer}
.campo input[type=file]::file-selector-button{
  font:inherit; font-size:.85rem; font-family:Archivo,sans-serif; font-weight:600;
  margin-right:.8rem; padding:.42rem .8rem; cursor:pointer;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:2px}
.campo .pista{font-size:.8rem; color:var(--ink-2); margin:0}

/* trampa antispam: fuera de la vista y del foco */
.trampa{position:absolute!important; left:-9999px!important;
  width:1px!important; height:1px!important; overflow:hidden!important}

.form-pie{display:flex; align-items:center; gap:1.1rem 1.4rem;
  flex-wrap:wrap; margin-top:1.5rem; padding-top:1.3rem;
  border-top:1px solid var(--rule)}
.btn{font-family:Archivo,sans-serif; font-size:.95rem; font-weight:600;
  color:#0B2A34; background:var(--brand); border:0; border-radius:3px;
  padding:.75rem 1.5rem; cursor:pointer; transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.form-pie .nota{font-size:.82rem; color:var(--ink-2); margin:0; flex:1 1 16rem}

/* ── Página de gracias ──────────────────────────────────────── */
.gracias{max-width:62ch; margin-inline:auto;
  padding:clamp(3.5rem,11vw,7rem) var(--pad)}
.gracias h1{font-family:Archivo,sans-serif; font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 1.1rem}
.gracias .tick-ok{display:block; width:2.6rem; height:2.6rem; margin-bottom:1.4rem;
  border-radius:50%; background:var(--brand); position:relative}
.gracias .tick-ok::after{content:""; position:absolute; left:.92rem; top:.55rem;
  width:.55rem; height:1.1rem; border:solid #0B2A34;
  border-width:0 3px 3px 0; transform:rotate(45deg)}

/* ── Selector de archivo con etiqueta propia (el nativo dice "Choose File") ── */
.archivo{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap}
.archivo input[type=file]{position:absolute!important; left:-9999px!important;
  width:1px!important; height:1px!important; opacity:0}
.archivo-btn{font-family:Archivo,sans-serif!important; font-size:.88rem!important;
  font-weight:600!important; letter-spacing:0!important; text-transform:none!important;
  color:var(--ink)!important; background:var(--surface);
  border:1px solid var(--rule); border-radius:2px;
  padding:.55rem 1rem; cursor:pointer; transition:border-color .15s, background .15s}
.archivo-btn:hover{border-color:var(--brand); background:var(--ground)}
.archivo input[type=file]:focus-visible + .archivo-btn{
  outline:2px solid var(--brand); outline-offset:2px}
.archivo-nom{font-size:.88rem; color:var(--ink-2); min-width:0; word-break:break-word}
.archivo-nom.elegido{color:var(--ink); font-weight:600}

/* Nota de WhatsApp de RR. HH., debajo del formulario de postulacion */
.nota-wa{margin:.9rem 0 0; font-size:.9rem; color:var(--ink-2)}
.nota-wa a{color:var(--brand-ink); font-weight:600}

/* Foto de detalle dentro de una hoja (Equipo) */
.foto-ancha{margin:2.4rem 0 0; max-width:520px}
.foto-ancha img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--rule); background:var(--surface)}
.foto-ancha figcaption{margin-top:.6rem; font-size:.78rem; line-height:1.5; color:var(--ink-2)}

/* ── Video con carátula (el iframe se pide recién al hacer clic) ─────── */
.video{margin:2.4rem 0 0; max-width:820px}
.video-btn{display:block; position:relative; width:100%; padding:0; border:1px solid var(--rule);
  background:var(--rock); cursor:pointer; overflow:hidden; line-height:0}
.video-btn img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:opacity .2s}
.video-btn:hover img{opacity:.82}
.video-btn .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; pointer-events:none}
.video-btn .play-fondo{fill:#17191A; fill-opacity:.72; transition:fill-opacity .2s}
.video-btn .play-flecha{fill:#fff}
.video-btn:hover .play-fondo{fill:var(--brand); fill-opacity:1}
.video-btn:hover .play-flecha{fill:#0B2A34}
.video-btn:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.video iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:1px solid var(--rule)}
.video figcaption{margin-top:.6rem; font-size:.78rem; line-height:1.5; color:var(--ink-2)}
/* El video del método es material antiguo de baja resolución: se muestra
   a su tamaño real (480 px) en vez de ampliarlo y que se vea borroso. */
.video.chica{max-width:480px}