/* =============================================================================
   Differentissgood · Hoja de marca compartida
   -----------------------------------------------------------------------------
   Este archivo es el ÚNICO sitio donde se definen la tipografía, los colores y
   la cabecera/pie comunes de todas las webs del estudio. Todas las páginas de
   este repositorio lo cargan antes de su propio <style>, y luego traducen sus
   variables internas a los tokens de aquí.

   Para cambiar la marca entera (por ejemplo, al igualarla con differentissgood.com)
   sólo hay que tocar el bloque «TOKENS DE MARCA» de abajo. Nada más.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   TOKENS DE MARCA  ←←←  AQUÍ SE TOCA
   --------------------------------------------------------------------------
   Valores copiados de differentissgood.com: son los del :root de index.html,
   en la raíz de este mismo repositorio. Si allí se cambia la marca, hay que
   cambiarla también aquí, o las dos mitades del sitio se separan.

   La web oficial es OSCURA por defecto y tiene interruptor a claro
   (:root[data-theme="light"]). Aquí se respeta igual: este bloque es el
   oscuro, y el claro viene justo debajo.
   ========================================================================== */
:root{
  /* --- Tipografía: las tres familias de la web oficial, de Google Fonts ---
     Anton para titulares (en la web oficial, siempre en mayúsculas),
     Inter para texto, Space Grotesk para etiquetas y menús.
     --dig-serif conserva el nombre para no tocar las 12 páginas, pero ya no
     es una serif: es la display de la marca. */
  --dig-serif:'Anton','Arial Narrow',Impact,sans-serif;              /* titulares */
  --dig-sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; /* texto */
  --dig-alt:'Space Grotesk','Inter',system-ui,Helvetica,Arial,sans-serif; /* etiquetas, menús, botones */
  --dig-peso-titulo:400;   /* Anton sólo tiene un peso */
  --dig-interlinea:1.6;

  /* --- Logotipo ---
     El logotipo se pinta por CSS, no con <img>, para que esté definido en un
     único sitio: cambiando esta línea cambia en las 12 páginas a la vez.
     Ventaja añadida: si el archivo falta, sale un hueco vacío en vez del icono
     de imagen rota. Alto y ancho se ajustan a la proporción del archivo real.
     Son los logotipos que la web oficial ya tenía en esta misma carpeta, sin
     fondo y en alta resolución (2058 x 644, o sea 3,2 a 1). Las rutas son
     relativas A ESTE ARCHIVO, así que valen esté donde esté la página.
       logo.png      -> tinta blanca, para fondo oscuro (el de por defecto)
       logo-dark.png -> tinta negra, para el tema claro */
  --dig-logo:url('logo.png');
  --dig-logo-alto:26px;
  --dig-logo-ancho:83px;
  --dig-logo-proporcion:3.2;   /* ancho ÷ alto, para los logotipos grandes */

  /* --- Color: modo oscuro (el de la web oficial) --- */
  --dig-papel:#0a0a0a;                       /* --black */
  --dig-papel-2:#111111;                     /* --black-2 */
  --dig-superficie:#1c1c1c;                  /* --card-1 */
  --dig-tinta:#ffffff;                       /* --white */
  --dig-tinta-suave:#9a9a9a;                 /* --grey */
  --dig-tinta-tenue:rgba(255,255,255,.45);
  --dig-linea:rgba(255,255,255,.1);          /* --line */
  --dig-acento:#ff5c00;                      /* --orange */
  --dig-acento-claro:#ff7a2e;                /* --orange-soft */
  --dig-acento-suave:rgba(255,92,0,.12);
  --dig-boton-tinta:#0a0a0a;                 /* texto sobre naranja, siempre oscuro */
  /* Naranja pensado para fondos oscuros (cuestionario, plan Crecimiento).
     Con la marca oficial es el mismo naranja: ya está hecho para ir sobre negro. */
  --dig-acento-sobre-oscuro:#ff5c00;
  /* Acentos secundarios derivados del naranja, para los degradados del
     cuestionario y del plan Élite. No salen de la web oficial. */
  --dig-oro:#ffa64d;
  --dig-rosa:#e0431c;

  /* --- Medidas comunes --- */
  --dig-radio:14px;
  --dig-ancho:1180px;
  --dig-curva:cubic-bezier(.22,1,.36,1);   /* --ease de la web oficial */
  --dig-barra-h:42px;   /* alto de la barra superior compartida */
}

/* --- Color: modo claro -----------------------------------------------------
   Los mismos valores del interruptor de la web oficial
   (:root[data-theme="light"]). Se aplica con data-tema="claro" /
   data-theme="light", que es lo que pone assets/marca.js leyendo
   localStorage['dig_theme'], igual que la portada. */
/* Algunas páginas ponen el atributo en <body> en vez de en <html>; las
   variables se heredan igual, así que la barra y el pie también cambian. */
:root[data-tema="claro"],
:root[data-theme="light"],
body[data-tema="claro"],
body[data-theme="light"]{
  --dig-logo:url('logo-dark.png');
  --dig-papel:#f7f7f6;
  --dig-papel-2:#f1f1f0;
  --dig-superficie:#fbfbfa;
  --dig-tinta:#0d0d0d;
  --dig-tinta-suave:#5f5d5a;
  --dig-tinta-tenue:rgba(13,13,13,.5);
  --dig-linea:rgba(0,0,0,.13);
  --dig-acento-suave:rgba(255,92,0,.10);
}
/* ==========================================================================
   BARRA SUPERIOR COMPARTIDA
   Es el hilo que une todas las webs del estudio: se ve igual en el índice, en
   los planes, en el cuestionario y en bodas, y siempre lleva a la web oficial.
   Va fija arriba del todo; las cabeceras propias de cada página se bajan
   --dig-barra-h para no quedar debajo (ver el bloque «puente» de cada página).
   ========================================================================== */
.dig-barra{
  position:fixed;top:0;left:0;right:0;z-index:2000;
  height:var(--dig-barra-h);
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(12px,3vw,24px);
  background:var(--dig-papel);
  border-bottom:1px solid var(--dig-linea);
  font-family:var(--dig-alt);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dig-tinta-suave);
  overflow-x:auto;scrollbar-width:none;
  -webkit-font-smoothing:antialiased;
}
.dig-barra::-webkit-scrollbar{display:none;}

.dig-barra a{
  color:inherit;text-decoration:none;white-space:nowrap;
  transition:color .2s var(--dig-curva);
}
.dig-barra a:hover{color:var(--dig-acento);}

/* La marca, siempre lo primero y siempre hacia la web oficial */
.dig-barra__marca{
  display:flex;align-items:center;
  width:var(--dig-logo-ancho);height:var(--dig-logo-alto);
  background:var(--dig-logo) left center/contain no-repeat;
  padding-right:16px;border-right:1px solid var(--dig-linea);
  box-sizing:content-box;flex:none;
  /* El texto de dentro no se ve: el logotipo ya pone «Differentissgood».
     Se conserva en el HTML para lectores de pantalla y buscadores. */
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
}
.dig-barra__marca:hover{color:var(--dig-acento);}

.dig-barra nav{display:flex;align-items:center;gap:16px;}
.dig-barra a[aria-current="page"]{color:var(--dig-acento);font-weight:500;}

@media (max-width:640px){
  :root{--dig-barra-h:36px;--dig-logo-alto:21px;--dig-logo-ancho:67px;}
  .dig-barra{font-size:9.5px;letter-spacing:.12em;gap:14px;}
  .dig-barra__marca{font-size:12px;padding-right:12px;}
  .dig-barra nav{gap:12px;}
}
@media print{.dig-barra{display:none;}}

/* ==========================================================================
   PIE COMPARTIDO
   Mismos datos de contacto y mismos enlaces en todas las páginas.
   ========================================================================== */
.dig-pie{
  font-family:var(--dig-sans);
  background:var(--dig-papel);
  color:var(--dig-tinta-tenue);
  border-top:1px solid var(--dig-linea);
  padding:34px clamp(16px,5vw,56px);
  text-align:center;font-size:12.5px;line-height:1.7;
  position:relative;z-index:5;
}
.dig-pie a{color:var(--dig-tinta-suave);text-decoration:none;}
.dig-pie a:hover{color:var(--dig-acento);}
.dig-pie__enlaces{
  font-family:var(--dig-alt);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  margin:0 0 14px;
}
.dig-pie__marca{
  width:calc(var(--dig-logo-ancho) * 1.7);height:calc(var(--dig-logo-alto) * 1.7);
  background:var(--dig-logo) center/contain no-repeat;
  margin:0 auto 16px;
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
}

/* Para poner el logotipo suelto en cualquier sitio (cabeceras de página,
   portadas…). El tamaño se controla con font-size en el elemento padre o
   sobreescribiendo width/height. */
.dig-logo{
  display:inline-block;
  width:var(--dig-logo-ancho);height:var(--dig-logo-alto);
  background:var(--dig-logo) center/contain no-repeat;
}
/* Para páginas que son oscuras siempre, tengan el tema que tengan: fuerza la
   versión de tinta clara para que el logotipo no desaparezca sobre el fondo. */
.dig-logo--claro{background-image:url('logo.png');}
.dig-pie__legal{margin:12px 0 0;font-size:11.5px;color:var(--dig-tinta-tenue);}