/* wilsonguerra.com — cuatro diseños (data-diseno en <html>). El 2 (por defecto) es blanco, negro y dorado como la portada.
   Cada diseño define los mismos tokens; los componentes solo leen tokens. */

/* 2 · Por defecto desde el 01-11-2026: blanco, negro y dorado, igual que la portada (sitio.css), con Space Grotesk.
   Antes era «Ejecutivo» (azul marino y verde pátina); quedó en _respaldos/2026-11-01-portada-final/estilo.css. */
:root,[data-diseno="2"]{
  --bg:#faf8f3; --surface:#ffffff; --raise:#f3eee3; --line:rgba(30,24,10,.13);
  --text:#141210; --muted:#4c473d; --accent:#946610; --acc-txt:#8a5e10; --on-accent:#ffffff;
  --duda:#b42318; --duda-soft:rgba(180,35,24,.10); --halo:#ffffff;
  --display:"Space Grotesk",system-ui,sans-serif; --dw:700; --dcase:none; --dtrack:-.025em; --esc:.8;
  --body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --mapa:"positron"; --sombra:#b3a98f; --luz:#faf8f3;
  color-scheme:light;
}
/* 1 · Salar: blanco de salar, tinta verde oscura, acento óxido de hierro. Títulos anchos. */
[data-diseno="1"]{
  --bg:#eef0ee; --surface:#ffffff; --raise:#e2e6e2; --line:rgba(28,35,33,.13);
  --text:#1c2321; --muted:#5a6562; --accent:#b4441b; --acc-txt:#a33d17; --on-accent:#ffffff;
  --duda:#b42318; --duda-soft:rgba(180,35,24,.10); --halo:#ffffff;
  --display:"Archivo","Arial Black",sans-serif; --dw:800; --dcase:uppercase; --dtrack:-.005em; --esc:.6;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mapa:"positron"; --sombra:#b8a28f; --luz:#f6f6f4;
  color-scheme:light;
}
/* 3 · Alta visibilidad: hormigón, negro y naranja reflectante, letra de cartel de faena. */
[data-diseno="3"]{
  --bg:#e5e6e8; --surface:#f6f6f7; --raise:#d8dadd; --line:rgba(0,0,0,.14);
  --text:#111315; --muted:#4c535a; --accent:#ff5a1f; --acc-txt:#c2410c; --on-accent:#111315;
  --duda:#b42318; --duda-soft:rgba(180,35,24,.10); --halo:#ffffff;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --dw:800; --dcase:uppercase; --dtrack:.005em; --esc:1;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mapa:"positron"; --sombra:#9a9ea3; --luz:#f6f6f6;
  color-scheme:light;
}
/* 4 · Pátina de cobre: oscuro verde azulado con acento verdigris. */
[data-diseno="4"]{
  --bg:#0d1f22; --surface:#13292d; --raise:#1a353a; --line:rgba(200,240,235,.12);
  --text:#e6f0ee; --muted:#93aba7; --accent:#49d3b4; --acc-txt:#49d3b4; --on-accent:#04201b;
  --duda:#f0a097; --duda-soft:rgba(240,133,122,.14); --halo:#000000;
  --display:"Red Hat Display",system-ui,sans-serif; --dw:700; --dcase:none; --dtrack:-.015em; --esc:.8;
  --body:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mapa:"dark"; --sombra:#000000; --luz:#3f8f86;
  color-scheme:dark;
}
:root{--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent)}
[data-diseno="1"] h1,[data-diseno="1"] h2,[data-diseno="1"] h3{font-stretch:125%}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body)}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.ancho{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mini{font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-txt)}
.apagado{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Borrador: aviso arriba, marcos de foto pendiente, cifras sin confirmar */
.aviso{background:var(--text);color:var(--bg);font:13px/1.4 var(--body);padding:8px 0}
.aviso .ancho{display:flex;gap:10px;flex-wrap:wrap}
.aviso b{font-weight:600}

/* Cabecera */
.cab{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cab .ancho{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.marca{display:flex;align-items:center;gap:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.aro{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;color:var(--acc-txt);font:500 12px/1 var(--mono);letter-spacing:.04em}
.cab nav{display:flex;gap:22px;font-size:14px}
.cab nav a{color:var(--muted);text-decoration:none}
.cab nav a:hover,.cab nav a[aria-current]{color:var(--text)}
.cab nav{align-items:center}
.cab nav a.portal{color:var(--acc-txt);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:999px;padding:6px 12px;white-space:nowrap}
.cab nav a.portal:hover{background:var(--accent-soft)}
@media (max-width:900px){.cab nav .solo-ancho{display:none}}
/* En celular el menú baja a una segunda línea y se desliza de lado si no cabe */
@media (max-width:640px){.cab .ancho{flex-wrap:wrap;row-gap:8px;padding-block:10px}.cab nav{order:2;width:100%;gap:18px;font-size:13.5px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.cab nav a{white-space:nowrap}.cab nav a.portal{margin-left:auto}.aro{width:30px;height:30px;font-size:11px}}

/* Foto: imagen real o marco pendiente con curvas de nivel */
.foto{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--raise);aspect-ratio:4/3;max-width:100%}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto.pendiente{display:flex;align-items:flex-end;padding:12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
  background:repeating-radial-gradient(circle at 30% 120%,transparent 0 14px,color-mix(in srgb,var(--accent) 12%,transparent) 14px 15px),
             repeating-radial-gradient(circle at 85% -10%,transparent 0 18px,color-mix(in srgb,var(--text) 5%,transparent) 18px 19px),var(--raise)}
.foto.pendiente span{font:12.5px/1.35 var(--body);background:color-mix(in srgb,var(--surface) 88%,transparent);padding:6px 9px;border-radius:6px}
.foto.pendiente span::before{content:"FOTO PENDIENTE · ";font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--acc-txt)}
.foto.video.pendiente span::before{content:"VIDEO PENDIENTE · "}
.chip{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;border-radius:4px;background:var(--accent-soft);color:var(--acc-txt)}
.chip.duda{background:var(--duda-soft);color:var(--duda)}

.boton{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:14px 18px;border-radius:8px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.boton.principal{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.boton:hover{border-color:var(--accent)}

/* Selector de diseño (solo en borrador) */
.disenos{position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(0,0,0,.35);font:13px/1 var(--body)}
.disenos span{padding:0 6px;color:var(--muted)}
.disenos button{appearance:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:8px;padding:7px 9px;cursor:pointer;font:500 12.5px/1 var(--body)}
.disenos button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.disenos i{width:14px;height:14px;border-radius:50%;display:block}
.disenos{flex-wrap:wrap;max-width:min(760px,calc(100vw - 32px));justify-content:flex-end}
.disenos .sep{border-left:1px solid var(--line);margin-left:4px;padding-left:10px}
@media (max-width:640px){.disenos{left:max(16px,env(safe-area-inset-left,0px));justify-content:center;gap:5px}.disenos span{display:none}.disenos b{display:none}.disenos button{padding:6px 7px;font-size:11.5px}}

/* Pie */
.pie{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.pie .ancho{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-block:22px 34px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* WhatsApp (01-11): botón de la tarjeta de contacto y botón flotante en todas las páginas. Verde de la marca WhatsApp. */
.boton-wa{background:#25d366;border-color:#25d366;color:#fff}
.boton-wa:hover{background:#1ebe5a;border-color:#1ebe5a;color:#fff}
.boton-wa svg,.wa-flota svg{width:18px;height:18px;flex:none}
.botones-wa{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.botones-wa .boton{display:inline-flex;align-items:center;gap:8px}
.wa-flota{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;border-radius:999px;background:#25d366;color:#fff;
  text-decoration:none;font:600 15px/1 var(--body,system-ui);box-shadow:0 10px 26px -8px rgba(0,0,0,.45),0 0 0 4px rgba(37,211,102,.18);transition:transform .25s,box-shadow .2s,opacity .25s}
.wa-flota svg{width:24px;height:24px}
.wa-flota.escondido{opacity:0;transform:translateY(16px);pointer-events:none}
.wa-flota:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(0,0,0,.5),0 0 0 6px rgba(37,211,102,.22)}
@media (max-width:560px){.wa-flota{right:12px;bottom:12px;padding:12px 15px 12px 12px;font-size:14px}body{padding-bottom:70px}}
@media print{.wa-flota{display:none}}
@media (max-width:380px){.cab nav{gap:12px;font-size:12.5px}.cab nav a.portal{padding:5px 10px}} /* iPhone SE: que «Portal» quepa sin desplazar el menú */