/* =========================================================
   AYALA IP (SEO) — estilos de páginas interiores.
   Complementa styles.css (copia del one-page, sin modificar).
   ========================================================= */

/* nav: en páginas interiores el nav es sólido desde el inicio (lo aplica main.js);
   el selector de idioma son enlaces reales */
.lang__btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.lang__btn[aria-current]{color:var(--gold)}
.nav__links > a[aria-current="page"]{color:var(--ivory);border-color:var(--gold)}
@media (min-width:1101px) and (max-width:1359px){.nav__links > .btn{display:none}}
@media (max-width:1100px){.nav__links > a[aria-current="page"]{border-color:rgba(199,168,103,.14)}}

/* ---------- cabecera de página interior ---------- */
.page-hero{
  background:radial-gradient(120% 95% at 88% -12%,#183358 0%,#0B1B31 52%,#081222 100%);
  color:var(--ivory);padding:calc(84px + clamp(48px,7vw,88px)) 0 clamp(44px,6vw,72px);
  border-bottom:1px solid var(--gold-line);
}
.page-hero__h1{
  font-family:var(--font-display);font-weight:500;font-size:clamp(38px,5.4vw,68px);line-height:1.05;
  letter-spacing:.002em;max-width:18ch;margin-top:18px;text-wrap:balance;
}
.page-hero__h1--wide{max-width:24ch}
.page-hero__lead{margin-top:22px;font-size:clamp(17px,1.5vw,20px);color:var(--ivory-dim);max-width:58ch;line-height:1.65;text-wrap:pretty}

/* migas */
.crumbs{margin-bottom:22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-blue)}
.crumbs li + li::before{content:"/";margin-right:10px;color:var(--gold-line)}
.crumbs a{display:inline-block;padding:8px 0;margin:-8px 0;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--gold);border-color:var(--gold)}
.crumbs [aria-current]{color:var(--ivory-dim)}

/* ---------- tarjetas de área como enlaces ---------- */
.svc--link{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.svc--link p{flex:1}
.svc__more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#8C7440;transition:gap .2s var(--ease)}
.svc--link:hover .svc__more{gap:14px}
.svc--featured .svc__more{color:var(--gold)}
.svc--featured.svc--link{color:var(--ivory)}
.svc--wide.svc--link p{margin-top:12px}
.practice__intro{margin-top:14px;font-size:15.5px;color:var(--ink-dim);max-width:60ch}
.svc-grid > li{display:flex}
.svc-grid > li > .svc{width:100%}

/* ---------- página de área ---------- */
.area-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,6vw,96px);align-items:start}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.12;margin:clamp(34px,4vw,52px) 0 14px;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-dim);font-size:17px;line-height:1.7;max-width:64ch;text-wrap:pretty}
.prose p + p{margin-top:14px}
.prose ul{margin-top:12px}
.prose li{padding-left:24px;position:relative;margin:9px 0}
.prose li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:1px;background:var(--gold)}
.prose strong{font-weight:500;color:var(--ink)}
.prose .facts{margin-top:18px}
.aside{position:sticky;top:108px;display:grid;gap:18px}
.aside__card{background:var(--navy);color:var(--ivory);padding:28px 28px 26px;border-bottom:2px solid var(--gold)}
.aside__card .kicker{margin-bottom:10px}
.aside__card p{color:var(--ivory-dim);font-size:15.5px;line-height:1.55;text-wrap:pretty}
.aside__actions{display:grid;gap:12px;margin-top:20px}
.aside__actions .btn{width:100%}
.aside__actions .link-wa{justify-content:center}
.aside__list{border-top:1px solid var(--hair)}
.aside__list li{border-bottom:1px solid var(--hair);font-size:15.5px}
.aside__list a{display:flex;align-items:center;min-height:46px;padding:6px 0;color:var(--ink);transition:color .2s var(--ease)}
.aside__list a:hover{color:#8C7440}
.aside__t{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#8C7440;font-weight:500;margin-bottom:8px}
.draft-note{margin-top:32px;font-size:13px;letter-spacing:.06em;color:#8C7440;border-top:1px solid var(--hair);padding-top:14px}
@media (max-width:960px){.area-layout{grid-template-columns:1fr}.aside{position:static}}

/* FAQ (details nativo, sin JS) */
.faq{margin-top:clamp(44px,6vw,72px)}
.faq .h2{margin-bottom:18px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;font-family:var(--font-display);font-size:clamp(20px,1.8vw,24px);line-height:1.25;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--font-body);font-weight:300;font-size:24px;color:#8C7440}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.faq__a{padding:0 0 20px}
.faq__a p{color:var(--ink-dim);font-size:16.5px;line-height:1.7;max-width:64ch;text-wrap:pretty}

/* relacionadas */
.related{margin-top:clamp(44px,6vw,72px)}
.related .h2{margin-bottom:22px}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.related__grid > li{display:flex}
.related__grid .svc{width:100%;min-height:0}
@media (max-width:860px){.related__grid{grid-template-columns:1fr}}

/* banda CTA */
.cta-band{background:var(--navy);color:var(--ivory);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.cta-band__in{display:grid;grid-template-columns:7fr 4fr;gap:clamp(28px,5vw,80px);align-items:center}
.cta-band__in > *{min-width:0}
.cta-band__actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cta-band .body--light{margin-top:16px}
@media (max-width:860px){.cta-band__in{grid-template-columns:1fr}}

/* secciones de contenido en páginas interiores */
.sec--tight{padding:clamp(56px,7vw,96px) 0}
.sec__head--wide{max-width:900px}
.founder-page{display:grid;grid-template-columns:7fr 4fr;gap:clamp(32px,6vw,90px);align-items:start}
@media (min-width:861px){.founder-page .founder__text{order:-1}}
@media (max-width:860px){.founder-page{grid-template-columns:1fr}.founder-page .founder__photo{max-width:380px}}
.legal .prose{max-width:72ch}
.legal .prose h2{font-size:clamp(22px,2.2vw,28px)}

/* home: resúmenes con enlace a la página completa */
.more{display:inline-block;margin-top:14px;padding:10px 0;font-size:12px;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:#8C7440;text-wrap:balance;transition:color .2s var(--ease)}
.more > span{display:inline-block;margin-left:.6em;transition:transform .2s var(--ease)}
.more:hover{color:var(--ink)}
.more:hover > span{transform:translateX(4px)}
.more--light{color:var(--gold)}
.more--light:hover{color:var(--ivory)}

/* footer en columnas */
.foot__in--cols{grid-template-columns:1.6fr 1fr 1fr}
.foot__t{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#8C8878;font-weight:500;margin-bottom:12px}
.foot__col ul{display:grid;gap:2px}
.foot__col a{font-size:14px;color:#C9C2AE;min-height:36px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.foot__col a:hover{color:var(--gold)}
.foot__contact{margin-top:14px;font-size:14px;line-height:1.7}
.foot__contact a{display:inline-block;padding:6px 0;margin:-6px 0;color:#C9C2AE;border-bottom:1px solid rgba(199,168,103,.3)}
.foot__contact a:hover{color:var(--gold)}
.foot__legal a{display:inline-block;padding:8px 0;margin:-8px 0;color:#C9C2AE}
.foot__legal a:hover{color:var(--gold)}
@media (max-width:860px){.foot__in--cols{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1 / -1}}
@media (max-width:600px){.foot__in--cols{grid-template-columns:1fr}}

/* 404 / raíz */
.simple{min-height:70svh;display:flex;align-items:center;padding:calc(84px + 40px) 0 80px}
.simple .h2{margin-top:18px}
.simple .lead{color:var(--ivory-dim)}
.simple .btn{margin-top:28px}
.simple .langs{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* ======== observaciones v2 (2026-09-28) ======== */
/* motivo suave de fondo en cada tarjeta de área */
.svc__bg{position:absolute;right:-16px;bottom:-16px;width:150px;height:150px;color:#8C7440;opacity:.10;pointer-events:none;user-select:none}
.svc__bg svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.svc__bg svg text{fill:currentColor;stroke:none}
.svc--wide .svc__bg{width:180px;height:180px;right:-22px;bottom:-30px}
.svc:hover .svc__bg{opacity:.16}
@media (max-width:600px){.svc__bg{width:120px;height:120px}}

/* cabecera interior con imagen de fondo (El estudio): mismo tratamiento que la portada */
.page-hero{position:relative;overflow:hidden}
.page-hero > .wrap{position:relative;z-index:2}
.page-hero__media{position:absolute;top:0;right:0;bottom:0;width:48%;z-index:1;overflow:hidden;pointer-events:none}
.page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 50%);filter:saturate(.85) contrast(1.04)}
.page-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--navy) 0%,rgba(11,27,49,.94) 12%,rgba(11,27,49,.5) 46%,rgba(11,27,49,.16) 100%),
    linear-gradient(180deg,rgba(11,27,49,.45) 0%,rgba(11,27,49,0) 30%,rgba(11,27,49,0) 62%,var(--navy) 100%);
}
@media (max-width:860px){
  .page-hero--media{padding-top:calc(84px + min(30svh,250px))}
  .page-hero__media{width:100%;height:min(40svh,330px);bottom:auto}
  .page-hero__media::after{background:linear-gradient(180deg,rgba(11,27,49,.4) 0%,rgba(11,27,49,.12) 40%,rgba(11,27,49,.78) 80%,var(--navy) 100%)}
}

/* motivo suave en la cabecera de cada área */
.page-hero__icon{position:absolute;right:max(2vw,calc((100% - var(--wrap)) / 2 - 40px));bottom:-9%;width:clamp(200px,24vw,320px);height:clamp(200px,24vw,320px);color:var(--gold);opacity:.08;pointer-events:none;z-index:1}
.page-hero__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.page-hero__icon svg text{fill:currentColor;stroke:none}
.page-hero__cta{margin-top:28px}

/* fundador: foto a la izquierda y texto a la derecha (observaciones v2, como en la primera versión) */
@media (min-width:861px){
  .founder,.founder-page{grid-template-columns:4fr 7fr}
  .founder__text,.founder-page .founder__text{order:0}
}

/* redes sociales en el footer (se muestran cuando site.social tiene URLs) */
.foot__social{display:flex;gap:10px;margin-top:16px}
.foot__social a{width:44px;height:44px;border:1px solid var(--gold-line);display:grid;place-items:center;color:#C9C2AE;transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot__social a:hover{color:var(--gold);border-color:var(--gold)}
.foot__social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* logo oficial en el header (pendiente de aprobación): tamaño fijo por alto, el ancho sale de su proporción;
   el logo nunca se encoge, el menú se acomoda a la derecha */
.nav .brand{flex:none}
.brand__logo{display:block;height:42px;width:auto;max-width:none;flex:none}
@media (max-width:420px){.brand__logo{height:36px}}
/* escritorio: logo a la izquierda con aire fijo; menú, idioma y botón a la derecha, con espaciado más compacto
   para que entren junto al logo sin comprimirlo */
@media (min-width:1101px){
  .nav__in{gap:clamp(28px,2.6vw,38px)}
  .nav__links{gap:16px}
  .nav__links > a:not(.btn){letter-spacing:.12em}
  .lang{gap:4px;padding:0 4px}
  .nav__links > .btn{padding:0 18px;letter-spacing:.2em}
}

/* portada: la foto cubre todo el fondo del hero (pedido de Johan 2026-10-09), con degradado azul marino
   más denso a la izquierda para que el texto se lea sobre la imagen */
.hero__media{left:0;width:100%}
.hero__media::after{
  background:
    linear-gradient(90deg,rgba(11,27,49,.94) 0%,rgba(11,27,49,.86) 36%,rgba(11,27,49,.52) 64%,rgba(11,27,49,.3) 100%),
    linear-gradient(180deg,rgba(11,27,49,.55) 0%,rgba(11,27,49,0) 24%,rgba(11,27,49,0) 72%,var(--navy) 100%);
}
@media (max-width:1100px){.hero__media{width:100%}}
@media (max-width:860px){
  .hero{--hero-focus:58% 50%}
  .hero__media{height:auto;bottom:0}
  .hero__media::after{background:linear-gradient(180deg,rgba(11,27,49,.55) 0%,rgba(11,27,49,.5) 14%,rgba(11,27,49,.86) 30%,rgba(11,27,49,.94) 100%)}
}

/* logo oficial con descriptor en el footer (pendiente de aprobación): alto fijo, ancho por proporción */
.foot__logo{display:block;height:64px;width:auto;max-width:none;margin-bottom:18px}
@media (max-width:420px){.foot__logo{height:56px}}

/* íconos dorados del cliente como motivo de fondo de cada tarjeta de área */
.svc__bg--img{opacity:.24;right:-10px;bottom:-12px}
.svc__bg--img img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
.svc:hover .svc__bg--img{opacity:.34}
.svc--featured .svc__bg--img{opacity:.42}
.svc--featured:hover .svc__bg--img{opacity:.55}

/* cabecera de cada área: el mismo ícono del cliente que su tarjeta, como motivo suave */
.page-hero__icon--img{opacity:.18;bottom:-4%}
.page-hero__icon--img img{width:100%;height:100%;object-fit:contain;object-position:right bottom}

/* Corporativo y Civil: las dos tarjetas anchas con el mismo alto (la tarjeta llena su celda de la grilla) */
.practice__row > div{display:flex}
.practice__row > div > .svc{width:100%}

/* El estudio: la foto cubre toda la cabecera, como la portada de la home (2026-10-15).
   La pared azul de la izquierda sostiene el texto; el foco deja visible la "A" dorada. */
.page-hero--media .page-hero__media{left:0;width:100%}
.page-hero--media .page-hero__media img{object-position:var(--hero-focus,62% 34%);filter:none}
.page-hero--media .page-hero__media::after{
  background:
    linear-gradient(90deg,rgba(11,27,49,.9) 0%,rgba(11,27,49,.74) 36%,rgba(11,27,49,.3) 64%,rgba(11,27,49,.08) 100%),
    linear-gradient(180deg,rgba(11,27,49,.5) 0%,rgba(11,27,49,0) 24%,rgba(11,27,49,0) 76%,rgba(11,27,49,.6) 100%);
}
@media (max-width:860px){
  .page-hero--media .page-hero__media{height:auto;bottom:0}
  .page-hero--media .page-hero__media img{object-position:62% 24%}
  .page-hero--media .page-hero__media::after{background:linear-gradient(180deg,rgba(11,27,49,.45) 0%,rgba(11,27,49,.12) 20%,rgba(11,27,49,.72) 40%,rgba(11,27,49,.93) 60%,rgba(11,27,49,.95) 100%)}
}
/* escritorio y tablet: la foto arranca debajo del menú fijo para que la "A" dorada no quede tapada */
@media (min-width:861px){
  .page-hero--media .page-hero__media{top:84px}
  .page-hero--media .page-hero__media img{object-position:var(--hero-focus,62% 12%)}
}

/* banderas en el selector de idioma: la del idioma activo a pleno, la otra atenuada */
.lang__btn{gap:6px;padding:0 2px}
.lang__flag{display:block;width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(242,236,221,.22);opacity:.6;transition:opacity .2s var(--ease)}
.lang__btn[aria-current] .lang__flag,.lang__btn:hover .lang__flag{opacity:1}

/* redes sociales en el footer: íconos dorados como el resto del sitio; al pasar el mouse se iluminan */
.foot__social{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.foot__social li{display:flex}
.foot__social a,.foot__social span{
  width:44px;height:44px;display:grid;place-items:center;color:var(--gold);opacity:.82;
  border:1px solid var(--gold-line);border-radius:50%;
  transition:opacity .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.foot__social a:hover,.foot__social a:focus-visible,.foot__social span:hover{
  opacity:1;color:#E6CE95;border-color:var(--gold);background-color:rgba(199,168,103,.1);box-shadow:0 0 16px rgba(199,168,103,.32);
}
.foot__social span{cursor:default}
.foot__social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.foot__social a,.foot__social span{transition:none}}

/* columna lateral de las áreas: el botón puede partirse en dos líneas en lugar de desbordar (EN a 1024 px) */
.aside{min-width:0}
.aside__actions .btn{white-space:normal;text-align:center;line-height:1.35;padding:12px 18px;letter-spacing:.2em}
/* datos clave dentro del texto de un área: cifra más contenida para que "10 years" no se parta */
.prose .fact{padding:24px 22px 20px}
.prose .fact__v{font-size:clamp(30px,3vw,44px)}