/* ============================================================
   CaviPack — hoja de estilos del sitio institucional
   Misma identidad visual del catálogo, sobre fondo blanco.
   ============================================================ */

:root{
  /* superficie */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F9FB;
  --surface-3:#EDF3F7;

  /* texto */
  --ink:#0B2434;
  --ink-2:#42606F;
  --ink-3:#7793A3;

  /* líneas */
  --line:#DDE6EC;
  --line-2:#C8D8E2;

  /* marca */
  --marino:#0F3A54;
  --cian:#1F9FD8;
  --turquesa:#2EB3CC;
  --placa:#A7CFE2;
  --verde:#15764F;
  --wa:#25D366;

  --sombra:0 1px 2px rgba(11,36,52,.06), 0 8px 24px -12px rgba(11,36,52,.18);
  --sombra-alta:0 2px 4px rgba(11,36,52,.08), 0 22px 48px -18px rgba(11,36,52,.34);
  --anillo:#1F9FD8;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif; text-wrap:balance; margin:0; line-height:1.08}
p{margin:0}
img{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--anillo); outline-offset:3px; border-radius:4px}

.env{width:min(1200px,100% - 2.5rem); margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.rotulo{
  font-family:"IBM Plex Mono",monospace; font-size:.688rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------------------------------------------- cabecera */
.top{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex; align-items:center; gap:1.25rem; padding:.7rem 0; min-height:68px}
.marca{flex:none; display:block}
.marca img{height:52px; width:auto}

.nav{display:flex; align-items:center; gap:.35rem; margin-left:auto}
.nav a{
  text-decoration:none; color:var(--ink-2); font-size:.938rem; font-weight:500;
  padding:.5rem .85rem; border-radius:999px; transition:color .18s, background .18s;
}
.nav a:hover{color:var(--ink); background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--marino); font-weight:600; background:var(--surface-3)}

.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:10px; width:42px; height:42px; cursor:pointer; align-items:center;
  justify-content:center; color:var(--ink-2);
}
.menu-btn svg{width:20px; height:20px}

/* ---------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; border:0; cursor:pointer; border-radius:999px;
  font-weight:600; font-size:.938rem; padding:.75rem 1.4rem;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px; height:18px; flex:none}

.btn-wa{background:var(--wa); color:#06301A; box-shadow:0 2px 10px -2px rgba(37,211,102,.5)}
.btn-wa:hover{box-shadow:0 8px 22px -4px rgba(37,211,102,.55)}
.btn-primario{background:var(--marino); color:#EAF3F8; box-shadow:var(--sombra)}
.btn-primario:hover{box-shadow:var(--sombra-alta)}
.btn-claro{background:#fff; color:var(--marino); box-shadow:var(--sombra)}
.btn-borde{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
.btn-borde:hover{border-color:var(--cian)}
.btn-lg{font-size:1.063rem; padding:.95rem 1.8rem}

/* ---------------------------------------------- portada */
.hero{position:relative; overflow:hidden; background:var(--marino)}
.hero-foto{position:absolute; inset:0}
.hero-foto img{width:100%; height:100%; object-fit:cover}
.hero-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,32,48,.93) 0%, rgba(8,32,48,.78) 45%, rgba(8,32,48,.25) 100%);
}
.hero-in{position:relative; padding:clamp(3.5rem,9vw,6.5rem) 0; max-width:40rem}
.hero .rotulo{color:var(--placa)}
.hero h1{
  font-size:clamp(2.3rem,5.6vw,3.9rem); font-weight:800; letter-spacing:-.025em;
  color:#fff; margin:1rem 0 0;
}
.hero h1 em{font-style:normal; color:var(--turquesa)}
.hero-lead{margin-top:1.15rem; font-size:1.063rem; color:#C6DCE8; max-width:34rem}
.hero-cta{display:flex; gap:.75rem; margin-top:2.25rem; flex-wrap:wrap}
.hero-datos{
  display:flex; gap:2.5rem; margin-top:2.75rem; flex-wrap:wrap;
  padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.16);
}
.hero-dato b{display:block; font-family:Archivo,sans-serif; font-size:1.75rem; font-weight:700; color:#fff; letter-spacing:-.02em}
.hero-dato span{font-family:"IBM Plex Mono",monospace; font-size:.688rem; letter-spacing:.12em; text-transform:uppercase; color:var(--placa)}

/* ---------------------------------------------- secciones */
.seccion{padding:clamp(3.5rem,7vw,5.5rem) 0}
.seccion-2{background:var(--surface-2)}
.cabeza{max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem)}
.cabeza h2{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; letter-spacing:-.025em; margin-top:.75rem}
.cabeza p{margin-top:1rem; font-size:1.063rem; color:var(--ink-2)}

/* ---------------------------------------------- productos */
.rejilla-3{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tarjeta{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--sombra); text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.tarjeta:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--line-2)}
.tarjeta-foto{aspect-ratio:4/3; background:var(--placa); overflow:hidden}
.tarjeta-foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.045)}
.tarjeta-cuerpo{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.tarjeta-cuerpo h3{font-size:1.25rem; font-weight:700; letter-spacing:-.015em}
.tarjeta-cuerpo p{font-size:.938rem; color:var(--ink-2)}
.tarjeta-lista{margin:.15rem 0 0; padding:0; list-style:none; display:grid; gap:.3rem}
.tarjeta-lista li{font-size:.875rem; color:var(--ink-3); padding-left:1rem; position:relative}
.tarjeta-lista li::before{
  content:""; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:var(--turquesa);
}
.tarjeta-flecha{
  margin-top:auto; padding-top:1rem; font-size:.875rem; font-weight:600; color:var(--cian);
  display:flex; align-items:center; gap:.35rem;
}

/* ---------------------------------------------- tutorial */
.pasos{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.paso{display:flex; flex-direction:column}
.paso-foto{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface-2); box-shadow:var(--sombra); aspect-ratio:11/8;
}
.paso-foto img{width:100%; height:100%; object-fit:cover; object-position:top left}
.paso-txt{display:flex; gap:.85rem; margin-top:1.1rem}
.paso-n{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--marino); color:#fff;
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:.813rem; font-weight:600;
}
.paso-txt h3{font-size:1.063rem; font-weight:700; margin-bottom:.2rem}
.paso-txt p{font-size:.875rem; color:var(--ink-2)}

/* ---------------------------------------------- llamada al catálogo */
.cta{position:relative; overflow:hidden; border-radius:22px; background:var(--marino)}
.cta-foto{position:absolute; inset:0}
.cta-foto img{width:100%; height:100%; object-fit:cover}
.cta-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,32,48,.94), rgba(8,32,48,.66))}
.cta-in{position:relative; padding:clamp(2.5rem,6vw,4rem); max-width:38rem}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:800; color:#fff; letter-spacing:-.025em}
.cta p{margin-top:1rem; color:#C6DCE8; font-size:1.031rem}
.cta .hero-cta{margin-top:2rem}

/* ---------------------------------------------- nosotros */
.dos-col{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
.foto-marco{border-radius:18px; overflow:hidden; box-shadow:var(--sombra-alta)}
.foto-marco img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.valores{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.valor{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:1.6rem; box-shadow:var(--sombra);
}
.valor h3{font-size:1.125rem; font-weight:700; margin-bottom:.55rem}
.valor p{font-size:.938rem; color:var(--ink-2)}
.valor-ico{
  width:42px; height:42px; border-radius:12px; background:var(--surface-3);
  display:grid; place-items:center; margin-bottom:1rem; color:var(--cian);
}
.valor-ico svg{width:22px; height:22px}

.cifras{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:2.5rem}
.cifra{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:1.4rem}
.cifra b{display:block; font-family:Archivo,sans-serif; font-size:2rem; font-weight:800; letter-spacing:-.02em; color:var(--marino)}
.cifra span{font-size:.875rem; color:var(--ink-2)}

/* ---------------------------------------------- contacto */
.contacto-grid{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sede{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.sede-mapa{aspect-ratio:16/10; background:var(--surface-3); border-bottom:1px solid var(--line)}
.sede-mapa iframe{width:100%; height:100%; border:0; display:block}
.sede-cuerpo{padding:1.5rem; display:flex; flex-direction:column; gap:.85rem; flex:1}
.sede-cuerpo h3{font-size:1.25rem; font-weight:700}
.dato{display:flex; gap:.7rem; align-items:flex-start; font-size:.938rem; color:var(--ink-2)}
.dato svg{width:18px; height:18px; flex:none; color:var(--cian); margin-top:.18rem}
.dato a{color:var(--ink-2); text-decoration:none}
.dato a:hover{color:var(--cian)}

.horario{border-top:1px solid var(--line); margin-top:auto; padding-top:1rem}
.horario-fila{display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; padding:.28rem 0}
.horario-fila span:first-child{color:var(--ink-2)}
.horario-fila span:last-child{font-family:"IBM Plex Mono",monospace; color:var(--ink)}

/* ---------------------------------------------- pie */
.pie{background:var(--marino); color:#C6DCE8; padding:clamp(3rem,6vw,4rem) 0 2rem; margin-top:0}
.pie-grid{display:grid; gap:2.5rem; grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.pie h4{
  font-family:"IBM Plex Mono",monospace; font-size:.688rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--placa); margin:0 0 1rem; font-weight:500;
}
.pie-marca img{height:40px; width:auto; margin-bottom:1rem}
.pie p{font-size:.938rem; line-height:1.65}
.pie-lista{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.pie-lista a{color:#C6DCE8; text-decoration:none; font-size:.938rem}
.pie-lista a:hover{color:#fff}
.pie-redes{display:flex; gap:.6rem; margin-top:1.15rem}
.pie-redes a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#fff; transition:background .18s;
}
.pie-redes a:hover{background:rgba(255,255,255,.22)}
.pie-redes svg{width:18px; height:18px}
.pie-abajo{
  margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.813rem; color:#8FB0C2;
}
.pie-abajo a{color:#8FB0C2; text-decoration:none}
.pie-abajo a:hover{color:#fff}

/* ---------------------------------------------- botón flotante */
.fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:50;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#06301A; box-shadow:0 6px 22px -4px rgba(37,211,102,.6);
  text-decoration:none; transition:transform .25s cubic-bezier(.2,1.4,.4,1);
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:28px; height:28px}

/* ---------------------------------------------- aviso legal flotante */
.legal-velo{
  position:fixed; inset:0; z-index:69; background:rgba(8,32,48,.45);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.legal[data-estado="largo"] .legal-velo{opacity:1; pointer-events:auto}
.legal-caja{
  position:fixed; left:1.25rem; bottom:1.25rem; z-index:70;
  width:min(400px, calc(100% - 2.5rem)); max-height:24rem;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--sombra-alta);
  transition:width .4s cubic-bezier(.2,.7,.3,1), max-height .4s cubic-bezier(.2,.7,.3,1);
  animation:legal-entra .5s cubic-bezier(.2,.7,.3,1) both;
}
.legal[data-estado="largo"] .legal-caja{width:min(780px, calc(100% - 2.5rem)); max-height:min(84vh, 800px)}
@keyframes legal-entra{from{opacity:0; transform:translateY(18px)}}
html.legal-bloqueo{overflow:hidden}

.legal-corto{padding:1.3rem 1.4rem 1.35rem}
.legal-titulo{font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1.063rem; letter-spacing:-.01em}
.legal-corto p + p{margin-top:.4rem; font-size:.906rem; color:var(--ink-2); line-height:1.55}
.legal-acciones{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.legal-acciones .btn, .legal-pie .btn{padding:.62rem 1.2rem; font-size:.906rem}

.legal-largo{display:none; flex:1; min-height:0; flex-direction:column}
.legal[data-estado="largo"] .legal-corto{display:none}
.legal[data-estado="largo"] .legal-largo{display:flex}
.legal-cabeza{
  display:flex; align-items:center; gap:.75rem;
  padding:.8rem .9rem .8rem 1.1rem; border-bottom:1px solid var(--line);
}
.legal-pestanas{display:flex; gap:.25rem; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
.legal-tab-corto{display:none}
.legal-pestanas button{
  flex:none; border:0; background:none; cursor:pointer; white-space:nowrap;
  font-size:.906rem; font-weight:600; color:var(--ink-3);
  padding:.5rem .9rem; border-radius:999px; transition:background .18s, color .18s;
}
.legal-pestanas button:hover{color:var(--ink)}
.legal-pestanas button[aria-selected="true"]{background:var(--surface-3); color:var(--marino)}
.legal-reducir{
  flex:none; width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); transition:border-color .18s;
}
.legal-reducir:hover{border-color:var(--cian)}
.legal-reducir svg{width:18px; height:18px}
.legal-texto{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1.6rem 1.9rem 2rem}
.legal-texto .legal-doc:focus-visible{outline-offset:6px}
.legal-pie{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.1rem .8rem 1.4rem; border-top:1px solid var(--line); background:var(--surface-2);
}
.legal-completa{font-size:.844rem; color:var(--ink-2); text-underline-offset:3px}
.legal-completa:hover{color:var(--cian)}

/* textos legales: los usa la vista flotante y legal.php */
:is(.legal, .legal-pagina) .legal-doc{max-width:68ch}
:is(.legal, .legal-pagina) .legal-doc h2{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.15}
:is(.legal, .legal-pagina) .legal-doc h3{font-size:1.063rem; font-weight:700; line-height:1.3; margin:1.9rem 0 .5rem}
:is(.legal, .legal-pagina) .legal-doc p,
:is(.legal, .legal-pagina) .legal-doc li{font-size:.938rem; line-height:1.68; color:var(--ink-2)}
:is(.legal, .legal-pagina) .legal-doc p + p,
:is(.legal, .legal-pagina) .legal-doc p + ul,
:is(.legal, .legal-pagina) .legal-doc ul + p{margin-top:.6rem}
:is(.legal, .legal-pagina) .legal-doc ul{margin:0; padding-left:1.15rem; display:grid; gap:.4rem}
:is(.legal, .legal-pagina) .legal-doc strong{color:var(--ink); font-weight:600}
:is(.legal, .legal-pagina) .legal-doc a{color:var(--cian); text-underline-offset:3px}
:is(.legal, .legal-pagina) .legal-doc .legal-fecha{
  margin-top:.55rem; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

.legal-pagina .cabeza h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; letter-spacing:-.025em; margin-top:.75rem}
.legal-indice{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem}
.legal-pagina .legal-doc{scroll-margin-top:6rem}
.legal-pagina .legal-doc + .legal-doc{margin-top:3.5rem; padding-top:3rem; border-top:1px solid var(--line)}
.pie-legal a{text-underline-offset:3px}

/* ---------------------------------------------- índice de productos (catálogo) */
.indice-texto{border-top:1px solid var(--line)}
.indice-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); margin-top:1.5rem}
.indice-grid h3{font-size:1.063rem; font-weight:700; margin-bottom:.75rem}
.indice-lista{
  margin:0; padding:0; list-style:none; max-height:22rem; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
}
.indice-lista li{border-bottom:1px solid var(--line)}
.indice-lista li:last-child{border-bottom:0}
.indice-lista a{
  display:block; padding:.55rem .9rem; font-size:.844rem; color:var(--ink-2);
  text-decoration:none; transition:background .15s, color .15s;
}
.indice-lista a:hover{background:var(--surface-3); color:var(--marino)}
@media (max-width:700px){
  .indice-grid{grid-template-columns:1fr}
  .indice-lista{max-height:16rem}
}

/* ---------------------------------------------- aparición */
.js-anim .rev{opacity:0; transform:translateY(18px)}
.rev.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rev{opacity:1 !important; transform:none !important}
}

/* ---------------------------------------------- adaptativo */
@media (max-width:860px){
  .dos-col{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr 1fr}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:#fff; border-bottom:1px solid var(--line);
    padding:.75rem 1.25rem 1.1rem; box-shadow:var(--sombra);
  }
  .nav[data-abierto]{display:flex}
  .nav a{padding:.7rem .85rem}
  .nav .btn{margin-top:.5rem}
  .menu-btn{display:flex}
  .top-in{position:relative}
}
@media (max-width:560px){
  .env{width:min(1200px,100% - 1.75rem)}
  .pie-grid{grid-template-columns:1fr}
  .hero-datos{gap:1.5rem}
  .hero-cta .btn{width:100%}
  .legal-caja, .legal[data-estado="largo"] .legal-caja{left:.75rem; right:.75rem; bottom:.75rem; width:auto}
  .legal[data-estado="largo"] .legal-caja{max-height:88vh}
  .legal-acciones .btn{flex:1}
  .legal-texto{padding:1.2rem 1.2rem 1.6rem}
  .legal-pestanas button{padding:.45rem .75rem; font-size:.875rem}
  .legal-tab-largo{display:none}
  .legal-tab-corto{display:inline}
  .legal-pie{padding:.7rem .9rem .7rem 1.1rem}
}