/* Paleta alineada con beta.css (07/09/2026) -- estas 3 páginas estáticas
   (formas-de-pago/servicio-tecnico/sobre-nosotros) tenían la paleta del
   diseño clásico viejo (navy+ámbar) y quedaron visualmente "saltando" a
   una versión anterior al promover el diseño beta a la web principal.
   Los valores de acá abajo son los mismos que usa beta.css para los
   roles equivalentes, así el resto de las reglas de este archivo
   (que ya usan estas variables) heredan el look nuevo sin tocarlas una
   por una. */
:root{
  --ink:#071522;
  --ink-2:#04101a;
  --ink-soft:#0c2434;
  --paper:#f4f6f4;
  --card:#FFFFFF;
  --amber:#ff8a1d;
  --amber-dark:#b95608;
  --amber-pale:#fff1df;
  --red:#C4432B;
  --text:#17232d;
  --text-mute:#66737b;
  --line:#dce3df;
  --whatsapp:#25D366;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{
  font-family:'Public Sans', sans-serif;
  background:var(--paper);
  color:var(--text);
  padding-bottom:90px;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* El header/footer viejos (clásicos) que vivían acá se sacaron el
   08/09/2026: el header/footer real ahora es 100% el markup compartido
   de site-chrome.js (mismo en todas las páginas). Estas reglas viejas
   (.brand, .brand img, .nav-row, .ticker, etc.) quedaron años como
   "código muerto" porque sus contenedores (.brand-row, .nav-row...) ya
   no existen en el HTML -- pero .brand/.brand img SÍ seguían matcheando
   el header nuevo por nombre de clase, pisando silenciosamente el
   tamaño del logo definido en beta.css (bug real: logo 48-63px acá vs.
   152px en beta.css, cuál ganaba dependía del orden de carga). Se
   eliminan enteras en vez de dejarlas "por las dudas". */

.static-page{ max-width:720px; margin:0 auto; padding:28px 16px 40px; }
.static-hero{ margin-bottom:22px; }
.static-eyebrow{
  display:inline-block; font-family:'Space Mono', monospace; font-size:11px; font-weight:700;
  color:var(--amber-dark); background:var(--amber-pale); padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
.static-hero h1{ font-family:'Archivo Black', sans-serif; font-size:28px; margin-bottom:10px; color:var(--ink); }
.static-hero p{ color:var(--text-mute); font-size:15px; line-height:1.5; }

.static-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:16px;
}
.static-card h2{ font-size:18px; margin-bottom:14px; color:var(--ink); }
.static-card h2:not(:first-child){ margin-top:20px; }
.static-card p{ color:var(--text-mute); font-size:14.5px; line-height:1.6; margin-bottom:10px; }
.static-card p:last-child{ margin-bottom:0; }

.pay-list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.pay-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text); }
.pay-ic{ font-size:22px; line-height:1.3; flex-shrink:0; }
.pay-list strong{ font-size:15px; }
.pay-list div{ color:var(--text-mute); }
.pay-list strong{ color:var(--text); }

.static-note{ font-size:13.5px; background:var(--paper); border-radius:10px; padding:12px 14px; margin-bottom:16px; }

.pay-badge{
  display:inline-block; margin-top:4px; font-size:12.5px; font-weight:800;
  color:#1E7A34; background:#E4F6E8; padding:3px 9px; border-radius:999px;
}
.transfer-block{
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px;
}
.transfer-head{ margin-bottom:10px; }
.mp-badge{
  display:inline-block; font-weight:800; font-size:13px; color:#fff;
  background:#009EE3; padding:4px 11px; border-radius:999px;
}
.bf-badge{
  display:inline-block; font-weight:800; font-size:13px; color:#fff;
  background:#00539B; padding:4px 11px; border-radius:999px;
}
.transfer-row{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:13.5px; padding:6px 0; border-top:1px dashed var(--line);
}
.transfer-row:first-of-type{ border-top:none; }
.transfer-row .tl{ color:var(--text-mute); font-weight:600; }
.transfer-row .tv{ color:var(--text); font-weight:700; text-align:right; }

.static-cta{
  display:inline-flex; align-items:center; gap:8px;
  justify-content:center;
  background:var(--whatsapp); color:#fff; font-weight:800; font-size:14.5px;
  padding:12px 20px; border-radius:999px;
  max-width:100%;
  text-align:center;
  line-height:1.25;
}

@media (max-width:420px){
  .nav-pc-builder{ flex-direction:column; gap:0; }
  .nav-pc-builder .pc-icon{ font-size:12px; }
  .nav-pc-builder .pc-label{ flex:0 0 auto; max-width:100%; }
  .static-page{ padding-top:22px; }
  .static-card{ padding:18px; }
  .static-hero h1{ font-size:25px; }
  .static-cta{ width:100%; white-space:normal; }
}
@media (max-width:350px){
  .nav-pc-builder{ gap:2px; font-size:8px !important; }
  .nav-pc-builder .pc-icon{ font-size:12px; }
}

.svc-list{ list-style:none; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.svc-list li{
  font-size:14px; color:var(--text-mute); line-height:1.5; padding-left:20px; position:relative;
}
.svc-list li::before{
  content:"✓"; position:absolute; left:0; color:var(--amber-dark); font-weight:800;
}
.svc-list li strong{ color:var(--text); }
.static-card p strong{ color:var(--ink); }

.service-hero-photo{
  margin:18px 0 0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(10,22,38,.18);
}
.service-hero-photo img{
  width:100%;
  height:230px;
  object-fit:cover;
}
.service-summary{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.service-pill{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border-radius:10px;
  background:var(--paper);
  border:1px solid var(--line);
}
.service-pill .ic{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--amber-pale);
  flex-shrink:0;
}
.service-pill strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  margin-bottom:2px;
}
.service-pill span{
  color:var(--text-mute);
  font-size:13px;
  line-height:1.4;
}
.service-photo{
  margin:14px 0 16px;
}
.service-photo img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
}
.service-photo figcaption{
  font-size:11.5px;
  color:var(--text-mute);
  margin-top:6px;
  text-align:center;
  font-weight:600;
}
.service-photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 16px;
}
.service-photo-grid figure{ margin:0; }
.service-photo-grid img{
  width:100%;
  height:165px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
}
.service-photo-grid figcaption{
  font-size:11.5px;
  color:var(--text-mute);
  margin-top:6px;
  text-align:center;
  font-weight:600;
}
.service-process{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  counter-reset:step;
}
.service-process .step{
  position:relative;
  padding:14px 14px 14px 48px;
  border-radius:10px;
  background:var(--paper);
  border:1px solid var(--line);
}
.service-process .step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:14px;
  top:14px;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Space Mono', monospace;
  font-size:12px;
  font-weight:800;
}
.service-process h3{
  font-size:14.5px;
  color:var(--ink);
  margin-bottom:4px;
}
.service-process p{
  margin-bottom:0;
  font-size:13.5px;
}

@media (max-width:420px){
  .service-hero-photo img{ height:210px; }
  .service-photo-grid{ grid-template-columns:1fr; }
  .service-photo-grid img, .service-photo img{ height:210px; }
}
@media (min-width:640px){
  .service-summary{
    grid-template-columns:repeat(3,1fr);
  }
  .service-process{
    grid-template-columns:repeat(3,1fr);
  }
  .service-process .step{
    padding:46px 14px 14px;
  }
  .service-process .step::before{
    top:14px;
  }
}

.timeline{ display:flex; flex-direction:column; gap:0; margin:10px 0 16px; }
.timeline .tl-item{ display:flex; gap:14px; padding-bottom:18px; position:relative; }
.timeline .tl-item::before{
  content:""; position:absolute; left:5px; top:20px; bottom:0; width:2px; background:var(--line);
}
.timeline .tl-item:last-child::before{ display:none; }
.timeline .dot{
  width:12px; height:12px; border-radius:50%; background:var(--amber); flex-shrink:0; margin-top:4px;
}
.timeline .tl-year{ font-family:'Space Mono', monospace; font-weight:700; color:var(--amber-dark); font-size:13px; margin-bottom:2px; }
.timeline .tl-text{ font-size:14px; color:var(--text-mute); line-height:1.5; }

.institutions{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.institutions span{
  font-size:13px; font-weight:700; color:var(--text); background:var(--paper);
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
}

.home-history-teaser{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin:0 auto; max-width:720px;
}
.home-history-teaser h2{ font-size:20px; margin-bottom:10px; color:var(--ink); }
.home-history-teaser p{ color:var(--text-mute); font-size:14.5px; line-height:1.6; margin-bottom:14px; }

.photo-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0;
}
.photo-pair figure, .photo-solo figure, .history-gallery figure, .history-feature figure{ margin:0; }
.photo-pair img, .photo-solo img, .history-gallery img, .history-feature img{
  width:100%; height:180px; object-fit:cover; border-radius:10px; display:block;
  border:1px solid var(--line);
}
.photo-solo img{ height:260px; }
.photo-pair figcaption, .photo-solo figcaption, .history-gallery figcaption, .history-feature figcaption{
  font-size:11.5px; color:var(--text-mute); margin-top:6px; text-align:center; font-weight:600;
}
.photo-solo{ margin:16px 0; }
@media (min-width:520px){
  .photo-pair img{ height:230px; }
}

.history-era{
  border-top:1px dashed var(--line);
  padding-top:18px;
  margin-top:18px;
}
.history-era:first-child{
  border-top:none;
  padding-top:0;
  margin-top:0;
}
.history-era h2{
  margin-bottom:8px;
}
.history-year{
  display:inline-block;
  font-family:'Space Mono', monospace;
  font-size:12px;
  font-weight:800;
  color:var(--amber-dark);
  background:var(--amber-pale);
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:10px;
}
.history-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 16px;
}
.history-gallery img{
  height:150px;
}
.history-gallery .wide{
  grid-column:1 / -1;
}
.history-gallery .wide img, .history-feature img{
  height:220px;
}
.history-feature{
  margin:14px 0 16px;
}
.history-gallery .show-full img{
  object-fit:contain;
  background:#EEF3F4;
}
.archive-intro{
  margin-bottom:18px;
}
.history-story > h2{
  font-size:20px;
  margin-bottom:10px;
}
.history-story .story-lead{
  color:var(--text-mute);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:18px;
}
.archive-year{
  border-top:1px dashed var(--line);
  padding-top:18px;
  margin-top:18px;
}
.archive-year:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:0;
}
.archive-year h3{
  font-size:16px;
  color:var(--ink);
  margin-bottom:10px;
}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.archive-grid figure{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.archive-grid img{
  width:100%;
  height:150px;
  object-fit:contain;
  background:#EEF3F4;
  display:block;
}
.archive-grid figcaption{
  padding:7px 8px 8px;
  font-size:11px;
  line-height:1.25;
  color:var(--text-mute);
  text-align:center;
  font-weight:700;
}
@media (max-width:420px){
  .history-gallery{
    grid-template-columns:1fr;
  }
  .history-gallery .wide{
    grid-column:auto;
  }
  .history-gallery img, .history-gallery .wide img, .history-feature img{
    height:210px;
  }
  .archive-grid{
    grid-template-columns:1fr;
  }
  .archive-grid img{
    height:230px;
  }
}
@media (min-width:720px){
  .history-gallery{
    grid-template-columns:repeat(3,1fr);
  }
  .history-gallery img{
    height:165px;
  }
  .history-gallery .wide{
    grid-column:span 2;
  }
  .history-gallery .wide img, .history-feature img{
    height:260px;
  }
  .archive-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .archive-grid img{
    height:170px;
  }
}

.static-grid{ display:flex; flex-direction:column; gap:14px; }
.static-grid .item{ display:flex; gap:12px; }
.static-grid .item .ic{ font-size:22px; flex-shrink:0; }
.static-grid .item h3{ font-size:15px; margin-bottom:4px; color:var(--ink); }
.static-grid .item p{ margin-bottom:0; }

/* El footer viejo (.f-row/.f-wa/.f-note, bare "footer{}") también se
   sacó el 08/09/2026 por el mismo motivo -- pisaba en silencio el
   footer real de beta.css (mismo bug que .brand img más arriba). */