:root {
  --verde-oscuro: #0b592a;
  --verde-medio: #39a336;
  --morado: #714091;
  --dorado: #e5af40;
  --vino: #be2e39;
  --tierra: #eec819;
  --gris-claro: #f4f6f5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #222;
  line-height: 1.6;
  background: white;
}

/* INTRO ICARRD */

.intro-icarrd {
  position: relative;
  height: 100vh;
  background: url(/es/Paginas/ICARRD2026/img/fondo_tela.jpg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PANALES */
.panal-img {
  position: absolute;
  width: 110%;
  max-width: none;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: fadePanal 2s ease forwards;
}

/* Arriba centrado */
.panal-top {
  top: 0;
}

/* Abajo centrado */
.panal-bottom {
  bottom: 0;
  animation: fadePanalBottom 2s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadePanalBottom {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 0.90;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadePanal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 0.90;
    transform: translateX(-50%) translateY(0);
  }
}


/* Logo centrado */
.intro-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.intro-logo {
  width: 800px;        /* 🔥 Más protagonista */
  max-width: 90%;
  opacity: 0;
  animation: logoFadeIn 2s ease forwards;
  animation-delay: 1.2s;
}

/* Animación elegante del logo */
@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ICONOS GRISES */

.bg-icon {
  position: absolute;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* Combinamos fade + flotación */
.float-a {
  animation: fadeIcons 1.5s ease forwards,
             floatA 6s ease-in-out infinite 1.5s;
}

.float-b {
  animation: fadeIcons 1.5s ease forwards,
             floatB 7s ease-in-out infinite 1.5s;
}

.float-c {
  animation: fadeIcons 1.5s ease forwards,
             floatC 5.5s ease-in-out infinite 1.5s;
}

/* Fade con escala incluida (IMPORTANTE) */
@keyframes fadeIcons {
  from {
    opacity: 0;
    transform: scale(1.4);
  }
  to {
    opacity: 0.9;
    transform: scale(1.5); /* 🔥 tamaño final grande */
  }
}

/* Movimiento (mantiene escala) */
@keyframes floatA {
  0%   { transform: scale(1.5) translateY(0px); }
  50%  { transform: scale(1.5) translateY(-10px); }
  100% { transform: scale(1.5) translateY(0px); }
}

@keyframes floatB {
  0%   { transform: scale(1.5) translateY(0px); }
  50%  { transform: scale(1.5) translateY(8px); }
  100% { transform: scale(1.5) translateY(0px); }
}

@keyframes floatC {
  0%   { transform: scale(1.5) translateY(0px); }
  50%  { transform: scale(1.5) translateY(-6px); }
  100% { transform: scale(1.5) translateY(0px); }
}

/* HERO */

.hero {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* PARALLAX */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Overlay elegante */
.hero-overlay {
  width: 100%;
  height: 100%;
  background: #1b1b1b8c; /* mostaza*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.hero-content {
  max-width: 900px;
  color: white;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 25px;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* SECCIÓN PARALLAX */

.parallax-section {
  position: relative;
  height: 70vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.parallax-overlay {
  background: rgba(13, 14, 13, 0.322);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-section h2 {
  font-size: 2.5rem;
  max-width: 800px;
}

/* SECCIONES */

.section {
  padding: 90px 20px;
  text-align: center;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--verde-oscuro);
}

.bg-light {
  background: var(--gris-claro);
}

/* CONTENEDOR CON ELEMENTOS DECORATIVOS */

.decorated-section {
  position: relative;
  overflow: hidden;
}

.decorated-section .floating-obj {
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
}

/* Animación tipo flotación orgánica */

@keyframes floatRandom {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(6px, -8px) rotate(1deg); }
  50%  { transform: translate(-4px, -12px) rotate(-1deg); }
  75%  { transform: translate(8px, -6px) rotate(0.5deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.float-1 { animation: floatRandom 9s ease-in-out infinite; }
.float-2 { animation: floatRandom 11s ease-in-out infinite; }
.float-3 { animation: floatRandom 13s ease-in-out infinite; }

/* ===== BANNER INVITACION ===== */

.banner-invitacion {
  /* Dimensiones y Fondo */
  width: 100%;
  min-height: 100vh; /* Ocupa toda la pantalla */
  background-image: url('/es/Paginas/ICARRD2026/img/InvitacionesICCARD-05.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto Parallax opcional, quítalo si prefieres que suba normal */
  
  /* Centrado de contenido */
  display: flex;
  align-items: center;
  justify-content: center;

  /* --- EFECTO DE FADE AL HACER SCROLL --- */
  view-timeline-name: --revealing-banner;
  view-timeline-axis: block;

  /* Animación vinculada al scroll */
  animation: linear reveal both;
  animation-timeline: --revealing-banner;
  
  /* Definimos en qué parte del scroll ocurre (entrada y salida) */
  animation-range: entry 10% cover 40%;
}

@keyframes reveal {
  from {
    opacity: 0;
    clip-path: inset(15% 0 15% 0); /* Efecto de apertura elegante */
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0 0% 0);
    transform: scale(1);
  }
}

/* ===== SECCIÓN VIDEOS ===== */

.video-section {
  position: relative;
  padding: 100px 0 120px 0;
  background: #f8f9fa;
  overflow: hidden;
}

/* ===== TÍTULO ===== */

.video-title {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 50px;
  color: #e5af40; /* nuevo color protagonista */
  letter-spacing: 1px;
  position: relative;
}

/* Línea decorativa debajo del título */
.video-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #7e7d7d;
  margin: 15px auto 0;
  border-radius: 2px;
}

/* ===== VIDEO PRINCIPAL ===== */

.video-main {
  max-width: 1000px;
  margin: 0 auto 50px auto;
  position: relative;
  z-index: 2; /* siempre encima de la barra */
}

.video-main iframe {
  width: 100%;
  height: 500px;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  transition: transform 0.4s ease;
}

.video-main iframe:hover {
  transform: scale(1.01);
}

/* ===== MINIATURAS ===== */

.video-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 25px;
  max-width: 1000px;
  margin: auto;
  position: relative;
  z-index: 2; /* encima de la barra */
}

.video-thumbs iframe {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  transition: 0.4s ease;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.video-thumbs iframe:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

/* ===== BARRA LATERAL DECORATIVA ===== */

.barra-lateral {
  position: absolute;
  width: 180px;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transform: scale(0.65);
  transform-origin: center;
  animation: fadeBarra 1.8s ease forwards;
}

/* IZQUIERDA ARRIBA */
.barra-left {
  left: 0;
  top: 40px; /* ajusta este valor */
  animation-delay: 0.3s;
}

/* DERECHA MÁS ABAJO */
.barra-right {
  right: 0;
  bottom: 60px; /* ajusta este valor */
  animation-delay: 0.6s;
}

/* ===== ANIMACIÓN ===== */

@keyframes fadeBarra {
  from {
    opacity: 0;
    transform: scale(0.65) translateY(20px);
  }
  to {
    opacity: 0.90;
    transform: scale(0.65) translateY(0);
  }
}

/* NOTICIAS */
.section {
  position: relative; /* 🔥 clave para que los panales se posicionen dentro */
  padding: 140px 20px;
  overflow: hidden;
  background: url(/es/Paginas/ICARRD2026/img/fondo_tela_2.jpg);
}

.section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 60px;
  color: #0b592a;
  position: relative;
  z-index: 2; /* encima de figuras */
}

.grid {
  position: relative;
  z-index: 2; /* 🔥 siempre encima de las figuras */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

.card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.4s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

.card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.btn-card {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 22px;
  background: #39a336; /* vino */
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-size: 0.9rem;
  transition: 0.3s ease;
}

.btn-card:hover {
  background: #e5af40; /* mostaza */
  color: #222;
  transform: translateY(-2px);
}

/* PANALES */
.panal-imgN {
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1; /* debajo del contenido */
}

/* ARRIBA */
.panal-topN {
  top: 0;
  animation: fadePanalTopN 1.8s ease forwards;
}

/* ABAJO */
.panal-bottomN {
  bottom: 0;
  animation: fadePanalBottomN 1.8s ease forwards;
  animation-delay: 0.4s;
}

/* Animación superior */
@keyframes fadePanalTopN {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 0.80;
    transform: translateY(0);
  }
}

/* Animación inferior */
@keyframes fadePanalBottomN {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 0.80;
    transform: translateY(0);
  }
}

/* ===== SECCIÓN REDES ===== */

.redes-section {
  position: relative;
  padding: 140px 20px;
  overflow: hidden;
  background: url(/es/Paginas/ICARRD2026/img/fondo_tela.jpg);
}

.redes-section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 60px;
  color: #714091;
  position: relative;
  z-index: 2;
}

/* Grid encima de barras */
.redes-section .grid {
  position: relative;
  z-index: 2;
}

/* ===== BARRAS DECORATIVAS ===== */

.barra-red {
  position: absolute;
  width: 160px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: scale(0.7);
  animation: fadeBarraRed 1.6s ease forwards;
}

/* izquierda más arriba */
.barra-left {
  left: 0;
  top: 15%;
  animation-delay: 0.2s;
}

/* derecha más abajo */
.barra-right {
  right: 0;
  bottom: 10%;
  animation-delay: 0.4s;
}

/* animación suave */
@keyframes fadeBarraRed {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  to {
    opacity: 0.9;
    transform: scale(0.7) translateY(0);
  }
}

/* ===== SECCIÓN CARRUSEL ===== */

.carousel {
  position: relative;
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.7s ease;
}

.carousel img {
  width: 100%;
  flex: 0 0 100%;
  border-radius: 18px;
}

/* Flechas modernas */

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  background: rgba(0,0,0,0.4);
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s ease;
  text-align: center;
}

.arrow:hover {
  background: var(--verde-medio);
}

.left { left: 20px; }
.right { right: 20px; }


.carrusel-section {
  background:#f4f6f5 ;
  padding: 140px 20px;
  position: relative;
}

/* Ajuste visual del carrusel */
.carousel {
  position: relative;
  max-width: 1100px;
  margin: 60px auto 40px auto;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}

/* Track original */
.carousel-track {
  display: flex;
  transition: transform 0.7s ease;
}

/* Imágenes */
.carousel img {
  width: 100%;
  flex: 0 0 100%;
  border-radius: 22px;
}

/* Texto debajo */
.carrusel-cta {
  text-align: center;
  font-size: 1.15rem;
  color: #000000;
  max-width: 800px;
  margin: 40px auto 0;
  line-height: 1.6;
  font-weight: 500;
}



/* SECCIÓN COLOR */
.institucional {
  position: relative;
  padding: 120px 20px;
  background: radial-gradient(circle at top left, #eef4f8, #ffffff 60%);
  text-align: center; /* 🔥 Centra todo el texto */
}

/* Contenedor */
.institucional-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  text-align: center; /* 🔥 Asegura centrado */
}

/* Etiqueta superior */
.institucional-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1f4e6b;
  background: rgba(31, 78, 107, 0.08);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 25px;
}

/* Título */
.institucional h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: #be2e39;
  margin-bottom: 30px;
  margin-left: auto;   /* 🔥 centra bloque */
  margin-right: auto;  /* 🔥 centra bloque */
  max-width: 800px;
}

/* Texto */
.institucional p {
  font-size: 19px;
  line-height: 1.9;
  color: #3d4f5c;
  max-width: 900px;
  margin: 0 auto; /* 🔥 centra el párrafo */
}

/* Línea decorativa sutil */
.institucional::after {
  content: "";
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #1f4e6b, #4fa3d1);
  opacity: 0.15;
}

/* Responsive */
@media (max-width: 768px) {
  .institucional {
    padding: 80px 20px;
  }

  .institucional h2 {
    font-size: 28px;
  }

  .institucional p {
    font-size: 16px;
  }
}

/* SECCIÓN CIERRE */

.closing-logo {
  background: white;
  padding: 120px 20px;
  text-align: center;
}

.closing-img {
  width: 260px;
  opacity: 0;
  transform: translateY(30px);
  transition: 1s ease;
}

.closing-img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* FOOTER */

footer {
  background: var(--verde-oscuro);
  color: white;
  padding: 25px;
  margin-top: 60px;
}

.wave {
  position: relative;
  height: 100px;
  background: var(--verde-oscuro);
}

.wave::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  background: white;
  border-bottom-left-radius: 50% 40px;
  border-bottom-right-radius: 50% 40px;
}