/* ==========================================================================
   Skala 360 · Biblioteca digital
   base.css — tokens, tipografía y componentes compartidos
   Todo autoalojado: sin CDN, sin proveedores externos.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-500.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca — tomada de skala360.com */
  --marron:        #683C16;
  --marron-osc:    #4A2A0F;
  --marron-medio:  #8A5A2B;
  --marron-claro:  #B08152;
  --bronce:        #C07E38;   /* cobre del sitio */
  --bronce-suave:  #E3C9A8;
  --azul:          #6EC1E4;   /* azul claro del sitio */
  --azul-osc:      #3F9CC4;

  /* Neutros cálidos (tema claro) */
  --blanco:        #FFFFFF;
  --crema:         #FBF7F2;
  --crema-2:       #F6F2ED;
  --crema-3:       #E7DDCE;
  --tinta:         #33261B;
  --tinta-2:       #241A12;
  --tinta-3:       #4A382A;
  --tinta-4:       #5E4A39;
  --gris:          #8A7767;
  --gris-claro:    #B6A797;
  --texto:         #4A3A2C;

  --exito:         #4F7A4A;

  /* Tipografía */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --marca: 'Poppins', 'Inter', sans-serif;

  /* Escala */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 26px;  --r-xl: 40px;
  --sombra-sm: 0 1px 2px rgba(104,60,22,.06), 0 3px 10px rgba(104,60,22,.05);
  --sombra-md: 0 4px 16px rgba(104,60,22,.09), 0 14px 38px rgba(104,60,22,.09);
  --sombra-lg: 0 10px 30px rgba(104,60,22,.12), 0 34px 74px rgba(104,60,22,.14);
  --transicion: 260ms cubic-bezier(.22,.61,.36,1);
  --ancho: 1220px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--bronce); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bronce-suave); color: var(--tinta); }

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

/* --- Tipografía ----------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.serif { font-family: var(--serif); }

.antetitulo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marron-medio);
}

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

/* --- Marca ---------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  font-family: var(--marca);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  color: var(--marron);
  white-space: nowrap;
}
.marca .grado { color: var(--bronce); }
.marca--claro { color: var(--crema); }
.marca--claro .grado { color: var(--bronce); }

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .78em 1.35em;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform var(--transicion), background var(--transicion),
              border-color var(--transicion), color var(--transicion), box-shadow var(--transicion);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--primario { background: var(--marron); color: var(--crema); box-shadow: var(--sombra-sm); }
.btn--primario:hover { background: #7A4A1F; box-shadow: var(--sombra-md); }

.btn--secundario { background: transparent; color: var(--marron); border-color: var(--crema-3); }
.btn--secundario:hover { border-color: var(--marron-claro); background: rgba(104,60,22,.05); }

.btn--cobre { background: var(--bronce); color: #fff; box-shadow: var(--sombra-sm); }
.btn--cobre:hover { background: #B0702D; box-shadow: var(--sombra-md); }

.btn--crema { background: var(--crema-2); color: var(--marron); border-color: var(--crema-3); }
.btn--crema:hover { background: #fff; border-color: var(--bronce); }

.btn--claro { background: rgba(250,246,240,.10); color: var(--crema); border-color: rgba(250,246,240,.22); backdrop-filter: blur(6px); }
.btn--claro:hover { background: rgba(250,246,240,.18); border-color: rgba(250,246,240,.38); }

.btn--solido-claro { background: var(--crema); color: var(--tinta); }
.btn--solido-claro:hover { background: #fff; }

.btn--sm { padding: .55em 1em; font-size: .85rem; }

/* --- Chips / etiquetas ---------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .75em;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Encabezado del sitio ------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 5vw, 48px);
  background: rgba(255,255,255,.90);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--crema-3);
}
.cabecera--oscura {
  background: rgba(23,16,11,.72);
  border-bottom-color: rgba(250,246,240,.10);
  color: var(--crema);
}
.cabecera nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.cabecera nav a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--gris);
  transition: color var(--transicion);
}
.cabecera nav a:hover, .cabecera nav a[aria-current='page'] { color: var(--marron); }
.cabecera nav a.btn--primario, .cabecera nav a.btn--primario:hover { color: var(--crema); }
.cabecera nav a.btn--cobre, .cabecera nav a.btn--cobre:hover { color: #fff; }
.cabecera--oscura nav a { color: var(--gris-claro); }
.cabecera--oscura nav a:hover, .cabecera--oscura nav a[aria-current='page'] { color: var(--bronce); }
@media (max-width: 640px) {
  .cabecera nav a.oculto-movil { display: none; }
}

/* Formas orgánicas, como en skala360.com */
.blob {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  pointer-events: none;
  z-index: 0;
}

/* --- Pie ------------------------------------------------------------------ */
.pie {
  background: var(--tinta);
  color: var(--crema-3);
  padding: clamp(48px, 8vw, 80px) 0 32px;
  font-size: .9rem;
}
.pie a:hover { color: var(--bronce); }
.pie-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(250,246,240,.12);
}
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr; } }
.pie h4 {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronce);
  margin-bottom: 14px;
}
.pie li + li { margin-top: 8px; }
.pie-socios { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.pie-socio { font-size: .82rem; color: var(--gris-claro); }
.pie-socio strong { display: block; color: var(--crema-2); font-weight: 600; }
.pie-legal {
  margin-top: 28px;
  font-size: .76rem;
  line-height: 1.65;
  color: var(--gris);
  max-width: 78ch;
}
.pie-base {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: .76rem;
  color: var(--gris);
}

/* --- Utilidades ----------------------------------------------------------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 12px; top: -60px;
  background: var(--marron); color: var(--crema);
  padding: 10px 16px; border-radius: var(--r-sm); z-index: 200;
  transition: top var(--transicion);
}
.saltar:focus { top: 12px; }

/* --- Modo incrustado (dentro de un iframe) -------------------------------- */
.incrustado .cabecera,
.incrustado .pie,
.incrustado .saltar,
.incrustado .respaldo { display: none !important; }
.incrustado .portada,
.incrustado .i-portada { padding-top: clamp(26px, 4vw, 52px); }
.incrustado body { background: transparent; }