/*
Theme Name: Sesgo Positivo Child
Template: hostinger-ai-theme
Version: 2.0
Description: Sistema visual compartido: tipografia, tokens de color, nav y footer.
             Cada plantilla page-*.php anade solo el CSS de sus secciones propias.
*/

/* OJO: "Theme Name" y "Template" deben quedarse exactamente como estan.
   Template apunta al tema padre; si falta o cambia, WordPress deja de
   reconocer esto como tema hijo y desactiva el tema. */

/* ── Switzer (self-hosted, se cachea entre paginas) ── */
@font-face{font-family:'Switzer';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/switzer-400.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-weight:500;font-style:normal;font-display:swap;src:url('assets/fonts/switzer-500.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-weight:600;font-style:normal;font-display:swap;src:url('assets/fonts/switzer-600.woff2') format('woff2');}
@font-face{font-family:'Switzer';font-weight:700;font-style:normal;font-display:swap;src:url('assets/fonts/switzer-700.woff2') format('woff2');}

/* El !important es defensivo: el tema padre impone su propia tipografia. */
html body,
html body *:not(em):not(code):not(pre) {
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
}
html body code, html body pre { font-family: ui-monospace, 'SF Mono', 'Courier New', monospace !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden lo pisa cualquier regla que fije display (por ejemplo
   .casos-card{display:flex}), asi que el filtro de /casos/ no ocultaba nada.
   El entorno de previsualizacion si trae esta regla; WordPress no. */
[hidden] { display: none !important; }

:root {
  --bg:      #fbf9f5;
  --surface: #f4f1ea;
  --surface2: #ece7de;
  --border:  rgba(36,30,20,0.08);
  --border2: rgba(36,30,20,0.14);
  --text:    #0d0d0c;
  --muted:   rgba(36,30,20,0.58);
  --dim:     rgba(36,30,20,0.35);
  --accent:  #a4795e;
  --accent2: #8f6650;
  --glass:   rgba(255,255,255,0.5);
  --glass-b: rgba(255,255,255,0.75);
  --accent-glass:   rgba(164,121,94,0.16);
  --accent-glass-b: rgba(164,121,94,0.3);
  --font:    'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease:    cubic-bezier(.22,1,.36,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Foco visible para navegacion por teclado (el tema padre no lo garantiza). */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────
   NAV (compartido — template-parts/nav.php)
───────────────────────────────────────────── */
.topbar{
    position:fixed;top:16px;left:0;right:0;z-index:50;padding:0 clamp(20px,5vw,64px);
    /* Tokens propios: home y casos redefinen --text/--muted dentro de .wrap y el
       nav se veia distinto segun la pagina. Con estos el nav es identico en todas. */
    --nav-ink:#242320; --nav-muted:#726c62; --nav-dim:#a49d90;
  }
.nav{
    max-width:760px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    background:var(--glass);
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    border:none;border-radius:980px;padding:5px 5px 5px 18px;
    box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 8px 24px rgba(36,30,20,0.045);
  }
  .brand{display:flex;flex-direction:column;gap:1px;text-decoration:none}
  .brand-name{font-size:12px;font-weight:700;letter-spacing:-0.01em;color:var(--nav-ink)}
  .brand-sub{font-size:8px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--nav-dim)}
  .links{display:flex;align-items:center;gap:2px;list-style:none}
  .links>li{position:relative}
  .links a{display:block;padding:7px 13px;border-radius:980px;font-size:12px;font-weight:600;color:var(--nav-muted);text-decoration:none;transition:background .15s,color .15s}
  .links a:hover{background:rgba(36,30,20,0.045);color:var(--nav-ink)}
  .links .has-dd{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:980px;font-size:12px;font-weight:600;color:var(--nav-muted);cursor:default;transition:background .15s,color .15s}
  .links .has-dd.current{font-weight:700;color:var(--nav-ink)}
  .links li:hover .has-dd{background:rgba(36,30,20,0.045)}
  .links .has-dd svg{transition:transform .2s}
  .links li:hover .has-dd svg{transform:rotate(180deg)}
  .dd{
    position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
    background:rgba(255,255,255,0.92);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(255,255,255,0.95);border-radius:16px;padding:6px;min-width:224px;
    box-shadow:0 16px 36px rgba(36,30,20,0.1);
    opacity:0;pointer-events:none;transition:opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1);
  }
  .links li:hover .dd{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
  .links li:first-child::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:240px;height:16px;}
  .dd a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--nav-ink)}
  .dd a:hover{background:rgba(36,30,20,0.045)}
  .dd a.current{font-weight:700}
  .dd-divider{height:1px;background:var(--glass-b);margin:6px 8px}
  .dd-all{color:var(--nav-muted);font-weight:600}
  .dd-all:hover{color:var(--nav-ink)}
  .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .nav-cta{display:inline-flex;align-items:center;background:var(--accent-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:none;border-radius:980px;padding:8px 17px;font-size:12px;font-weight:700;color:var(--nav-ink);text-decoration:none;transition:background .2s,transform .2s}
  .nav-cta:hover{background:rgba(164,121,94,0.24);transform:translateY(-1px)}

  .hamburger{display:none;flex-direction:column;justify-content:space-between;width:34px;height:34px;padding:11px 9px;border:none;background:transparent;border-radius:9px;cursor:pointer;margin-right:2px}
  .hamburger:hover{background:rgba(36,30,20,0.06)}
  .hamburger span{display:block;width:100%;height:2px;background:var(--nav-ink);border-radius:2px;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s}
  .hamburger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .mobile-menu{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:49;background:rgba(255,255,255,0.92);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-b);border-radius:18px;padding:8px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);box-shadow:0 20px 44px rgba(36,30,20,0.14)}
  .mobile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .mobile-menu a{display:block;padding:12px 12px;font-size:15px;font-weight:600;color:var(--nav-ink);text-decoration:none;border-radius:10px}
  .mobile-menu a:active{background:rgba(36,30,20,0.06)}
  .mobile-acc-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 12px;font-size:15px;font-weight:600;color:var(--nav-ink);background:none;border:none;border-radius:10px;font-family:inherit;cursor:pointer;text-align:left}
  .mobile-acc-trigger:active{background:rgba(36,30,20,0.06)}
  .mobile-acc-chevron{flex-shrink:0;color:var(--nav-dim);transition:transform .22s cubic-bezier(.22,1,.36,1)}
  .mobile-acc-trigger[aria-expanded="true"] .mobile-acc-chevron{transform:rotate(180deg)}
  .mobile-acc-panel{max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.22,1,.36,1)}
  .mobile-acc-panel.open{max-height:280px}
  .mobile-sub{padding-left:22px !important;font-size:13.5px !important;color:var(--nav-muted) !important}
  .mobile-sub.current{color:var(--accent) !important;font-weight:700 !important}
  .mobile-acc-divider{height:1px;background:var(--glass-b);margin:6px 12px}
  .mobile-all{padding-left:12px !important;color:var(--nav-ink) !important;font-weight:600 !important}
  @media (max-width:900px){.links{display:none}.hamburger{display:flex}}

/* ─────────────────────────────────────────────
   FOOTER (compartido — template-parts/footer.php)
───────────────────────────────────────────── */
/* Especificidad deliberadamente baja (.site-footer, no footer.site-footer):
   home y casos redefinen estas mismas propiedades en su CSS inline para
   centrar el footer a 1160px, y con un selector mas especifico aqui
   ese override no ganaria. */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 36px clamp(24px, 8vw, 120px);
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-brand { text-decoration: none; }
.footer-brand-name { font-size: 13px; font-weight: 600; color: rgba(36,30,20,0.7); display: block; margin-bottom: 2px; }
.footer-brand-sub  { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 12px; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 11px; color: var(--dim); }