/* Phonoaudio - estilos del sitio
   Generado desde el prototipo aprobado. Paleta del logotipo:
   grafito #202321 + azul petroleo #195563, sobre marfil #F3F0E9.
   No editar a mano: los ajustes puntuales van en Apariencia > Personalizar > CSS adicional. */
/* ============================================================
   PHONOAUDIO - Prototipo de diseno
   Paleta derivada del logotipo oficial: grafito #202321 + azul petroleo #195563.
   El azul manda: tine los fondos oscuros, los lavados y los rotulos menudos.
   ============================================================ */
:root{--ground:#F3F0E9;        /* marfil */
  --ground-alt:#E9E4D8;    /* marfil hondo */
  --surface:#FDFBF7;       /* marfil claro */

  --ink:#202321;           /* grafito del logotipo */
  --ink-2:#4B4E48;
  --ink-3:#6B6E65;

  --line:#D8D2C5;
  --line-soft:#E4DFD4;

  --accent:#195563;        /* azul petroleo del logotipo */
  --accent-hover:#123F4A;
  --accent-soft:#1C6B7D;   /* el mismo azul, aclarado para rotulos pequenos y filetes */
  --accent-tint:#E5EDEF;   /* lavado de azul sobre marfil */
  --accent-tint-2:#C7DBE1;

  --band:#16282D;          /* el azul del logotipo llevado a su valor mas oscuro */
  --band-2:#1E353B;
  --band-sunk:#122328;     /* campos y tarjetas dentro de la banda */
  --band-sunk-2:#183137;
  --on-band:#EFEBE2;       /* marfil sobre la banda */
  --on-band-2:#A3AEB0;
  --on-band-3:#7E908F;     /* gris frio para letra menuda */
  --band-line:#2E454C;
  --band-accent:#5EAABB;
  --band-ink:#0E1F24;      /* texto sobre el azul claro de la banda */

  --tbd:#7E6330;
  --tbd-bg:#F1EADB;

  --logo-ink:#202321;
  --logo-petrol:#195563;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --sec:clamp(68px,8.5vw,124px);
  --wrap:1200px;
  --radius:3px;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Manrope",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;}
body.pa-page *{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){

html{scroll-behavior:auto}
body.pa-page *, body.pa-page *::before, body.pa-page *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body.pa-page{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;}
body.pa-page img{display:block; max-width:100%}
body.pa-page a{color:var(--accent); text-decoration:none}
body.pa-page a:hover{color:var(--accent-hover)}
body.pa-page :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
body.pa-page button{font:inherit; color:inherit}
body.pa-page .wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
@media (max-width:640px){

body.pa-page .wrap{width:calc(100% - 32px)}
}

body.pa-page section.sec{padding-block:var(--sec)}
body.pa-page .band{background-color:var(--band); color:var(--on-band)}
body.pa-page .band h1, body.pa-page .band h2, body.pa-page .band h3, body.pa-page .band h4{color:var(--on-band)}
body.pa-page .band p{color:var(--on-band-2)}
body.pa-page .band .eyebrow{color:var(--band-accent)}
body.pa-page .band .eyebrow::before{background:var(--band-accent)}
body.pa-page .alt{background:var(--ground-alt)}/* ---------- Tipografia ---------- */
body.pa-page .eyebrow{display:flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-soft); margin:0 0 var(--s3);}
body.pa-page .eyebrow::before{content:""; width:26px; height:2px; background:var(--accent-soft); flex:none}
body.pa-page h1, body.pa-page h2, body.pa-page h3, body.pa-page h4{margin:0; text-wrap:balance; color:var(--ink)}
body.pa-page .display{font-family:var(--serif); font-weight:400; font-size:clamp(2.5rem,5.6vw,4.2rem); line-height:1.04; letter-spacing:-.022em; font-variation-settings:"opsz" 72}
body.pa-page h2, body.pa-page .h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.85rem,3.4vw,2.75rem); line-height:1.12; letter-spacing:-.018em; font-variation-settings:"opsz" 48}
body.pa-page h3, body.pa-page .h3{font-family:var(--sans); font-weight:600; font-size:1.18rem; line-height:1.35; letter-spacing:-.005em}
body.pa-page .h4{font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.02em}
body.pa-page .lede{font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.62; color:var(--ink-2); max-width:62ch; margin:var(--s3) 0 0}
body.pa-page p{margin:0 0 1em; max-width:68ch}
body.pa-page p:last-child{margin-bottom:0}
body.pa-page .muted{color:var(--ink-3)}
body.pa-page .mt3{margin-top:var(--s3)}
body.pa-page .mt4{margin-top:var(--s4)}
body.pa-page .mt5{margin-top:var(--s5)}/* ---------- Marcador de dato por confirmar ---------- */
body.pa-page .tbd{border-bottom:1px dashed var(--tbd); color:var(--tbd); cursor:help; font-weight:500}
body.pa-page .tbd-tag{display:inline-flex; align-items:center; gap:6px; background:var(--tbd-bg); color:var(--tbd);
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px; border:1px solid color-mix(in srgb, var(--tbd) 35%, transparent);}/* ---------- Botones ---------- */
body.pa-page .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--radius); border:1px solid transparent;
  font-weight:600; font-size:.95rem; cursor:pointer; text-align:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
body.pa-page .btn:active{transform:translateY(1px)}
body.pa-page .btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}
body.pa-page .btn--primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff}
body.pa-page .btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
body.pa-page .btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
body.pa-page .band .btn--ghost{color:var(--on-band); border-color:var(--band-line)}
body.pa-page .band .btn--ghost:hover{border-color:var(--band-accent); color:var(--band-accent)}
body.pa-page .band .btn--primary{background:var(--band-accent); border-color:var(--band-accent); color:var(--band-ink)}
body.pa-page .band .btn--primary:hover{background:#8CC6D3; border-color:#8CC6D3; color:var(--band-ink)}
body.pa-page .btn-row{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
body.pa-page .link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--accent)}
body.pa-page .link-arrow svg{transition:transform .2s ease; flex:none}
body.pa-page .link-arrow:hover svg{transform:translateX(4px)}
body.pa-page .band .link-arrow{color:var(--band-accent)}/* ---------- Header ---------- */
@media (max-width:420px){

}

@media (max-width:1060px){

}
/* ---------- Hero ---------- */
body.pa-page .hero{position:relative; background:var(--band); color:var(--on-band); overflow:hidden}
body.pa-page .hero-media{position:absolute; inset:0}
body.pa-page .hero-media img{width:100%; height:100%; object-fit:cover; opacity:.82}
body.pa-page .hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#16282D 2%,rgba(22,40,45,.92) 40%,rgba(22,40,45,.22) 100%);}
body.pa-page .hero-inner{position:relative; padding-block:clamp(60px,10vw,124px)}
body.pa-page .hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.68fr); gap:clamp(36px,5vw,72px); align-items:end}
@media (max-width:900px){

body.pa-page .hero-grid{grid-template-columns:1fr}
}

body.pa-page .hero .display{color:#fff}
body.pa-page .hero .lede{color:#CFCABF}
body.pa-page .hero-sig{display:inline-flex; align-items:center; gap:10px; margin-top:var(--s5);
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--band-accent); font-weight:700;}
body.pa-page .hero-sig::before{content:""; width:34px; height:1px; background:var(--band-accent)}
body.pa-page .hero-facts{display:grid; gap:1px; background:var(--band-line); border:1px solid var(--band-line)}
body.pa-page .hero-facts > div{background:var(--band); padding:17px 20px}
body.pa-page .hero-facts dt{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-band-2); font-weight:700}
body.pa-page .hero-facts dd{margin:6px 0 0; font-size:.98rem; color:var(--on-band); font-weight:500}/* ---------- Rejillas ---------- */
body.pa-page .split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,80px); align-items:start}
body.pa-page .split--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){

body.pa-page .split, body.pa-page .split--even{grid-template-columns:1fr; gap:var(--s5)}
}

body.pa-page .sticky-col{position:sticky; top:104px}
@media (max-width:900px){

body.pa-page .sticky-col{position:static}
}

body.pa-page .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
body.pa-page .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
body.pa-page .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3)}
body.pa-page .grid-2 > *, body.pa-page .grid-3 > *, body.pa-page .grid-4 > *{min-width:0}
@media (max-width:980px){

body.pa-page .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){

body.pa-page .grid-3, body.pa-page .grid-2{grid-template-columns:1fr}
}

@media (max-width:560px){

body.pa-page .grid-4{grid-template-columns:1fr}
}
/* ---------- Tarjetas de intencion ---------- */
body.pa-page .intent{display:flex; flex-direction:column; gap:10px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px 24px 22px; position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
body.pa-page .intent::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .3s cubic-bezier(.2,.7,.3,1);}
body.pa-page .intent:hover{border-color:var(--accent-tint-2); transform:translateY(-3px); box-shadow:0 14px 34px -20px rgba(16,40,45,.45)}
body.pa-page .intent:hover::before{transform:scaleY(1)}
body.pa-page .intent .ilabel{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); font-weight:700}
body.pa-page .intent p{font-size:.92rem; color:var(--ink-2); margin:0; flex:1}
body.pa-page .intent .go{font-size:.85rem; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; margin-top:6px}/* ---------- Servicios ---------- */
body.pa-page .svc-list{border-top:1px solid var(--line)}
body.pa-page .svc{display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,.46fr) auto;
  gap:var(--s4); align-items:start; padding:30px 0; border:0; border-bottom:1px solid var(--line);
  cursor:pointer; width:100%; text-align:left; background:none;
  transition:background .22s ease, padding-inline .22s ease;}
body.pa-page .svc:hover{background:var(--accent-tint); padding-inline:18px}
body.pa-page .svc-name{display:flex; flex-direction:column; gap:7px}
body.pa-page .svc:hover .svc-name .h3{color:var(--accent)}
body.pa-page .svc-tag{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
body.pa-page .svc p{font-size:.93rem; color:var(--ink-2); margin:0}
body.pa-page .svc .go{color:var(--accent); font-size:.85rem; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:6px; padding-top:4px}
@media (max-width:820px){

body.pa-page .svc{grid-template-columns:1fr; gap:12px; padding:24px 0}
}
/* ---------- Proceso ---------- */
body.pa-page .steps{display:grid}
body.pa-page .step{display:grid; grid-template-columns:62px 1fr; gap:var(--s3); align-items:start; padding:22px 0; border-bottom:1px solid var(--line)}
body.pa-page .band .step{border-color:var(--band-line)}
body.pa-page .step:last-child{border-bottom:0}
body.pa-page .step-n{font-family:var(--serif); font-size:1.45rem; color:var(--accent-soft); font-variant-numeric:tabular-nums; line-height:1.2}
body.pa-page .band .step-n{color:var(--band-accent)}
body.pa-page .step h3{margin-bottom:6px}
body.pa-page .step p{font-size:.93rem; margin:0; color:var(--ink-2)}
body.pa-page .band .step p{color:var(--on-band-2)}/* ---------- Alcance ---------- */
body.pa-page .scope{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line)}
@media (max-width:760px){

body.pa-page .scope{grid-template-columns:1fr}
}

body.pa-page .scope > div{padding:28px}
body.pa-page .scope > div + div{border-left:1px solid var(--line); background:var(--ground-alt)}
@media (max-width:760px){

body.pa-page .scope > div + div{border-left:0; border-top:1px solid var(--line)}
}

body.pa-page .scope ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px}
body.pa-page .scope li{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:.93rem; color:var(--ink-2); line-height:1.55}
body.pa-page .scope li::before{content:"\2014"; color:var(--accent); font-weight:600}
body.pa-page .scope .out li::before{content:"\00D7"; color:var(--ink-3)}/* ---------- Acordeon ---------- */
body.pa-page .acc{border-top:1px solid var(--line)}
body.pa-page .acc-item{border-bottom:1px solid var(--line)}
body.pa-page .acc-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  background:none; border:0; padding:22px 0; text-align:left; cursor:pointer;
  font-size:1rem; font-weight:600; color:var(--ink); line-height:1.45;}
body.pa-page .acc-q:hover{color:var(--accent)}
body.pa-page .acc-ico{flex:none; width:20px; height:20px; position:relative}
body.pa-page .acc-ico::before, body.pa-page .acc-ico::after{content:""; position:absolute; background:var(--accent); transition:transform .25s ease}
body.pa-page .acc-ico::before{left:0; right:0; top:9px; height:2px}
body.pa-page .acc-ico::after{top:0; bottom:0; left:9px; width:2px}
body.pa-page .acc-q[aria-expanded="true"] .acc-ico::after{transform:scaleY(0)}
body.pa-page .acc-a{overflow:hidden; max-height:0; transition:max-height .32s cubic-bezier(.3,.8,.3,1)}
body.pa-page .acc-a > div{padding:0 0 24px; max-width:72ch; color:var(--ink-2); font-size:.95rem}/* ---------- Entrada individual (guias y articulos) ---------- */
body.pa-page .post-progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:99; transition:width .1s linear}
body.pa-page .post-hero .display{font-size:clamp(1.9rem,3.6vw,2.9rem)}
body.pa-page .post-meta-row{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:var(--s4); font-size:.82rem; color:var(--on-band-2)}
body.pa-page .post-meta-row .pill{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--band-line);
  border-radius:999px; padding:6px 14px; color:var(--band-accent); font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;}
body.pa-page .post-index{position:sticky; top:104px; align-self:start}
body.pa-page .post-index ol{list-style:none; counter-reset:pi; margin:0; padding:0; display:grid; gap:1px}
body.pa-page .post-index li{counter-increment:pi}
body.pa-page .post-index a{display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:baseline;
  padding:9px 0; font-size:.88rem; color:var(--ink-2); border-bottom:1px solid var(--line-soft);
  border-left:2px solid transparent; padding-left:10px; transition:border-color .2s ease, color .2s ease;}
body.pa-page .post-index a::before{content:counter(pi) "."; color:var(--accent); font-family:var(--serif); font-size:.92rem}
body.pa-page .post-index a:hover{color:var(--accent)}
body.pa-page .post-index a.is-current{color:var(--accent); border-left-color:var(--accent); background:var(--accent-tint)}
body.pa-page .post-body{max-width:none}
body.pa-page .post-body .post-lede{font-size:1.1rem; line-height:1.65; color:var(--ink-2)}
body.pa-page .post-body h2{font-size:clamp(1.3rem,2.1vw,1.7rem); margin:var(--s6) 0 var(--s3); scroll-margin-top:104px;
  padding-top:var(--s3); border-top:1px solid var(--line);}
body.pa-page .post-body h2:first-of-type{margin-top:var(--s5)}
body.pa-page .post-body p{font-size:1.02rem; line-height:1.72; color:var(--ink-2); margin-bottom:1.05em}
body.pa-page .post-body ul{margin:0 0 1.2em; padding-left:0; list-style:none; display:grid; gap:11px}
body.pa-page .post-body ul li{display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:1rem; line-height:1.65; color:var(--ink-2);}
body.pa-page .post-body ul li::before{content:"—"; color:var(--accent); font-weight:600}
body.pa-page .ref{display:inline-block; font-size:.66em; font-weight:700; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-tint); border-radius:2px;
  padding:1px 5px; margin-left:4px; vertical-align:super; text-decoration:none;}
body.pa-page .ref:hover{background:var(--accent); color:#fff}
body.pa-page .post-faq{margin:var(--s4) 0 0; display:grid; gap:0; border-top:1px solid var(--line)}
body.pa-page .post-faq dt{font-weight:600; color:var(--ink); font-size:1.02rem; line-height:1.5;
  padding:var(--s3) 0 8px;}
body.pa-page .post-faq dd{margin:0 0 var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--line); color:var(--ink-2); font-size:.98rem; line-height:1.7}
body.pa-page .post-cta{margin-top:var(--s6); background:var(--band); color:var(--on-band);
  border-radius:var(--radius); padding:clamp(28px,3.6vw,44px);}
body.pa-page .post-cta h2{color:var(--on-band); font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.3vw,1.9rem); border:0; padding:0; margin-top:0}
body.pa-page .post-cta p{color:var(--on-band-2); font-size:1rem; max-width:60ch}
body.pa-page .post-cta .eyebrow{color:var(--band-accent)}
body.pa-page .post-cta .eyebrow::before{background:var(--band-accent)}
body.pa-page .post-cta .btn--primary{background:var(--band-accent); border-color:var(--band-accent); color:var(--band-ink)}
body.pa-page .post-cta .btn--primary:hover{background:#8CC6D3; border-color:#8CC6D3; color:var(--band-ink)}
body.pa-page .btn--wa{background:#1FA855; border-color:#1FA855; color:#fff}
body.pa-page .btn--wa:hover{background:#188F47; border-color:#188F47; color:#fff}
body.pa-page .post-cta-link{margin-top:var(--s3); font-size:.9rem}
body.pa-page .post-cta-link a{color:var(--band-accent); border-bottom:1px solid transparent}
body.pa-page .post-cta-link a:hover{border-bottom-color:var(--band-accent)}
body.pa-page .post-rel{margin-top:var(--s6)}
body.pa-page .post-rel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s2)}
body.pa-page .post-rel-card{display:flex; flex-direction:column; gap:8px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .2s ease, transform .2s ease;}
body.pa-page .post-rel-card:hover{border-color:var(--accent); transform:translateY(-2px)}
body.pa-page .prc-k{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); font-weight:700}
body.pa-page .prc-t{font-family:var(--serif); font-size:1.08rem; line-height:1.3; color:var(--ink)}
body.pa-page .post-rel-card:hover .prc-t{color:var(--accent)}
body.pa-page .prc-go{font-size:.83rem; color:var(--ink-3); margin-top:2px}
body.pa-page .post-src{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line)}
body.pa-page .post-src ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
body.pa-page .post-src li{display:grid; grid-template-columns:44px 1fr; gap:10px; font-size:.9rem; align-items:baseline}
body.pa-page .src-id{font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--accent-soft); background:var(--accent-tint); border-radius:2px; padding:3px 6px; text-align:center}
body.pa-page .post-src a{color:var(--ink-2); border-bottom:1px solid var(--line)}
body.pa-page .post-src a:hover{color:var(--accent); border-bottom-color:var(--accent)}
body.pa-page .src-nota{margin-top:var(--s3); font-size:.85rem; color:var(--ink-3); max-width:66ch}/* ---------- Marca del pie ---------- */
body.pa-page .pa-foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px}
body.pa-page .pa-foot-mark{width:auto; height:44px; flex:none}
body.pa-page .pa-foot-word{display:flex; flex-direction:column; line-height:1}
body.pa-page .pa-foot-word b{font-weight:500; font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-band)}
body.pa-page .pa-foot-word small{font-size:.53rem; letter-spacing:.28em; text-transform:uppercase; color:var(--on-band-2); font-weight:700; margin-top:5px}/* ---------- Documento legal ---------- */
body.pa-page .legal-meta{font-size:.85rem; color:var(--on-band-2); margin-top:var(--s3)}
body.pa-page .legal-index ol{list-style:none; counter-reset:li; margin:0; padding:0; display:grid; gap:2px}
body.pa-page .legal-index li{counter-increment:li}
body.pa-page .legal-index a{display:grid; grid-template-columns:26px 1fr; gap:8px; align-items:baseline;
  padding:9px 0; font-size:.9rem; color:var(--ink-2); border-bottom:1px solid var(--line-soft);}
body.pa-page .legal-index a::before{content:counter(li) "."; color:var(--accent); font-family:var(--serif); font-size:.95rem}
body.pa-page .legal-index a:hover{color:var(--accent)}/* Documento a dos columnas: el indice arranca en el mismo borde que el
   titular y que el formulario del final, y la columna de lectura mantiene
   una medida comoda en lugar de estirarse. */
body.pa-page .split--doc{grid-template-columns:232px minmax(0,700px);
  gap:clamp(32px,4vw,64px);
  justify-content:start;}
@media (max-width:900px){

body.pa-page .split--doc{grid-template-columns:1fr; justify-content:stretch}
}

body.pa-page .legal > section{padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s5); scroll-margin-top:104px}
body.pa-page .legal > section:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
body.pa-page .legal h2{font-size:clamp(1.35rem,2.1vw,1.75rem); margin-bottom:var(--s3)}
body.pa-page .legal p{font-size:.97rem; color:var(--ink-2); max-width:68ch}
body.pa-page .legal ul, body.pa-page .legal ol{margin:0 0 1em; padding-left:20px; display:grid; gap:9px; max-width:68ch}
body.pa-page .legal li{font-size:.95rem; color:var(--ink-2); line-height:1.6}
body.pa-page .legal b{color:var(--ink); font-weight:600}
body.pa-page .legal-data{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:var(--s4) 0 0}
body.pa-page .legal-data > div{background:var(--ground-alt); padding:15px 18px; display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:16px; align-items:baseline}
@media (max-width:640px){

body.pa-page .legal-data > div{grid-template-columns:1fr; gap:4px}
}

body.pa-page .legal-data dt{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
body.pa-page .legal-data dd{margin:0; font-size:.95rem; color:var(--ink)}/* ---------- Logotipo del pie ---------- */
body.pa-page .pa-foot-logo{display:block; width:186px; max-width:60%; height:auto; margin:0 0 18px}/* ---------- Cajas de categoria del blog ---------- */
body.pa-page .cat-boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:860px){

body.pa-page .cat-boxes{grid-template-columns:1fr}
}

body.pa-page .cat-box{display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  padding:18px 22px; transition:border-color .18s ease, background .18s ease;}
body.pa-page .cat-box:hover{border-color:var(--accent); background:var(--accent-tint)}
body.pa-page .cat-box[aria-pressed="true"]{border-color:var(--accent); background:var(--accent)}
body.pa-page .cat-box .cb-name{font-weight:600; font-size:1.02rem; color:var(--ink); line-height:1.3}
body.pa-page .cat-box .cb-desc{font-size:.84rem; color:var(--ink-3); line-height:1.45}
body.pa-page .cat-box[aria-pressed="true"] .cb-name{color:#fff}
body.pa-page .cat-box[aria-pressed="true"] .cb-desc{color:rgba(255,255,255,.8)}/* ---------- Equipos ---------- */
body.pa-page .filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s4)}
body.pa-page .chip{background:transparent; border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:.85rem; font-weight:600; cursor:pointer; color:var(--ink-2); transition:all .18s ease;}
body.pa-page .chip:hover{border-color:var(--accent); color:var(--accent)}
body.pa-page .chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
body.pa-page .cat{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; text-align:left; padding:0;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
body.pa-page .cat:hover{border-color:var(--accent-tint-2); transform:translateY(-3px); box-shadow:0 16px 36px -22px rgba(16,40,45,.5)}
body.pa-page .cat-img{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ground-alt)}
body.pa-page .cat-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
body.pa-page .cat:hover .cat-img img{transform:scale(1.05)}
body.pa-page .cat-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
body.pa-page .cat-body p{font-size:.89rem; color:var(--ink-2); margin:0; flex:1}
body.pa-page .caps{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
body.pa-page .cap{font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:2px; background:var(--accent-tint); color:var(--accent-soft)}
body.pa-page .cap--tbd{background:var(--tbd-bg); color:var(--tbd)}
body.pa-page .is-hidden{display:none!important}/* ---------- Formulario contextual ---------- */
body.pa-page .form-grid{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(36px,5vw,76px); align-items:start}
@media (max-width:940px){

body.pa-page .form-grid{grid-template-columns:1fr}
}

body.pa-page .form-panel{background:var(--band-2); border:1px solid var(--band-line); border-radius:var(--radius); padding:clamp(24px,3.4vw,38px)}
body.pa-page .field{display:grid; gap:7px; margin-bottom:17px}
body.pa-page .field label{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-band-2)}
body.pa-page .field label .opt{text-transform:none; letter-spacing:0; font-weight:400; color:var(--on-band-3)}
body.pa-page .field input, body.pa-page .field select, body.pa-page .field textarea{width:100%; background:var(--band-sunk); border:1px solid var(--band-line); border-radius:2px;
  padding:13px 14px; color:var(--on-band); font:inherit; font-size:.94rem;
  transition:border-color .18s ease, background-color .18s ease;}
body.pa-page .field input::placeholder, body.pa-page .field textarea::placeholder{color:#6E7775}
body.pa-page .field input:focus, body.pa-page .field select:focus, body.pa-page .field textarea:focus{border-color:var(--band-accent); background-color:var(--band-sunk-2); outline:none}
body.pa-page .field textarea{resize:vertical; min-height:100px}
body.pa-page .field-row{display:grid; grid-template-columns:1fr 1fr; gap:17px}
@media (max-width:560px){

body.pa-page .field-row{grid-template-columns:1fr}
}

body.pa-page .consent{display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; margin:20px 0 4px}
body.pa-page .consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--band-accent)}
body.pa-page .consent span{font-size:.82rem; color:var(--on-band-2); line-height:1.5}
body.pa-page .form-note{font-size:.8rem; color:var(--on-band-3); margin-top:15px}
body.pa-page .form-ok{display:none; background:#16231C; border:1px solid #2C4A3A; border-radius:var(--radius); padding:20px 22px; margin-bottom:20px}
body.pa-page .form-ok.is-on{display:block}
body.pa-page .form-ok strong{color:#8FD3AF; display:block; margin-bottom:5px; font-size:.98rem}
body.pa-page .form-ok p{color:#9EB8AB; font-size:.88rem; margin:0}
body.pa-page .channels{display:grid; gap:1px; background:var(--band-line); border:1px solid var(--band-line); margin-top:var(--s4)}
body.pa-page .channels a{display:block; background:var(--band); padding:16px 20px; color:var(--on-band)}
body.pa-page .channels a:hover{background:var(--band-2); color:var(--band-accent)}
body.pa-page .channels .ch-l{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-band-2); font-weight:700; display:block; margin-bottom:4px}
body.pa-page .channels .ch-v{font-size:.98rem; font-weight:600}/* ---------- Orientador ---------- */
body.pa-page .guide{background:var(--band-2); border:1px solid var(--band-line); border-radius:var(--radius); overflow:hidden}
body.pa-page .guide-top{display:flex; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--band-line)}
body.pa-page .meter{display:flex; align-items:flex-end; gap:3px; height:24px; flex:none}
body.pa-page .meter i{width:3px; height:7px; background:var(--band-line); border-radius:1px; transition:background .3s ease, height .3s ease}
body.pa-page .guide-step{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--on-band-2); font-variant-numeric:tabular-nums}
body.pa-page .guide-body{padding:clamp(24px,3vw,34px)}
body.pa-page .guide-q{font-family:var(--serif); font-size:clamp(1.35rem,2.3vw,1.8rem); color:var(--on-band); line-height:1.2; margin-bottom:var(--s3); font-weight:400}
body.pa-page .opts{display:grid; gap:8px}
body.pa-page .opt-btn{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--band-sunk); border:1px solid var(--band-line); border-radius:2px; padding:14px 18px;
  color:var(--on-band); font-size:.95rem; transition:border-color .18s ease, background .18s ease;}
body.pa-page .opt-btn:hover{border-color:var(--band-accent); background:var(--band-sunk-2)}
body.pa-page .opt-btn .k{flex:none; width:25px; height:25px; border:1px solid var(--band-line); border-radius:2px; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:var(--on-band-2)}
body.pa-page .opt-btn:hover .k{border-color:var(--band-accent); color:var(--band-accent)}
body.pa-page .guide-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:var(--s3)}
body.pa-page .guide-back{background:none; border:0; color:var(--on-band-2); font-size:.85rem; cursor:pointer; padding:6px 0}
body.pa-page .guide-back:hover{color:var(--band-accent)}
body.pa-page .guide-res{display:none}
body.pa-page .guide-res.is-on{display:block}
body.pa-page .res-card{background:var(--band-sunk); border:1px solid var(--band-line); border-left:2px solid var(--band-accent); padding:24px; border-radius:2px}
body.pa-page .res-card .rl{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-accent); font-weight:700}
body.pa-page .res-card h3{margin:10px 0 8px; color:var(--on-band); font-size:1.2rem}
body.pa-page .res-card p{color:var(--on-band-2); font-size:.93rem}
body.pa-page .res-next{margin-top:18px; padding-top:18px; border-top:1px solid var(--band-line)}
body.pa-page .res-next .h4{color:var(--on-band); display:block; margin-bottom:9px}
body.pa-page .res-next ul{margin:0; padding-left:18px; color:var(--on-band-2); font-size:.89rem; display:grid; gap:5px}/* ---------- Notas ---------- */
body.pa-page .note{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--tbd-bg); border:1px solid color-mix(in srgb, var(--tbd) 28%, transparent);
  border-radius:var(--radius); padding:17px 20px; font-size:.89rem; color:var(--ink-2); line-height:1.6;}
body.pa-page .note b{color:var(--tbd)}
body.pa-page .band .note{background:#251F12; border-color:#4A3E24; color:var(--on-band-2)}
body.pa-page .post-img, body.pa-page .cat-img{display:block}
body.pa-page .post-img .ph-media, body.pa-page .cat-img .ph-media{width:100%; height:100%; aspect-ratio:auto; padding:20px}
body.pa-page .ph-media{aspect-ratio:4/3; border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--ground-alt); display:grid; place-items:center; text-align:center; padding:26px;}
body.pa-page .ph-media span{font-size:.82rem; color:var(--ink-3); max-width:32ch; line-height:1.55}
body.pa-page .band .ph-media{border-color:var(--band-line); background:var(--band-2)}
body.pa-page .band .ph-media span{color:var(--on-band-2)}/* ---------- Articulos ---------- */
body.pa-page .post{display:flex; flex-direction:column; gap:13px; text-align:left; background:none; border:0; padding:0; cursor:pointer}
body.pa-page .post-img{aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--ground-alt)}
body.pa-page .post-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
body.pa-page .post:hover .post-img img{transform:scale(1.04)}
body.pa-page .post-meta{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
body.pa-page .post h3{font-family:var(--serif); font-weight:400; font-size:1.28rem; line-height:1.25; letter-spacing:-.01em}
body.pa-page .post:hover h3{color:var(--accent)}
body.pa-page .post p{font-size:.9rem; color:var(--ink-2); margin:0}
body.pa-page .post-fecha{font-size:.78rem; color:var(--ink-3); margin-top:2px}
body.pa-page a.post{color:inherit}
body.pa-page a.post:hover{color:inherit}/* ---------- Franja de datos ---------- */
body.pa-page .strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:820px){

body.pa-page .strip{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:460px){

body.pa-page .strip{grid-template-columns:1fr}
}

body.pa-page .strip > div{background:var(--ground); padding:24px}
body.pa-page .band .strip{background:var(--band-line); border-color:var(--band-line)}
body.pa-page .band .strip > div{background:var(--band)}
body.pa-page .strip dt{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
body.pa-page .band .strip dt{color:var(--on-band-2)}
body.pa-page .strip dd{margin:9px 0 0; font-family:var(--serif); font-size:1.4rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.25}
body.pa-page .band .strip dd{color:var(--on-band)}
body.pa-page .strip .sn{font-size:.8rem; color:var(--ink-3); margin-top:5px; font-family:var(--sans)}
body.pa-page .band .strip .sn{color:var(--on-band-2)}/* ---------- Onda divisoria ---------- *//* ---------- Footer ---------- */
@media (max-width:900px){

}

@media (max-width:560px){

}
/* Los enlaces del pie se miden solos: la caja se ajusta al texto para que el
   subrayado de onda no se estire, y el correo no rompe el renglon a la mitad. *//* La misma onda de audio del menu de cabecera, en el azul claro de la banda */
body.pa-page .pa-sep{color:var(--band-line); padding:0 10px; user-select:none}/* ---------- Flotantes ---------- */
@media (max-width:760px){

}

body.pa-page .mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; gap:10px; padding:10px 14px; background:color-mix(in srgb, var(--ground) 95%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
body.pa-page .mobile-cta .btn{flex:1; padding:12px 10px; font-size:.85rem}
@media (max-width:760px){

body.pa-page .mobile-cta{display:flex}
}
/* ---------- Panel de notas ---------- */
@media (max-width:760px){

}
/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: reduce){

}
/* ---------- Vistas ---------- */
body.pa-page .page-head{background-color:var(--band); color:var(--on-band); padding-block:clamp(46px,6.5vw,84px)}
body.pa-page .page-head .display{font-size:clamp(2rem,4.2vw,3.2rem); color:#fff}
body.pa-page .page-head .lede{color:#CFCABF}
body.pa-page .crumb{font-size:.79rem; color:var(--on-band-2); margin-bottom:var(--s3)}
body.pa-page .crumb button{background:none; border:0; color:inherit; cursor:pointer; padding:0; font-size:inherit}
body.pa-page .crumb button:hover{color:var(--band-accent)}

/* ============================================================
   Ajustes de integracion con Neve y Elementor
   ============================================================ */

/* Neve pinta su propio ancho y relleno; los contenedores de Elementor
   que llevan la clase .sec ya traen el suyo. */
body.pa-page .elementor-section,
body.pa-page .e-con-full{max-width:none}
body.pa-page .e-con-full > .e-con-inner{padding:0}

/* Xpro Theme Builder impone la plantilla de pagina de Neve, que centra el
   contenido en 1170px. El nuevo diseno va a sangre y cada seccion controla
   su propio ancho con .wrap, asi que se libera el contenedor del tema. */
body.pa-page .neve-main > .container,
body.pa-page .container.single-page-container,
body.pa-page .container.single-post-container{max-width:none; padding-left:0; padding-right:0}
body.pa-page .neve-main > .container > .row{margin-left:0; margin-right:0}
body.pa-page .nv-single-page-wrap,
body.pa-page .nv-single-post-wrap,
body.pa-page .nv-content-wrap,
body.pa-page .nv-single-page-wrap.col,
body.pa-page .nv-single-post-wrap.col{padding:0; margin:0; max-width:none; flex-basis:100%}
/* Neve reserva el hueco de la barra lateral aunque no exista */
body.pa-page .nv-sidebar-wrap{display:none}
body.pa-page .entry-content > .elementor{margin:0}

/* Cabecera de Neve en marfil, con la misma retorica del prototipo */
body.pa-page .header,
body.pa-page .nv-navbar,
body.pa-page .header-main{background:transparent}

/* La cabecera acompana al visitante en las tres medidas.
   Ojo: el pegado va en el <header> exterior, no en .site-header. El padre de
   .site-header mide exactamente lo mismo que ella, asi que un sticky ahi no
   tiene recorrido y se va con el scroll aunque el navegador lo acepte.
   Y al fijarla hace falta darle fondo propio, porque hasta ahora el marfil lo
   ponia el cuerpo de la pagina por debajo. */
body.pa-page .wrapper > header.header{position:sticky; top:0; z-index:60}
body.pa-page .site-header{
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  transition:background-color .25s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.pa-page .site-header{background:var(--ground)}
}
body.pa-page .site-header.is-stuck{background:color-mix(in srgb, var(--ground) 97%, transparent)}
/* el panel desplegable tiene que quedar por encima de lo que pase por debajo */
body.pa-page .site-header .nav-ul .sub-menu{z-index:61}
/* el cajon del menu movil, por encima de la cabecera fija */
body.pa-page .header-menu-sidebar,
body.pa-page .header-menu-sidebar-bg{z-index:9999}
/* Neve mete un div.wrap entre el li y el enlace: los selectores lo contemplan */
body.pa-page .nav-ul > li > .wrap > a{
  font-family:var(--sans); font-weight:500; font-size:.92rem; color:var(--ink);
}
body.pa-page .nav-ul > li > .wrap > a:hover,
body.pa-page .nav-ul > li.current-menu-item > .wrap > a,
body.pa-page .nav-ul > li.current-menu-ancestor > .wrap > a,
body.pa-page .nav-ul > li.current_page_parent > .wrap > a,
body.pa-page .nav-ul > li.nv-active > .wrap > a,
body.pa-page .nav-ul .sub-menu li.current-menu-item > .wrap > a{color:var(--accent)}
body.pa-page .header--row{border-bottom:1px solid transparent}
body.pa-page .is-stuck .header--row{border-bottom-color:var(--line-soft)}

/* Los enlaces ocupan toda la altura de su casilla y centran el texto, de modo
   que quedan a la misma linea que el boton de la derecha y que el logotipo. */
body.pa-page .nav-ul > li{display:flex; align-items:center}
body.pa-page .nav-ul > li > .wrap{display:flex; align-items:center; align-self:stretch}
body.pa-page .nav-ul > li > .wrap > a{
  display:flex; align-items:center; align-self:stretch;
  padding-top:0; padding-bottom:0;
}

/* Lockup de marca: isotipo + nombre, como en el prototipo */
body.pa-page .site-logo .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
body.pa-page .title-with-logo{display:flex; align-items:center; gap:12px}
body.pa-page .neve-site-logo{height:38px; width:auto; max-width:none}
body.pa-page .site-logo .brand .site-title,
body.pa-page .site-logo .brand .site-title a{
  font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); margin:0; line-height:1;
}
body.pa-page .site-logo .brand .site-description{
  font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:5px 0 0; line-height:1;
}

/* Neve envuelve cada enlace del menu en un div.wrap, que es tambien el nombre
   del contenedor del diseno. Aqui se neutraliza esa colision. */
body.pa-page .site-header .wrap,
body.pa-page .header .wrap,
body.pa-page .nav-ul .wrap,
body.pa-page .header-menu-sidebar .wrap{
  width:auto; max-width:none; margin-inline:0;
}

/* Subrayado de onda al pasar el cursor, tomado del trazo del logotipo.
   Solo en los elementos de primer nivel; la llamada a la accion queda fuera. */
body.pa-page .nav-ul > li:not(.pa-nav-cta) > .wrap > a{position:relative}
body.pa-page .nav-ul > li:not(.pa-nav-cta) > .wrap > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:7px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3h6l3-2.6 3 5 3-4.4 3 3.8 3-5.2 3 5.8 3-3.6 3 2.4 3-1.8h24' fill='none' stroke='%23195563' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:0; transform:scaleX(.35); transform-origin:left;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
body.pa-page .nav-ul > li:not(.pa-nav-cta) > .wrap > a:hover::after,
body.pa-page .nav-ul > li.current-menu-item > .wrap > a::after,
body.pa-page .nav-ul > li.current-menu-ancestor > .wrap > a::after{opacity:.9; transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  body.pa-page .nav-ul > li:not(.pa-nav-cta) > .wrap > a::after{transition:none}
}

/* Llamada a la accion del menu: boton solido con contorno, como en el resto
   de sitios del grupo. No es una pagina: lleva al formulario de cada pagina. */
body.pa-page .nav-ul li.pa-nav-cta{margin-left:10px}
body.pa-page .nav-ul li.pa-nav-cta .wrap{margin:0}
body.pa-page .nav-ul li.pa-nav-cta a{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff !important;
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:12px 22px !important; font-weight:600; font-size:.88rem;
  white-space:nowrap; line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
body.pa-page .nav-ul li.pa-nav-cta a:hover{
  background:var(--accent-hover); border-color:var(--accent-hover); color:#fff !important;
}
body.pa-page .nav-ul li.pa-nav-cta a::after{display:none !important}
body.pa-page .nav-ul li.pa-nav-cta a .menu-item-title-wrap{display:inline}

/* El ancla vive bajo una cabecera fija: se deja aire al saltar */
body.pa-page #contacto{scroll-margin-top:96px}
body.pa-page .post-body h2,
body.pa-page .legal > section{scroll-margin-top:96px}

/* Submenu de Soluciones: misma piel que la cabecera, con la onda como selector */
body.pa-page .nav-ul .sub-menu{
  background:var(--ground); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 20px 46px -20px rgba(16,30,32,.30); padding:10px 6px; min-width:300px;
}
body.pa-page .nav-ul .sub-menu li > .wrap > a{
  position:relative; display:inline-block;
  font-family:var(--sans); font-weight:500; font-size:.89rem !important;
  color:var(--ink); padding:11px 16px !important; background:none;
}
body.pa-page .nav-ul .sub-menu li > .wrap > a:hover,
body.pa-page .nav-ul .sub-menu li.current-menu-item > .wrap > a{
  color:var(--accent); background:none;
}
body.pa-page .nav-ul .sub-menu li > .wrap > a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:7px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3h6l3-2.6 3 5 3-4.4 3 3.8 3-5.2 3 5.8 3-3.6 3 2.4 3-1.8h24' fill='none' stroke='%23195563' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:0; transform:scaleX(.35); transform-origin:left;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
body.pa-page .nav-ul .sub-menu li > .wrap > a:hover::after,
body.pa-page .nav-ul .sub-menu li.current-menu-item > .wrap > a::after{opacity:.9; transform:scaleX(1)}
/* separador fino bajo el ultimo elemento de la cabecera, para que el panel
   se lea como una prolongacion de ella */
body.pa-page .nav-ul > li.menu-item-has-children > .sub-menu{margin-top:2px}

/* Barra inferior del pie: copyright, credito y aviso de privacidad */
body.pa-page .footer-bottom{border-top:1px solid var(--band-line)}
body.pa-page .footer-bottom .component-wrap,
body.pa-page .footer-bottom .component-wrap div{
  font-size:.82rem; color:var(--on-band-3); line-height:1.7;
}
body.pa-page .footer-bottom a{color:var(--on-band-3); text-decoration:none}
body.pa-page .footer-bottom a:hover{color:var(--band-accent)}
body.pa-page .pa-sep{color:var(--band-line); padding:0 10px; user-select:none}

/* Pie de Neve sobre la banda azul */
body.pa-page .site-footer,
body.pa-page .footer-content-wrap{background:var(--band); color:var(--on-band-2)}
body.pa-page .site-footer .widget-title{
  color:var(--on-band); font-family:var(--sans); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
/* Neve reparte su tipografia de widgets (18 px) por herencia desde .item--inner,
   y a ese tamano el correo no cabe en su columna. Aqui se fija la medida del
   prototipo para toda la caja del widget, no solo para el enlace. */
body.pa-page .site-footer .widget-area,
body.pa-page .site-footer .textwidget{
  font-family:var(--sans); font-size:.91rem; line-height:1.6; color:var(--on-band-2);
}
body.pa-page .site-footer .widget-area ul{display:grid; gap:11px; margin:0; padding:0; list-style:none}
body.pa-page .site-footer .widget-area li{margin:0}
/* El enlace se mide solo, para que la onda no se estire hasta el ancho de la
   columna, y el correo parte antes que desbordar. */
body.pa-page .site-footer .widget-area a,
body.pa-page .footer-bottom a{
  position:relative; display:inline-block; max-width:100%;
  font-family:var(--sans); line-height:1.5; text-decoration:none;
  color:var(--on-band-2); transition:color .18s ease;
}
body.pa-page .site-footer .widget-area a{font-size:.91rem}
body.pa-page .footer-bottom a{font-size:inherit; color:var(--on-band-3)}
body.pa-page .site-footer .widget-area a:hover,
body.pa-page .footer-bottom a:hover{color:var(--band-accent)}
body.pa-page .site-footer a[href^="mailto"]{overflow-wrap:break-word}
/* La misma onda de audio del menu de cabecera, en el azul claro de la banda */
body.pa-page .site-footer .widget-area a::after,
body.pa-page .footer-bottom a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3h6l3-2.6 3 5 3-4.4 3 3.8 3-5.2 3 5.8 3-3.6 3 2.4 3-1.8h24' fill='none' stroke='%235EAABB' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:0; transform:scaleX(.3); transform-origin:left;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
body.pa-page .site-footer .widget-area a:hover::after,
body.pa-page .footer-bottom a:hover::after{opacity:.9; transform:scaleX(1)}
/* El logotipo del pie no lleva onda */
body.pa-page .site-footer .pa-foot-brand a::after{content:none}

/* ============================================================
   CABECERA DE PAGINA Y BLOQUE DE CONTACTO CON WIDGETS NATIVOS
   Mismo aspecto que el marcado del prototipo, montado con widgets de
   Elementor para que el cliente edite arrastrando y no en HTML.
   ============================================================ */

/* ---------- Puente tipografico ----------
   Elementor pinta sus widgets con la tipografia global del kit. Fijamos aqui
   las dos familias del sitio para que cualquier widget que se anada mas tarde
   desde el editor caiga ya en su sitio, sin tener que tocar ajustes. */
body.pa-page .elementor-widget-heading .elementor-heading-title{font-family:var(--serif)}
body.pa-page .elementor-widget-text-editor,
body.pa-page .elementor-widget-icon-list,
body.pa-page .elementor-widget-image .widget-image-caption,
body.pa-page .elementor-widget-button .elementor-button,
body.pa-page .elementor-widget-nested-accordion{font-family:var(--sans)}
/* Los rotulos cortos van en palo seco aunque sean widgets de titular */
body.pa-page .pa-eyebrow .elementor-heading-title,
body.pa-page .pa-ch-l .elementor-heading-title,
body.pa-page .pa-ch-v .elementor-heading-title,
body.pa-page .pa-step-n .elementor-heading-title,
body.pa-page .pa-h4 .elementor-heading-title{font-family:var(--sans)}

/* ---------- Migas ---------- */
body.pa-page .pa-crumb{font-size:.79rem; color:var(--on-band-2); line-height:1.5}
body.pa-page .pa-crumb p{margin:0; max-width:none; color:inherit; font-size:inherit}
body.pa-page .pa-crumb a{color:inherit}
body.pa-page .pa-crumb a:hover{color:var(--band-accent)}

/* ---------- Titular grande de cabecera ---------- */
body.pa-page .pa-display .elementor-heading-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.04; letter-spacing:-.022em; text-transform:none;
  font-variation-settings:"opsz" 72; color:#fff; margin:0;
}
body.pa-page .hero .pa-display .elementor-heading-title{font-size:clamp(2.5rem,5.6vw,4.2rem)}

/* ---------- Entradilla ---------- */
body.pa-page .pa-lede{margin-top:var(--s3)}
body.pa-page .pa-lede p{
  font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.62;
  color:var(--ink-2); max-width:62ch; margin:0 0 1em;
}
body.pa-page .pa-lede p:last-child{margin-bottom:0}
body.pa-page .band .pa-lede p,
body.pa-page .page-head .pa-lede p{color:#CFCABF}

/* ---------- Fila de datos bajo el titular ---------- */
body.pa-page .pa-meta{margin-top:var(--s4)}
body.pa-page .pa-meta p{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:.82rem; color:var(--on-band-2); margin:0; max-width:none;
}
body.pa-page .pa-meta .pill{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--band-line);
  border-radius:999px; padding:6px 14px; color:var(--band-accent); font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Pie de datos del aviso legal ---------- */
body.pa-page .pa-legalmeta{margin-top:var(--s3)}
body.pa-page .pa-legalmeta p{font-size:.85rem; color:var(--on-band-2); margin:0; max-width:none}

/* ---------- Botones sobre widget Boton ---------- */
body.pa-page .pa-btn-row{margin-top:var(--s4)}
body.pa-page .pa-btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--radius); border:1px solid transparent;
  font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1;
  text-transform:none; letter-spacing:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
body.pa-page .pa-btn .elementor-button:active{transform:translateY(1px)}
body.pa-page .pa-btn--primary .elementor-button{background:var(--accent); border-color:var(--accent); color:#fff}
body.pa-page .pa-btn--primary .elementor-button:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff}
body.pa-page .pa-btn--ghost .elementor-button{background:transparent; border-color:var(--line); color:var(--ink)}
body.pa-page .pa-btn--ghost .elementor-button:hover{border-color:var(--accent); color:var(--accent)}
/* sobre la banda oscura cambian los dos */
body.pa-page .band .pa-btn--primary .elementor-button{background:var(--band-accent); border-color:var(--band-accent); color:var(--band-ink)}
body.pa-page .band .pa-btn--primary .elementor-button:hover{background:#8CC6D3; border-color:#8CC6D3; color:var(--band-ink)}
body.pa-page .band .pa-btn--ghost .elementor-button{border-color:var(--band-line); color:var(--on-band)}
body.pa-page .band .pa-btn--ghost .elementor-button:hover{border-color:var(--band-accent); color:var(--band-accent)}

/* ---------- Bloque de contacto ---------- */
@media (max-width:940px){
  body.pa-page .pa-formgrid-inner{flex-direction:column}
  body.pa-page .pa-formgrid-inner > .e-con{--width:100%; width:100%}
}
body.pa-page .pa-channels{
  display:grid; gap:1px; background:var(--band-line);
  border:1px solid var(--band-line); margin-top:var(--s4);
}
body.pa-page .pa-channel{
  display:block; background:var(--band); padding:16px 20px; color:var(--on-band);
  transition:background .18s ease, color .18s ease;
}
body.pa-page .pa-channel:hover{background:var(--band-2)}
body.pa-page .pa-channel:hover .pa-ch-v .elementor-heading-title{color:var(--band-accent)}
body.pa-page .pa-ch-l .elementor-heading-title{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-band-2); font-weight:700; margin:0 0 4px;
}
body.pa-page .pa-ch-v .elementor-heading-title{
  font-family:var(--sans); font-size:.98rem; font-weight:600; color:var(--on-band);
  text-transform:none; letter-spacing:0; margin:0; transition:color .18s ease;
}

/* ---------- Fotografia de proyecto con pie ---------- */
body.pa-page .pa-foto{margin:0; display:flex; flex-direction:column; gap:12px}
body.pa-page .pa-foto .post-img{
  display:block; aspect-ratio:3/2; overflow:hidden;
  border-radius:var(--radius); background:var(--ground-alt);
}
body.pa-page .band .pa-foto .post-img{background:var(--band-2)}
body.pa-page .pa-foto img{width:100%; height:100%; object-fit:cover; display:block}
body.pa-page .pa-foto figcaption{font-size:.85rem; line-height:1.6; color:var(--ink-3)}
body.pa-page .band .pa-foto figcaption{color:var(--on-band-2)}

/* Capa de color de las secciones con fotografia.
   En escritorio el degradado va en horizontal: solido donde esta el texto y
   abriendose a la derecha para que se vea la foto. En pantallas estrechas el
   texto ocupa todo el ancho, asi que ese mismo degradado dejaria media frase
   sobre la parte clara de la imagen; ahi la capa pasa a vertical y casi solida.
   Lleva !important porque Elementor escribe su regla con la misma
   especificidad y despues que esta hoja. */
@media (max-width:900px){
  body.pa-page .page-head::before,
  body.pa-page .sec.band::before{
    background-image:linear-gradient(180deg, rgba(22,40,45,.94) 0%, rgba(22,40,45,.88) 100%) !important;
  }
}

/* WPForms pinta con variables propias y sus selectores ganan a los nuestros.
   En vez de pelear con ellos, se le pasan los colores de la paleta: asi el
   formulario queda en consonancia y sigue asi cuando el plugin se actualice. */
body.pa-page .form-panel .wpforms-container{
  --wpforms-button-background-color:var(--band-accent);
  --wpforms-button-border-color:var(--band-accent);
  --wpforms-button-text-color:var(--band-ink);
  --wpforms-button-border-radius:var(--radius);
  --wpforms-button-size-font-size:15px;
  --wpforms-button-size-height:48px;
  --wpforms-field-background-color:var(--band-sunk);
  --wpforms-field-border-color:var(--band-line);
  --wpforms-field-border-radius:2px;
  --wpforms-field-text-color:var(--on-band);
  --wpforms-field-menu-color:var(--band-sunk);
  --wpforms-label-color:var(--on-band-2);
  --wpforms-label-sublabel-color:var(--on-band-3);
  --wpforms-page-break-color:var(--band-accent);
}
body.pa-page .form-panel .wpforms-container button[type=submit]:hover,
body.pa-page .form-panel .wpforms-container input[type=submit]:hover{
  --wpforms-button-background-color:#8CC6D3;
  --wpforms-button-border-color:#8CC6D3;
}

/* El panel deja pasar un poco la fotografia del fondo sin restar legibilidad;
   los campos siguen opacos. */
body.pa-page .form-panel{
  background:color-mix(in srgb, var(--band-2) 88%, transparent);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.pa-page .form-panel{background:var(--band-2)}
}

/* WPForms con la piel del prototipo dentro de la banda de contacto */
body.pa-page .form-panel .wpforms-container{margin:0}
body.pa-page .form-panel .wpforms-form .wpforms-field{padding:0 0 17px}
body.pa-page .form-panel .wpforms-form .wpforms-field-label{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-band-2); margin-bottom:7px;
}
body.pa-page .form-panel .wpforms-form .wpforms-field-sublabel,
body.pa-page .form-panel .wpforms-form .wpforms-field-description{
  color:var(--on-band-3); font-size:.8rem;
}
body.pa-page .form-panel .wpforms-form input[type=text],
body.pa-page .form-panel .wpforms-form input[type=email],
body.pa-page .form-panel .wpforms-form input[type=tel],
body.pa-page .form-panel .wpforms-form input[type=url],
body.pa-page .form-panel .wpforms-form select,
body.pa-page .form-panel .wpforms-form textarea{
  width:100%; background:var(--band-sunk); border:1px solid var(--band-line); border-radius:2px;
  padding:13px 14px; color:var(--on-band); font-family:var(--sans); font-size:.94rem;
  box-shadow:none; max-width:none;
}
body.pa-page .form-panel .wpforms-form input:focus,
body.pa-page .form-panel .wpforms-form select:focus,
body.pa-page .form-panel .wpforms-form textarea:focus{
  border-color:var(--band-accent); background-color:var(--band-sunk-2); outline:none;
}
body.pa-page .form-panel .wpforms-form textarea{min-height:100px; resize:vertical}
body.pa-page .form-panel .wpforms-form .wpforms-field-checkbox label,
body.pa-page .form-panel .wpforms-form .wpforms-field-radio label{
  color:var(--on-band-2); font-size:.83rem; text-transform:none; letter-spacing:0; font-weight:400;
}
body.pa-page .form-panel .wpforms-form button[type=submit]{
  width:100%; margin-top:6px; background:var(--band-accent); border:1px solid var(--band-accent);
  color:var(--band-ink); font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:var(--radius); cursor:pointer;
}
body.pa-page .form-panel .wpforms-form button[type=submit]:hover{background:#8CC6D3; border-color:#8CC6D3}
body.pa-page .form-panel .wpforms-confirmation-container-full{
  background:#16231C; border:1px solid #2C4A3A; border-radius:var(--radius);
  padding:20px 22px; color:#9EB8AB;
}
body.pa-page .form-panel .wpforms-confirmation-container-full p{color:#9EB8AB; margin:0}
body.pa-page .form-panel .wpforms-error{color:#E39685; font-size:.82rem}
body.pa-page .form-panel .wpforms-form input.wpforms-error,
body.pa-page .form-panel .wpforms-form textarea.wpforms-error,
body.pa-page .form-panel .wpforms-form select.wpforms-error{border-color:#C4705E}

/* Animaciones de entrada: la clase js-reveal vive en <body> */
body.pa-page.js-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
body.pa-page.js-reveal .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  body.pa-page.js-reveal .reveal{opacity:1; transform:none}
}

/* El sitio publico se fija en la paleta marfil: no sigue el modo oscuro
   del visitante, para que la marca se vea siempre igual. */
/* Esta hoja solo se carga en las paginas del nuevo diseno, asi que fijar
   el esquema en la raiz es seguro y evita el oscurecido automatico del
   navegador (Chrome en Android lo aplica por defecto). */
html{color-scheme:only light}
body.pa-page{color-scheme:only light; background:var(--ground)}

/* Neve y el kit de Elementor fuerzan versalitas en botones y titulares.
   Los rotulos que si van en versalitas (.eyebrow, .cap, .post-meta, .svc-tag,
   .tbd-tag, los dt de las franjas) las declaran ellos mismos. */
body.pa-page button,
body.pa-page .btn,
body.pa-page .chip,
body.pa-page .cat-box,
body.pa-page .cb-name,
body.pa-page .cb-desc,
body.pa-page .acc-q,
body.pa-page .opt-btn,
body.pa-page .form-panel .wpforms-form button[type=submit]{text-transform:none}

/* Neve y el kit de Elementor fuerzan versalitas en los titulares */
body.pa-page h1, body.pa-page h2, body.pa-page h3, body.pa-page h4,
body.pa-page .display, body.pa-page .h2, body.pa-page .h3, body.pa-page .h4,
body.pa-page .guide-q, body.pa-page .res-card h3{text-transform:none}

/* Neve aplica su propio interlineado y color a los titulares */
body.pa-page .display{line-height:1.04}
body.pa-page h2, body.pa-page .h2{line-height:1.12}
body.pa-page .band h1, body.pa-page .band h2, body.pa-page .band h3{color:var(--on-band)}
body.pa-page .hero .display, body.pa-page .page-head .display{color:#fff}

/* Elementor envuelve cada seccion en un contenedor flex */
body.pa-page .e-con.sec, body.pa-page .e-con.hero, body.pa-page .e-con.page-head{
  display:block; --content-width:100%;
}
body.pa-page .e-con > .elementor-widget-html{width:100%}
body.pa-page .elementor-widget-html > .elementor-widget-container{display:contents}

/* Barra fija de conversion en movil */
body.pa-page .pa-mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; gap:10px; padding:10px 14px;
  background:color-mix(in srgb, var(--ground) 95%, transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
body.pa-page .pa-mobile-cta .btn{flex:1; padding:12px 10px; font-size:.85rem}
@media (max-width:760px){ body.pa-page .pa-mobile-cta{display:flex} }

/* ============================================================
   PUENTE PARA WIDGETS NATIVOS DE ELEMENTOR
   Las secciones que el cliente va a editar a mano dejan de ser un widget HTML
   y pasan a widgets nativos. Aqui se viste el marcado que genera Elementor con
   el mismo aspecto que tenia el marcado del prototipo. Ninguna regla toca los
   widgets de Elementor fuera de estas clases, para no ensuciar el editor.
   ============================================================ */

/* ---------- Fila de dos columnas hecha con contenedores nativos ----------
   El ancho de cada columna se ajusta desde el panel de Elementor; aqui solo se
   define el apilado en pantallas estrechas, que es el mismo corte que usa el
   resto del sitio (900 px) y no el de Elementor. */
@media (max-width:900px){
  body.pa-page .pa-split > .e-con-inner{flex-direction:column}
  body.pa-page .pa-split > .e-con-inner > .e-con{--width:100%; width:100%}
}

/* ---------- Titulillo sobre widget Titulo ---------- */
body.pa-page .pa-eyebrow .elementor-heading-title{
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-soft); margin:0;
}
body.pa-page .pa-eyebrow .elementor-heading-title::before{
  content:""; width:26px; height:2px; background:var(--accent-soft); flex:none;
}
body.pa-page .pa-eyebrow{margin-bottom:var(--s3)}
body.pa-page .band .pa-eyebrow .elementor-heading-title{color:var(--band-accent)}
body.pa-page .band .pa-eyebrow .elementor-heading-title::before{background:var(--band-accent)}

/* ---------- Titular sobre widget Titulo ---------- */
body.pa-page .pa-h2 .elementor-heading-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.85rem,3.4vw,2.75rem);
  line-height:1.12; letter-spacing:-.018em; text-transform:none; color:var(--ink);
  font-variation-settings:"opsz" 48; margin:0;
}
body.pa-page .band .pa-h2 .elementor-heading-title{color:var(--on-band)}

/* ---------- Parrafo sobre widget Editor de texto ---------- */
body.pa-page .pa-texto{color:var(--ink-2)}
body.pa-page .pa-texto p{margin:0 0 1em; max-width:68ch}
body.pa-page .pa-texto p:last-child{margin-bottom:0}

/* ---------- Tarjetas de categoria con widgets nativos ---------- */
body.pa-page .pa-cat{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; text-align:left;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.pa-page .pa-cat:hover{
  border-color:var(--accent-tint-2); transform:translateY(-3px);
  box-shadow:0 16px 36px -22px rgba(16,40,45,.5);
}
body.pa-page .pa-cat-img,
body.pa-page .pa-proy-img{width:100%}
body.pa-page .pa-cat-img .elementor-widget-container,
body.pa-page .pa-cat-img figure,
body.pa-page .pa-proy-img .elementor-widget-container,
body.pa-page .pa-proy-img figure{margin:0; padding:0; overflow:hidden}
body.pa-page .pa-cat-img img{
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  background:var(--ground-alt); transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
body.pa-page .pa-cat:hover .pa-cat-img img{transform:scale(1.05)}
body.pa-page .pa-cat-titulo .elementor-heading-title{
  font-family:var(--sans); font-weight:600; font-size:1.18rem; line-height:1.35;
  letter-spacing:-.005em; text-transform:none; color:var(--ink); margin:0;
}
body.pa-page .pa-cat-texto p,
body.pa-page .pa-proy-texto p{margin:0; max-width:none; color:var(--ink-2)}
body.pa-page .pa-cat-texto p{font-size:.89rem}

/* ---------- Tarjetas de proyecto con widgets nativos ---------- */
body.pa-page .pa-proy-img figure{border-radius:var(--radius)}
body.pa-page .pa-proy-img img{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  background:var(--ground-alt); transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
body.pa-page .pa-proy:hover .pa-proy-img img{transform:scale(1.04)}
body.pa-page .pa-proy-meta .elementor-heading-title{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0;
}
body.pa-page .pa-proy-titulo .elementor-heading-title{
  font-family:var(--serif); font-weight:400; font-size:1.28rem; line-height:1.25;
  letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:0;
}
body.pa-page .pa-proy-texto p{font-size:.9rem}

/* ---------- Lista de servicios con contenedores nativos ----------
   Cada fila es un contenedor con enlace propio; los tres bloques de dentro son
   contenedores con su ancho, asi que el cliente puede moverlos desde el panel. */
body.pa-page .pa-svc-lista{border-top:1px solid var(--line)}
body.pa-page .pa-svc{
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .22s ease, padding-inline .22s ease;
}
body.pa-page .pa-svc:hover{background:var(--accent-tint); padding-inline:18px}
body.pa-page .pa-svc-tag .elementor-heading-title{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin:0;
}
body.pa-page .pa-svc-titulo .elementor-heading-title{
  font-family:var(--sans); font-weight:600; font-size:1.18rem; line-height:1.35;
  letter-spacing:-.005em; text-transform:none; color:var(--ink); margin:0;
  transition:color .18s ease;
}
body.pa-page .pa-svc:hover .pa-svc-titulo .elementor-heading-title{color:var(--accent)}
body.pa-page .pa-svc-texto p{font-size:.93rem; color:var(--ink-2); margin:0; max-width:none}
body.pa-page .pa-svc-go .elementor-heading-title{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding-top:4px;
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent);
  text-transform:none; letter-spacing:0; margin:0;
}
body.pa-page .pa-svc-go .elementor-heading-title::after{
  content:""; width:14px; height:10px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .2s ease;
}
body.pa-page .pa-svc:hover .pa-svc-go .elementor-heading-title::after{transform:translateX(4px)}
@media (max-width:820px){
  body.pa-page .pa-svc{flex-direction:column; gap:12px}
  body.pa-page .pa-svc > .e-con{--width:100%; width:100%}
}

/* ---------- Acordeon nativo con la piel del prototipo ----------
   Elementor pinta <details>/<summary>; el prototipo pintaba un boton con un
   panel de altura animada. El resultado visual es el mismo y el abrir y cerrar
   lo lleva el propio Elementor, asi que el JS del sitio no interviene aqui. */
body.pa-page .pa-acc .e-n-accordion{display:block; border-top:1px solid var(--line)}
body.pa-page .band .pa-acc .e-n-accordion{border-top-color:var(--band-line)}
body.pa-page .pa-acc .e-n-accordion-item{border-bottom:1px solid var(--line); border-radius:0; background:none}
body.pa-page .band .pa-acc .e-n-accordion-item{border-bottom-color:var(--band-line)}

body.pa-page .pa-acc .e-n-accordion-item-title{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding:22px 34px 22px 0; cursor:pointer; list-style:none; background:none; border:0;
}
body.pa-page .pa-acc .e-n-accordion-item-title::-webkit-details-marker{display:none}
body.pa-page .pa-acc .e-n-accordion-item-title-header{flex:1; min-width:0; margin:0}
body.pa-page .pa-acc .e-n-accordion-item-title-text{
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.45;
  letter-spacing:0; text-transform:none; color:var(--ink); margin:0;
  transition:color .18s ease;
}
body.pa-page .band .pa-acc .e-n-accordion-item-title-text{color:var(--on-band)}
body.pa-page .pa-acc .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--accent)}
body.pa-page .band .pa-acc .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--band-accent)}

/* la cruz que se vuelve raya al abrir */
body.pa-page .pa-acc .e-n-accordion-item-title::before,
body.pa-page .pa-acc .e-n-accordion-item-title::after{
  content:""; position:absolute; background:var(--accent); transition:transform .25s ease;
}
body.pa-page .band .pa-acc .e-n-accordion-item-title::before,
body.pa-page .band .pa-acc .e-n-accordion-item-title::after{background:var(--band-accent)}
body.pa-page .pa-acc .e-n-accordion-item-title::before{right:0; top:50%; margin-top:-1px; width:20px; height:2px}
body.pa-page .pa-acc .e-n-accordion-item-title::after{right:9px; top:50%; margin-top:-10px; width:2px; height:20px}
body.pa-page .pa-acc .e-n-accordion-item[open] > .e-n-accordion-item-title::after{transform:scaleY(0)}

body.pa-page .pa-acc .e-n-accordion-item > .e-con,
body.pa-page .pa-acc .e-n-accordion-item > .e-con > .e-con-inner{
  padding:0 0 24px; margin:0; border:0; border-radius:0; background:none; box-shadow:none;
}
body.pa-page .pa-acc .e-n-accordion-item > .e-con > .e-con-inner{padding:0}
body.pa-page .pa-acc .e-n-accordion,
body.pa-page .pa-acc .e-n-accordion-item{background:none; box-shadow:none}
body.pa-page .pa-acc-texto{max-width:72ch}
body.pa-page .pa-acc-texto p{color:var(--ink-2); font-size:.95rem; line-height:1.7; margin:0 0 .9em}
body.pa-page .pa-acc-texto p:last-child{margin-bottom:0}
body.pa-page .band .pa-acc-texto p{color:var(--on-band-2)}

/* ============================================================
   SECCIONES INTERIORES CON WIDGETS NATIVOS
   Las clases de maquetacion del prototipo (split, steps, scope,
   strip, grid-3...) las llevan ahora los contenedores de Elementor,
   asi que sus reglas siguen valiendo tal cual. Lo que hace falta
   aqui es el puente de los textos, que pasan a ir dentro de un
   widget y ya no son el <p> o el <h3> sueltos de antes.
   ============================================================ */

/* Un contenedor de Elementor trae su propio display flex; las rejillas
   del prototipo tienen que poder imponerse. */
body.pa-page .e-con.split,
body.pa-page .e-con.steps,
body.pa-page .e-con.step,
body.pa-page .e-con.scope,
body.pa-page .e-con.strip,
body.pa-page .e-con.grid-2,
body.pa-page .e-con.grid-3,
body.pa-page .e-con.grid-4{--display:grid; width:100%; max-width:none}
body.pa-page .e-con.sticky-col{--display:block}
/* Las celdas de una rejilla no imponen ancho: manda la rejilla. */
body.pa-page .split > .e-con,
body.pa-page .scope > .e-con,
body.pa-page .strip > .e-con,
body.pa-page .step > .e-con,
body.pa-page .grid-2 > .e-con,
body.pa-page .grid-3 > .e-con,
body.pa-page .grid-4 > .e-con{--width:100%; width:100%; max-width:none; min-width:0}

/* ---------- Titulares intermedios ---------- */
body.pa-page .pa-h3 .elementor-heading-title{
  font-family:var(--sans); font-weight:600; font-size:1.18rem; line-height:1.35;
  letter-spacing:-.005em; color:var(--ink); text-transform:none; margin:0;
}
body.pa-page .band .pa-h3 .elementor-heading-title{color:var(--on-band)}
body.pa-page .pa-h4 .elementor-heading-title{
  font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.02em;
  color:var(--ink); text-transform:none; margin:0;
}
body.pa-page .band .pa-h4 .elementor-heading-title{color:var(--on-band)}
body.pa-page .pa-h2--corto .elementor-heading-title{max-width:22ch}
/* Elementor pone a cero el margen inferior de todo widget que viva dentro de
   un contenedor. Los dos que si lo necesitan lo recuperan aqui, con el mismo
   peso con el que se lo quito y con la misma propiedad logica. */
body.pa-page .e-con .pa-eyebrow.pa-eyebrow{margin-block-end:var(--s3)}
body.pa-page .e-con .step .pa-h3.pa-h3{margin-block-end:6px}
body.pa-page .pa-muted p{color:var(--ink-3)}
body.pa-page .band .pa-muted p{color:var(--on-band-2)}

/* ---------- Listas de alcance ---------- */
body.pa-page .pa-lista ul,
body.pa-page .pa-lista ol{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px}
body.pa-page .pa-lista li{
  display:grid; grid-template-columns:18px 1fr; gap:10px;
  font-size:.93rem; color:var(--ink-2); line-height:1.55;
}
body.pa-page .pa-lista li::before{content:"—"; color:var(--accent); font-weight:600}
body.pa-page .out .pa-lista li::before{content:"×"; color:var(--ink-3)}
body.pa-page .band .pa-lista li{color:var(--on-band-2)}

/* ---------- Pasos numerados ---------- */
body.pa-page .pa-step-n .elementor-heading-title{
  font-family:var(--serif); font-size:1.45rem; color:var(--accent-soft);
  font-variant-numeric:tabular-nums; line-height:1.2; margin:0; text-transform:none;
}
body.pa-page .band .pa-step-n .elementor-heading-title{color:var(--band-accent)}
body.pa-page .step .pa-h3{margin-bottom:6px}
body.pa-page .step .pa-texto p{font-size:.93rem; margin:0; color:var(--ink-2); max-width:none}
body.pa-page .band .step .pa-texto p{color:var(--on-band-2)}

/* ---------- Franja de datos ---------- */
body.pa-page .pa-strip-t .elementor-heading-title{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0; font-family:var(--sans);
}
body.pa-page .band .pa-strip-t .elementor-heading-title{color:var(--on-band-2)}
body.pa-page .pa-strip-v p{
  margin:9px 0 0; font-family:var(--serif); font-size:1.4rem; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.25; max-width:none;
}
body.pa-page .band .pa-strip-v p{color:var(--on-band)}
body.pa-page .pa-strip-n p{font-size:.8rem; color:var(--ink-3); margin:5px 0 0; max-width:none; font-family:var(--sans)}
body.pa-page .band .pa-strip-n p{color:var(--on-band-2)}

/* ---------- Nota al margen ----------
   El circulo con la admiracion iba antes como SVG dentro del marcado.
   Al pasar la nota a contenedor lo dibuja la hoja de estilos: asi el
   cliente edita solo el texto y el icono no se le borra sin querer. */
body.pa-page .e-con.pa-note{display:block; position:relative; padding:17px 20px 17px 50px}
body.pa-page .pa-note-texto::before{
  content:""; position:absolute; left:20px; top:19px; width:18px; height:18px;
  background-color:var(--tbd);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='9' cy='9' r='8'/%3E%3Cpath d='M9 5v5M9 13h.01'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='9' cy='9' r='8'/%3E%3Cpath d='M9 5v5M9 13h.01'/%3E%3C/svg%3E") no-repeat center/contain;
}
body.pa-page .band .pa-note-texto::before{background-color:var(--on-band-2)}
body.pa-page .pa-note-texto p{font-size:.89rem; color:var(--ink-2); line-height:1.6; margin:0; max-width:none}
body.pa-page .pa-note-texto b{color:var(--tbd)}
body.pa-page .band .pa-note-texto p{color:var(--on-band-2)}

/* ---------- Tarjetas de intencion ---------- */
body.pa-page .e-con.intent{--display:flex}
body.pa-page .pa-ilabel .elementor-heading-title{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-soft); font-weight:700; margin:0; font-family:var(--sans);
}
body.pa-page .intent .pa-h3 .elementor-heading-title{font-size:1.05rem}
body.pa-page .intent .pa-texto p{font-size:.92rem; color:var(--ink-2); margin:0; max-width:none}
/* La flecha del enlace la pone la hoja de estilos, como el icono de la nota. */
body.pa-page .pa-go .elementor-heading-title{
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px; margin:6px 0 0; text-transform:none;
}
body.pa-page .pa-go .elementor-heading-title::after{
  content:""; width:14px; height:10px; flex:none; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0'/%3E%3C/svg%3E") no-repeat center;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0'/%3E%3C/svg%3E") no-repeat center;
}

/* ---------- Fotografia como widget de imagen ---------- */
body.pa-page .elementor-widget-image.pa-foto figure{margin:0; display:flex; flex-direction:column; gap:12px}
body.pa-page .elementor-widget-image.pa-foto img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border-radius:var(--radius); background:var(--ground-alt);
}
body.pa-page .band .elementor-widget-image.pa-foto img{background:var(--band-2)}
body.pa-page .elementor-widget-image.pa-foto .widget-image-caption{
  font-size:.85rem; line-height:1.6; color:var(--ink-3); margin:0; text-align:left;
}
body.pa-page .band .elementor-widget-image.pa-foto .widget-image-caption{color:var(--on-band-2)}

/* ---------- Tarjetas de articulo ---------- */
body.pa-page .e-con.post{--display:flex}
body.pa-page .elementor-widget-image.post-img .elementor-widget-container{height:100%}
body.pa-page .pa-post-meta .elementor-heading-title{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0;
}
body.pa-page .band .pa-post-meta .elementor-heading-title{color:var(--on-band-2)}
body.pa-page .pa-post-texto p{font-size:.9rem; color:var(--ink-2); margin:0; max-width:none}
body.pa-page .band .pa-post-texto p{color:var(--on-band-2)}

/* ---------- Etiqueta de dato pendiente dentro de una nota ---------- */
body.pa-page .pa-tbd-tag .elementor-heading-title{
  display:inline-flex; align-items:center; gap:6px; background:var(--tbd-bg); color:var(--tbd);
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid color-mix(in srgb, var(--tbd) 35%, transparent);
  border-radius:999px; padding:4px 11px; margin:0 0 8px;
}

/* ---------- Boton de WhatsApp ---------- */
body.pa-page .pa-btn--wa .elementor-button{background:#1FA855; border-color:#1FA855; color:#fff}
body.pa-page .pa-btn--wa .elementor-button:hover{background:#188F47; border-color:#188F47; color:#fff}

/* Una tarjeta que conserva su marcado (las del catalogo, que dependen de los
   atributos de filtrado) viaja dentro de un widget HTML. Ese widget es un hijo
   mas de la rejilla, asi que tiene que estirarse igual que las demas celdas o
   las tarjetas quedan a distinta altura. */
body.pa-page .grid-2 > .elementor-widget-html,
body.pa-page .grid-3 > .elementor-widget-html,
body.pa-page .grid-4 > .elementor-widget-html,
body.pa-page .grid-2 > .elementor-widget-html > .elementor-widget-container,
body.pa-page .grid-3 > .elementor-widget-html > .elementor-widget-container,
body.pa-page .grid-4 > .elementor-widget-html > .elementor-widget-container{
  display:flex; flex-direction:column; min-width:0; height:100%;
}
body.pa-page .grid-2 > .elementor-widget-html .cat,
body.pa-page .grid-3 > .elementor-widget-html .cat,
body.pa-page .grid-4 > .elementor-widget-html .cat,
body.pa-page .grid-2 > .elementor-widget-html .post,
body.pa-page .grid-3 > .elementor-widget-html .post,
body.pa-page .grid-4 > .elementor-widget-html .post{flex:1}