/**
 * DEFUNCIA.COM - Sistema de marca 2026
 * -----------------------------------------------------------------------------
 * Direccion: editorial calido (papel, serif de display, cursiva de acento) con
 * acabado sobrio (filetes de 1px, eyebrows monoespaciados, numerales, aire).
 *
 * Se carga DESPUES de brandbook.css: redefine los tokens de la paleta antigua
 * (--tinta, --hueso, --turquesa...) para que las paginas que aun no se han
 * reestructurado hereden la nueva piel sin tocar su HTML.
 *
 * Prefijo de las clases nuevas: .d-
 */

/* =============================================================================
   1. TOKENS
   ============================================================================= */
:root {
    /* --- Paleta nueva ------------------------------------------------------ */
    --lino:      #F7F2E9;  /* fondo base, papel calido */
    --arena:     #EFE6D6;  /* banda alterna */
    --papel:     #FFFDF8;  /* tarjetas y superficies elevadas */
    --filete:    #E3D9C7;  /* borde de 1px */
    --filete-2:  #D6C9B2;  /* borde de 1px, mas marcado */
    --tinta:     #23201C;  /* titulares y texto principal */
    --grafito:   #6E665C;  /* texto secundario */
    --humo:      #9A9086;  /* texto terciario, metadatos */
    --noche:     #1A1613;  /* banda oscura de contraste */
    --noche-2:   #262019;  /* superficie sobre banda oscura */

    --azul:      #1E90C4;  /* acento: cursiva del titular, enlaces */
    --azul-hond: #16719C;
    --azul-claro:#4FAEDA;  /* extremo claro de los degradados heredados */
    --azul-tenue:#D9EDF7;
    --terracota: #B0553B;  /* eyebrows */
    --oro:       #A9843F;  /* numerales */
    --verde:     #4F7A52;  /* estados correctos */

    /* Triplets para rgba() */
    --tinta-rgb:  35, 32, 28;
    --azul-rgb:   30, 144, 196;
    --lino-rgb:   247, 242, 233;
    --noche-rgb:  26, 22, 19;

    /* --- Tipografia -------------------------------------------------------- */
    /* Tipografía 100% NATIVA (sin webfonts): cero CLS por intercambio de fuente.
       Serif de display elegante en Mac (Iowan/Palatino) y Windows (Palatino
       Linotype/Cambria/Georgia); sans del sistema; mono del sistema. */
    --serif:  'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, Cambria, 'Times New Roman', serif;
    --sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Escala de display: fluida entre movil y escritorio */
    /* Topada a 4,6rem: por encima, el titular de cuatro lineas ya no cabe en un
       portatil de 1366x768 y el hero pierde su unica baza, verse entero. */
    --d-hero:   clamp(2.4rem, 1.4rem + 3.1vw, 4.25rem);
    --d-h2:     clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
    --d-h3:     clamp(1.4rem, 1.15rem + 0.9vw, 1.875rem);
    --d-lede:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --d-body:   1.0625rem;
    --d-small:  0.9375rem;
    --d-micro:  0.75rem;

    /* --- Ritmo ------------------------------------------------------------- */
    --d-ancho:      1240px;   /* contenedor general */
    --d-ancho-texto: 62ch;    /* medida de lectura comoda */
    --d-seccion:    clamp(5rem, 3rem + 8vw, 10.5rem);  /* padding vertical */
    --d-radio:      14px;
    --d-radio-s:    9px;
    --d-nav:        76px;     /* alto de la barra */

    /* --- Sombras: casi imperceptibles, solo para separar del papel --------- */
    --d-sombra:    0 1px 2px rgba(35, 32, 28, .04), 0 8px 24px -12px rgba(35, 32, 28, .10);
    --d-sombra-md: 0 2px 4px rgba(35, 32, 28, .05), 0 18px 40px -18px rgba(35, 32, 28, .16);

    --d-transicion: 220ms cubic-bezier(.2, .6, .3, 1);

    /* --- Puentes con el sistema antiguo (brandbook.css) --------------------
       Al reasignar estos alias, las 18 paginas que todavia usan las clases
       viejas adoptan la paleta nueva sin tocar su HTML.                      */
    --blanco:   var(--papel);
    --hueso:    var(--lino);
    --ceniza:   var(--filete);
    --gris:     var(--grafito);
    --turquesa: var(--azul);

    --blanco-rgb:   255, 253, 248;
    --hueso-rgb:    var(--lino-rgb);
    --gris-rgb:     110, 102, 92;
    --turquesa-rgb: var(--azul-rgb);

    --font-display: var(--serif);
    --font-text:    var(--sans);
    --font-family:  var(--sans);
    --font-mono:    var(--mono);

    /* --- Puentes con el sistema antiguo (styles.css) -----------------------
       Las 11 paginas que cuelgan de includes/head.php usan otra hoja, con sus
       propios nombres de variable y el turquesa como acento. Reasignarlos aqui
       les da la paleta nueva sin tocar styles.css ni su HTML.               */
    --ctrl-cta:        var(--azul);
    --ctrl-cta-light:  var(--azul-claro);
    --ctrl-cta-dark:   var(--azul-hond);
    --ctrl-accent:     var(--azul);
    --ctrl-dark:       var(--noche);
    --ctrl-primary:    var(--noche);
    --ctrl-secondary:  var(--noche-2);
    --gradient-dark-section: linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%);
}

/* =============================================================================
   2. BASE
   ============================================================================= */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* El panel movil se esconde con translateX(100%), es decir, fuera del borde
   derecho: eso genera scroll horizontal en toda la pagina. Se recorta con
   `clip` y no con `hidden` porque `hidden` crearia un contenedor de scroll y
   rompeeria el position:sticky de la barra de navegacion. */
html, body { overflow-x: clip; }

body {
    background: var(--lino);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--d-body);
    line-height: 1.65;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Grano de papel: una capa de ruido casi invisible sobre el crema. Es lo que
   evita que un fondo plano se vea "digital" y barato en pantallas grandes. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* El cursor cometa de brandbook.js resta sobriedad: se devuelve el nativo. */
.has-app-cursor,
.has-app-cursor * { cursor: auto !important; }
.app-cursor, .app-cursor-dot, .app-cursor-trail, .app-cursor-ripple { display: none !important; }

/* La barra de progreso se conserva, pero como un filete de tinta */
.scroll-progress {
    height: 2px !important;
    background: var(--tinta) !important;
    opacity: .55;
}

::selection { background: rgba(var(--azul-rgb), .18); color: var(--tinta); }

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

img { max-width: 100%; height: auto; }

/* =============================================================================
   3. TIPOGRAFIA EDITORIAL
   ============================================================================= */
/* Newsreader es variable en tamano optico (opsz 6..72): a cuerpo grande sube el
   contraste y afina los remates, que es justo lo que separa un titular caro de
   uno escalado a lo bruto. Se fija a mano porque el navegador solo lo hace bien
   si se lo pides. */
/* El color se HEREDA, no se fija: en las paginas heredadas hay titulares dentro
   de secciones oscuras que tomaban el blanco del contenedor. Fijar aqui la tinta
   los dejaba negro sobre negro, invisibles. */
h1, h2, h3, h4,
.d-titulo {
    font-family: var(--serif);
    font-weight: 400;
    color: inherit;
    letter-spacing: -0.018em;
    line-height: 1.08;
    text-wrap: balance;
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 44;
}
h1, .d-hero__titulo { font-variation-settings: 'opsz' 72; }
h3, h4 { font-variation-settings: 'opsz' 28; }

h5, h6 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }

/* La cursiva es el acento de la marca: se usa para la palabra que carga el
   significado del titular, nunca para enfasis decorativo. */
.d-acento {
    font-style: italic;
    color: var(--azul);
}

.d-acento--tinta { font-style: italic; color: var(--tinta); }

/* Eyebrow: monoespaciado, versalita, con punto delante */
.d-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--mono);
    font-size: var(--d-micro);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--terracota);
    margin: 0 0 1.25rem;
}
.d-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.d-eyebrow--azul { color: var(--azul); }
.d-eyebrow--claro { color: rgba(255, 253, 248, .62); }
.d-eyebrow--claro::before { background: var(--azul); }

/* Variante de filete: para el hero, donde un punto queda pequeno frente a un
   titular de 6rem y una regla larga ancla mejor la columna de texto. */
.d-eyebrow--regla { gap: 1rem; color: var(--humo); }
.d-eyebrow--regla::before {
    width: 3.5rem;
    height: 1px;
    border-radius: 0;
    background: var(--filete-2);
}

.d-lede {
    font-size: var(--d-lede);
    line-height: 1.6;
    color: var(--grafito);
    max-width: var(--d-ancho-texto);
    margin: 0;
}

.d-parrafo {
    color: var(--grafito);
    max-width: var(--d-ancho-texto);
}
.d-parrafo strong { color: var(--tinta); font-weight: 600; }

/* Cita editorial: serif, filete lateral */
.d-cita {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
    line-height: 1.4;
    font-style: italic;
    color: var(--tinta);
    border-left: 2px solid var(--azul);
    padding-left: 1.5rem;
    margin: 0;
    max-width: 46ch;
}

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-hond); }

/* =============================================================================
   4. ESTRUCTURA
   ============================================================================= */
.d-wrap {
    width: 100%;
    max-width: var(--d-ancho);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.d-seccion { padding-block: var(--d-seccion); }

.d-banda--arena  { background: var(--arena); }
.d-banda--papel  { background: var(--papel); }
.d-banda--noche  { background: var(--noche); color: rgba(255, 253, 248, .82); }
.d-banda--noche h1, .d-banda--noche h2, .d-banda--noche h3 { color: var(--papel); }
.d-banda--noche .d-lede, .d-banda--noche .d-parrafo { color: rgba(255, 253, 248, .68); }

/* Filete divisorio de ancho de contenedor */
.d-filete { height: 1px; background: var(--filete); border: 0; margin: 0; }

/* Cabecera de seccion: eyebrow + titular + bajada */
.d-cabecera { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.d-cabecera h2 { font-size: var(--d-h2); margin: 0 0 1.25rem; }
.d-cabecera--centro { margin-inline: auto; text-align: center; }
.d-cabecera--centro .d-lede { margin-inline: auto; }
.d-cabecera--centro .d-eyebrow { justify-content: center; }

/* Rejillas */
.d-grid { display: grid; gap: 1.5rem; }
.d-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =============================================================================
   5. BOTONES
   ============================================================================= */
.d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--sans);
    font-size: var(--d-small);
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1;
    padding: .95rem 1.6rem;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--d-transicion), color var(--d-transicion),
                border-color var(--d-transicion), transform var(--d-transicion),
                box-shadow var(--d-transicion);
}
.d-btn svg, .d-btn i { width: 17px; height: 17px; flex: 0 0 auto; }

.d-btn--tinta {
    background: var(--tinta);
    color: var(--papel);
}
.d-btn--tinta:hover {
    background: var(--noche);
    color: var(--papel);
    transform: translateY(-1px);
    box-shadow: var(--d-sombra-md);
}

.d-btn--linea {
    background: var(--papel);
    color: var(--tinta);
    border-color: var(--filete-2);
}
.d-btn--linea:hover {
    border-color: var(--tinta);
    color: var(--tinta);
    transform: translateY(-1px);
}

.d-btn--azul { background: var(--azul); color: #fff; }
.d-btn--azul:hover { background: var(--azul-hond); color: #fff; transform: translateY(-1px); }

.d-btn--claro { background: var(--papel); color: var(--tinta); }
.d-btn--claro:hover { background: #fff; color: var(--tinta); transform: translateY(-1px); }

.d-btn--fantasma {
    background: transparent;
    color: var(--papel);
    border-color: rgba(255, 253, 248, .28);
}
.d-btn--fantasma:hover { border-color: rgba(255, 253, 248, .6); color: var(--papel); }

.d-btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.d-btn--bloque { width: 100%; }

/* Enlace con flecha, muy usado en el acabado editorial */
.d-enlace {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: var(--d-small);
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--filete-2);
    padding-bottom: 2px;
    transition: gap var(--d-transicion), border-color var(--d-transicion);
}
.d-enlace:hover { gap: .8rem; border-color: var(--tinta); color: var(--tinta); }
.d-enlace--claro { color: var(--papel); border-color: rgba(255, 253, 248, .3); }
.d-enlace--claro:hover { color: var(--papel); border-color: var(--papel); }

/* --- Puente: los botones del sistema antiguo adoptan la piel nueva -------- */
.btn {
    font-family: var(--sans);
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: -0.008em;
}
.btn-primary, .btn-muni {
    background: var(--tinta) !important;
    border-color: var(--tinta) !important;
    color: var(--papel) !important;
}
.btn-primary:hover, .btn-muni:hover { background: var(--noche) !important; }
.btn-gold {
    background: var(--azul) !important;
    border-color: var(--azul) !important;
    color: #fff !important;
}
.btn-gold:hover { background: var(--azul-hond) !important; }
.btn-secondary, .btn-outline-secondary {
    background: var(--papel) !important;
    border-color: var(--filete-2) !important;
    color: var(--tinta) !important;
}

/* =============================================================================
   6. TARJETAS
   ============================================================================= */
.d-tarjeta {
    background: var(--papel);
    border: 1px solid var(--filete);
    border-radius: var(--d-radio);
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    transition: border-color var(--d-transicion), transform var(--d-transicion),
                box-shadow var(--d-transicion);
}
.d-tarjeta h3 { font-size: var(--d-h3); margin: 0 0 .75rem; }
.d-tarjeta p { color: var(--grafito); font-size: var(--d-small); margin: 0; }
.d-tarjeta--interactiva:hover {
    border-color: var(--filete-2);
    transform: translateY(-3px);
    box-shadow: var(--d-sombra-md);
}
.d-tarjeta--noche {
    background: var(--noche-2);
    border-color: rgba(255, 253, 248, .10);
}
.d-tarjeta--noche h3 { color: var(--papel); }
.d-tarjeta--noche p { color: rgba(255, 253, 248, .62); }

/* Numeral de seccion: cifra grande, en serif, contorno calido */
.d-numeral {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
    font-weight: 400;
    line-height: 1;
    color: var(--oro);
    display: block;
    margin-bottom: 1.25rem;
    font-variant-numeric: lining-nums tabular-nums;
}
.d-numeral--hueco {
    color: transparent;
    -webkit-text-stroke: 1px var(--oro);
}

/* =============================================================================
   7. NAVEGACION  (reestiliza .nav-commercial de brandbook.css)
   ============================================================================= */
.nav-commercial {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(var(--lino-rgb), .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-transicion), background var(--d-transicion);
    box-shadow: none;
}
/* Al bajar, la barra se vuelve casi opaca: si no, el contenido oscuro que pasa
   por debajo se transparenta a traves del desenfoque y ensucia la lectura. */
.nav-commercial.scrolled,
.nav-commercial.is-scrolled {
    border-bottom-color: var(--filete);
    background: rgba(var(--lino-rgb), .97);
}

/* La 404 heredada pintaba su propia barra en oscuro. Se unifica con el resto:
   una sola barra en toda la web evita, ademas, que el logotipo en tinta quede
   invisible sobre fondo negro. */
.page-404-body .nav-commercial { background: rgba(var(--lino-rgb), .88); }

/* Al pasar de la primera pantalla la barra se encoge y el descriptor del logo
   se pliega: recupera unos 16 px de alto justo cuando el contenido los pide. */
.nav-commercial.is-compacta .nav-container { min-height: 60px; padding-block: .5rem; }
.nav-commercial.is-compacta .marca__descriptor {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.nav-commercial.is-compacta .marca__nombre { font-size: 1.4rem; }

.nav-container {
    max-width: var(--d-ancho);
    margin-inline: auto;
    min-height: var(--d-nav);
    padding: .75rem clamp(1.25rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    transition: min-height var(--d-transicion), padding var(--d-transicion);
}

/* --- Logotipo tipografico ------------------------------------------------
   El SVG heredado es un simbolo pequeno con turquesa fuera de paleta. Aqui la
   marca se compone con la propia tipografia: descriptor en versalitas sobre un
   filete y el nombre en serif, con la ultima letra en el azul de acento. Asi el
   logo hereda la paleta y se ve nitido en cualquier densidad de pantalla. */
.nav-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    text-decoration: none;
    line-height: 1;
}
.marca__descriptor {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grafito); /* subido de --humo por contraste AA (a11y) */
    max-height: 1.2em;
    transition: max-height var(--d-transicion), opacity var(--d-transicion);
}
.marca__descriptor::before,
.marca__descriptor::after {
    content: '';
    height: 1px;
    width: 1.1rem;
    background: var(--filete-2);
}
.marca__nombre {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--tinta);
    font-variation-settings: 'opsz' 30;
    transition: font-size var(--d-transicion);
}
.marca__nombre em { font-style: normal; color: var(--azul); }

/* Sobre fondo oscuro (pie de pagina) */
.marca--claro .marca__nombre { color: var(--papel); }
.marca--claro .marca__descriptor { color: rgba(255, 253, 248, .66); } /* AA a11y */
.marca--claro .marca__descriptor::before,
.marca--claro .marca__descriptor::after { background: rgba(255, 253, 248, .20); }

.nav-logo-img { height: 34px; width: auto; }

.nav-links { display: flex; align-items: center; justify-content: center; gap: .15rem; }

/* Los enlaces no llevan pastilla de fondo: un filete que crece bajo el texto
   ensucia menos una barra clara y se lee mas caro. */
.nav-link,
.nav-dropdown-toggle {
    position: relative;
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--grafito);
    text-decoration: none;
    padding: .5rem .85rem;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color var(--d-transicion);
}
.nav-link::after,
.nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .15rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-transicion);
}
.nav-link:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.active .nav-dropdown-toggle { color: var(--tinta); }
.nav-link:hover::after,
.nav-dropdown-toggle:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--tinta); }
.nav-link.active::after { transform: scaleX(1); background: var(--azul); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 250px;
    background: var(--papel);
    border: 1px solid var(--filete);
    border-radius: var(--d-radio-s);
    box-shadow: var(--d-sombra-md);
    padding: .4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--d-transicion), transform var(--d-transicion), visibility var(--d-transicion);
}
.nav-dropdown.active .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: 6px;
    font-size: var(--d-small);
    color: var(--grafito);
    text-decoration: none;
    transition: background var(--d-transicion), color var(--d-transicion);
}
.nav-dropdown-item:hover { background: var(--lino); color: var(--tinta); }
.nav-dropdown-item i, .nav-dropdown-item svg { width: 16px; height: 16px; color: var(--humo); }

.nav-actions { display: flex; align-items: center; gap: .35rem; }
/* Filete vertical que separa la navegacion de las acciones */
.nav-actions::before {
    content: '';
    width: 1px;
    height: 22px;
    background: var(--filete-2);
    margin-right: .75rem;
}

.nav-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    color: var(--grafito);
    background: none;
    border: 0;
    padding: .5rem .45rem;
    border-radius: 6px;
    cursor: pointer;
}
.nav-lang-toggle:hover { color: var(--tinta); }
/* El enlace de acceso, dentro de las acciones, no lleva subrayado creciente */
.nav-actions .nav-link { padding-inline: .7rem; }
.nav-lang-menu { left: auto; right: 0; min-width: 170px; }
.nav-lang-item.active { background: var(--lino); color: var(--tinta); font-weight: 600; }
.nav-lang-code { font-family: var(--mono); font-size: var(--d-micro); color: var(--humo); width: 1.75rem; }

.nav-mobile-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--tinta);
    cursor: pointer;
    padding: .4rem;
}

/* Menu movil */
.nav-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(var(--noche-rgb), .35);
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-transicion), visibility var(--d-transicion);
    z-index: 998;
}
/* El sistema heredado escondia este panel con left:-100% y aqui se esconde con
   transform. Si no se anula el left, las dos tecnicas se suman y el panel queda
   medio asomado en reposo: por eso el left:auto explicito, tambien en abierto. */
.nav-mobile-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: auto;
    width: min(340px, 88vw);
    max-width: none;
    height: auto;
    background: var(--lino);
    border-left: 1px solid var(--filete);
    padding: 5.5rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(.2, .7, .3, 1);
    z-index: 1001;
}
.nav-open .nav-mobile-overlay { opacity: 1; visibility: visible; }
.nav-commercial.nav-open .nav-mobile-menu { left: auto; transform: translateX(0); }
.nav-mobile-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem .5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--filete);
}
.nav-mobile-link i, .nav-mobile-link svg { width: 18px; height: 18px; color: var(--humo); }
.nav-mobile-divider { height: 1px; background: var(--filete); margin: 1.25rem 0; }
.nav-mobile-actions { display: grid; gap: .6rem; }
.nav-mobile-lang { display: flex; gap: .4rem; margin-bottom: 1.25rem; }
.nav-mobile-lang-btn {
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .06em;
    padding: .4rem .7rem;
    border: 1px solid var(--filete);
    border-radius: 6px;
    color: var(--grafito);
    text-decoration: none;
}
.nav-mobile-lang-btn.active { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* =============================================================================
   8. HERO
   ============================================================================= */
.d-hero {
    position: relative;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
    overflow: hidden;
}

/* Luz calida al fondo, muy abierta: da profundidad sin dibujar nada */
.d-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(65% 60% at 80% 18%, rgba(var(--azul-rgb), .08), transparent 62%),
        radial-gradient(50% 50% at 4% 92%, rgba(176, 85, 59, .055), transparent 68%);
    pointer-events: none;
}

.d-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
}

.d-hero__titulo {
    font-size: var(--d-hero);
    line-height: .99;
    letter-spacing: -0.032em;
    margin: 0 0 2rem;
}
/* La cursiva de Newsreader avanza mas de la cuenta: se compensa a mano para que
   el punto final no se despegue de la palabra. */
.d-hero__titulo .d-acento { margin-right: .06em; }

.d-hero__lede {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
    line-height: 1.58;
    color: var(--grafito);
    max-width: 38ch;
    margin: 0 0 2.5rem;
}

.d-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }

.d-hero__firma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--filete);
    font-size: .8125rem;
    color: var(--humo);
}
.d-hero__firma span { display: inline-flex; align-items: center; gap: .45rem; }
.d-hero__firma svg, .d-hero__firma i { width: 14px; height: 14px; color: var(--verde); }

/* --- Pieza visual del hero: fotografia + sello de los dos tiempos ---------
   La foto pone la cara humana (es un producto que habla de familia) y el sello
   superpuesto traduce el mensaje a algo concreto sin llenar la pantalla de UI. */
.d-hero__visual { position: relative; }

.d-hero__foto {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 62vh;
    border-radius: 20px;
    overflow: hidden;
    background: var(--arena);
    box-shadow:
        0 1px 1px rgba(35, 32, 28, .04),
        0 10px 24px -10px rgba(35, 32, 28, .12),
        0 48px 80px -36px rgba(35, 32, 28, .30);
}
.d-hero__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El recorte 4:5 ya viene hecho en origen priorizando las caras, asi que
       aqui basta con centrar y dejar un pelin de aire por arriba. */
    object-position: 50% 42%;
    display: block;
    /* Las fotos de banco vienen mas frias y saturadas que el crema de la marca */
    filter: saturate(.92) contrast(1.02);
}
/* Degradado inferior: sin el, el sello blanco flota sobre cualquier cosa */
.d-hero__foto::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(to top, rgba(26, 22, 19, .46), transparent 92%);
}

.d-sello-tiempos {
    position: absolute;
    left: -3rem;
    bottom: -1.25rem;
    z-index: 2;
    width: min(300px, 80%);
    background: rgba(255, 253, 248, .93);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid rgba(255, 253, 248, .7);
    border-radius: 14px;
    padding: 1.15rem 1.3rem;
    box-shadow: 0 20px 45px -18px rgba(35, 32, 28, .45);
}
.d-sello-tiempos__fila + .d-sello-tiempos__fila {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--filete);
}
.d-sello-tiempos__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-family: var(--mono);
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--humo);
    margin-bottom: .35rem;
}
.d-sello-tiempos__estado { display: inline-flex; align-items: center; gap: .3rem; color: var(--grafito); }
.d-sello-tiempos__estado::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--verde);
}
.d-sello-tiempos__fila--futuro .d-sello-tiempos__estado::before { background: var(--azul); }
.d-sello-tiempos__texto {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.25;
    color: var(--tinta);
    margin: 0;
    font-variation-settings: 'opsz' 24;
}

/* --- Pieza visual alternativa: la ficha detallada ------------------------- */
.d-ficha {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--filete);
    border-radius: 18px;
    overflow: hidden;
    /* Sombra en tres capas: contacto, elevacion y una difusa muy amplia. Una
       sola sombra se ve plana; tres dan la caida real de un objeto sobre papel. */
    box-shadow:
        0 1px 1px rgba(35, 32, 28, .04),
        0 8px 20px -8px rgba(35, 32, 28, .10),
        0 40px 70px -32px rgba(35, 32, 28, .26);
}
.d-ficha__seccion { position: relative; padding: 1.75rem 1.9rem; }
.d-ficha__seccion + .d-ficha__seccion { border-top: 1px solid var(--filete); }
.d-ficha__seccion--futuro { background: var(--noche); }

/* Costura entre los dos tiempos: un punto sobre el filete que los separa,
   para que se lean como dos mitades de la misma pieza y no como dos cajas. */
.d-ficha__seccion--futuro::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 1.9rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--azul);
    box-shadow: 0 0 0 4px var(--papel);
}

.d-ficha__etiqueta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--terracota);
    margin-bottom: 1.1rem;
}
.d-ficha__seccion--futuro .d-ficha__etiqueta { color: rgba(255, 253, 248, .55); }
.d-ficha__estado {
    font-family: var(--sans);
    font-size: .6875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--humo);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.d-ficha__estado::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--verde);
}
.d-ficha__seccion--futuro .d-ficha__estado { color: rgba(255, 253, 248, .45); }
.d-ficha__seccion--futuro .d-ficha__estado::before { background: var(--azul); }

.d-ficha__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.d-ficha__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--d-small);
    color: var(--tinta);
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--filete);
}
.d-ficha__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.d-ficha__seccion--futuro .d-ficha__lista li {
    color: rgba(255, 253, 248, .88);
    border-color: rgba(255, 253, 248, .10);
}
.d-ficha__meta { font-size: .75rem; color: var(--humo); white-space: nowrap; }
.d-ficha__seccion--futuro .d-ficha__meta { color: rgba(255, 253, 248, .42); }

.d-ficha__pie {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 253, 248, .62);
    margin: 1.25rem 0 0;
    line-height: 1.4;
}

/* =============================================================================
   9. TIRA DE CUMPLIMIENTO
   ============================================================================= */
.d-tira {
    border-block: 1px solid var(--filete);
    background: var(--papel);
}
.d-tira__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1.35rem;
}
.d-tira__item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--grafito);
    white-space: nowrap;
}
.d-tira__item svg, .d-tira__item i { width: 15px; height: 15px; color: var(--humo); }

/* =============================================================================
   10. PROBLEMA (dos columnas editoriales + preguntas)
   ============================================================================= */
.d-problema__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    align-items: start;
}
.d-problema__grid h2 { font-size: var(--d-h2); margin: 0; }

.d-preguntas { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 0; }
.d-preguntas li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.5rem;
    border-top: 1px solid var(--filete);
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.35;
    color: var(--tinta);
}
.d-preguntas li:last-child { border-bottom: 1px solid var(--filete); }
.d-preguntas__num {
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .1em;
    color: var(--oro);
}

/* =============================================================================
   11. DOS TIEMPOS (presente / futuro) — el nucleo del mensaje
   ============================================================================= */
.d-tiempos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--filete);
    border-radius: var(--d-radio);
    overflow: hidden;
    background: var(--papel);
}
.d-tiempo { padding: clamp(2rem, 1.5rem + 2vw, 3rem); }
.d-tiempo + .d-tiempo { border-left: 1px solid var(--filete); }
.d-tiempo--futuro { background: var(--noche); }

.d-tiempo__titulo {
    font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
    margin: 0 0 .85rem;
}
.d-tiempo--futuro .d-tiempo__titulo { color: var(--papel); }

.d-tiempo__lede { font-size: var(--d-small); color: var(--grafito); margin: 0 0 2rem; }
.d-tiempo--futuro .d-tiempo__lede { color: rgba(255, 253, 248, .62); }

.d-tiempo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.d-tiempo__lista li {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: .85rem;
    font-size: var(--d-small);
    line-height: 1.55;
    color: var(--grafito);
}
.d-tiempo--futuro .d-tiempo__lista li { color: rgba(255, 253, 248, .72); }
.d-tiempo__lista li strong { color: var(--tinta); font-weight: 600; display: block; }
.d-tiempo--futuro .d-tiempo__lista li strong { color: var(--papel); }
.d-tiempo__lista svg, .d-tiempo__lista i { width: 17px; height: 17px; color: var(--azul); margin-top: .2rem; }

/* Banda fotografica de seccion: da respiro entre dos bloques densos de texto */
.d-foto-banda {
    position: relative;
    height: clamp(220px, 12rem + 12vw, 400px);
    border-radius: var(--d-radio);
    overflow: hidden;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    background: var(--arena);
}
.d-foto-banda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.92) contrast(1.02);
}
.d-foto-banda__pie {
    position: absolute;
    left: clamp(1.25rem, 1rem + 1vw, 2rem);
    bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
    right: clamp(1.25rem, 1rem + 1vw, 2rem);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.3;
    color: var(--papel);
    text-shadow: 0 1px 24px rgba(26, 22, 19, .55);
    max-width: 30ch;
    margin: 0;
}
.d-foto-banda::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 65%;
    background: linear-gradient(to top, rgba(26, 22, 19, .62), transparent);
}
.d-foto-banda__pie { z-index: 1; }

/* =============================================================================
   12. BLOQUES (sustituye al catalogo de modulos)
   ============================================================================= */
.d-bloque {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.25rem, 1rem + 2vw, 3rem);
    align-items: start;
    padding-block: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    border-top: 1px solid var(--filete);
}
.d-bloque:last-child { border-bottom: 1px solid var(--filete); }
.d-bloque__num {
    font-family: var(--serif);
    font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--oro);
    font-variant-numeric: lining-nums;
}
.d-bloque__titulo { font-size: var(--d-h3); margin: 0 0 .6rem; }
.d-bloque__desc { font-size: var(--d-small); color: var(--grafito); margin: 0; }
.d-bloque__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; align-content: start; }
.d-bloque__items li {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    font-size: var(--d-small);
    color: var(--grafito);
}
.d-bloque__items li::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--oro);
    flex: 0 0 auto;
    transform: translateY(-3px);
}

/* =============================================================================
   13. PASOS 01-04
   ============================================================================= */
.d-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.d-paso {
    padding: 2rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border: 1px solid var(--filete);
    border-right-width: 0;
    background: var(--papel);
}
.d-paso:first-child { border-radius: var(--d-radio) 0 0 var(--d-radio); }
.d-paso:last-child { border-right-width: 1px; border-radius: 0 var(--d-radio) var(--d-radio) 0; }
.d-paso__num {
    font-family: var(--serif);
    font-size: 2.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--azul);
    display: block;
    margin-bottom: 1.25rem;
    font-variant-numeric: lining-nums;
}
.d-paso h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 .6rem; letter-spacing: -0.01em; }
.d-paso p { font-size: var(--d-small); color: var(--grafito); margin: 0; }

/* =============================================================================
   14. SEGURIDAD (banda oscura)
   ============================================================================= */
.d-seguridad__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
}
.d-seguridad__grid h2 { font-size: var(--d-h2); margin: 0 0 1.5rem; }

.d-hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255, 253, 248, .10); border: 1px solid rgba(255, 253, 248, .10); border-radius: var(--d-radio); overflow: hidden; }
.d-hechos li {
    background: var(--noche);
    padding: 1.4rem 1.6rem;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.d-hechos svg, .d-hechos i { width: 18px; height: 18px; color: var(--azul); margin-top: .15rem; }
.d-hechos strong { display: block; color: var(--papel); font-size: var(--d-small); font-weight: 600; margin-bottom: .3rem; }
.d-hechos span { display: block; color: rgba(255, 253, 248, .58); font-size: .875rem; line-height: 1.55; }

.d-sellos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.d-sello {
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .68);
    border: 1px solid rgba(255, 253, 248, .18);
    border-radius: 100px;
    padding: .4rem .85rem;
}

/* =============================================================================
   15. CANAL PROFESIONAL (aseguradoras y funerarias, en segundo plano)
   ============================================================================= */
.d-canal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    background: var(--papel);
    border: 1px solid var(--filete);
    border-radius: var(--d-radio);
    padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}
.d-canal h3 { font-size: var(--d-h3); margin: 0 0 .6rem; }
.d-canal p { font-size: var(--d-small); color: var(--grafito); margin: 0; max-width: 58ch; }

/* =============================================================================
   16. FAQ
   ============================================================================= */
.d-faq { border-top: 1px solid var(--filete); max-width: 52rem; }
.d-faq__item { border-bottom: 1px solid var(--filete); }
.d-faq__pregunta {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 1.6rem 0;
    font-family: var(--serif);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.35;
    color: var(--tinta);
}
.d-faq__icono {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    position: relative;
    margin-top: .3rem;
}
.d-faq__icono::before,
.d-faq__icono::after {
    content: '';
    position: absolute;
    background: var(--grafito);
    transition: transform var(--d-transicion), opacity var(--d-transicion);
}
.d-faq__icono::before { top: 9px; left: 2px; width: 16px; height: 1.5px; }
.d-faq__icono::after  { left: 9px; top: 2px; height: 16px; width: 1.5px; }
.d-faq__item.abierto .d-faq__icono::after { transform: rotate(90deg); opacity: 0; }

.d-faq__respuesta {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(.2, .6, .3, 1);
}
.d-faq__item.abierto .d-faq__respuesta { grid-template-rows: 1fr; }
.d-faq__respuesta > div { overflow: hidden; }
.d-faq__respuesta p {
    font-size: var(--d-small);
    color: var(--grafito);
    line-height: 1.7;
    margin: 0;
    padding-bottom: 1.75rem;
    max-width: 60ch;
}

/* =============================================================================
   17. CTA FINAL Y CONTACTO
   ============================================================================= */
/* Cierre sobre fotografia: el ultimo golpe de vista antes del formulario */
.d-cierre {
    position: relative;
    text-align: center;
    border-radius: var(--d-radio);
    overflow: hidden;
    padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(1.5rem, 1rem + 3vw, 4rem);
    background: var(--noche);
    isolation: isolate;
}
.d-cierre__fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.75) contrast(1.03);
}
/* Velo doble: uno plano para garantizar contraste del texto y otro en degradado
   para que la foto no quede muerta en la mitad superior. */
.d-cierre::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(26, 22, 19, .55), rgba(26, 22, 19, .82)),
        radial-gradient(60% 60% at 50% 30%, rgba(26, 22, 19, .15), transparent);
}
.d-cierre h2 {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    line-height: 1.05;
    margin: 0 auto 1.5rem;
    max-width: 18ch;
    color: var(--papel);
}
.d-cierre .d-lede { margin: 0 auto 2.5rem; text-align: center; color: rgba(255, 253, 248, .78); }
.d-cierre__ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.d-contacto__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    align-items: start;
}
.d-contacto__datos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.d-contacto__datos li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .85rem; font-size: var(--d-small); color: var(--grafito); align-items: center; }
.d-contacto__datos svg, .d-contacto__datos i { width: 17px; height: 17px; color: var(--humo); }
.d-contacto__datos a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--filete-2); }

.d-form { display: grid; gap: 1.1rem; }
.d-form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.d-campo { display: grid; gap: .45rem; }
.d-campo label {
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grafito);
}
.d-campo input,
.d-campo select,
.d-campo textarea {
    font-family: var(--sans);
    font-size: var(--d-small);
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--filete-2);
    border-radius: 8px;
    padding: .8rem 1rem;
    width: 100%;
    transition: border-color var(--d-transicion), box-shadow var(--d-transicion);
}
.d-campo textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.d-campo input:focus,
.d-campo select:focus,
.d-campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(var(--azul-rgb), .12);
}
.d-campo input::placeholder, .d-campo textarea::placeholder { color: var(--humo); }
.d-form__nota { font-size: .8125rem; color: var(--humo); margin: 0; }

.d-aviso {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: var(--d-radio-s);
    padding: 1rem 1.25rem;
    font-size: var(--d-small);
    border: 1px solid var(--filete);
}
.d-aviso--ok  { background: rgba(79, 122, 82, .08); border-color: rgba(79, 122, 82, .3); color: #3D6140; }
.d-aviso--mal { background: rgba(176, 85, 59, .07); border-color: rgba(176, 85, 59, .3); color: var(--terracota); }
.d-aviso svg, .d-aviso i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .15rem; }

/* =============================================================================
   18. PIE  (reestiliza .footer-commercial de brandbook.css)
   ============================================================================= */
.footer-commercial {
    background: var(--noche);
    color: rgba(255, 253, 248, .62);
    padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 0;
}
.footer-grid {
    max-width: var(--d-ancho);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    padding-bottom: 3.5rem;
}
.footer-logo-img { height: 30px; width: auto; }
.footer-description {
    font-size: var(--d-small);
    line-height: 1.65;
    color: rgba(255, 253, 248, .55);
    margin: 1.25rem 0 1.5rem;
    max-width: 34ch;
}
.footer-social { display: flex; gap: .5rem; }
.footer-social-link {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 253, 248, .16);
    border-radius: 8px;
    color: rgba(255, 253, 248, .62);
    transition: border-color var(--d-transicion), color var(--d-transicion);
}
.footer-social-link:hover { border-color: rgba(255, 253, 248, .45); color: var(--papel); }
.footer-social-link svg, .footer-social-link i { width: 17px; height: 17px; }

.footer-column-title {
    font-family: var(--mono);
    font-size: var(--d-micro);
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .66); /* subido de .40 por contraste AA (a11y) */
    margin: 0 0 1.25rem;
}
.footer-links { display: grid; gap: .7rem; }
.footer-link a {
    font-size: var(--d-small);
    color: rgba(255, 253, 248, .68);
    text-decoration: none;
    transition: color var(--d-transicion);
}
.footer-link a:hover { color: var(--papel); }

.footer-bottom {
    max-width: var(--d-ancho);
    margin-inline: auto;
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(255, 253, 248, .10);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.footer-bottom p { font-size: .8125rem; color: rgba(255, 253, 248, .66); margin: 0; } /* AA a11y */
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-legal .compliance-badge,
.compliance-badge {
    font-family: var(--mono);
    font-size: var(--d-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .5);
    border: 1px solid rgba(255, 253, 248, .14);
    border-radius: 100px;
    padding: .3rem .7rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
}
.compliance-badge svg, .compliance-badge i { width: 13px; height: 13px; }

/* Banda de cookies alineada con la piel nueva */
.cookie-consent { border-top: 1px solid rgba(255, 253, 248, .14) !important; background: var(--noche) !important; }

/* =============================================================================
   18-bis. PAGINAS DE ACCESO (alta de cuenta y login)
   Dos columnas: a la izquierda el motivo por el que alguien esta rellenando el
   formulario, a la derecha el formulario. Nadie crea una cuenta mirando campos
   vacios; necesita ver que gana mientras teclea.
   ============================================================================= */
.d-acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: var(--lino);
}

.d-acceso__aside {
    background: var(--noche);
    color: rgba(255, 253, 248, .72);
    padding: clamp(2rem, 1.5rem + 3vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
}
.d-acceso__aside > * { position: relative; z-index: 1; }
.d-acceso__aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 15% 10%, rgba(var(--azul-rgb), .18), transparent 60%);
}
.d-acceso__titulo {
    font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
    line-height: 1.06;
    color: var(--papel);
    margin: 1.25rem 0 1.25rem;
    max-width: 15ch;
}
.d-acceso__lede { color: rgba(255, 253, 248, .68); font-size: var(--d-small); max-width: 42ch; margin: 0; }

.d-acceso__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.d-acceso__puntos li {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: .9rem;
    font-size: var(--d-small);
    line-height: 1.5;
    color: rgba(255, 253, 248, .72);
}
.d-acceso__puntos strong { display: block; color: var(--papel); font-weight: 600; }
.d-acceso__puntos svg, .d-acceso__puntos i { width: 17px; height: 17px; color: var(--azul); margin-top: .15rem; }

.d-acceso__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 1rem + 3vw, 3.5rem);
}
.d-acceso__caja { width: 100%; max-width: 30rem; }
.d-acceso__caja h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); margin: 0 0 .6rem; }
.d-acceso__caja > p { color: var(--grafito); font-size: var(--d-small); margin: 0 0 2rem; }

.d-acceso__pie {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--filete);
    font-size: .8125rem;
    color: var(--humo);
}
.d-acceso__pie a { color: var(--tinta); }

/* Casilla de conformidad: la nativa no se puede teñir de la marca */
.d-check { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .75rem; align-items: start; cursor: pointer; }
.d-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem; height: 1.1rem;
    margin: .15rem 0 0;
    border: 1px solid var(--filete-2);
    border-radius: 4px;
    background: var(--papel);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background var(--d-transicion), border-color var(--d-transicion);
}
.d-check input::before {
    content: '';
    width: .6rem; height: .6rem;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
    box-shadow: inset 1em 1em var(--papel);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.d-check input:checked { background: var(--azul); border-color: var(--azul); }
.d-check input:checked::before { transform: scale(1); }
.d-check span { font-size: .8125rem; line-height: 1.5; color: var(--grafito); }
.d-check a { color: var(--tinta); }

/* Lista de errores de validacion dentro de un aviso */
.d-aviso ul { margin: 0; padding-left: 1.1rem; }
.d-aviso li + li { margin-top: .25rem; }

@media (max-width: 860px) {
    .d-acceso { grid-template-columns: 1fr; min-height: 0; }
    .d-acceso__aside { order: 2; }
    .d-acceso__panel { order: 1; }
}

/* =============================================================================
   19-bis. MOVIMIENTO  (lo orquesta assets/js/marca.js)
   ============================================================================= */

/* --- Entrada escalonada del hero -----------------------------------------
   Va en animaciones CSS y NO en una clase que ponga el JavaScript. El motivo
   es concreto: requestAnimationFrame no se ejecuta mientras la pestana esta en
   segundo plano, asi que con el metodo anterior quien abriera la web en una
   pestana de fondo se encontraba el hero en blanco al volver. Una animacion
   CSS se pone al dia sola y ademas funciona sin JavaScript.               */
@keyframes entrada-suave {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
[data-entrada] {
    opacity: 0;
    animation: entrada-suave 700ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

/* Cada linea del titular sube desde detras de su propia mascara. El relleno
   inferior evita que la mascara corte el descendente de la cursiva. */
.d-hero__linea {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}
@keyframes entrada-linea {
    from { transform: translateY(110%); }
    to   { transform: none; }
}
.d-hero__linea > span {
    display: block;
    animation: entrada-linea 900ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 85ms);
}

/* --- Micro-parallax con el raton -----------------------------------------
   El fotograma final de la animacion apunta a las variables del raton en vez
   de a un valor fijo. Como `forwards` mantiene ese fotograma, al cambiar las
   variables desde JavaScript el transform se recalcula: asi conviven la
   entrada animada y el seguimiento del cursor sobre la misma propiedad. */
@keyframes entrada-con-raton {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translate3d(var(--raton-x, 0px), var(--raton-y, 0px), 0); }
}
.d-hero__visual[data-entrada],
.d-sello-tiempos[data-entrada] {
    animation-name: entrada-con-raton;
    will-change: transform;
}

/* --- Parallax de las fotografias ---------------------------------------- */
[data-parallax] > img { will-change: transform; }

/* --- El punto de estado "en uso" respira --------------------------------- */
.d-sello-tiempos__estado::before { animation: latido 2.8s ease-in-out infinite; }
.d-sello-tiempos__fila--futuro .d-sello-tiempos__estado::before { animation-delay: 1.4s; }
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 122, 82, .55); }
    55%      { box-shadow: 0 0 0 5px rgba(79, 122, 82, 0); }
}
.d-sello-tiempos__fila--futuro .d-sello-tiempos__estado::before {
    animation-name: latido-azul;
}
@keyframes latido-azul {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 144, 196, .55); }
    55%      { box-shadow: 0 0 0 5px rgba(30, 144, 196, 0); }
}

/* --- Micro-interacciones ------------------------------------------------- */
/* La flecha avanza al pasar por encima: el boton "empuja" hacia adelante */
.d-btn svg, .d-btn i { transition: transform var(--d-transicion); }
.d-btn:hover svg, .d-btn:hover i { transform: translateX(3px); }

/* Las filas de bloques se iluminan al recorrerlas, y el numeral se rellena */
.d-bloque {
    transition: background var(--d-transicion);
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    border-radius: var(--d-radio-s);
}
.d-bloque:hover { background: rgba(255, 253, 248, .55); }
.d-bloque__num { transition: color var(--d-transicion), -webkit-text-stroke-color var(--d-transicion); }
.d-bloque:hover .d-bloque__num { color: var(--oro); }

/* Los pasos se elevan y su numeral se rellena de azul */
.d-paso { transition: background var(--d-transicion), transform var(--d-transicion); position: relative; }
.d-paso:hover { background: #fff; transform: translateY(-2px); z-index: 1; }
.d-paso__num { transition: color var(--d-transicion); }
.d-paso:hover .d-paso__num { color: var(--azul); }

/* Las tarjetas de seguridad se aclaran al pasar por encima */
.d-hechos li { transition: background var(--d-transicion); }
.d-hechos li:hover { background: var(--noche-2); }

/* La banda fotografica gana un punto de contraste al acercarse el cursor */
.d-foto-banda img { transition: filter var(--d-transicion); }
.d-foto-banda:hover img { filter: saturate(1) contrast(1.04); }

/* =============================================================================
   19. REVELADO AL HACER SCROLL  (usa el observer de brandbook.js)
   ============================================================================= */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 640ms cubic-bezier(.2, .6, .3, 1),
                transform 640ms cubic-bezier(.2, .6, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 90ms; }
.reveal--d2 { transition-delay: 180ms; }
.reveal--d3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    /* Sin movimiento, pero sobre todo: nada puede quedarse invisible. Todo lo
       que arranca oculto para animarse tiene que mostrarse igualmente. */
    [data-entrada] { opacity: 1 !important; transform: none !important; animation: none !important; }
    .d-hero__linea > span { transform: none !important; animation: none !important; }
    [data-parallax] > img { transform: none !important; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =============================================================================
   20. RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .d-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
    .d-problema__grid,
    .d-seguridad__grid,
    .d-contacto__grid { grid-template-columns: 1fr; }
    .d-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-paso { border-right-width: 1px; border-radius: 0; }
    .d-paso:nth-child(2) { border-left-width: 0; }
    .d-paso:nth-child(4) { border-left-width: 0; }
    .d-paso:nth-child(n+3) { border-top-width: 0; }
    .d-paso:first-child { border-radius: var(--d-radio) 0 0 0; }
    .d-paso:nth-child(2) { border-radius: 0 var(--d-radio) 0 0; }
    .d-paso:nth-child(3) { border-radius: 0 0 0 var(--d-radio); }
    .d-paso:last-child   { border-radius: 0 0 var(--d-radio) 0; }
    .d-bloque { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .d-bloque__items { grid-column: 2; margin-top: .5rem; }
    .d-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-links { display: none; }
    .nav-actions .btn, .nav-actions .d-btn { display: none; }
    .nav-mobile-toggle { display: block; }
}

@media (max-width: 720px) {
    /* El sello deja de sangrar hacia fuera: en movil ese -3rem se sale de la
       pantalla y genera scroll horizontal en toda la pagina. */
    .d-sello-tiempos {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
    }
    .d-hero__foto { aspect-ratio: 4 / 3; max-height: none; }
    .d-tiempos { grid-template-columns: 1fr; }
    .d-tiempo + .d-tiempo { border-left: 0; border-top: 1px solid var(--filete); }
    .d-pasos { grid-template-columns: 1fr; }
    .d-paso { border-left-width: 1px; border-right-width: 1px; border-radius: 0 !important; border-top-width: 0; }
    .d-paso:first-child { border-top-width: 1px; border-radius: var(--d-radio) var(--d-radio) 0 0 !important; }
    .d-paso:last-child { border-radius: 0 0 var(--d-radio) var(--d-radio) !important; }
    .d-grid--2, .d-grid--3, .d-grid--4 { grid-template-columns: 1fr; }
    .d-canal { grid-template-columns: 1fr; }
    .d-form__fila { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-preguntas li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
    .d-tira__inner { justify-content: flex-start; gap: .75rem 1.5rem; }
}

@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .d-hero__ctas .d-btn { width: 100%; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}