/*
Theme Name: ERA Sistemas
Description: Tema propio para erasistemas.es: paleta corporativa, tipografía Inter autoalojada, cabecera fija, botones y tarjetas con estados, bandas claras y oscuras, hero animado y componentes de contenido.
Version: 0.4.16
Author: ERA Sistemas
*/

/* Inter, self-hosted (latin subset, SIL OFL: assets/fonts/OFL.txt). Only the weights in use. */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter'; font-style:italic; font-weight:400; font-display:swap; src:url(assets/fonts/inter-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url(assets/fonts/inter-latin-800-normal.woff2) format('woff2')}

:root{
    --navy-deep:#14213D;
    --navy:#0F265D;
    --blue:#123F87;
    --blue-bright:#1C6ABF;
    --sky:#ADDAF8;
    --ink-soft:#526173;
    --mist:#F4F7FA;
    --line:#D9E2EC;
    --paper:#FFFFFF;

    --fg:var(--navy-deep);
    --bg:var(--paper);

    /* Superficies oscuras: nunca reutilizar --navy-deep como color de texto aqui */
    --dark-fg:#FAFCFF;
    --dark-fg-muted:#C7D6EC;
    --dark-accent:var(--sky);

    --disabled-bg:#E4E9F0; --disabled-fg:#9AA7B8;
    --disabled-bg-dark:rgba(255,255,255,.12); --disabled-fg-dark:rgba(255,255,255,.4);

    --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-label:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

    --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem;
    --space-5:2.5rem; --space-6:4rem; --space-7:6rem;

    --radius-sm:.5rem; --radius-md:1rem; --radius-lg:1.5rem;
    --shadow-sm:0 1px 2px rgba(20,33,61,.06), 0 1px 1px rgba(20,33,61,.04);
    --shadow-md:0 12px 32px -12px rgba(20,33,61,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3{font-family:var(--font-display); color:var(--fg); text-wrap:balance; margin:0 0 .6rem}
p{margin:0 0 1rem; color:var(--ink-soft); max-width:62ch}
a{color:var(--blue-bright)}
ul{margin:0; padding:0}

.container{max-width:1180px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem)}

.skip-link{
    position:absolute; left:-9999px; top:0;
    background:var(--navy-deep); color:#fff; padding:.5rem 1rem; z-index:100;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px}
.band-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--sky)}

/* Header */
.site-header{
    position:sticky; top:0; z-index:20;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){ .admin-bar .site-header{top:46px} }
@media (max-width:600px){ .admin-bar .site-header{top:0} }
.site-header__inner{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    padding-block:.75rem;
}
.site-branding{margin:0; flex-shrink:0}
.site-logo{display:inline-flex}
.site-logo img{height:36px; width:auto}
.site-nav ul{list-style:none; display:flex; gap:var(--space-4); margin:0; padding:0}
.site-nav a:not(.btn){
    color:var(--fg); text-decoration:none; font-size:.95rem; font-weight:500;
    position:relative; padding-block:.25rem; white-space:nowrap;
}
.site-nav a:not(.btn)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:var(--blue-bright);
}
@media (prefers-reduced-motion:no-preference){
    .site-nav a:not(.btn)::after{transition:right .18s ease}
}
.site-nav a:not(.btn):hover::after,.site-nav a:not(.btn):focus-visible::after{right:0}
.site-nav a[aria-current]:not(.btn)::after{right:0}
.site-nav__cta{display:none}
.site-header__cta{white-space:nowrap; flex-shrink:0}

.nav-toggle{
    display:none; position:relative; width:44px; height:44px; flex-shrink:0;
    border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
    color:var(--fg); cursor:pointer; padding:0;
}
.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{
    position:absolute; left:50%; width:20px; height:2px; margin-left:-10px;
    background:currentColor; border-radius:2px;
}
.nav-toggle__bar{top:50%; margin-top:-1px}
.nav-toggle__bar::before,.nav-toggle__bar::after{content:""}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}
.nav-open .nav-toggle__bar{background:transparent}
.nav-open .nav-toggle__bar::before{top:0; transform:rotate(45deg)}
.nav-open .nav-toggle__bar::after{top:0; transform:rotate(-45deg)}

/* Compact header: menu button + dropdown panel */
@media (max-width:1179px){
    .site-header__inner{gap:var(--space-2)}
    .site-branding{margin-right:auto}
    .site-header__cta{order:2}
    .nav-toggle{display:block; order:3}
    .nav-toggle[hidden]{display:none}
    .site-nav{flex-basis:100%; order:4}
    .site-header__inner{flex-wrap:wrap}
    .site-nav ul{flex-direction:column; gap:0}
    .site-nav li + li{border-top:1px solid var(--line)}
    .site-nav a:not(.btn){display:block; padding-block:.85rem; font-size:1rem}
    .site-nav a:not(.btn)::after{display:none}
    .site-nav a[aria-current]:not(.btn){color:var(--blue-bright); font-weight:600}
    .has-js .site-nav{
        display:none; position:absolute; top:100%; left:0; right:0;
        background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
        max-height:calc(100vh - 100%); overflow-y:auto;
    }
    .has-js .site-nav ul{max-width:1180px; margin-inline:auto; padding:.25rem clamp(1rem,4vw,2.5rem) 1rem}
    .has-js.nav-open .site-nav{display:block}
}
@media (max-width:560px){
    .site-logo img{height:28px}
    .site-header .site-header__cta{display:none}
    .site-nav__cta{display:block; padding-top:1rem}
    .site-nav__cta .btn{width:100%; justify-content:center}
}

main{display:block}

/* Buttons */
.btn{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--font-body); font-weight:600; font-size:.95rem;
    padding:.75rem 1.4rem; border-radius:999px; text-decoration:none;
    border:1.5px solid transparent; cursor:pointer; background:none;
}
@media (prefers-reduced-motion:no-preference){
    .btn{transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease}
    .btn:hover{transform:translateY(-1px)}
}
.btn-primary{background:var(--blue-bright); color:#fff; border-color:var(--blue-bright)}
.btn-primary:hover{background:var(--blue); box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent; color:var(--blue-bright); border-color:var(--blue-bright)}
.btn-secondary:hover{background:color-mix(in srgb, var(--blue-bright) 10%, transparent)}
.btn-on-dark{background:#fff; color:var(--navy-deep); border-color:#fff}
.btn-on-dark:hover{background:var(--sky)}
.btn-ghost-on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn-ghost-on-dark:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn:active{filter:brightness(.92); transform:translateY(0)}
.btn[disabled]{
    background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-bg);
    cursor:not-allowed; pointer-events:none;
}
.band-dark .btn[disabled]{
    background:var(--disabled-bg-dark); color:var(--disabled-fg-dark); border-color:var(--disabled-bg-dark);
}

/* Dark band + tech motif */
.band-dark{
    background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 70%);
    color:#fff; position:relative; overflow:hidden;
    --fg:var(--dark-fg);
}
.band-dark::before{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(173,218,248,.16) 1px, transparent 1.5px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse at 70% 30%, black 0%, transparent 65%);
    mask-image:radial-gradient(ellipse at 70% 30%, black 0%, transparent 65%);
    pointer-events:none;
}
.band-dark .container{position:relative}
.band-dark .eyebrow{color:var(--dark-accent)}
.band-dark p{color:var(--dark-fg-muted)}
.band-dark a:not(.btn){color:var(--sky)}

.eyebrow{
    font-family:var(--font-label); font-size:.8125rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--blue-bright); display:block; margin-bottom:.5rem;
}

/* Hero */
.hero{padding-block:var(--space-7) var(--space-6)}
.hero__inner{
    display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-6); align-items:center;
}
@media (max-width:860px){ .hero__inner{grid-template-columns:1fr} }
.hero h1{
    font-size:clamp(2.6rem,5.4vw,3.9rem); font-weight:800; letter-spacing:-.01em;
    line-height:1.07; margin-block:.1rem 1.1rem;
}
/* Narrow phones: smaller hero H1 so long headlines keep whole phrases per line */
@media (max-width:480px){ .hero h1{font-size:clamp(1.9rem,10vw,2.25rem)} }
.hero .cta-row{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4)}

/* Hero visual: poster (<picture>) + optional desktop video layered on top (assets/js/hero-media.js).
   Media backgrounds are graded just below #14213D, so `lighten` lets the band's own gradient and
   dot grid show through while nodes and lines stay; the radial mask softens any residual edge. */
.hero-visual{
    position:relative; aspect-ratio:1/1; margin:0 0 1.5rem; mix-blend-mode:lighten;
    -webkit-mask-image:radial-gradient(closest-side, #000 70%, transparent 100%);
    mask-image:radial-gradient(closest-side, #000 70%, transparent 100%);
}
.hero-visual picture,.hero-visual__poster,.hero-visual__video{display:block; width:100%; height:100%}
.hero-visual__poster,.hero-visual__video{object-fit:cover}
.hero-visual__video{position:absolute; inset:0; opacity:0}
.hero-visual.is-playing .hero-visual__video{opacity:1}
@media (prefers-reduced-motion:no-preference){ .hero-visual__video{transition:opacity .4s ease} }
@media (max-width:860px){
    .hero-visual{max-width:220px; margin-inline:auto}
    .hero-visual__video{display:none}
}

/* Sections */
.section{padding-block:var(--space-7)}
.section-head{max-width:46rem; margin-bottom:var(--space-5)}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4)}
@media (max-width:1023px){ .cards{grid-template-columns:1fr} }
.card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-4); box-shadow:var(--shadow-sm);
}
@media (prefers-reduced-motion:no-preference){
    .card{transition:transform .18s ease, box-shadow .18s ease}
    .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
}
.card .tag{
    font-family:var(--font-label); font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--blue-bright); margin-bottom:.6rem; display:block;
}
.card h2,.card h3{font-size:1.1rem; margin-bottom:.5rem}
.card p{font-size:.92rem; margin-bottom:0}

.cta-band{padding-block:var(--space-6); text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.cta-band p{margin-inline:auto; margin-bottom:var(--space-4)}
.cta-band .btn{margin-top:.5rem}

.qualification-form,.opt-in-form{
    margin-top:var(--space-4); padding:var(--space-4);
    border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--mist);
}

/* Content components (service pages) */
.cta-row{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4)}
.cta-note{font-size:.9rem; margin-top:var(--space-2)}
.cards + .cards{margin-top:var(--space-4)}
.cards + p{margin-top:var(--space-4)}
.card p + p{margin-top:.75rem}
.list{padding-left:1.4rem; margin:0 0 1rem; max-width:62ch; color:var(--ink-soft)}
.list li{margin-bottom:.5rem}
.list li::marker{color:var(--blue-bright); font-weight:600}
section[id],main h2[id],main h3[id]{scroll-margin-top:96px}

/* Five-card row: 5 across with the full nav, 3+2 centred below it, stacked on tablet/mobile */
.cards--five{display:flex; flex-wrap:wrap; justify-content:center}
.cards--five > .card{flex:0 0 calc((100% - 2 * var(--space-4)) / 3)}
@media (min-width:1180px){ .cards--five > .card{flex-basis:calc((100% - 4 * var(--space-4)) / 5)} }
@media (max-width:1023px){ .cards--five > .card{flex-basis:100%} }

/* Cards placed on a dark band: translucent surface so the band's light text stays readable */
.band-dark .card{background:rgba(255,255,255,.06); border-color:rgba(173,218,248,.22); box-shadow:none}

/* Lists inside cards (same size as card text) and lists on a dark band */
.card .list{font-size:.92rem; margin-bottom:0}
.band-dark .list{color:var(--dark-fg-muted)}
.band-dark .list li::marker{color:var(--sky)}

/* FAQ accordion: native <details>/<summary> */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
    position:relative; cursor:pointer; list-style:none;
    padding:1rem 2.25rem 1rem 0; font-weight:600; color:var(--fg);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
    content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
    font-size:1.35rem; font-weight:500; line-height:1; color:var(--blue-bright);
}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 1.1rem}

/* People cards (Sobre ERA): two equal cards. Optional photo slot, same format for every card:
   <figure class="person__photo"><img ...></figure> as the card's first child. Photos only show
   when every card has one, so one person never appears with a photo and the other without. */
.cards.people{grid-auto-rows:1fr}
@media (min-width:640px){ .cards.people{grid-template-columns:1fr 1fr} }
.person__role{font-weight:600; color:var(--fg)}
.person__photo{width:8rem; aspect-ratio:4/5; margin:0 0 var(--space-3); border-radius:var(--radius-sm); overflow:hidden; background:var(--mist)}
.person__photo img{width:100%; height:100%; object-fit:cover}
/* A card whose name comes first has no photo: then hide them all (:has() cannot be nested). */
.people:has(> .person > h3:first-child) .person__photo{display:none}
.people + .people__team{margin-top:var(--space-5)}

/* Contact form (markup and behaviour: era-contact-form plugin) */
.era-form,.era-form-result,.era-form__mode{max-width:44rem}
.era-form{display:grid; gap:var(--space-4)}
.era-form__grid{display:grid; gap:var(--space-4)}
@media (min-width:640px){ .era-form__grid{grid-template-columns:1fr 1fr} }
.era-form__field{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.era-form label,.era-form legend{font-weight:600; color:var(--fg)}
.era-form__opt{font-weight:400; color:var(--ink-soft)}
.era-form__hint{font-size:.875rem; margin:0}
.era-form input[type=text],.era-form input[type=email],.era-form input[type=tel],.era-form select,.era-form textarea{
    width:100%; font:inherit; color:var(--fg); background:var(--paper);
    border:1.5px solid #7C8B9D; border-radius:var(--radius-sm); padding:.7rem .85rem;
}
.era-form textarea{resize:vertical; min-height:8rem}
.era-form ::placeholder{color:#6B7A8C}
.era-form input:focus-visible,.era-form select:focus-visible,.era-form textarea:focus-visible{outline:2px solid var(--blue-bright); outline-offset:1px; border-color:var(--blue-bright)}
.era-form [aria-invalid=true]{border-color:#B42318}
.era-form__error{color:#B42318; font-size:.9rem; font-weight:500; margin:0}
.era-form__choice{border:0; padding:0; margin:0}
.era-form__choice legend{padding:0; margin-bottom:.35rem}
.era-form__options{display:flex; gap:var(--space-4); margin-top:.25rem}
.era-form__options label,.era-form__consent label{display:flex; align-items:flex-start; gap:.6rem; font-weight:400; color:var(--ink-soft); cursor:pointer}
.era-form__options label{color:var(--fg); align-items:center}
.era-form input[type=radio],.era-form input[type=checkbox]{width:1.15rem; height:1.15rem; margin:.15rem 0 0; flex:none; accent-color:var(--blue-bright)}
.era-form__options input[type=radio]{margin-top:0}
.era-form__submit .btn{justify-content:center}
.era-form__note{font-size:.9rem; margin:.75rem 0 0}
.era-form__legal{border-top:1px solid var(--line); padding-top:var(--space-3)}
.era-form__legal p{font-size:.85rem; margin:0}
.era-form__legal p + p{margin-top:.5rem}
.era-form__draft{font-weight:600; color:var(--fg)}
.era-form__errors{scroll-margin-top:96px; border:1.5px solid #F2B8B5; background:#FEF3F2; border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4)}
.era-form__errors p{color:#7A1A12; font-weight:600; margin:0 0 .4rem}
.era-form__errors ul{padding-left:1.2rem}
.era-form__errors a{color:#B42318}
.era-form__hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.era-form__mode{border:1.5px solid #E9B949; background:#FFF8E6; color:var(--fg); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); font-size:.9rem; margin-bottom:var(--space-4)}
.era-form-result{border:1px solid var(--line); background:var(--mist); border-radius:var(--radius-md); padding:var(--space-4)}
.era-form-result:focus{outline:none}
.era-form-result:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px}
.era-form__payload{margin-top:var(--space-3)}
.era-form__payload summary{cursor:pointer; font-weight:600; color:var(--blue-bright)}
.era-form__payload pre{font-size:.8rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-2); overflow:auto; max-height:24rem; white-space:pre-wrap; word-break:break-word}
.era-form__payload p{font-size:.875rem; margin:.5rem 0 0}
.era-trust{margin-top:var(--space-5)}
.era-form__errors:focus{outline:none}
.era-form__errors:focus-visible{outline:2px solid var(--blue-bright); outline-offset:3px}

/* Footer */
.site-footer{background:var(--navy-deep); color:#cfd8ea; padding-block:var(--space-6); --fg:var(--dark-fg)}
.site-footer__inner{display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); flex-wrap:wrap}
.site-footer p{margin:0; color:var(--dark-fg-muted)}
.site-footer__brand{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem; margin:0}
.site-footer nav ul{list-style:none; display:flex; gap:var(--space-4); margin:0; padding:0}
.site-footer nav a{color:#aebbd6; text-decoration:none; font-size:.85rem}
.site-footer nav a:hover{color:#fff}

article{padding-block:0}