/* CEA Santa Rita — capa visual elegante (rojo + ámbar + naranja) */

body {
  background:
    radial-gradient(1000px 420px at 100% -8%, rgba(232, 160, 23, 0.1), transparent 55%),
    radial-gradient(820px 360px at -5% 18%, rgba(179, 40, 45, 0.07), transparent 52%),
    linear-gradient(180deg, #F7F5F2 0%, var(--cea-fondo) 40%, #F3F0EB 100%);
  letter-spacing: 0.01em;
}

/* ——— Navbar pizarra profesional ——— */
.cea-navbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 55%),
    linear-gradient(105deg, #1A1514 0%, #241A1B 48%, #1F1614 100%) !important;
  border-bottom: 1px solid rgba(232, 160, 23, 0.22) !important;
  box-shadow: 0 10px 30px rgba(20, 14, 14, 0.28);
}
.cea-navbar::before {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cea-rojo-oscuro),
    var(--cea-rojo),
    var(--cea-ambar),
    var(--cea-naranja),
    var(--cea-rojo),
    var(--cea-rojo-oscuro)
  );
  background-size: 240% 100%;
}
.cea-navbar.is-scrolled {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 50%),
    linear-gradient(105deg, #140F0F 0%, #1C1415 100%) !important;
  box-shadow: 0 16px 40px rgba(12, 8, 8, 0.42);
  border-bottom-color: rgba(232, 160, 23, 0.3) !important;
}

.cea-nav {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cea-navbar.is-scrolled .cea-nav {
  background: rgba(232, 160, 23, 0.08) !important;
  border-color: rgba(232, 160, 23, 0.2) !important;
}

.cea-brand { color: #F7F2EC !important; }
.cea-brand-text strong {
  color: #FFF6EE !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.cea-brand:hover .cea-brand-text strong { color: var(--cea-ambar) !important; }
.cea-brand-text span {
  color: rgba(247, 242, 236, 0.62) !important;
  letter-spacing: 0.1em;
}
.cea-brand:hover .cea-brand-text span { color: var(--cea-crema) !important; }

.cea-toggler {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.cea-toggler:hover,
.cea-toggler:focus {
  background: rgba(232, 160, 23, 0.16) !important;
  border-color: var(--cea-ambar) !important;
}
.cea-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28247, 242, 236, 0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.cea-nav .nav-link {
  color: rgba(247, 242, 236, 0.88) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cea-nav .nav-link::before {
  background: linear-gradient(135deg, rgba(232, 160, 23, 0.22), rgba(179, 40, 45, 0.18)) !important;
}
.cea-nav .nav-link::after {
  background: linear-gradient(90deg, var(--cea-rojo), var(--cea-ambar), var(--cea-naranja)) !important;
  height: 2.5px;
}
.cea-nav .nav-link:hover {
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.cea-nav .nav-link.active {
  color: #1A1210 !important;
  background: linear-gradient(135deg, var(--cea-ambar) 0%, #F0C55A 45%, var(--cea-crema) 100%) !important;
  box-shadow: 0 12px 28px rgba(232, 160, 23, 0.28);
}
.cea-nav .nav-link.active::after {
  background: var(--cea-rojo-oscuro) !important;
  width: 36%;
}
.cea-nav .nav-link.active:hover {
  color: #1A1210 !important;
  box-shadow: 0 16px 32px rgba(232, 160, 23, 0.36);
}

.cea-nav .nav-login {
  color: var(--cea-ambar) !important;
  border: 1.5px solid rgba(232, 160, 23, 0.45) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.cea-nav .nav-login:hover {
  background: linear-gradient(145deg, var(--cea-rojo), var(--cea-rojo-oscuro)) !important;
  color: #fff !important;
  border-color: var(--cea-rojo) !important;
}

@media (max-width: 991px) {
  .cea-nav {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ——— Botones ——— */
.btn-cea {
  background: linear-gradient(135deg, var(--cea-rojo) 0%, var(--cea-rojo-oscuro) 100%);
  border: 0;
  border-radius: 999px;
  padding: 0.78rem 1.6rem;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(122, 27, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-cea:hover {
  background: linear-gradient(135deg, #C9383D 0%, var(--cea-rojo-oscuro) 100%);
  box-shadow: 0 16px 34px rgba(122, 27, 30, 0.36);
}
.btn-cea-outline {
  border-radius: 999px;
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
.btn-cea-outline:hover {
  background: var(--cea-ambar);
  border-color: var(--cea-ambar);
  color: #1A1210;
}
.btn-cea-ghost {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--cea-rojo) 55%, var(--cea-ambar));
  background: linear-gradient(180deg, #fff, #FFF8F1);
  box-shadow: 0 8px 20px rgba(44, 44, 42, 0.06);
}
.btn-cea-ghost:hover {
  background: linear-gradient(135deg, var(--cea-rojo), var(--cea-naranja));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px rgba(179, 40, 45, 0.25);
}

/* ——— Tipografía / secciones ——— */
.cea-section-title {
  position: relative;
  padding-bottom: 0.55rem;
  background: linear-gradient(120deg, var(--cea-grafito) 0%, #3A2A28 60%, var(--cea-rojo-oscuro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.015em;
}
.cea-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.25rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cea-rojo), var(--cea-ambar), transparent);
  transition: width 0.45s var(--ease-out);
}
.cea-section-title:hover {
  transform: translateX(2px);
  color: transparent;
}
.cea-section-title:hover::after { width: 5rem; }

.cea-section-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #6B6560;
}

.cea-section-alt {
  background:
    radial-gradient(720px 260px at 100% 0%, rgba(232, 160, 23, 0.12), transparent 58%),
    radial-gradient(560px 220px at 0% 100%, rgba(179, 40, 45, 0.08), transparent 60%),
    linear-gradient(180deg, #EFEAE3, #E8E2D9) !important;
  position: relative;
}
.cea-section-alt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 160, 23, 0.45), rgba(179, 40, 45, 0.35), transparent);
}

/* ——— Hero ——— */
.cea-hero-media::after {
  background:
    linear-gradient(115deg, rgba(20, 14, 14, 0.72) 0%, rgba(122, 27, 30, 0.42) 42%, rgba(179, 40, 45, 0.78) 100%),
    linear-gradient(180deg, transparent 25%, rgba(20, 14, 14, 0.58) 100%) !important;
}
.cea-hero-eyebrow {
  color: var(--cea-ambar);
  font-weight: 700;
}
.cea-hero-eyebrow::before {
  background: linear-gradient(90deg, var(--cea-ambar), transparent) !important;
  width: 2rem;
  height: 2px;
}
.cea-hero-brand {
  background: linear-gradient(120deg, #FFFFFF 10%, #FFE8C8 55%, #FFF5E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}
.cea-hero-lead {
  color: rgba(255, 248, 240, 0.92);
  line-height: 1.7;
}

/* ——— Page headers ——— */
.cea-page-header {
  background:
    radial-gradient(520px 220px at 85% 20%, rgba(232, 160, 23, 0.28), transparent 60%),
    linear-gradient(120deg, #7A1B1E 0%, #B3282D 45%, #C45A1A 100%) !important;
  padding: 3.4rem 0 2.8rem;
}
.cea-page-header::before {
  background: radial-gradient(circle, rgba(255, 214, 140, 0.22), transparent 62%) !important;
}
.cea-page-header h1 {
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cea-page-header p {
  color: rgba(255, 248, 240, 0.88);
  max-width: 36rem;
}

/* ——— Tarjetas / contenedores ——— */
.cea-news-card,
.cea-gallery-card,
.cea-gallery-quote,
.cea-malla-viewer,
main form.bg-white,
main .bg-white.p-3,
main .bg-white.p-4,
main .card {
  border-radius: 1rem !important;
  border: 1px solid rgba(44, 44, 42, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 34px rgba(44, 36, 30, 0.07) !important;
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.35s,
    background 0.35s !important;
}
.cea-news-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 100%) !important;
}
.cea-news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cea-rojo), var(--cea-ambar), var(--cea-naranja));
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.cea-news-card:hover::before { transform: scaleX(1); }
.cea-news-card:hover,
.cea-gallery-card:hover,
main form.bg-white:hover,
main .bg-white.p-3:hover,
main .bg-white.p-4:hover,
main .card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(232, 160, 23, 0.35) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 48px rgba(122, 27, 30, 0.14) !important;
}

.cea-gallery-card {
  background: #fff !important;
}
.cea-gallery-title {
  letter-spacing: -0.01em;
}
.cea-gallery-card:hover .cea-gallery-title {
  color: var(--cea-rojo);
  background: linear-gradient(90deg, var(--cea-rojo), var(--cea-naranja));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cea-gallery-quote {
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, var(--cea-rojo), var(--cea-ambar)) 1;
  background: linear-gradient(180deg, #fff, #FFF9F2) !important;
}

.cea-list-item {
  border-radius: 0.75rem;
  margin-bottom: 0.35rem;
  border-bottom-color: rgba(44, 44, 42, 0.07) !important;
}
.cea-list-item:hover {
  background: linear-gradient(90deg, rgba(179, 40, 45, 0.07), rgba(232, 160, 23, 0.08)) !important;
  box-shadow: inset 4px 0 0 var(--cea-ambar) !important;
}
.cea-list-item h3 {
  background: linear-gradient(90deg, var(--cea-rojo-oscuro), var(--cea-naranja));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cea-badge {
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.cea-badge-dorado {
  background: linear-gradient(135deg, rgba(232, 160, 23, 0.2), rgba(207, 109, 31, 0.14));
  color: #9A5B10;
  border: 1px solid rgba(232, 160, 23, 0.25);
}
.cea-badge-ok {
  background: rgba(99, 153, 34, 0.14);
  border: 1px solid rgba(99, 153, 34, 0.2);
}
.cea-badge-alerta {
  background: rgba(239, 159, 39, 0.16);
  border: 1px solid rgba(239, 159, 39, 0.25);
}
.cea-badge-critico {
  background: rgba(226, 75, 74, 0.12);
  border: 1px solid rgba(226, 75, 74, 0.22);
}

/* ——— Carrusel ——— */
.cea-carousel-shell {
  border-radius: 1.1rem !important;
  box-shadow: 0 24px 60px rgba(36, 24, 22, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.cea-carousel-shell:hover {
  box-shadow: 0 30px 70px rgba(122, 27, 30, 0.2) !important;
}
.cea-carousel-caption {
  background: linear-gradient(180deg, transparent, rgba(20, 12, 12, 0.82)) !important;
  padding: 3rem 1.6rem 1.4rem !important;
}
.cea-carousel-caption h3 {
  position: relative;
  padding-left: 0.85rem;
}
.cea-carousel-caption h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cea-ambar), var(--cea-rojo));
}
.carousel-indicators [data-bs-target] {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.45);
  border: 0;
  transition: width 0.35s, background-color 0.35s, transform 0.35s;
}
.carousel-indicators .active {
  width: 1.6rem;
  background: linear-gradient(90deg, var(--cea-ambar), var(--cea-rojo));
}

/* ——— Footer rico ——— */
.cea-footer {
  background:
    radial-gradient(700px 260px at 8% 0%, rgba(232, 160, 23, 0.28), transparent 55%),
    radial-gradient(560px 220px at 100% 100%, rgba(179, 40, 45, 0.35), transparent 60%),
    linear-gradient(165deg, #1A1212 0%, #2A1718 42%, #7A1B1E 100%) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--cea-rojo), var(--cea-ambar), var(--cea-naranja), var(--cea-rojo)) 1;
}
.cea-footer h5 {
  letter-spacing: 0.01em;
}
.cea-footer h5:hover { color: var(--cea-ambar) !important; }
.cea-footer a:hover { color: var(--cea-ambar) !important; }
.cea-footer-links a::before { background: var(--cea-ambar) !important; }
.cea-footer-bottom {
  border-top-color: rgba(232, 160, 23, 0.22) !important;
}

/* ——— Formularios ——— */
main .form-control,
main .form-select,
main textarea.form-control {
  border-radius: 0.65rem !important;
  border-color: rgba(44, 44, 42, 0.12);
  background: linear-gradient(180deg, #fff, #FFFCFA);
}
main .form-control:focus,
main .form-select:focus,
main textarea.form-control:focus {
  border-color: var(--cea-ambar) !important;
  box-shadow:
    0 0 0 0.22rem rgba(232, 160, 23, 0.18),
    0 12px 28px rgba(179, 40, 45, 0.08) !important;
}

/* ——— Tabs galería ——— */
.cea-gallery-tabs {
  background: linear-gradient(135deg, rgba(179, 40, 45, 0.06), rgba(232, 160, 23, 0.1)) !important;
  padding: 0.4rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cea-gallery-tabs .nav-link.active,
.cea-gallery-tabs .nav-link.active:hover,
.cea-gallery-tabs .nav-link.active:focus {
  background: linear-gradient(135deg, var(--cea-rojo), var(--cea-naranja)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(179, 40, 45, 0.28);
}

/* ——— Malla PDF ——— */
.cea-malla-viewer {
  background: linear-gradient(180deg, #fff, #FFF9F3) !important;
}
.cea-malla-viewer:hover {
  border-color: rgba(232, 160, 23, 0.35) !important;
}

/* ——— Empty / utilidades ——— */
.cea-empty {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 248, 240, 0.9));
  border: 1px dashed rgba(232, 160, 23, 0.35) !important;
}
.cea-empty:hover {
  border-color: rgba(179, 40, 45, 0.4) !important;
  background: #fff;
}

/* ——— Animaciones extra ——— */
@keyframes ceaShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes ceaFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes ceaRevealFancy {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.cea-reveal {
  transform: translateY(32px) scale(0.985);
  filter: blur(1.5px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.85s var(--ease-out),
    box-shadow 0.4s,
    border-color 0.35s !important;
}
.cea-reveal.is-in {
  filter: none;
  transform: none;
}

.cea-hero-scroll {
  color: rgba(255, 214, 140, 0.85) !important;
}
.cea-hero-scroll span {
  background: linear-gradient(180deg, var(--cea-ambar), transparent) !important;
}

.cea-brand img {
  box-shadow: none;
}
.cea-brand:hover img {
  box-shadow: none;
}

/* Decoración tipográfica al entrar (sin flotar infinito) */
.cea-reveal.is-in .cea-section-title::after {
  animation: ceaUnderlineGrow 0.7s var(--ease-out) both;
}
@keyframes ceaUnderlineGrow {
  from { width: 0; opacity: 0; }
  to { width: 3.25rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cea-reveal {
    filter: none !important;
    transform: none !important;
  }
  .cea-reveal.is-in .cea-section-title::after { animation: none; }
}
