/* Yupifon · páginas de soluciones por industria · 8-sep-2026
   Comparte la paleta del home. Vive aparte a propósito: son 18 páginas y una
   sola hoja se guarda en el caché una vez y sirve para todas. */
:root{
  --naranja:#FF7900; --naranja-2:#FFA51F;
  --azul:#172C88; --azul-2:#496FD5; --azul-osc:#0C1547;
  --blanco:#FFFFFF; --nube:#F4F6FA; --linea:#E3E8F2;
  --tinta:#0E1526; --gris:#5A6479;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',-apple-system,Roboto,system-ui,Arial,sans-serif;
  color:var(--tinta);background:var(--blanco);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.env{max-width:1180px;margin:0 auto;padding:0 22px}

/* ── encabezado ─────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);
  box-shadow:0 1px 14px rgba(12,21,71,.06)}
.cab{display:flex;align-items:center;gap:18px;min-height:80px}
.cab > .logo{flex:1 1 0;min-width:0;display:flex;align-items:center}
.logo img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:30px;flex:0 0 auto}
.menu > a,.menu > .con-panel > a{color:#1b2a5e;font-size:15px;font-weight:600}
.menu > a:hover{color:var(--naranja)}
.menu > .con-panel{position:static}
.menu > .con-panel > a{display:flex;align-items:center;gap:7px}
.flechita{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  opacity:.75;transition:transform .16s}
.con-panel:hover .flechita{transform:rotate(180deg)}
.panel-ancho{position:absolute;top:100%;left:0;right:0;background:#fff;
  border-top:1px solid var(--linea);box-shadow:0 26px 46px rgba(12,21,71,.14);
  padding:32px 0 26px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.con-panel:hover .panel-ancho{opacity:1;visibility:visible;transform:translateY(0)}
.sol-rejilla{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;
  grid-template-columns:repeat(3,1fr);column-gap:22px}
.sol-fila{display:flex;align-items:center;gap:12px;padding:9px 11px;
  margin-left:-11px;border-radius:11px;font-size:14.5px;font-weight:600;
  color:#1b2a5e;line-height:1.25}
.sol-fila:hover{background:#f2f6ff}
.sol-fila.aqui{background:#f2f6ff;color:#0c1547}
.sol-ico{width:24px;height:24px;flex:none;fill:none;stroke:#1b2a5e;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sol-ico .ac{stroke:var(--naranja)}
.sol-fl{margin-left:auto;color:var(--naranja);font-style:normal;font-size:17px;
  opacity:0;transform:translateX(-4px);transition:opacity .14s,transform .14s}
.sol-fila:hover .sol-fl{opacity:1;transform:translateX(0)}
.cab-der{display:flex;align-items:center;gap:13px;flex:1 1 0;
  justify-content:flex-end}
.entrar{background:var(--naranja);border-radius:999px;padding:10px 22px;
  font-size:14px;font-weight:700;color:#231000;white-space:nowrap}
.entrar:hover{background:#e56d00;color:#fff}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamb span{display:block;width:22px;height:2px;background:#1b2a5e;margin:4px 0}

/* ── 1 · hero ───────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,#0C1547 0%,#172C88 58%,#243FA8 100%);
  color:#fff;padding:66px 0 74px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-140px;top:-140px;width:520px;
  height:520px;border-radius:50%;background:rgba(255,121,0,.13)}
.hero .env{position:relative;display:grid;grid-template-columns:1fr 210px;
  gap:40px;align-items:center}
.miga{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:20px}
.miga a:hover{color:var(--naranja-2)}
.hero .giro{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja-2);margin-bottom:14px}
.hero .giro:before{content:"";width:26px;height:2px;background:var(--naranja)}
.hero h1{font-size:clamp(30px,4.1vw,50px);line-height:1.1;font-weight:800;
  letter-spacing:-.6px;margin-bottom:18px;max-width:15ch}
.hero p{font-size:18px;color:rgba(255,255,255,.8);max-width:56ch}
.hero-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-sello{justify-self:center}
.hero-sello svg{width:172px;height:172px;fill:none;stroke:rgba(255,255,255,.72);
  stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.hero-sello svg .ac{stroke:var(--naranja-2)}

.boton{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
  transition:transform .15s,background .15s,color .15s}
.boton:hover{transform:translateY(-2px)}
.boton.naranja{background:var(--naranja);color:#231000}
.boton.naranja:hover{background:var(--naranja-2)}
.boton.linea{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.boton.linea:hover{background:#fff;color:var(--azul-osc)}
.boton.azul{background:var(--azul);color:#fff}
.boton.azul:hover{background:#1e37a8}

/* ── secciones ──────────────────────────────────────────── */
section{padding:70px 0}
.gorro{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:14px}
.gorro:before{content:"";width:26px;height:2px;background:var(--naranja)}
h2{font-size:clamp(25px,3.1vw,37px);line-height:1.16;color:var(--azul-osc);
  font-weight:800;letter-spacing:-.4px;margin-bottom:14px}
.entrada{font-size:17.5px;color:var(--gris);max-width:70ch}

/* 2 · problema */
.problema{background:var(--nube);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.probs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.prob{background:#fff;border:1px solid var(--linea);border-left:3px solid var(--naranja);
  border-radius:14px;padding:18px 20px;font-size:16px;color:#1b2a5e;
  display:flex;gap:13px;align-items:flex-start}
.prob i{font-style:normal;font-weight:800;color:var(--naranja);font-size:15px;
  line-height:1.5;flex:none}

/* 4 · diagrama */
.diagrama{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:32px}
.pieza{flex:1 1 0;min-width:150px;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:18px 16px;text-align:center;font-weight:700;
  font-size:14.5px;color:var(--azul-osc);display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px rgba(12,21,71,.06)}
.pieza:first-child{border-color:#ffd2a8;background:#fff8f2}
.flechon{flex:0 0 42px;display:flex;align-items:center;justify-content:center;
  color:var(--naranja);font-size:22px;font-weight:800}

/* 5 · productos */
.productos{background:var(--nube);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.prod{background:#fff;border:1px solid var(--linea);border-radius:16px;
  padding:22px 20px;display:flex;flex-direction:column;gap:9px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.prod:hover{transform:translateY(-3px);border-color:#ffd2a8;
  box-shadow:0 14px 30px rgba(12,21,71,.10)}
.prod b{font-size:17px;color:var(--azul-osc);font-weight:800}
.prod .precio{font-size:14.5px;font-weight:800;color:var(--naranja)}
.prod p{font-size:14.5px;color:var(--gris);line-height:1.5;flex:1}
.prod .ir{font-size:13.5px;font-weight:800;color:var(--azul);
  letter-spacing:.02em}
.prod:hover .ir{color:var(--naranja)}
.tambien{margin-top:26px;font-size:14.5px;color:var(--gris)}
.tambien a{color:var(--azul);font-weight:700}

/* 6 · casos de uso */
.casos{list-style:none;margin-top:30px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:12px 26px}
.casos li{display:flex;gap:12px;align-items:flex-start;font-size:16px;
  color:#1b2a5e;line-height:1.5}
.casos li:before{content:"";flex:none;width:18px;height:18px;margin-top:4px;
  border-radius:50%;border:2px solid var(--naranja);
  background:radial-gradient(circle,var(--naranja) 0 4px,transparent 4px)}

/* 7 · beneficios */
.benes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.bene{background:#fff;border:1px solid var(--linea);border-radius:16px;
  padding:22px 20px}
.bene b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--naranja);margin-bottom:9px}
.bene p{font-size:15.5px;color:#1b2a5e;line-height:1.5}

/* 8 · cierre */
.cierre{background:linear-gradient(135deg,#0C1547 0%,#172C88 100%);color:#fff;
  text-align:center}
.cierre h2{color:#fff}
.cierre .gorro{color:var(--naranja-2)}
.cierre .entrada{color:rgba(255,255,255,.8);margin:0 auto}
.cierre-botones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:30px}

/* otras soluciones */
.otras{border-top:1px solid var(--linea)}
.otras-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:28px}
.otra{background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:16px 12px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:9px;transition:transform .16s,background .16s,
  border-color .16s}
.otra:hover{transform:translateY(-3px);background:#f7faff;border-color:#c9daff}
.otra svg{width:30px;height:30px;fill:none;stroke:#1b2a5e;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.otra svg .ac{stroke:var(--naranja)}
.otra b{font-size:12.5px;line-height:1.3;color:var(--azul-osc);font-weight:700}

/* ── pie ────────────────────────────────────────────────── */
footer{background:#080D24;color:rgba(255,255,255,.62);padding:56px 0 26px;
  font-size:14.5px}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.10)}
.pie-rejilla img{height:40px;margin-bottom:16px}
.pie-rejilla h5{color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.pie-rejilla a{display:block;margin-bottom:10px;color:rgba(255,255,255,.62)}
.pie-rejilla a:hover{color:var(--naranja-2)}
.abajo{padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.42)}

/* ── celular ────────────────────────────────────────────── */
@media(max-width:1080px){ .sol-rejilla{grid-template-columns:1fr} }
@media(max-width:980px){
  .hero .env{grid-template-columns:1fr}
  .hero-sello{display:none}
  .probs,.casos,.prods{grid-template-columns:1fr}
  .benes{grid-template-columns:repeat(2,1fr)}
  .otras-rejilla{grid-template-columns:repeat(3,1fr)}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:28px}
  .flechon{flex:0 0 100%;height:26px;transform:rotate(90deg)}
}
@media(max-width:820px){
  .menu{display:none;position:absolute;top:80px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;
    border-bottom:1px solid var(--linea);box-shadow:0 20px 40px rgba(12,21,71,.12)}
  .menu.abierto{display:flex}
  .menu > a,.menu > .con-panel > a{padding:14px 26px}
  .panel-ancho{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 10px;display:none}
  .con-panel.abierta .panel-ancho{display:block}
  .hamb{display:block}
  section{padding:52px 0}
  .benes{grid-template-columns:1fr}
  .otras-rejilla{grid-template-columns:repeat(2,1fr)}
}

/* ── las tarjetas de yupiplan, en las paginas de familia ── */
.yps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.yp{background:#fff;border:1px solid var(--linea);border-radius:18px;
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:11px;
  box-shadow:0 8px 20px rgba(12,21,71,.05);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.yp:hover{transform:translateY(-4px);border-color:#ffd2a8;
  box-shadow:0 18px 38px rgba(12,21,71,.12)}
.yp-logo{height:46px;display:flex;align-items:center}
.yp-logo img{height:46px;width:auto;max-width:100%;object-fit:contain}
.yp-logo .puesto{font-size:24px;font-weight:800;color:#123B8E;
  letter-spacing:-.5px;font-style:italic;line-height:1}
.yp-logo .puesto b{display:block;font-size:14px;font-style:normal;
  letter-spacing:0;margin-top:2px}
.yp-costo{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.yp-costo b{font-size:29px;font-weight:800;color:var(--azul);
  letter-spacing:-1px;line-height:1}
.yp-costo i{font-style:normal;font-size:12.5px;color:var(--gris);font-weight:600}
.yp p{font-size:14.5px;color:var(--gris);line-height:1.5;flex:1;margin:0}
.yp .boton{margin-top:2px;width:100%;padding:12px 18px;font-size:14.5px;
  background:#fff;color:var(--azul);border:1px solid var(--linea)}
.yp .boton:hover{border-color:var(--azul);background:var(--nube)}
.hero-sello svg{stroke-width:.8}
@media(max-width:1080px){ .yps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .yps{grid-template-columns:1fr} }