/* ============================================================
   INFOYEC — pages.css
   Bloques propios de cada página: héroe, mapa del grupo, calculadora,
   comparativa, fichas de caso y legales.
   ============================================================ */

/* ---------- 1. Héroe ---------- */
.hero{
  position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:calc(var(--header-h) + 5rem) 2.4rem;
  background:var(--prof);color:#fff;overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,23,38,.86) 0%,rgba(7,23,38,.58) 34%,rgba(7,23,38,.92) 100%),
    radial-gradient(120% 80% at 78% 22%,transparent 30%,rgba(7,23,38,.6) 100%);
}
.hero__in{position:relative;z-index:1;}
.hero__eyebrow{margin-bottom:1.5rem;color:var(--jade-soft);}
.hero__title{font-size:var(--t-mega);max-width:15ch;letter-spacing:-.038em;}
.hero__title .esp{
  background:var(--recorrido);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .hero__title .esp{color:var(--jade-soft);-webkit-text-fill-color:currentColor;} }
.hero__lead{margin-top:1.7rem;max-width:54ch;color:#C2CEDB;font-size:clamp(1.05rem,1.4vw,1.26rem);}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;}
.hero__pie{
  display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:flex-end;
  margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__dato{font-size:var(--t-sm);color:#A7B6C6;max-width:24ch;}
.hero__dato b{
  display:block;font-family:var(--f-display);font-weight:700;font-size:1.85rem;
  line-height:1;color:#fff;margin-bottom:.3rem;letter-spacing:-.03em;
}
.hero__dato b i{font-style:normal;color:var(--jade-soft);}
.hero__scroll{
  margin-inline-start:auto;display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;color:#8FA2B4;
}
.hero__scroll span{
  width:1px;height:26px;background:linear-gradient(180deg,var(--jade-soft),transparent);
  animation:cae 2.1s var(--e-io) infinite;
}
/* En móvil el indicador de scroll no aporta —ya se ve que la página sigue— y
   además rompe la fila de datos del héroe al envolverse. */
@media(max-width:719px){
  .hero__scroll{display:none;}
  .hero__dato{max-width:none;}
  .hero__pie{gap:1rem 1.6rem;}
}
@keyframes cae{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 46%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ---------- 2. Titular de sección ---------- */
.shead{display:grid;gap:1.1rem;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
@media(min-width:900px){
  .shead{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--gut);align-items:end;}
  .shead__x{grid-column:1 / -1;}
}
.shead h2{font-size:var(--t-xl);max-width:18ch;}
.shead p{color:var(--ink-2);max-width:52ch;}

/* ---------- 3. Las tres capas ---------- */
.capas{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:860px){ .capas{grid-template-columns:repeat(3,1fr);} }
.capa{
  background:var(--bg);padding:2rem 1.7rem 1.9rem;display:flex;flex-direction:column;gap:.85rem;
  position:relative;overflow:hidden;
}
.capa::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--c,var(--jade));transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.capa.is-in::before{transform:scaleX(1);}
.capa__n{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--ink-3);}
.capa h3{font-size:var(--t-lg);font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;}
.capa p{color:var(--ink-2);font-size:var(--t-sm);}
.capa ul{display:grid;gap:.45rem;margin-top:.4rem;}
.capa li{
  font-size:var(--t-sm);color:var(--ink-2);padding-left:1.05rem;position:relative;
}
.capa li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:1px;background:var(--c,var(--jade));
}
.capa__pie{margin-top:auto;padding-top:1.2rem;}

/* ---------- 4. Comparativa antes / ahora ---------- */
.antes{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:820px){ .antes{grid-template-columns:1fr 1fr;} }
.antes__c{background:var(--bg);padding:1.9rem 1.7rem;}
.antes__c--ahora{background:var(--azul);color:#fff;--ink:#fff;--ink-2:#A7B6C6;--rule:rgba(255,255,255,.16);}
.antes__t{
  font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem;
}
.antes__c--ahora .antes__t{color:var(--jade-soft);}
.antes__l{display:grid;gap:0;}
.antes__l li{
  padding-block:.85rem;border-top:1px solid var(--rule);font-size:var(--t-sm);
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;color:var(--ink-2);
}
.antes__l li:first-child{border-top:0;}
.antes__l li b{
  font-family:var(--f-mono);font-size:var(--t-micro);color:var(--ink-3);
  font-weight:400;letter-spacing:.06em;
}
.antes__c--ahora .antes__l li b{color:var(--jade-soft);}
.antes__c--ahora .antes__l li{color:#C2CEDB;}

/* ---------- 5. Mapa del grupo ---------- */
.grupo-mapa{display:grid;gap:var(--gut);align-items:center;}
@media(min-width:900px){ .grupo-mapa{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);} }
.grupo-svg{width:100%;height:auto;}
.grupo-svg .lin{stroke:var(--rule);stroke-width:1.4;fill:none;}
.grupo-svg .cja{fill:var(--bg);stroke:var(--rule);stroke-width:1.4;}
.grupo-svg .tit{font-family:var(--f-brand);font-weight:800;font-size:13px;fill:var(--ink);}
.grupo-svg .sub{font-family:var(--f-body);font-size:9.5px;fill:var(--ink-3);letter-spacing:.06em;}
.grupo-svg .lin--pta{stroke-dasharray:4 5;}
.marcas{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.marca{
  background:var(--bg);padding:1.5rem 1.6rem;display:grid;gap:.5rem;
  grid-template-columns:auto 1fr;align-items:start;
}
.marca__b{width:10px;height:10px;border-radius:2px;margin-top:.45em;flex:0 0 auto;}
.marca h3{font-size:var(--t-md);grid-column:2;}
.marca p{grid-column:2;font-size:var(--t-sm);color:var(--ink-2);}
.marca__pie{grid-column:2;padding-top:.5rem;}

/* ---------- 6. Calculadora de horas ---------- */
.calc{display:grid;gap:var(--gut);}
@media(min-width:900px){ .calc{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:start;} }
.calc__mandos{display:grid;gap:1.5rem;}
.mando{display:grid;gap:.55rem;}
.mando__cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.mando__cab label{font-size:var(--t-sm);font-weight:600;color:var(--ink);}
.mando__v{
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.mando input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:var(--rule);outline:none;
}
.mando input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--jade);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--jade);
  cursor:pointer;transition:transform var(--d-1) var(--e-spring);
}
.mando input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.18);}
.mando input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--jade);
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--jade);cursor:pointer;
}
.mando small{font-size:var(--t-xs);color:var(--ink-3);}
.calc__res{
  background:var(--azul);color:#fff;padding:2rem 1.8rem;border-radius:var(--r-sm);
  display:grid;gap:1.3rem;position:relative;overflow:hidden;
}
.calc__cifra{font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;line-height:.95;}
.calc__cifra b{display:block;font-size:clamp(3.2rem,8vw,4.8rem);font-variant-numeric:tabular-nums;}
/* Solo el rótulo, que es hijo directo. Si no lleva el «>», la regla
   alcanza también al <span> del número dentro del <b> y lo encoge. */
.calc__cifra > span{display:block;font-size:var(--t-sm);font-family:var(--f-body);font-weight:400;letter-spacing:0;color:#A7B6C6;margin-top:.6rem;}
.calc__desglose{display:grid;gap:.5rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);}
.calc__f{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-xs);color:#A7B6C6;}
.calc__f b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.calc__nota{font-size:var(--t-xs);color:var(--ink-3);margin-top:.8rem;}

/* ---------- 7. Fichas de caso ---------- */
.casos{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:780px){ .casos{grid-template-columns:repeat(2,1fr);} }
.caso{background:var(--bg);padding:1.9rem 1.7rem;display:grid;gap:.9rem;align-content:start;}
.caso__ref{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.13em;
  color:var(--accent-ink);display:flex;justify-content:space-between;gap:1rem;
}
.caso__ref em{font-style:normal;color:var(--ink-3);}
.caso h3{font-size:var(--t-md);}
.caso p{font-size:var(--t-sm);color:var(--ink-2);}
.caso dl{display:grid;gap:0;margin-top:.4rem;}
.caso dl > div{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding-block:.6rem;
  border-top:1px solid var(--rule);font-size:var(--t-xs);
}
.caso dt{color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase;font-weight:600;}
.caso dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;}

/* ---------- 8. Preguntas ---------- */
.faq{border-top:1px solid var(--rule);}
.faq__i{border-bottom:1px solid var(--rule);}
.faq__b{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:1.35rem;text-align:left;font-family:var(--f-brand);font-weight:700;
  font-size:var(--t-md);color:var(--ink);transition:color var(--d-1);
}
.faq__b:hover{color:var(--accent-ink);}
.faq__b svg{width:18px;height:18px;flex:0 0 auto;margin-top:.3em;transition:transform var(--d-2) var(--e-out);color:var(--accent-ink);}
.faq__b[aria-expanded="true"] svg{transform:rotate(45deg);}
.faq__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-2) var(--e-out);}
.faq__p[data-open]{grid-template-rows:1fr;}
.faq__p > div{overflow:hidden;}
.faq__p p{padding-bottom:1.5rem;color:var(--ink-2);max-width:62ch;}
.faq__p p + p{padding-bottom:1.5rem;margin-top:-.6rem;}

/* ---------- 9. Tabla técnica ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.tabla th,.tabla td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top;}
.tabla th{
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.tabla td{color:var(--ink-2);}
.tabla td b,.tabla td strong{color:var(--ink);font-weight:600;}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- 10. Contacto ---------- */
.contacto{display:grid;gap:var(--gut);align-items:start;}
@media(min-width:960px){ .contacto{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:calc(var(--gut) * 1.5);} }
.contacto__lado{display:grid;gap:1.6rem;position:sticky;top:calc(var(--header-h) + 1.5rem);}
@media(max-width:959px){ .contacto__lado{position:static;} }
.form{display:grid;gap:1.6rem;}
.form__fila{display:grid;gap:1.1rem;}
@media(min-width:620px){ .form__fila--2{grid-template-columns:1fr 1fr;} }
.form__pie{display:grid;gap:1rem;padding-top:.4rem;}
.datos{display:grid;gap:0;border:1px solid var(--rule);}
.datos > div{padding:1.1rem 1.3rem;border-top:1px solid var(--rule);}
.datos > div:first-child{border-top:0;}
.datos dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.35rem;}
.datos dd{margin:0;font-size:var(--t-sm);color:var(--ink);}
.datos dd a:hover{color:var(--accent-ink);}

/* ---------- 11. Legales ---------- */
.legal{max-width:74ch;}
.legal h2{font-size:var(--t-lg);margin-top:2.6rem;}
.legal h3{font-size:var(--t-md);margin-top:1.8rem;}
.legal p,.legal li{color:var(--ink-2);}
.legal p + p{margin-top:1em;}
.legal ul,.legal ol{margin:1em 0;padding-left:1.3em;display:grid;gap:.45em;}
.legal ul{list-style:disc;}
.legal ol{list-style:decimal;}
.legal a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
.legal .actualizado{font-size:var(--t-xs);color:var(--ink-3);font-family:var(--f-mono);}

/* ---------- 12. 404 ---------- */
.e404{min-height:70svh;display:grid;place-content:center;text-align:center;gap:1.4rem;justify-items:center;}
.e404 b{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.2em;color:var(--accent-ink);}
.e404 h1{font-size:var(--t-xxl);}