/*
Theme Name:   SueciaID
Theme URI:    https://sueciaid.se
Description:  Tema propio de SueciaID. Autónomo — no necesita Botiga ni ningún tema padre. Paleta editorial cálida, Cormorant Garamond + Jost, cabecera y pie a juego con las páginas, botón de WhatsApp a la izquierda para no chocar con el asesor. El contenido de Inicio, /gracias y /politica-de-privacidad sigue editándose desde WordPress como bloque HTML.
Author:       SueciaID — Andrés D. Gutiérrez
Author URI:   https://sueciaid.se
Version:      2.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sueciaid
Tags:         custom-colors, custom-logo, custom-menu, full-width-template, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════
   SUECIAID · Tema propio · v2.8.0

   Cómo está repartido esto, para saber dónde tocar:

   ESTE ARCHIVO manda en el marco — cabecera, menú, pie, el botón
   de WhatsApp y las páginas de texto (blog, 404, búsqueda).

   EL BLOQUE DE CADA PÁGINA manda en su propio diseño. Todo lo suyo
   va bajo #sid-wrap, #sid-gracias o #sid-priv, así que no choca con
   nada de aquí. Si quieres cambiar el hero, se edita la página en
   WordPress, no este archivo.

   Prefijo `sid-` en todo: si algún día instalas un plugin que trae
   sus propias clases, no habrá colisión.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root{
  --ivory:#FAFAF7;
  --cream:#F4F2EC;
  --linen:#EDE9E0;
  --warm:#E0D9CC;
  --sand:#C8BFB0;
  --ink:#2A2620;
  --deep:#1A1614;

  /* El oro tiene DOS usos y no son intercambiables.
     #B89A5E sobre marfil da 2,57:1 — no llega al mínimo legible.
     Se reserva para filetes, bordes e iconos. Para TEXTO sobre
     fondo claro va --gold-tx: 5,24:1. Si algún día cambias el oro,
     cambia los dos y vuelve a medir el contraste. */
  --gold:#B89A5E;
  --gold-lt:#D4B882;
  --gold-tx:#836430;

  --body:#6A6154;

  /* Dos verdes, y la diferencia importa.
     --green es el verde de marca: vale para un punto, un icono, un
     filete. --green-dk es el ÚNICO válido detrás de texto blanco:
     #1E9E4A con blanco encima da 3,47:1 y no llega al mínimo. Lo
     descubrió la prueba del navegador en el botón de WhatsApp, que
     llevaba meses así. */
  --green:#1E9E4A;
  --green-dk:#158039;
  --line:rgba(42,38,32,.09);
  --line2:rgba(42,38,32,.18);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:4px;
  --r-lg:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ancho:1280px;
  --ancho-txt:70ch;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* clip y no hidden: hidden rompe position:sticky y la cabecera lo usa. */
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-tx);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1.14;
  color:var(--ink);
  margin:0 0 .6rem;
  text-wrap:balance;
}

/* Foco visible en todo el sitio. Sin esto, quien navega con teclado
   no sabe dónde está — y es gente que ya viene con suficiente
   fricción encima. */
:focus-visible{
  outline:2px solid var(--gold-tx);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.sid-oculto{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Saltar al contenido: invisible hasta que se tabula. */
.sid-saltar{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--ink);color:var(--gold-lt);
  padding:.8rem 1.3rem;border-radius:0 0 var(--r) 0;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.sid-saltar:focus{left:0}

/* ═══════════════════ CABECERA ═══════════════════════════════════ */
.sid-header{
  position:sticky;top:0;z-index:9990;
  background:rgba(250,250,247,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.sid-header-in{
  max-width:var(--ancho);margin:0 auto;
  padding:.9rem clamp(1.25rem,5vw,3rem);
  display:flex;align-items:center;gap:1.5rem;
}
.sid-marca{flex:1;min-width:0}
.sid-logo{
  font-family:var(--serif);font-size:1.45rem;font-weight:400;
  line-height:1.1;margin:0;letter-spacing:-.01em;
}
.sid-logo a{color:var(--ink);text-decoration:none}
.sid-logo span{color:var(--gold-tx)}
.sid-lema{
  margin:.1rem 0 0;font-size:.72rem;letter-spacing:.09em;
  color:var(--body);font-weight:400;
}
/* ── El logo ──────────────────────────────────────────────────────
   Más grande que el 48px de antes: en la captura del 27/08 quedaba
   diminuto al lado del menú y la marca no se leía.

   Y sin adornos. WordPress y algunos plugins le meten `border`,
   `box-shadow` o un fondo blanco al logo; sobre un logo que ya trae
   su propio círculo dorado, eso se ve como un recuadro alrededor. Se
   apagan aquí de forma explícita en lugar de confiar en que nadie los
   ponga. */
.custom-logo-link{display:inline-block;line-height:0}
.custom-logo{
  max-height:64px;width:auto;height:auto;
  border:0;border-radius:0;box-shadow:none;background:none;padding:0;
}
@media (max-width:560px){.custom-logo{max-height:52px}}

/* El del pie va sobre fondo oscuro: mismo tamaño de lectura. */
.sid-footer-img{
  max-height:56px;width:auto;height:auto;
  border:0;border-radius:0;box-shadow:none;background:none;padding:0;
}

.sid-nav{display:flex;align-items:center;gap:1.6rem}
.sid-menu{
  display:flex;align-items:center;gap:1.5rem;
  list-style:none;margin:0;padding:0;
}
.sid-menu li{position:relative}
.sid-menu a{
  font-size:.86rem;font-weight:500;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;
  padding:.35rem 0;display:inline-block;
  transition:color .2s;
}
.sid-menu a:hover{color:var(--gold-tx);text-decoration:none}
.sid-menu a::after{
  content:'';display:block;height:1px;width:0;background:var(--gold);
  transition:width .28s var(--ease);
}
.sid-menu a:hover::after{width:100%}
.sid-menu .current-menu-item > a,
.sid-menu .current_page_item > a{color:var(--gold-tx);font-weight:600}
.sid-menu .current-menu-item > a::after,
.sid-menu .current_page_item > a::after{width:100%}

.sid-nav-cta{
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--gold-lt);
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.62rem 1.15rem;border-radius:var(--r);
  transition:background .25s,transform .25s;
}
.sid-nav-cta:hover{background:var(--deep);transform:translateY(-1px);text-decoration:none;color:var(--gold-lt)}

/* Botón de menú — solo en móvil */
.sid-toggle{
  display:none;background:none;border:0;
  width:44px;height:44px;padding:10px;
  flex-direction:column;justify-content:center;gap:5px;
}
.sid-toggle span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.sid-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sid-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.sid-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:860px){
  .sid-toggle{display:flex}
  .sid-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ivory);border-bottom:1px solid var(--line);
    padding:0 clamp(1.25rem,5vw,3rem);
    max-height:0;overflow:hidden;
    transition:max-height .32s var(--ease),padding .32s var(--ease);
  }
  .sid-nav.abierto{max-height:70vh;padding:.6rem clamp(1.25rem,5vw,3rem) 1.4rem}
  .sid-menu{flex-direction:column;align-items:stretch;gap:0}
  .sid-menu a{padding:.85rem 0;border-bottom:1px solid var(--line);min-height:44px}
  .sid-menu a::after{display:none}
  .sid-nav-cta{margin-top:1rem;justify-content:center;min-height:44px}
}

/* ═══════════════════ CONTENIDO ══════════════════════════════════ */
.sid-main{display:block;min-height:40vh}

/* Las páginas con bloque propio: el tema se aparta del todo. */
.sid-contenido-libre{padding:0;margin:0;max-width:none}

/* Páginas de texto normales: columna de lectura cómoda. */
.sid-wrap-txt{
  max-width:var(--ancho-txt);
  margin:0 auto;
  padding:0 clamp(1.25rem,5vw,2rem);
}
.sid-page-hd{padding:clamp(3rem,7vw,5rem) 0 1.5rem}
.sid-page-hd h1{font-size:clamp(2.2rem,5vw,3.2rem)}
.sid-meta{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--body);margin:0 0 .5rem;
}
.sid-eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-tx);margin:0 0 1.2rem;
}
.sid-eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}
.sid-lead{font-size:1.05rem;line-height:1.8;color:var(--body);font-weight:300;max-width:56ch}

.sid-contenido{padding-bottom:clamp(3rem,7vw,5rem);color:var(--body);font-weight:300}
.sid-contenido p{margin:0 0 1.1rem;line-height:1.85}
.sid-contenido strong,.sid-contenido b{color:var(--ink);font-weight:600}
.sid-contenido h2{font-size:clamp(1.6rem,3.4vw,2.1rem);margin:2.4rem 0 .7rem}
.sid-contenido h3{font-size:1.3rem;margin:1.8rem 0 .5rem}
.sid-contenido ul,.sid-contenido ol{margin:0 0 1.2rem;padding-left:1.3rem}
.sid-contenido li{margin-bottom:.45rem;line-height:1.8}
.sid-contenido blockquote{
  margin:1.6rem 0;padding-left:1.3rem;
  border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink);
}
.sid-contenido img,.sid-contenido figure{border-radius:var(--r-lg);margin:1.6rem 0}
.sid-contenido figcaption{font-size:.82rem;color:var(--body);text-align:center;margin-top:.5rem}
.sid-contenido code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--linen);border:1px solid var(--warm);border-radius:3px;padding:.08em .35em;
}
.sid-contenido pre{
  background:var(--deep);color:#E8E2D6;padding:1.1rem 1.3rem;
  border-radius:var(--r-lg);overflow-x:auto;font-size:.86rem;
}
.sid-contenido pre code{background:none;border:0;color:inherit;padding:0}
.sid-contenido table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 1.4rem}
.sid-contenido th{
  background:var(--linen);text-align:left;padding:.7rem .9rem;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--body);
}
.sid-contenido td{padding:.7rem .9rem;border-top:1px solid var(--line)}

/* Bloques de WordPress que se salen de la columna a propósito. */
.alignwide{max-width:min(1100px,92vw);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.aligncenter{margin-left:auto;margin-right:auto;text-align:center}

/* ── Listado del blog ─────────────────────────────────────────── */
.sid-listado{padding-bottom:clamp(3rem,7vw,5rem)}
.sid-entrada{padding:2rem 0;border-bottom:1px solid var(--line)}
.sid-entrada h2{font-size:1.7rem;margin-bottom:.3rem}
.sid-entrada h2 a{color:var(--ink)}
.sid-entrada h2 a:hover{color:var(--gold-tx);text-decoration:none}
.sid-entrada .sid-contenido{padding-bottom:0}

.pagination,.sid-paginacion{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  padding:2rem 0;font-size:.85rem;
}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px;padding:0 .6rem;
  border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);
}
.pagination .page-numbers.current{background:var(--ink);color:var(--gold-lt);border-color:var(--ink)}
.pagination a:hover{border-color:var(--gold-tx);text-decoration:none}

/* ── Botones ──────────────────────────────────────────────────── */
.sid-btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.95rem 1.8rem;border-radius:var(--r);
  border:1.5px solid transparent;
  background:var(--ink);color:var(--gold-lt);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
}
.sid-btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover{
  background:var(--deep);color:var(--gold-lt);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,22,20,.22);
  text-decoration:none;
}
.sid-btn-wa{background:var(--green-dk);color:#fff;box-shadow:0 4px 20px rgba(30,158,74,.26)}
.sid-btn-wa:hover{background:#17853D;color:#fff;box-shadow:0 12px 30px rgba(30,158,74,.34)}
.sid-btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.sid-btn-ghost:hover{background:transparent;border-color:var(--gold-tx);color:var(--gold-tx);box-shadow:none}
.sid-acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0}

/* ── Formularios ──────────────────────────────────────────────── */
input[type="text"],input[type="email"],input[type="url"],
input[type="tel"],input[type="search"],input[type="password"],
input[type="number"],select,textarea{
  font-family:var(--sans);font-size:.95rem;font-weight:300;
  padding:.8rem .95rem;
  border:1.5px solid var(--warm);border-radius:var(--r);
  background:var(--ivory);color:var(--ink);
  width:100%;max-width:100%;
  transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold-tx);
  box-shadow:0 0 0 3px rgba(184,154,94,.16);
}
.sid-buscar{display:flex;gap:.6rem;align-items:stretch;margin:1.5rem 0}
.sid-buscar input{flex:1}

/* ── 404 ──────────────────────────────────────────────────────── */
.sid-404{padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,2rem) clamp(4rem,8vw,6rem)}
.sid-404 h1{font-size:clamp(2.3rem,6vw,3.6rem);margin-bottom:1rem}

/* ═══════════════════ PIE ════════════════════════════════════════ */
.sid-footer{background:var(--deep);color:rgba(255,255,255,.55);margin-top:0}
.sid-footer-in{
  max-width:var(--ancho);margin:0 auto;
  /* El relleno inferior deja sitio al botón flotante de WhatsApp:
     va fijo abajo a la izquierda, así que al llegar al final del
     scroll se sentaba justo encima de la línea del copyright. */
  padding:clamp(3.5rem,7vw,5rem) clamp(1.25rem,5vw,3rem) 5.5rem;
}
.sid-footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:2.5rem;margin-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.sid-footer-logo{font-family:var(--serif);font-size:1.5rem;margin:0 0 .8rem;line-height:1.1}
.sid-footer-logo a{color:#fff}
.sid-footer-logo a:hover{text-decoration:none;color:#fff}
.sid-footer-logo span{color:var(--gold)}
.sid-footer-marca p{font-size:.87rem;line-height:1.7;font-weight:300;max-width:34ch;margin:0 0 .8rem;color:rgba(255,255,255,.5)}
.sid-footer h2,.sid-footer .widget-title{
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.56);margin:0 0 1rem;
}
.sid-footer-menu{list-style:none;margin:0;padding:0}
.sid-footer-menu li{margin-bottom:.6rem;font-size:.87rem;font-weight:300;color:rgba(255,255,255,.5)}
.sid-footer-menu a{color:rgba(255,255,255,.55);transition:color .2s}
.sid-footer-menu a:hover{color:var(--gold-lt);text-decoration:none}
.sid-footer-btm{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.sid-footer-btm p{font-size:.78rem;color:rgba(255,255,255,.56);margin:0}
.sid-footer-btm span{
  font-size:.68rem;color:rgba(184,154,94,.65);
  letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
/* La versión del sitio. Discreta pero legible: está para consultarla
   cuando algo no cuadra, no para lucirla. */
.sid-ver{
  font-weight:400;font-size:.62rem;letter-spacing:.06em;
  color:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:.2rem .6rem;
  font-variant-numeric:tabular-nums;text-transform:none;white-space:nowrap;
}

@media (max-width:860px){.sid-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sid-footer-grid{grid-template-columns:1fr}}

/* ═══════════════════ WHATSAPP ═══════════════════════════════════ */
/* ⚠️ Abajo a la IZQUIERDA a propósito: el widget del Asesor ocupa la
   esquina derecha (right:20px). Dos botones flotantes en el mismo
   sitio se tapan el uno al otro. */
.sid-fab{
  position:fixed;left:1.5rem;bottom:1.5rem;z-index:9998;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--green-dk);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:.9rem 1.4rem;border-radius:50px;
  box-shadow:0 8px 32px rgba(30,158,74,.35);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.sid-fab:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(30,158,74,.45);text-decoration:none;color:#fff}
.sid-fab svg{width:19px;height:19px;flex:none}
@media (max-width:640px){
  .sid-fab{padding:.95rem;border-radius:50%}
  .sid-fab span{display:none}
}

/* ═══════════════════ MÓVIL ══════════════════════════════════════ */
/* iOS hace zoom al enfocar un campo de menos de 16px y descoloca la
   página entera. No es preferencia: es un fallo de uso. */
@media (max-width:900px){
  input[type="text"],input[type="email"],input[type="url"],
  input[type="tel"],input[type="search"],input[type="password"],
  input[type="number"],select,textarea{font-size:16px}
}
/* En pantallas de dedo, 44px de alto mínimo en los controles. Se
   limita a botones y campos: un enlace dentro de un párrafo no lo
   necesita y agrandarlo rompería el interlineado. */
@media (pointer:coarse){
  .sid-btn,.wp-block-button__link,
  input[type="submit"],button[type="submit"],
  .sid-nav-cta,.sid-fab,.pagination .page-numbers{min-height:44px}
}

/* ═══════════════════ WOOCOMMERCE ════════════════════════════════
   Solo por si está activo. El cobro va por Stripe desde el asesor,
   no por un carrito — esto es para que, si queda alguna página de
   la tienda publicada, no desentone del resto. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--ink);color:var(--gold-lt);
  border-radius:var(--r);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;font-size:.8rem;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{background:var(--deep);color:var(--gold-lt)}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button{background:var(--green-dk);color:#fff}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover{background:#17853D;color:#fff}
.woocommerce-message,.woocommerce-info{border-top-color:var(--gold)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--gold-tx)}
.woocommerce-error{border-top-color:#A81F17}

/* ═══════════════════ IMPRESIÓN ══════════════════════════════════ */
@media print{
  .sid-header,.sid-footer,.sid-fab,.sid-saltar{display:none!important}
  body{background:#fff;color:#000}
  .sid-wrap-txt{max-width:none}
}