/* ============================================================ IMAX — Home cinematográfico (tema oscuro para todas las secciones) Se carga DESPUÉS de styles.css + cine-hero.css y se activa con . Reusa el markup del index, en oscuro. ============================================================ */ body.cine-home{ background:#070f1a; color:#c7d4df; } /* lienzo oscuro continuo con glows de marca (detrás de todo) */ body.cine-home::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(58vw 58vw at 86% 6%, rgba(31,78,121,.30), transparent 60%), radial-gradient(48vw 48vw at 2% 58%, rgba(127,212,245,.10), transparent 60%), radial-gradient(40vw 40vw at 70% 95%, rgba(31,78,121,.20), transparent 62%), linear-gradient(180deg, #070f1a 0%, #0a1828 55%, #070f1a 100%); } .cine-home .section-title{ color:#fff; } .cine-home .section-copy{ color:rgba(199,212,223,.62); } .cine-home .eyebrow{ background:rgba(127,212,245,.10); box-shadow:inset 0 0 0 1px rgba(127,212,245,.28); color:#aee0f7; } /* franja de stats */ .cine-home .stat{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } .cine-home .stat .n{ color:#7FD4F5; } .cine-home .stat .l{ color:rgba(199,212,223,.66); } /* tarjetas "por qué elegir" */ .cine-home .feature{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } .cine-home .feature:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(127,212,245,.4), 0 24px 48px rgba(0,0,0,.45); } .cine-home .feature .mark{ background:rgba(127,212,245,.12); color:#7FD4F5; box-shadow:inset 0 0 0 1px rgba(127,212,245,.32); } .cine-home .feature h4{ color:#fff; } .cine-home .feature p{ color:rgba(199,212,223,.64); } /* ===== Sección Exámenes: panel CLARO tipo showcase (como referencia) ===== */ .cine-home .exam-widget{ background:linear-gradient(160deg, #ffffff 0%, #f2f9fd 52%, #e9f4fb 100%); box-shadow:inset 0 0 0 1px rgba(31,78,121,.06), 0 30px 70px rgba(6,18,31,.45); border-radius:34px; overflow:hidden; align-items:center; } .cine-home .exam-widget .copy h2{ color:#101820; } .cine-home .exam-widget .copy p{ color:#34414B; } .cine-home .exam-widget .note{ color:#1F4E79; } .cine-home .exam-widget .btn-primary{ background:#1F4E79; box-shadow:0 10px 22px rgba(31,78,121,.22); } .cine-home .exam-widget .btn-primary:hover{ background:#1A4369; } /* escena clara: conectores y nodos en azul de marca */ .cine-home .exam-widget .stage{ --accent:#3E8FC4; } .cine-home .exam-widget .stage .glow{ background:radial-gradient(54% 46% at 50% 58%, rgba(169,214,232,.34), rgba(169,214,232,0) 70%); } .cine-home .exam-widget .stage .layer img{ filter:drop-shadow(0 14px 26px rgba(31,78,121,.12)); } /* equipo: foto original (fondo claro) se funde con el panel claro */ .cine-home .exam-widget .stage .l-device img{ filter:drop-shadow(0 18px 34px rgba(31,78,121,.14)); } /* tarjetas: tiles blancos con dibujo azul, redondeadas con borde sutil */ .cine-home .exam-widget .stage .card .floff{ padding:0; background:none; box-shadow:none; backdrop-filter:none; } .cine-home .exam-widget .stage .card img{ border-radius:16px; box-shadow:0 12px 26px rgba(31,78,121,.14), inset 0 0 0 1px rgba(31,78,121,.06); filter:none; } /* sedes */ .cine-home .sede{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } .cine-home .sede h3{ color:#fff; } .cine-home .sede .addr{ color:#e3eef6; } .cine-home .sede .ref{ color:rgba(199,212,223,.6); } .cine-home .map{ background:rgba(127,212,245,.06); box-shadow:inset 0 0 0 1px rgba(127,212,245,.16); } .cine-home .map .streets span{ background:rgba(127,212,245,.18); } .cine-home .map .glow{ background:rgba(127,212,245,.16); } .cine-home .map .pin{ background:#7FD4F5; box-shadow:0 8px 18px rgba(127,212,245,.4); } .cine-home .map .pin::after{ background:#062033; } .cine-home .map .map-label{ color:#7FD4F5; } .cine-home .sede .contact{ color:rgba(199,212,223,.82); } /* botones sobre oscuro */ .cine-home .btn-primary{ background:#2F86C9; box-shadow:0 10px 26px rgba(47,134,201,.35); } .cine-home .btn-primary:hover{ background:#3D97DB; } .cine-home .btn-ghost{ background:rgba(255,255,255,.06); color:#eaf6fe; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } .cine-home .btn-ghost:hover{ background:rgba(255,255,255,.12); } /* CTA */ .cine-home .cta{ background:linear-gradient(120deg,#0c2c4f 0%, #15457a 60%, #1c5a93 100%); box-shadow:inset 0 0 0 1px rgba(127,212,245,.2); } .cine-home .cta::after{ background:rgba(127,212,245,.16); } .cine-home .cta .btn-ghost{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); } /* footer: usa el footer oscuro global (styles.css) */ /* divisores sutiles entre secciones */ .cine-home .section-head{ position:relative; } /* ===== Hero que se funde con el fondo oscuro ===== */ .cine-home .cine-hero{ background:transparent; } /* deja ver el canvas oscuro detrás */ .cine-home .cine-hero .bg{ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.7) 72%, rgba(0,0,0,.25) 90%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.7) 72%, rgba(0,0,0,.25) 90%, rgba(0,0,0,0) 100%); } /* refuerzo de fundido al color exacto del fondo en el borde inferior */ .cine-home .cine-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(7,15,26,0) 0%, rgba(7,15,26,.55) 55%, rgba(7,15,26,.92) 85%, #070f1a 100%); }