/* Loiro Studio · hoja común (todas las páginas e idiomas futuros) */
/* Inter (SIL OFL 1.1), autoalojada: sin peticiones a Google */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-400-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/inter-400-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#faf6ef;        /* papel (marca Loiro) */
  --surface:#ffffff;
  --soft:#f3ecdf;
  --ink:#1f2a44;       /* azul tinta (marca Loiro) */
  --muted:#5f5a50;
  --line:#e4d9c6;
  --accent:#c8102e;    /* rojo Loiro: fondos de botón */
  --accent-text:#b00e28;
  --accent-soft:#fbe9ea;
  --seal-bg:#1f2a44;
  --seal-fg:#faf6ef;
  --ok:#1d7a52;
  --shadow:0 1px 2px rgba(31,42,68,.06),0 8px 24px rgba(31,42,68,.08);
  --radius:16px;
  --wrap:1120px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121827;
    --surface:#1a2235;
    --soft:#202a40;
    --ink:#f1ece2;
    --muted:#b3ada0;
    --line:#2f3a52;
    --accent:#c8102e;
    --accent-text:#ff7a8a;
    --accent-soft:#3a1a26;
    --seal-bg:#faf6ef;
    --seal-fg:#1f2a44;
    --ok:#5cc79a;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--accent-text);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em;margin:0;font-weight:800;text-wrap:balance}
p{margin:0 0 1em}
ul{margin:0;padding:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 28px}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.ph{color:var(--accent-text);background:var(--accent-soft);border-radius:4px;padding:0 4px;font-style:normal;font-weight:600}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.brand b{color:var(--accent-text);font-weight:800}
.seal-bg{fill:var(--seal-bg)}
.seal-fg{fill:var(--seal-fg)}
.seal-ring{fill:none;stroke:var(--seal-fg);stroke-opacity:.22}
.seal-dot{fill:#c8102e}
.nav{display:none}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;padding:8px 10px;border-radius:8px}
.nav a:hover{background:var(--soft)}
@media (min-width:960px){.nav{display:flex;gap:2px}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;font-weight:600;font-size:16px;line-height:1.2;font-family:inherit;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#a90d27;transform:translateY(-1px)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:15px;border-radius:10px}

/* ---------- secciones ---------- */
section{padding:64px 0}
@media (min-width:900px){section{padding:96px 0}}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.h2{font-size:clamp(28px,6.4vw,44px)}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:40em}
.head{margin-bottom:36px;max-width:46em}
.head .lead{margin-top:14px;margin-bottom:0}
.alt{background:var(--soft)}

/* ---------- héroe ---------- */
.hero{padding:40px 0 56px}
.hero .wrap{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.hero{padding:72px 0 96px}.hero .wrap{grid-template-columns:1.3fr .7fr;gap:48px}}
.hero h1{font-size:clamp(36px,8.6vw,62px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero .lead{margin:20px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn{flex:1 1 220px}
@media (min-width:600px){.cta .btn{flex:0 0 auto}}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:0;list-style:none;color:var(--muted);font-size:15px}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;color:var(--ok);flex:none}
.hero-art{max-width:420px;width:100%;margin:0 auto}

/* ---------- problema / solución ---------- */
.ps{display:grid;gap:16px}
@media (min-width:800px){.ps{grid-template-columns:1fr 1fr;gap:24px}}
.ps-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.ps-card h3{font-size:21px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.ps-card h3 span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:16px;flex:none}
.ps-have h3 span{background:#e3f2ea;color:#1d7a52}
.ps-miss h3 span{background:var(--accent-soft);color:var(--accent-text)}
.ps-card ul{list-style:none}
.ps-card li{padding:9px 0;border-top:1px solid var(--line);color:var(--muted)}
.ps-card li:first-child{border-top:0}
.ps-card li b{color:var(--ink);font-weight:600}
.claim{margin-top:28px;background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:28px 24px;display:grid;gap:16px;align-items:center}
@media (min-width:800px){.claim{grid-template-columns:1fr auto;padding:32px 36px}}
.claim p{margin:0;font-size:clamp(21px,3.4vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.claim p span{color:#ff8a97}
@media (prefers-color-scheme:dark){.claim{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.claim p span{color:var(--accent-text)}}

/* ---------- servicios ---------- */
.grid-s{display:grid;gap:16px}
@media (min-width:640px){.grid-s{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid-s{grid-template-columns:repeat(3,1fr)}}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.svc .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;margin-bottom:16px}
.svc .ic svg{width:24px;height:24px}
.svc h3{font-size:20px;margin-bottom:8px}
.svc p{color:var(--muted);margin:0;font-size:16px}
.svc .tag{margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.svc-more{background:transparent;border-style:dashed;justify-content:center}
.svc-more p{color:var(--ink)}

/* ---------- precios ---------- */
.packs{display:grid;gap:20px}
@media (min-width:900px){.packs{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.pack{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 24px 24px;display:flex;flex-direction:column}
.pack.hl{border:2px solid var(--accent);box-shadow:var(--shadow)}
.pack .flag{position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.pack h3{font-size:23px}
.pack .who{color:var(--muted);font-size:15px;margin:6px 0 18px}
@media (min-width:900px){.pack .who{min-height:3em}}
.price{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:6px}
.fee{font-weight:700;margin-top:10px;font-size:18px}
.fee span{font-weight:400;color:var(--muted);font-size:15px}
.annual{font-size:14px;color:var(--accent-text);margin-top:4px;font-weight:600;min-height:1.5em}
.pack ul{list-style:none;margin:20px 0 24px;border-top:1px solid var(--line);padding-top:16px;font-size:16px}
.pack li{position:relative;padding-left:28px;margin-bottom:10px}
.pack li::before{content:"";position:absolute;left:2px;top:6px;width:13px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.pack li.plus{font-weight:600}
.pack li.plus::before{content:"+";border:0;transform:none;top:-2px;left:3px;width:auto;height:auto;color:var(--accent-text);font-weight:800;font-size:19px}
.pack .btn{margin-top:auto}
.notes{display:grid;gap:12px;margin-top:24px}
@media (min-width:800px){.notes{grid-template-columns:repeat(3,1fr)}}
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;color:var(--muted)}
.note b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}

/* ---------- proceso ---------- */
.steps{display:grid;gap:18px;list-style:none;margin:0;padding:0}
@media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}}
.step{border-top:3px solid var(--accent);padding-top:18px}
.step .n{font-size:15px;font-weight:800;color:var(--accent-text);letter-spacing:.06em}
.step h3{font-size:22px;margin:6px 0 8px}
.step p{color:var(--muted);margin:0 0 12px}
.step .d{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--surface);border:1px solid var(--line);padding:3px 10px;border-radius:99px}
.conds{display:grid;gap:14px;margin-top:40px}
@media (min-width:700px){.conds{grid-template-columns:1fr 1fr}}
.cond{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.cond .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.cond .ic svg{width:22px;height:22px}
.cond b{display:block;margin-bottom:2px}
.cond span{color:var(--muted);font-size:15px}

/* ---------- portfolio ---------- */
.works{display:grid;gap:20px}
@media (min-width:800px){.works{grid-template-columns:repeat(3,1fr)}}
.work{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.work .thumb{aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.work .thumb svg{width:100%;height:100%}
.work .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.work .kind{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.work h3{font-size:22px;margin:6px 0 8px}
.work p{color:var(--muted);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 16px}
.chips li{font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--bg)}
.work .more{margin-top:auto;font-weight:600}
.work .soon{margin-top:auto;font-size:15px;font-weight:600;color:var(--muted)}
.works-note{margin-top:22px;color:var(--muted);font-size:15px}

/* ---------- sobre mí ---------- */
.about{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.about{grid-template-columns:.9fr 1.1fr;gap:64px}}
.about-card{background:var(--ink);color:var(--bg);border-radius:20px;padding:30px 26px}
@media (prefers-color-scheme:dark){.about-card{background:var(--surface);color:var(--ink);border:1px solid var(--line)}}
.about-card .who{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.about-card .who svg{width:64px;height:64px;flex:none}
.about-card .who svg .seal-bg{fill:#faf6ef}.about-card .who svg .seal-fg{fill:#1f2a44}.about-card .who svg .seal-ring{stroke:#1f2a44}
.about-card .who b{display:block;font-size:22px;letter-spacing:-.02em}
.about-card .who span{opacity:.75;font-size:15px}
.facts{list-style:none;display:grid;gap:12px}
.facts li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.facts svg{width:20px;height:20px;flex:none;margin-top:2px;color:#ff8a97}
@media (prefers-color-scheme:dark){.facts svg{color:var(--accent-text)}}
.about-text p{font-size:18px}
.about-text p:first-of-type{font-size:clamp(20px,2.6vw,24px);font-weight:600;letter-spacing:-.01em;line-height:1.4}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:700;font-size:18px;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2.5px solid var(--accent-text);border-bottom:2.5px solid var(--accent-text);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--muted);margin:0 0 20px;max-width:44em}

/* ---------- contacto ---------- */
.contact{background:var(--ink);color:var(--bg)}
@media (prefers-color-scheme:dark){.contact{background:#0b1020;color:var(--ink)}}
.contact .wrap{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.contact .wrap{grid-template-columns:1.2fr .8fr;gap:56px}}
.contact .eyebrow{color:#ff8a97}
.contact .lead{color:inherit;opacity:.8}
.contact-box{background:color-mix(in srgb,#fff 6%,transparent);border:1px solid color-mix(in srgb,#fff 16%,transparent);border-radius:20px;padding:26px 22px;display:grid;gap:12px}
.contact-box .btn{width:100%}
.contact-box .btn-ghost{border-color:currentColor;color:inherit}
.contact-box .btn-ghost:hover{background:#faf6ef;color:#1f2a44}
.contact-box small{opacity:.75;font-size:14px;text-align:center}
.contact .ph{background:rgba(255,255,255,.12);color:#ffb3bc}

/* ---------- pie ---------- */
.foot{padding:40px 0 96px;font-size:15px;color:var(--muted);border-top:1px solid var(--line)}
@media (min-width:900px){.foot{padding-bottom:40px}}
.foot .wrap{display:grid;gap:20px}
@media (min-width:800px){.foot .wrap{grid-template-columns:1fr auto;align-items:center}}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--muted)}
.foot .brand{font-size:17px;margin-bottom:6px}
.foot .brand svg{width:28px;height:28px}
.foot p{margin:0}

/* ---------- botón flotante WhatsApp (solo móvil) ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(200,16,46,.35)}
.fab svg{width:28px;height:28px}
@media (min-width:900px){.fab{display:none}}

/* ---------- páginas legales ---------- */
.legal{padding:48px 0 72px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(32px,6vw,46px);margin-bottom:8px}
.legal .upd{color:var(--muted);margin-bottom:36px}
.legal h2{font-size:22px;margin:36px 0 12px}
.legal p,.legal li{color:var(--ink)}
.legal ul{padding-left:22px;margin-bottom:1em}
.legal li{margin-bottom:6px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:16px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.legal th{width:34%;color:var(--muted);font-weight:600}
.err{min-height:60vh;display:grid;place-items:center;text-align:center;padding:64px 0}
.err .big{font-size:clamp(88px,22vw,160px);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--accent-text)}
.err .cta{justify-content:center;margin-top:24px}

/* ajustes tras revisión visual */
.foot .brand{color:var(--ink)}
.foot .brand b{color:var(--accent-text)}
.contact .lead{margin-top:14px;margin-bottom:0}
@media (max-width:899px){.annual:empty{display:none}}
@media (max-width:899px){.about-text{order:-1}}