/*
Theme Name:   IA Digital Studio
Theme URI:    https://iadigitalstudio.es
Description:  Tema hijo de Bricks para IA Digital Studio. Capa base del diseno: tokens de
              color, tipografia, maquetado y componentes de la portada.
Author:       IA Digital Studio
Template:     bricks
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  bricks-child
*/

/* Fuentes: por ahora desde Google Fonts. Ver nota en el expediente sobre autoalojarlas. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@400;500;600&family=Azeret+Mono:wght@400;500&display=swap');

600;700&family=Public+Sans:wght@400;500;600&family=Azeret+Mono:wght@400;500&display=swap');
:root{
    --paper:#E9EBEE; --panel:#F4F6F8; --ink:#171C22; --mut:#5A6472;
    --line:#C9D0D8; --red:#C81E3C; --red-soft:#FBE9EC; --dark:#131920; --dark-mut:#9AA6B4;
    --disp:Archivo,"Helvetica Neue",Arial,sans-serif;
    --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"Azeret Mono",ui-monospace,Menlo,monospace;
  }

  body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6;}
  *{box-sizing:border-box}
  h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.04; text-wrap:balance; margin:0}
  p{margin:0}
  a{color:var(--red); text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--red); outline-offset:3px}
  .wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
  .lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
  .lab-r{color:var(--red)}
  .cota{display:flex; align-items:center; gap:14px; margin-block:0}
  .cota::before,.cota::after{content:""; height:1px; background:var(--line); flex:1}
  .btn{display:inline-block; font-family:var(--disp); font-weight:600; font-size:16px; padding:14px 22px; border:1.5px solid var(--ink); color:var(--ink); background:transparent}
  .btn:hover{background:var(--ink); color:var(--paper); text-decoration:none}
  .btn-r{background:var(--red); border-color:var(--red); color:#fff}
  .btn-r:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
  .ph{font-family:var(--mono); font-size:.86em; color:var(--red); background:var(--red-soft); padding:1px 6px; border:1px dashed var(--red)}
  header.top{position:sticky; top:0; z-index:9; background:var(--paper); border-bottom:1px solid var(--line)}
  .topin{display:flex; align-items:center; gap:24px; min-height:64px}
  .mark{font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.01em}
  .mark span{color:var(--red)}
  nav.main{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
  nav.main a{color:var(--mut); font-size:15px; font-weight:500}
  nav.main a:hover{color:var(--ink); text-decoration:none}
  .sec{padding-block:72px; border-top:1px solid var(--line)}
  .eyebrow{display:flex; align-items:baseline; gap:12px; margin-bottom:26px}
  .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
  .grid3>div{background:var(--paper); padding:28px 24px}
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:76px 84px}
  .h1{font-size:clamp(38px,5.4vw,66px)}
  .lead{font-size:20px; color:var(--mut); margin-top:22px; max-width:46ch}
  .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
  .annot{display:flex; gap:10px; align-items:flex-start; margin-top:30px; padding-top:18px; border-top:1px dashed var(--line)}
  .annot .mono{font-family:var(--mono); font-size:13px; color:var(--mut)}
  .paso{display:grid; grid-template-columns:64px 1fr; gap:20px; padding-block:24px; border-top:1px solid var(--line)}
  .num{font-family:var(--disp); font-weight:700; font-size:34px; color:var(--red); line-height:1}
  .darkband{background:var(--dark); color:#E7EAEE; padding-block:76px}
  .darkband h2{color:#fff}
  .darkband .lab{color:var(--dark-mut)}
  .precio{border:1px solid var(--line); padding:28px 24px; display:flex; flex-direction:column; gap:14px; background:var(--panel)}
  .precio .cifra{font-family:var(--disp); font-weight:700; font-size:30px}
  ul.tick{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
  ul.tick li{display:flex; gap:10px; font-size:16px; color:var(--mut)}
  ul.tick li::before{content:"—"; color:var(--red); font-family:var(--mono)}
  details{border-top:1px solid var(--line); padding-block:18px}
  details summary{font-family:var(--disp); font-weight:600; font-size:19px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; color:var(--red); font-family:var(--mono)}
  details[open] summary::after{content:"–"}
  details p{margin-top:12px; color:var(--mut); max-width:70ch}
  form.contacto{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  form.contacto label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
  form.contacto input,form.contacto textarea,form.contacto select{font-family:var(--body); font-size:16px; padding:12px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
  .ancho{grid-column:1/-1}
  footer.pie{border-top:1px solid var(--line); padding-block:40px; color:var(--mut); font-size:14px}
  .pielinks{display:flex; gap:18px; flex-wrap:wrap; margin-top:4px}
  .pielinks a{color:var(--mut); display:inline-block; padding-block:13px; line-height:1.2}
  svg{max-width:100%; height:auto}
  @media (max-width:860px){
    .hero{grid-template-columns:1fr; gap:36px; padding-block:48px 56px}
    .grid3{grid-template-columns:1fr}
    form.contacto{grid-template-columns:1fr}
    nav.main{display:none}
    .sec{padding-block:52px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

:root{
    --paper:#E9EBEE; --panel:#F4F6F8; --ink:#171C22; --mut:#5A6472;
    --line:#C9D0D8; --red:#C81E3C; --red-soft:#FBE9EC; --dark:#131920; --dark-mut:#9AA6B4;
    --disp:Archivo,"Helvetica Neue",Arial,sans-serif;
    --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"Azeret Mono",ui-monospace,Menlo,monospace;
  }

  body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6;}
  *{box-sizing:border-box}
  h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.04; text-wrap:balance; margin:0}
  p{margin:0}
  a{color:var(--red); text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--red); outline-offset:3px}
  .wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
  .lab{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
  .lab-r{color:var(--red)}
  .cota{display:flex; align-items:center; gap:14px; margin-block:0}
  .cota::before,.cota::after{content:""; height:1px; background:var(--line); flex:1}
  .btn{display:inline-block; font-family:var(--disp); font-weight:600; font-size:16px; padding:14px 22px; border:1.5px solid var(--ink); color:var(--ink); background:transparent}
  .btn:hover{background:var(--ink); color:var(--paper); text-decoration:none}
  .btn-r{background:var(--red); border-color:var(--red); color:#fff}
  .btn-r:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
  .ph{font-family:var(--mono); font-size:.86em; color:var(--red); background:var(--red-soft); padding:1px 6px; border:1px dashed var(--red)}
  header.top{position:sticky; top:0; z-index:9; background:var(--paper); border-bottom:1px solid var(--line)}
  .topin{display:flex; align-items:center; gap:24px; min-height:64px}
  .mark{font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:-.01em}
  .mark span{color:var(--red)}
  nav.main{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
  nav.main a{color:var(--mut); font-size:15px; font-weight:500}
  nav.main a:hover{color:var(--ink); text-decoration:none}
  .sec{padding-block:72px; border-top:1px solid var(--line)}
  .eyebrow{display:flex; align-items:baseline; gap:12px; margin-bottom:26px}
  .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
  .grid3>div{background:var(--paper); padding:28px 24px}
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:76px 84px}
  .h1{font-size:clamp(38px,5.4vw,66px)}
  .lead{font-size:20px; color:var(--mut); margin-top:22px; max-width:46ch}
  .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
  .annot{display:flex; gap:10px; align-items:flex-start; margin-top:30px; padding-top:18px; border-top:1px dashed var(--line)}
  .annot .mono{font-family:var(--mono); font-size:13px; color:var(--mut)}
  .paso{display:grid; grid-template-columns:64px 1fr; gap:20px; padding-block:24px; border-top:1px solid var(--line)}
  .num{font-family:var(--disp); font-weight:700; font-size:34px; color:var(--red); line-height:1}
  .darkband{background:var(--dark); color:#E7EAEE; padding-block:76px}
  .darkband h2{color:#fff}
  .darkband .lab{color:var(--dark-mut)}
  .precio{border:1px solid var(--line); padding:28px 24px; display:flex; flex-direction:column; gap:14px; background:var(--panel)}
  .precio .cifra{font-family:var(--disp); font-weight:700; font-size:30px}
  ul.tick{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
  ul.tick li{display:flex; gap:10px; font-size:16px; color:var(--mut)}
  ul.tick li::before{content:"—"; color:var(--red); font-family:var(--mono)}
  details{border-top:1px solid var(--line); padding-block:18px}
  details summary{font-family:var(--disp); font-weight:600; font-size:19px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; color:var(--red); font-family:var(--mono)}
  details[open] summary::after{content:"–"}
  details p{margin-top:12px; color:var(--mut); max-width:70ch}
  form.contacto{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  form.contacto label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
  form.contacto input,form.contacto textarea,form.contacto select{font-family:var(--body); font-size:16px; padding:12px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
  .ancho{grid-column:1/-1}
  footer.pie{border-top:1px solid var(--line); padding-block:40px; color:var(--mut); font-size:14px}
  .pielinks{display:flex; gap:18px; flex-wrap:wrap; margin-top:4px}
  .pielinks a{color:var(--mut); display:inline-block; padding-block:13px; line-height:1.2}
  svg{max-width:100%; height:auto}
  @media (max-width:860px){
    .hero{grid-template-columns:1fr; gap:36px; padding-block:48px 56px}
    .grid3{grid-template-columns:1fr}
    form.contacto{grid-template-columns:1fr}
    nav.main{display:none}
    .sec{padding-block:52px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr!important; gap:32px!important}}


/* ==========================================================================
   Enlace de salto de Bricks (accesibilidad).
   Heredaba el rojo de los enlaces y se quedaba en 3,71:1 de contraste.
   Se le da el par tinta/papel, que pasa AA de sobra.
   ========================================================================== */
.skip-link,
.skip-link:focus{
  background: var(--ink);
  color: var(--paper);
  outline-color: var(--red);
}