/* ─────────────────────────────────────────────────────────────
   FLUYO · base compartida por las cuatro páginas
   Estilo «Flow». Tokens, tipografía, barra, botones, pie y banner
   de cookies. Ver «Estilo Fluyo - guia para Claude Code» en la bóveda.

   Este archivo va SIEMPRE en un .css externo, nunca dentro del HTML:
   la CSP del sitio es style-src 'self' sin unsafe-inline, así que un
   <style> o un style="..." no se aplicarían.
   ───────────────────────────────────────────────────────────── */

/* 1 · Tokens ------------------------------------------------- */
:root{
  --acc:#C4552F; --tx:#17150F; --tx2:#6B675E; --tx3:#9A968C;
  --page:#FAF9F7; --band:#F2EFEA; --card:#FFFFFF;
  --hair:rgba(23,21,15,.11); --hair2:rgba(23,21,15,.22);
  --ink:#17150F; --onInk:#FAF9F7; --onAcc:#FFFFFF;
  --navBg:rgba(250,249,247,.72);
  --sombra:0 12px 26px rgba(23,21,15,.14);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="Claro"]){
    --acc:#E27A4E; --tx:#F5F5F7; --tx2:#9A9AA2; --tx3:#6E6E76;
    --page:#0A0A0C; --band:#17171C; --card:#0F0F13;
    --hair:rgba(245,245,247,.14); --hair2:rgba(245,245,247,.28);
    --ink:#141418; --onInk:#F5F5F7; --onAcc:#FFFFFF;
    --navBg:rgba(10,10,12,.72);
    --sombra:0 12px 26px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-tema="Oscuro"]{
  --acc:#E27A4E; --tx:#F5F5F7; --tx2:#9A9AA2; --tx3:#6E6E76;
  --page:#0A0A0C; --band:#17171C; --card:#0F0F13;
  --hair:rgba(245,245,247,.14); --hair2:rgba(245,245,247,.28);
  --ink:#141418; --onInk:#F5F5F7; --onAcc:#FFFFFF;
  --navBg:rgba(10,10,12,.72);
  --sombra:0 12px 26px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* 2 · Base --------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--page); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.5; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:background .4s,color .4s;
}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--tx)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input{font:inherit}
summary::-webkit-details-marker{display:none}
::selection{background:#C4552F;color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

/* La barra es fija: los saltos de ancla no deben quedar debajo */
#top,#trabajo,#problema,#proceso,#informe,#casos,#porque,#hablamos,#dudas{scroll-margin-top:78px}

.envoltorio{max-width:1400px;margin:0 auto;width:100%}
.etiqueta{
  display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);
}
.oculto-visualmente{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 3 · Barra de navegación ------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px clamp(16px,4vw,52px);
  padding-left:max(clamp(16px,4vw,52px),env(safe-area-inset-left));
  padding-right:max(clamp(16px,4vw,52px),env(safe-area-inset-right));
  border-bottom:1px solid transparent;
  transition:background .3s cubic-bezier(.25,.1,.25,1),border-color .3s;
}
.nav.pegado{
  background:var(--navBg);border-bottom-color:var(--hair);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.marca{color:var(--tx);display:flex;align-items:center;min-height:44px}
.marca:hover{color:var(--tx)}
.marca span{font-size:24px;font-weight:500;letter-spacing:-.055em;line-height:1}
.punto-acc{color:var(--acc)}
.nav-dcha{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav-link{color:var(--tx2);font-size:15px;font-weight:500;display:flex;align-items:center;min-height:44px}
.nav-link:hover{color:var(--tx)}
.btn-tema{
  width:44px;height:44px;flex:none;border-radius:100px;border:1px solid var(--hair);
  color:var(--tx2);font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s;
}
.btn-tema:hover{color:var(--tx);border-color:var(--hair2)}
.btn-tema:active{transform:scale(.97)}

/* 4 · Botones ------------------------------------------------ */
.btn-ink{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
  border-radius:100px;background:var(--ink);color:var(--onInk);
  font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:opacity .2s,transform .1s;
}
.btn-ink:hover{opacity:.88;color:var(--onInk)}
.btn-ink:active{transform:scale(.98)}
.btn-acc{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;
  border-radius:100px;background:var(--acc);color:var(--onAcc);
  font-size:17px;font-weight:600;letter-spacing:-.015em;
  transition:opacity .2s,transform .1s;
}
.btn-acc:hover{opacity:.9;color:var(--onAcc)}
.btn-acc:active{transform:scale(.98)}
.btn-linea{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;
  border-radius:100px;border:1px solid var(--hair);color:var(--tx);
  font-size:17px;font-weight:500;transition:border-color .2s;
}
.btn-linea:hover{border-color:var(--hair2);color:var(--tx)}
.btn-linea:active{transform:scale(.98)}

/* 5 · Pie ---------------------------------------------------- */
.pie{
  padding:clamp(36px,5vw,64px) clamp(18px,4vw,52px);
  padding-bottom:max(clamp(36px,5vw,64px),env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
}
.pie .envoltorio{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pie-marca{display:flex;flex-direction:column;gap:10px}
.pie-logo{font-size:26px;font-weight:500;letter-spacing:-.055em;line-height:1}
.pie-lema{font-size:14.5px;color:var(--tx2)}
/* Dos grupos: primero por dónde se navega, debajo lo legal. El correo no se
   repite aquí: ya está en «Contacto». */
.pie-enlaces{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pie-grupo{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.pie-grupo-legal a,.pie-grupo-legal button{color:var(--tx3)}
.pie-enlaces a,.pie-enlaces button{
  font-size:14.5px;color:var(--tx2);background:none;border:none;padding:0;
  font-weight:400;letter-spacing:inherit;transition:color .2s;
}
.pie-enlaces a:hover,.pie-enlaces button:hover{color:var(--tx)}
.pie-aviso{width:100%;font-size:13px;color:var(--tx3);padding-top:8px}

/* 6 · Banner de cookies -------------------------------------- */
/* Sin emojis y sin un segundo acento terracota: «Aceptar todas» va en
   --ink, que es el botón fuerte neutro de la marca. */
.ck-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--card);border-top:1px solid var(--hair);
  box-shadow:var(--sombra);
  padding:20px clamp(18px,4vw,52px);
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  animation:ck-entra .4s cubic-bezier(.2,.7,.2,1) both;
}
.ck-banner[hidden]{display:none}
@keyframes ck-entra{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.ck-inner{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
}
.ck-txt{font-size:14.5px;color:var(--tx2);line-height:1.5;max-width:66ch;text-wrap:pretty}
.ck-txt b{color:var(--tx);font-weight:600}
.ck-btns{display:flex;gap:10px;flex-wrap:wrap}
.ck-btn{
  min-height:44px;padding:0 20px;border-radius:100px;
  font-size:14.5px;font-weight:500;white-space:nowrap;transition:border-color .2s,opacity .2s;
}
.ck-reject{border:1px solid var(--hair);color:var(--tx)}
.ck-reject:hover{border-color:var(--hair2)}
.ck-accept{background:var(--ink);color:var(--onInk);font-weight:600}
.ck-accept:hover{opacity:.88}
.ck-btn:active{transform:scale(.98)}

/* 7 · Móvil -------------------------------------------------- */
@media (max-width:960px){
  .nav-link,.btn-tema{display:none}
  .pie-enlaces{gap:8px 22px}
  .pie-enlaces a,.pie-enlaces button{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:560px){
  .pie .envoltorio{align-items:flex-start}
  .pie-enlaces{align-items:flex-start}
  .pie-grupo{justify-content:flex-start}
  .ck-inner{flex-direction:column;align-items:stretch}
  /* Rechazar primero y del mismo tamaño: la AEPD pide que decir que no sea
     tan fácil como decir que sí. */
  .ck-btns{flex-direction:column}
  .ck-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01s!important;transition-duration:.01s!important}
}