:root{
    --vino:#6f0808;
    --dorado:#d2b886;
    --brand:#6f0808;
--brand-ink:#511111;
--accent:#fdeada;
--ink:#1f2328;
--muted:#6b7280;
--soft:#f6f7fb;
--card:#ffffff;
--radius:22px;
--shadow:0 12px 30px rgba(0,0,0,.08);
    
      --font-head:'Source Serif Pro', serif;
  --font-body:'Inter', sans-serif;
}

/* ============================================================
   WRAPPER / HERO — (SIN CAMBIOS)
============================================================ */

      
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg, var(--accent), #fff 80%)}
.hero-inner{display:grid;grid-template-columns:4fr .9fr;gap:32px;align-items:center;padding:12px 0;position:relative}


.page-hero {
    position: relative;
    padding: 70px 32px;
    border-radius: 28px;
    margin-bottom: 38px;

    background: rgba(255,255,255,0.58);
    backdrop-filter: blur(25px) saturate(180%);

    background-image:
        radial-gradient(circle at 30% 18%, rgba(210,184,134,0.28), transparent 68%),
        radial-gradient(circle at 80% 70%, rgba(111,8,8,0.14), transparent 75%);
}

.hero-title {
    font-size: 46px;
    font-weight: 800;
    color: var(--vino);
    letter-spacing: -0.6px;
    margin-bottom: 10px;
}

.hero-sub {
    font-size: 19px;
    opacity: 0.86;
}

/* ============================================================
   PANEL ÚNICO (VERSIÓN CORREGIDA)
============================================================ */
.page-content{
    position: relative;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(30px) saturate(180%);
    border-radius: 28px;
    padding: 40px 46px;
    font-size: 19px;
    line-height: 1.86;
    margin:20px;

    /* profundidad + tilt compatible */
    transform-style: preserve-3d;
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    overflow: visible;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.18),
        0 8px 22px rgba(0,0,0,0.10);
}

/* ============================================================
   TEXTURA (ÚNICA Y FINAL)
============================================================ */
.page-content::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    z-index:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 25% 20%, rgba(210,184,134,0.22), transparent 65%),
        radial-gradient(circle at 80% 80%, rgba(111,8,8,0.15), transparent 70%),
        repeating-linear-gradient(
            135deg,
            rgba(210,184,134,0.04) 0px,
            rgba(210,184,134,0.04) 1px,
            transparent 1px,
            transparent 14px
        );
}



/* ============================================================
   SUBTÍTULOS
============================================================ */
.page-content h2{
    font-size:30px;
    font-weight:800;
    color:var(--vino);
    padding-left:16px;
    border-left:6px solid var(--dorado);
    margin-top:42px;
    margin-bottom:18px;
}

/* ============================================================
   LISTA
============================================================ */
.list li{
    margin-bottom:6px;
    line-height:1.7;
}

/* ============================================================
   FOOTER
============================================================ */
.footer-cneip{
    margin-top:60px;
    padding:40px 22px;
    text-align:center;
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(18px) saturate(150%);
    border-radius:22px;
    box-shadow:0 6px 22px rgba(0,0,0,0.08);
    font-size:15px;
    line-height:1.55;
    color:#444;
    margin:20px;
}
.footer-cneip strong{
    color:var(--vino);
}

/* ============================================================
   SPATIAL FADE
============================================================ */
.spatial-fade{
    opacity:0;
    transform:translateY(14px) scale(0.975);
    transition:opacity 0.55s ease, transform 0.55s ease;
}
.spatial-fade.loaded{
    opacity:1;
    transform:translateY(0) scale(1);
}
/* Tilt + Glow PRO — versión editorial */
.page-content {
    perspective: 1400px;
    transform-style: preserve-3d;
}

/* Glow suave dorado */
.page-glow {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
        circle,
        rgba(210,184,134,0.32),
        rgba(210,184,134,0) 70%
    );

    opacity: 0;
    filter: blur(38px);
    transition: opacity .25s ease-out, transform .15s ease-out;
    z-index: 3;
}




/* === 1. Holographic Edge FX === */
.page-content::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;

    border: 2px solid transparent;
    background: linear-gradient(130deg,
        rgba(210,184,134,0.55),
        rgba(111,8,8,0.45),
        rgba(210,184,134,0.55)
    ) border-box;
    mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    opacity: 0;
    transition: opacity .35s ease;
}

.page-content:hover::after{
    opacity: .65;
}



/* === 6. Halo dinámico VisionOS en subtítulos === */
.page-content h2 {
    position: relative;
    overflow: visible;
}

.page-content h2::after{
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 0;
    height: 70%;
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: 12px;

    background: radial-gradient(
        circle,
        rgba(210,184,134,0.38),
        rgba(210,184,134,0) 70%
    );

    opacity: 0;
    filter: blur(18px);
    transition: opacity .35s ease, width .35s ease, filter .35s ease;
}

/* Activación suave al hover */
.page-content h2:hover::after{
    opacity: 1;
    width: 140px;
    filter: blur(26px);
}



/* === 7. Micro-deslizamiento editorial === */
.page-content h2 {
    transition: transform .35s ease;
}
.page-content h2:hover {
    transform: translateX(1px);
}


/* === 8. Glass Ink VisionOS para subtítulos === */
.page-content h2 {
    background: none;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color .35s ease;
}

.page-content h2:hover {
    color: var(--vino);
    text-shadow:
        0 0 12px rgba(210,184,134,0.45),
        0 0 22px rgba(210,184,134,0.25);
}



/* === 9. Depth stacking VisionOS === */
.page-content h2 {
    position: relative;
    transition: transform .35s ease, filter .35s ease;
}

.page-content h2:hover {
    transform: translateZ(3px);
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.18));
}


/* === HERO · HALO VISIONOS (Capa 1) === */
.page-hero {
    position: relative;
    overflow: hidden;
}

.hero-halo {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(210,184,134,0.38),
        rgba(210,184,134,0.0) 70%
    );
    filter: blur(45px);
    opacity: .55;
    pointer-events: none;
    animation: heroFloat 9s ease-in-out infinite alternate;
}

@keyframes heroFloat {
    0% { transform: translate(-10%, -20%); }
    100% { transform: translate(20%, 10%); }
}
/* === HERO · Glow lineal bajo el título (Capa 2) === */
.hero-title {
    position: relative;
    z-index: 5;
}

.hero-title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 68px;
    height: 4px;
    border-radius: 4px;

    background: linear-gradient(
        90deg,
        rgba(210,184,134,0.65),
        rgba(210,184,134,0.00)
    );

    filter: blur(2px);
    opacity: .85;
}


/* === HERO · Volumen PRO para título (Capa 3) === */
.hero-title {
    text-shadow:
        0 2px 4px rgba(0,0,0,0.05),
        0 6px 18px rgba(111,8,8,0.20);
}
/* === HERO · Glass grain VisionOS (Capa 4) === */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.07) 0px,
            rgba(255,255,255,0.07) 1px,
            transparent 1px,
            transparent 14px
        );
    opacity: .20;
}

/* ============================================================
   PÁRRAFOS — Versión ULTRASUTIL VisionOS
============================================================ */
.page-content p {
    font-size: 19px;
    line-height: 1.82;
    font-weight: 400;
    color: #3e3a3a; /* ligeramente más cálido, más legible */
    margin-bottom: 22px;
    letter-spacing: -0.2px;
}

/* Primera línea apenas acentuada (editorial elegante, no visible) */
.page-content p::first-line {
    font-weight: 500;
    color: #3c2e2e; /* tono vino muy leve */
}

/* Primera letra ligeramente más grande — sin parecer dropcap */
.page-content p::first-letter {
    font-size: 1.03em;
    font-weight: 600;
    color: var(--vino);
    margin-right: 1px;
}
/* ============================================================
   H2 — Versión ULTRA-SUTIL VisionOS
============================================================ */
.page-content h2 {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -0.35px;
    margin-top: 54px;
    margin-bottom: 22px;

    color: var(--vino);
    font-family: "Inter", sans-serif;

    /* mantiene tu borde dorado institucional */
    padding-left: 18px;
    border-left: 6px solid var(--dorado);

    /* separación + respiración elegante */
    line-height: 1.25;

    /* suavidad real: micro-elevación elegida para VisionOS */
    opacity: 0.97;
}

/* Primera línea del h2 ligeramente modulada (casi invisible) */
.page-content h2::first-line {
    letter-spacing: -0.45px;
}

/* Halo sutil de elegancia (no brilla, no distrae) */
.page-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 32px;

    background: radial-gradient(
        circle,
        rgba(210,184,134,0.20),
        transparent 70%
    );

    filter: blur(22px);
    opacity: 0.38;
    pointer-events: none;
}



/* ============================================================
   LISTAS — Versión Ultra-Sutil Editorial VisionOS
============================================================ */
.page-content .list {
    padding-left: 0;
    margin-left: 0;
    list-style: none; /* quitamos bullet estándar */
}

.page-content .list li {
    position: relative;
    padding: 6px 0 10px 26px; /* espacio para el bullet */
    margin-bottom: 6px;
    line-height: 1.75;
    font-size: 18.5px;
}

/* Bullet institucional sutil */
.page-content .list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;

    width: 8px;
    height: 8px;
    border-radius: 50%;

    /* Micro-brillo dorado institucional */
    background: radial-gradient(
        circle,
        rgba(210,184,134,0.75),
        rgba(210,184,134,0.15)
    );

    box-shadow: 0 0 6px rgba(210,184,134,0.35);
    opacity: 0.95;
}



/* ============================================================
   PAPER DEPTH INSTITUCIONAL — VisionOS Editorial PRO
   — Capa ultra-sutil detrás del contenido
   — Simula páginas finas apiladas (3D editorial premium)
============================================================ */
.page-content .paper-depth {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -3;
    pointer-events: none;

    background:
        /* capa base suave */
        linear-gradient(
            145deg,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.15) 65%
        );

    /* profundidad mínima tipo papel */
    box-shadow:
        0 1.5px 2px rgba(0,0,0,0.05),
        0 3px 6px rgba(0,0,0,0.045),
        0 8px 14px rgba(0,0,0,0.035);

    opacity: 0.55;
}













/* ============================================================
   ENLACES — Ultra-Sutil Institucional VisionOS
============================================================ */
.page-content a {
    color: var(--vino);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(210,184,134,0.55);
    padding-bottom: 1px;

    transition: color .20s ease, border-color .25s ease;
}

/* Hover elegante */
.page-content a:hover {
    color: var(--dorado);
    border-color: var(--dorado);
}



/* ESTILOS PARA LA PAGINA DE HISTORIA */

/* ============================================================
   COMPONENTES INSTITUCIONALES — CACNEIP
============================================================ */

/* ---------------- Hero estándar ---------------- */
.hero-std{position:relative;padding:60px 0;background:linear-gradient(180deg,#fdeada,#fff)}
.hero-std-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.hero-tag{display:inline-block;background:#fff;border:1px solid rgba(0,0,0,.08);padding:6px 14px;border-radius:999px;font-size:14px;color:#6f0808;font-weight:600}
.hero-title{font-family:'Source Serif Pro',serif;color:#6f0808;font-size:clamp(34px,6vw,48px);margin:14px 0 10px;font-weight:800;line-height:1.1}
.hero-lead{font-size:18px;color:#444;max-width:540px}
.hero-kpi-box{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hero-kpi{background:#fff;border-radius:20px;padding:14px 16px;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)}
.hero-kpi span{display:block;font-size:28px;font-weight:800;color:#6f0808}
.hero-kpi label{display:block;font-size:14px;color:#888;margin-top:2px}

/* ---------------- Layout general ---------------- */
.std-section{padding:40px 0}
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.std-card{background:#fff;border-radius:22px;padding:24px 26px;box-shadow:0 12px 26px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08);margin-bottom:28px}
.std-card-title{font-family:'Source Serif Pro',serif;font-weight:700;color:#6f0808;font-size:22px;margin-bottom:16px}
.std-card-text p{margin:0 0 14px;color:#333;line-height:1.65}

/* ---------------- Timeline ---------------- */
.timeline{position:relative;padding-left:24px;margin-top:10px}
.timeline:before{content:"";position:absolute;left:26px;top:0;bottom:0;width:3px;background:linear-gradient(#6f0808,transparent)}

.tl-item{position:relative;display:flex;gap:16px;margin-bottom:24px;opacity:0;transform:translateY(20px);transition:.4s ease}
.tl-item.show{opacity:1;transform:none}

.tl-dot{min-width:18px;height:18px;border-radius:50%;background:#6f0808;box-shadow:0 0 0 4px #fff,inset 0 0 0 2px rgba(0,0,0,.05);margin-top:6px}

.tl-body{background:#fff;border-radius:16px;padding:16px 18px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.tl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tl-head span{font-weight:800;color:#6f0808;font-size:18px}
.tl-head label{font-size:12px;background:#fff;border:1px solid rgba(0,0,0,.08);padding:4px 10px;border-radius:999px;color:#444}
.tl-body p{margin:0;color:#444;font-size:15px;line-height:1.55}

/* ---------------- Responsive ---------------- */
@media(max-width:900px){
  .hero-std-inner{grid-template-columns:1fr}
  .grid-2col{grid-template-columns:1fr}
  .hero-kpi-box{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .hero-kpi-box{grid-template-columns:repeat(2,1fr)}
}




/* ============================================================
   PAGE-CONTENT2 — VERSIÓN BLANCA, SIN TARJETA, SIN BLUR
   Estructura editorial plana, elegante y limpia.
   Mantiene compatibilidad absoluta con tu sistema actual.
============================================================ */
.page-content2{
    position: relative;
    background: #ffffff;        /* ⚪ Fondo blanco puro */
    border-radius: 0;           /* Sin tarjeta */
    padding: 40px 46px;
    font-size: 19px;
    line-height: 1.86;
    margin: 20px;
    box-shadow: none;           /* Sin sombra */
    backdrop-filter: none;      /* Sin efectos de glass */
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
}

/* Se mantiene el spatial fade */
.page-content2.spatial-fade{
    opacity:0;
    transform:translateY(14px) scale(0.975);
    transition:opacity 0.55s ease, transform 0.55s ease;
}
.page-content2.spatial-fade.loaded{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* ============================================================
   H2 — MISMO DISEÑO INSTITUCIONAL
============================================================ */
.page-content2 h2{
    font-size:31px;
    font-weight:800;
    letter-spacing:-0.35px;
    margin-top:54px;
    margin-bottom:22px;
    color:var(--vino);
    font-family:"Inter", sans-serif;
    padding-left:18px;
    border-left:6px solid var(--dorado);
}

/* Halo elegante coherente con tu sistema */
.page-content2 h2::after{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:180px;
    height:32px;
    background:radial-gradient(circle, rgba(210,184,134,0.20), transparent 70%);
    filter:blur(22px);
    opacity:.38;
    pointer-events:none;
}

/* ============================================================
   PÁRRAFOS
============================================================ */
.page-content2 p{
    font-size:19px;
    line-height:1.82;
    color:#3e3a3a;
    margin-bottom:22px;
}

/* primera letra elegante */
.page-content2 p::first-letter{
    font-size:1.03em;
    font-weight:600;
    color:var(--vino);
}

/* ============================================================
   LISTAS
============================================================ */
.page-content2 .list{
    list-style:none;
    padding-left:0;
}
.page-content2 .list li{
    position:relative;
    padding:6px 0 10px 26px;
    margin-bottom:6px;
    line-height:1.75;
    font-size:18.5px;
}
.page-content2 .list li::before{
    content:"";
    position:absolute;
    left:6px;
    top:10px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(210,184,134,.75),
        rgba(210,184,134,.15)
    );
    box-shadow:0 0 6px rgba(210,184,134,.35);
}

/* ============================================================
   ENLACES
============================================================ */
.page-content2 a{
    color:var(--vino);
    font-weight:600;
    text-decoration:none;
    border-bottom:1.5px solid rgba(210,184,134,0.55);
    padding-bottom:1px;
}
.page-content2 a:hover{
    color:var(--dorado);
    border-color:var(--dorado);
}




/* ============================================================
   ROYAL VELVET AURIC PULSE BUTTON — diseño totalmente nuevo
   Elegancia cinematográfica · Sin repetir ningún efecto previo
============================================================ */
.royal-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 32px;
    border-radius:16px;

    /* Fondo vino profundo con seda */
    background: linear-gradient(135deg,
        #5a0606 0%,
        #7c0b0b 35%,
        #5a0606 100%
    );

    /* Borde oro líquido */
    border:1px solid rgba(210,184,134,0.55);

    /* Tipografía */
    color:#f9e7d0;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    letter-spacing:0.2px;

    /* Relieve físico */
    box-shadow:
        0 8px 18px rgba(0,0,0,0.25),
        inset 0 0 22px rgba(255,255,255,0.05),
        inset 0 0 18px rgba(210,184,134,0.10);

    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition: all .35s cubic-bezier(.16,.84,.44,1);
}

/* Halo dinámico sutil */
.royal-btn::before{
    content:"";
    position:absolute;
    inset:-40%;

    background: radial-gradient(circle at 60% 40%,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0) 70%
    );
    opacity:0;
    transform:scale(0.75);
    transition: all .55s ease;
}

/* Barra de luz diagonal — efecto premium cinematográfico */
.royal-btn::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-30%;
    width:180%;
    height:350%;

    background: linear-gradient(
        125deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.15) 45%,
        rgba(255,255,255,0) 90%
    );
    opacity:0;
    transform: rotate(8deg) translateY(0);
    transition: opacity .45s ease, transform 1.25s cubic-bezier(.16,.84,.44,1);
}

/* Animación al pasar cursor */
.royal-btn:hover{
    transform: translateY(-3px) scale(1);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.30),
        inset 0 0 28px rgba(255,255,255,0.07),
        inset 0 0 22px rgba(210,184,134,0.16);
}

.royal-btn:hover::before{
    opacity:0.3;
    transform:scale(1.25);
}

.royal-btn:hover::after{
    opacity:0.3;
    transform: rotate(8deg) translateY(28%);
}

/* Icono premium */
.royal-icon{
    font-size:18px;
    font-weight:700;
    color:#ffdfb0;
    margin-right:4px;
    transition: transform .35s ease;
}

.royal-btn:hover .royal-icon{
    transform: translateY(2px);
}



/* Contenedor del icono */
.royal-animated-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Pulso dorado suave */
.royal-animated-icon .royal-svg {
    animation: goldenPulse 2.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes goldenPulse {
    0% { filter: drop-shadow(0 0 0px rgba(210,184,134,0.0)); }
    45% { filter: drop-shadow(0 0 9px rgba(210,184,134,0.55)); }
    100% { filter: drop-shadow(0 0 0px rgba(210,184,134,0.0)); }
}

/* Reflejo líquido desplazándose */
.liquid-reflection {
    animation: liquidMove 2.6s cubic-bezier(.16,.84,.44,1) infinite;
}

@keyframes liquidMove {
    0% {
        transform: translateX(-140%) skewX(-12deg);
        opacity: 0;
    }
    30% {
        opacity: 0.55;
    }
    55% {
        transform: translateX(20%) skewX(-12deg);
        opacity: 0.35;
    }
    100% {
        transform: translateX(180%) skewX(-12deg);
        opacity: 0;
    }
}