/* =============================================================================
   Agencia de Aduanas Jorge Rodríguez Palma
   app.css · tokens, base tipográfica y componentes compartidos
   -----------------------------------------------------------------------------
   Identidad: editorial clara. Fondos blancos y hielo, texto en índigo y un
   solo acento en azul acero. El índigo profundo aparece una vez por página,
   como banda de contraste, y en el pie.

   Reglas del sistema, para no romperlo al agregar secciones:
     · Una sola palabra acentuada (itálica, acero) por título. Nunca dos.
     · Las etiquetas de sección son "— TEXTO", con el guion como contenido.
     · Botones cuadrados (2px). Sin brillo, sin píldoras.
     · Listas editoriales numeradas en vez de tarjetas con sombra.
     · Las secciones alternan base / alterna. La banda .profunda (índigo) es
       una isla de contraste puntual, no un patrón.
     · Cielo y agua NUNCA van como texto sobre fondo claro: no llegan a 3:1.
       Son para líneas, brillos y texto sobre índigo. Ver docs/DISENO.md §2.
   ============================================================================= */

:root {
    /* Paleta de la agencia */
    --hielo: #e3f6f5;
    --agua: #a7e0db;
    --cielo: #5fb0c9;
    --acero: #3e6d9c;
    --indigo: #2a2f63;

    /* Superficies claras — la base del sitio */
    --bg: #ffffff;
    --bg-2: #eef7f6;           /* alterna con --bg: hielo a medias */
    --bg-3: var(--hielo);      /* paneles, cabeceras internas, cierre */

    /* Texto sobre claro. AA sobre --bg, --bg-2 y --hielo. */
    --fg: var(--indigo);       /* títulos y texto fuerte · 11,1:1 o más */
    --fg-2: #465079;           /* texto corrido · 7:1 o más */
    --fg-3: #5a668c;           /* metadatos y etiquetas · 5:1 o más */

    /* Acento: la palabra en itálica, etiquetas, enlaces · 4,85:1 o más */
    --accent: var(--acero);
    --accent-2: var(--indigo); /* hover */

    /* Banda índigo: la isla de contraste de cada página, y el pie */
    --deep: var(--indigo);
    --deep-fg: var(--hielo);   /* 11,1:1 */
    --deep-fg-2: #c3cee4;      /* 7,9:1 */
    --deep-accent: var(--agua);/* 8,5:1 */

    /* Líneas */
    --line: rgba(42, 47, 99, 0.12);
    --line-strong: rgba(42, 47, 99, 0.24);
    --line-accent: rgba(95, 176, 201, 0.55);
    --line-deep: rgba(227, 246, 245, 0.16);

    /* Error: rojo que pasa AA sobre claro (6,6:1) */
    --error: #b42318;

    --font-display: "Marcellus", Georgia, "Times New Roman", serif;
    --font-accent: "Instrument Serif", Georgia, serif;
    --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --maxw: 1280px;
    --gutter: 32px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--fg);
}

/* La firma del sistema: exactamente una palabra acentuada por título. */
h1 em,
h2 em,
h3 em,
.acento {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.005em;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 14px 20px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

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

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.shell-narrow {
    max-width: 860px;
}

.sec {
    padding: 140px 0;
}

.sec.compact {
    padding: 100px 0;
}

.sec.airy {
    padding: 180px 0;
}

/* Ritmo claro: se alterna base / alterna. Nombres por rol, no por color:
   el día que cambie la paleta, las vistas no se tocan. */
.sec.base,
.servicio.base {
    background: var(--bg);
}

.sec.alterna,
.servicio.alterna {
    background: var(--bg-2);
}

/* Banda índigo: la única isla de contraste de la página. Todo lo que va
   dentro cambia a su juego de colores. */
.sec.profunda {
    background: var(--deep);
    color: var(--deep-fg);
}

.sec.profunda h1,
.sec.profunda h2,
.sec.profunda h3,
.sec.profunda .manifiesto q {
    color: var(--deep-fg);
}

.sec.profunda h1 em,
.sec.profunda h2 em,
.sec.profunda h3 em,
.sec.profunda q em,
.sec.profunda .tag {
    color: var(--deep-accent);
}

.sec.profunda .sec-intro,
.sec.profunda figcaption {
    color: var(--deep-fg-2);
}

/* --------------------------------------------------------------------------
   Etiqueta de sección — el guion es contenido, no decoración
   -------------------------------------------------------------------------- */

.tag {
    display: block;
    margin: 0 0 18px;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.sec-head {
    max-width: 760px;
}

.sec-head h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
}

.sec-intro {
    margin-top: 22px;
    max-width: 62ch;
    color: var(--fg-2);
    font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   Botones — cuadrados, sin brillo
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 16px 30px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: none;
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn svg {
    width: 15px;
    height: 15px;
    transition: transform 0.25s ease;
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
}

.btn-primary:hover {
    background: var(--accent-2);
}

.btn-ghost {
    border-color: var(--line-strong);
    color: var(--fg);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: var(--bg);
}

.btn-profundo {
    background: var(--deep);
    color: var(--deep-fg);
}

.btn-profundo:hover {
    background: var(--accent);
}

.btn-block {
    width: 100%;
}

/* Enlace con flecha — el gap reemplaza al subrayado */
.link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: gap 0.25s ease, color 0.25s ease;
}

.link:hover {
    gap: 0.9em;
    color: var(--accent-2);
}

.link svg {
    width: 14px;
    height: 14px;
}

.actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 38px;
}

/* --------------------------------------------------------------------------
   Lista editorial numerada — reemplaza a las tarjetas
   -------------------------------------------------------------------------- */

.editorial {
    margin-top: 64px;
    border-top: 1px solid var(--line);
}

.editorial > li {
    border-bottom: 1px solid var(--line);
}

.editorial-row {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 38px 0;
    transition: padding 0.35s ease, background-color 0.35s ease;
}

/* Barrido hielo sutil desde la izquierda al pasar el cursor. */
.editorial-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(95, 176, 201, 0.14), transparent 46%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.editorial-row:hover::before,
.editorial-row:focus-within::before {
    opacity: 1;
}

.editorial-row:hover,
.editorial-row:focus-within {
    padding-left: 22px;
    padding-right: 22px;
}

.editorial-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--accent);
}

.editorial-body h3 {
    font-size: 1.55rem;
}

.editorial-body p {
    margin-top: 10px;
    max-width: 58ch;
    color: var(--fg-2);
    font-size: 0.96rem;
}

.editorial-go {
    color: var(--fg-3);
    transition: color 0.25s ease, transform 0.25s ease;
}

.editorial-row:hover .editorial-go {
    color: var(--accent);
    transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   Cita manifiesto — el corte de capítulo a mitad de página
   -------------------------------------------------------------------------- */

.manifiesto {
    text-align: center;
}

.manifiesto q {
    display: block;
    max-width: 20ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    line-height: 1.14;
    color: var(--fg);
    quotes: none;
}

.manifiesto q::before,
.manifiesto q::after {
    content: none;
}

.manifiesto figcaption {
    margin-top: 34px;
    color: var(--fg-3);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cifra escultura — un dato como monumento, no como gráfico
   -------------------------------------------------------------------------- */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 52px 40px;
}

.cifra {
    padding-left: 26px;
    border-left: 1px solid var(--line-accent);
}

.cifra-valor {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 7vw, 5.4rem);
    line-height: 0.92;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.cifra-valor .unidad {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 0.42em;
    color: var(--accent);
}

.cifra-label {
    display: block;
    margin-top: 16px;
    color: var(--fg-2);
    font-size: 0.9rem;
    max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Fotografía a sangre — clara, con una franja índigo solo donde va el texto
   -------------------------------------------------------------------------- */

.foto-banda {
    position: relative;
    height: 70vh;
    min-height: 420px;
    overflow: hidden;
}

.foto-banda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.94) saturate(0.95);
}

.foto-banda::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(42, 47, 99, 0.25) 100%);
}

.foto-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    /* El pie trae su propio fondo: se funde hacia arriba en 90px y llega a
       0,9 de índigo justo donde empieza el texto. Así el contraste no depende
       de qué parte de la foto quede detrás ni de cuánto crezca el texto en
       móvil (peor caso, sobre blanco puro: 5,8:1). */
    padding: 90px 0 34px;
    background: linear-gradient(180deg, rgba(42, 47, 99, 0) 0, rgba(42, 47, 99, 0.9) 90px, rgba(42, 47, 99, 0.94) 100%);
}

.foto-caption .shell {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.foto-caption p {
    max-width: 46ch;
    color: var(--deep-fg-2);
    font-size: 0.92rem;
}

/* El pie de foto va sobre la franja índigo: usa el juego de la banda. */
.foto-caption .tag,
.foto-caption .link {
    color: var(--deep-accent);
}

.foto-caption .link:hover {
    color: var(--deep-fg);
}

/* --------------------------------------------------------------------------
   Datos en fila — meta con guion em, no chips
   -------------------------------------------------------------------------- */

.meta-list > li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
}

.meta-list > li:first-child {
    border-top: 0;
}

.meta-label {
    flex: 0 0 auto;
    min-width: 140px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.meta-value {
    color: var(--fg);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.field-label {
    color: var(--fg-2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.field-hint {
    color: var(--fg-3);
    font-size: 0.82rem;
}

.input,
.textarea,
.select {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    border-color: var(--line-strong);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.5;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--fg-3);
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--line-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(95, 176, 201, 0.28);
    outline: none;
}

.textarea {
    min-height: 150px;
    resize: vertical;
}

.field-error {
    color: var(--error);
    font-size: 0.84rem;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.aviso {
    padding: 16px 20px;
    border: 1px solid var(--line-accent);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    background: rgba(95, 176, 201, 0.1);
    color: var(--accent-2);
    font-size: 0.94rem;
}

.aviso.is-error {
    border-color: rgba(180, 35, 24, 0.28);
    border-left-color: var(--error);
    background: rgba(180, 35, 24, 0.06);
    color: var(--error);
}

.aviso ul {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
}

/* --------------------------------------------------------------------------
   Movimiento — lento y cinematográfico
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Utilidades mínimas
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 64px; }

.text-muted { color: var(--fg-2); }
.text-small { font-size: 0.86rem; }