/* Comun a todas las paginas de Dragons Den.
   Fuentes alojadas en la propia web (sin Google Fonts): Bebas Neue + Inter.
   Archivos woff2 de @fontsource/bebas-neue@5.1.0 y @fontsource/inter@5.1.0
   (licencia SIL OFL 1.1, ver fonts/LICENSE-*.txt). */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/inter-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }

/* Enlace para saltar al contenido: invisible hasta que recibe el foco. */
.skip-link {
    position: fixed; left: 16px; top: 12px; z-index: 10000;
    background: #c8a96e; color: #000; font: 600 13px/1 'Inter', Arial, sans-serif;
    letter-spacing: 1px; padding: 12px 18px; text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Foco visible en todo lo que se puede usar con teclado. Gana a los
   "outline: none" que quedan en los estilos de cada pagina. */
:focus-visible { outline: 2px solid #c8a96e !important; outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Iconos SVG en linea dentro de texto */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

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

/* =====================================================================
   Pulido de detalles (base comun). Inspirado en "Designing Fluid
   Interfaces" (Apple, WWDC 2018). Va en esta hoja porque se carga ANTES
   del <style> de cada pagina: son valores por defecto que cualquier regla
   propia de una pagina puede seguir sobrescribiendo. Lo que tiene que
   ganar a los estilos de cada pagina esta en css/detalles.css.
   ===================================================================== */

/* Curvas y duraciones. --ease-fluido: amortiguamiento critico (sin
   rebote), para casi todo. --ease-muelle: rebote leve (~0.8), SOLO para
   lo que el usuario lanza o arrastra, nunca para algo que aparece. */
:root {
    --ease-fluido: cubic-bezier(.22, 1, .36, 1);
    --ease-muelle: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
    --dur-pulsar: 100ms;
    --dur-aparecer: 220ms;
    --dur-panel: 350ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
    :root { --ease-muelle: var(--ease-fluido); }
}

/* iOS no agranda el texto al girar el movil; tamano optico si la fuente lo trae. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-optical-sizing: auto; }

/* Respuesta inmediata: sin el retraso del doble toque en lo que se pulsa. */
a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; }

/* Titulares repartidos en lineas parejas; parrafos sin palabras huerfanas. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Seleccion de texto con el dorado de la marca, legible sobre fondo oscuro. */
::selection { background: rgba(200, 169, 110, 0.32); color: #fff; }

/* Controles de formulario con el color de la marca. */
input, select, textarea { accent-color: #c8a96e; caret-color: #c8a96e; }