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

:root {

  /* Fondos */

  --bg: #faf8f4;
  --surface: #ffffff;

  /* Textos */

  --text: #222222;
  --muted: #6d6d6d;

  /* Colores PySC */

  --wine: #8C1832;          /* Rojo vino */
  --wine-dark: #681125;

  --navy: #132F5D;          /* Azul del uniforme */
  --navy-dark: #0C2242;

  --gold: #e2aa16;          /* Amarillo/dorado */
  --gold-light: #F2D170;

  /* Compatibilidad */

  --primary: var(--wine);
  --primary-dark: var(--wine-dark);
  --primary-light: #B42045;

  --dark: var(--navy);
  --dark-deep: var(--navy-dark);

  --border: rgba(19,47,93,.12);

  --shadow: 0 20px 50px rgba(19,47,93,.12);

}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-top: 4px solid var(--gold);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

.site-header.scrolled {
  background: rgba(12, 34, 66, 0.92);
  border-top:4px solid var(--gold);
  box-shadow: 0 10px 30px rgba(3, 15, 31, 0.22);
  backdrop-filter: blur(12px);
}

.navbar {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.brand-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .brand-logo {
    width: 58px;
    height: 58px;
  }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

.brand-text span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-top: 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.95rem;
  font-weight: 700;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #ffffff;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 27px;
  height: 2px;
  margin: 6px 0;
  background: #ffffff;
}

/* =========================
   HERO
========================= */

.hero {
  position: relative;
  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;
  isolation: isolate;

  background: var(--navy-dark);
  color: #ffffff;
}

/*
Mientras todavía no tengas la imagen hero-pysc.jpg,
el fondo seguirá viéndose azul gracias al color inferior.
*/
.hero-background {
  position: absolute;
  inset: -45px;
  z-index: -5;

  background:
    url("../img/hero-pysc.jpg")
    center center / cover no-repeat;

  transform:
    translate3d(
      0,
      var(--hero-parallax, 0px),
      0
    )
    scale(1.06);

  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(5, 15, 31, 0.94) 0%,
      rgba(12, 34, 66, 0.85) 37%,
      rgba(79, 15, 33, 0.68) 70%,
      rgba(140, 24, 50, 0.46) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 10, 22, 0.18),
      rgba(3, 10, 22, 0.58)
    );
}

/* Patrón inspirado en tejidos */

.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;

  opacity: 0.19;

  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(255, 255, 255, 0.09) 47%,
      rgba(255, 255, 255, 0.09) 49%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      rgba(226, 170, 22, 0.09) 47%,
      rgba(226, 170, 22, 0.09) 49%,
      transparent 50%
    );

  background-size: 54px 54px;

  mask-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.35),
      transparent 72%
    );

  pointer-events: none;
}

/* Brillo dorado que atraviesa lentamente */

.hero-glow {
  position: absolute;
  top: -35%;
  left: -30%;
  z-index: -1;

  width: 42%;
  height: 170%;

  background:
    linear-gradient(
      100deg,
      transparent 10%,
      rgba(226, 170, 22, 0.03) 32%,
      rgba(255, 220, 125, 0.17) 49%,
      rgba(226, 170, 22, 0.05) 64%,
      transparent 85%
    );

  filter: blur(14px);
  transform: skewX(-14deg);

  animation:
    heroGoldenGlow 15s ease-in-out infinite;

  pointer-events: none;
}

@keyframes heroGoldenGlow {
  0%,
  12% {
    left: -45%;
    opacity: 0;
  }

  28% {
    opacity: 0.65;
  }

  65% {
    opacity: 0.35;
  }

  82%,
  100% {
    left: 115%;
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.eyebrow,
.section-kicker {
  display: inline-block;
  margin-bottom: 14px;

  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1,
.section h2,
.under-construction h1 {
  font-family: "Montserrat", sans-serif;
}

.hero h1 {
  max-width: 820px;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.9rem, 5vw, 4.8rem);
  line-height: 1.03;

  text-shadow:
    0 10px 35px rgba(0, 0, 0, 0.28);
}

.hero p {
  max-width: 650px;
  margin-top: 22px;

  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Entrada escalonada */

.hero-reveal {
  opacity: 0;

  transform:
    translateY(26px);

  animation:
    heroContentAppear
    0.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.hero-reveal-1 {
  animation-delay: 0.12s;
}

.hero-reveal-2 {
  animation-delay: 0.25s;
}

.hero-reveal-3 {
  animation-delay: 0.38s;
}

.hero-reveal-4 {
  animation-delay: 0.51s;
}

.hero-reveal-5 {
  animation-delay: 0.64s;
}

@keyframes heroContentAppear {
  from {
    opacity: 0;
    transform:
      translateY(26px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}

/* Cinta institucional */

.hero-ribbon {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 12px;

  overflow: hidden;

  box-shadow:
    0 5px 14px rgba(12, 34, 66, 0.14);
}

.hero-ribbon span {
  display: block;
  width: 100%;
  flex: 1;
}

.hero-ribbon-wine {
  background:
    linear-gradient(
      90deg,
      #6d0018,
      #a30d2d,
      #d6284a
    );
}

.hero-ribbon-gold {
  background:
    linear-gradient(
      90deg,
      #f2f2f2,
      #ffffff,
      #ececec
    );
}

.hero-ribbon-navy {
  background:
    linear-gradient(
      90deg,
      #d6284a,
      #a30d2d,
      #6d0018
    );
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .hero-background {
    inset: 0;
    transform: scale(1.02);
  }

  .hero-content {
    padding-top: 135px;
    padding-bottom: 105px;
  }

  .hero-pattern {
    opacity: 0.13;
    background-size: 44px 44px;
  }

  .hero-glow {
    animation-duration: 18s;
    opacity: 0.55;
  }
}

@media (max-width: 560px) {
  .hero-content {
    padding-top: 120px;
    padding-bottom: 82px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .hero-title-main {
    font-size: inherit;
  }

  .hero-pattern {
    opacity: 0.1;
  }

  .hero-ribbon {
    height: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background {
    transform: scale(1.03);
  }

  .hero-glow {
    animation: none;
    opacity: 0.18;
    left: 28%;
  }

  .hero-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* =========================
   BOTONES
========================= */

.btn {
  min-height: 46px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-weight: 800;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: var(--wine);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(18, 60, 115, 0.28);
}

.btn-primary:hover {
  background: var(--gold);
  color: #111;
  box-shadow: 0 14px 32px rgba(214, 164, 55, 0.28);
}

.btn-outline {
  border: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  backdrop-filter: blur(6px);
}

.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(214, 164, 55, 0.12);
  color: #111;
}

/* =========================
   SECCIONES GENERALES
========================= */

.section {
  padding: 76px 0;
}

.section h2 {
  color: var(--navy);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  line-height: 1.15;
}

.text-link {
  display: inline-block;
  margin-top: 16px;

  color: var(--primary);
  font-weight: 800;
  transition: color 0.25s ease;
}

.text-link:hover {
  color: var(--gold);
}

/* =========================
   ESTADÍSTICAS
========================= */

.stats {
  position: relative;
  z-index: 20;

  margin-top: -44px;
  padding-bottom: 52px;
}

.stats-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  overflow: hidden;

  background:
    linear-gradient(
      115deg,
      var(--navy-dark) 0%,
      var(--navy) 68%,
      var(--wine-dark) 100%
    );

  border: 1px solid rgba(226, 170, 22, 0.42);
  border-bottom: 5px solid var(--gold);
  border-radius: 18px;

  box-shadow: 0 22px 48px rgba(7, 14, 30, 0.24);
}

.stat-card {
  position: relative;

  min-width: 0;
  min-height: 112px;
  padding: 22px 18px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  border-right: 1px solid rgba(255, 255, 255, 0.15);

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.stat-card:last-child {
  border-right: none;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.035);
}

.stat-icon {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;

  color: var(--gold);
  font-size: 1.7rem;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.07);
  color: var(--gold-light);
}

.stat-content {
  min-width: 0;
}

.stat-content strong {
  display: block;

  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 2.4vw, 2.55rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.stat-content span {
  display: block;
  margin-top: 9px;

  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* =========================
   LO QUE HACEMOS
========================= */

.featured {
  background: var(--bg);
}

.featured h2 {
  max-width: 760px;
  margin-bottom: 34px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  position: relative;
  min-height: 230px;
  padding: 26px;

  overflow: hidden;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;

  box-shadow: var(--shadow);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background: linear-gradient(
    90deg,
    var(--primary-light),
    var(--gold)
  );
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(18, 60, 115, 0.22);
  box-shadow: 0 26px 60px rgba(13, 35, 64, 0.15);
}

.card-number {
  margin-bottom: 30px;

  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.feature-card h3 {
  margin-bottom: 14px;

  color: var(--primary-dark);
  font-family: "Montserrat", sans-serif;
  font-size: 1.18rem;
}

.feature-card p {
  color: var(--muted);
}

/* =========================
   CTA
========================= */

.cta {
  padding-top: 20px;
  background: var(--bg);
}

.cta-box {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: 40px;

  background:
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary)
    );

  border-radius: 28px;
  color: #ffffff;

  box-shadow: 0 22px 55px rgba(13, 35, 64, 0.2);
}

.cta-box::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: -90px;
  bottom: -140px;

  border-radius: 50%;
  background: rgba(214, 164, 55, 0.18);
}

.cta-box > * {
  position: relative;
  z-index: 1;
}

.cta-box h2 {
  color: #ffffff;
}

/* =========================
   FOOTER INSTITUCIONAL
========================= */

.site-footer {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #08172d,
      var(--navy-dark) 58%,
      #45101d
    );

  color: #ffffff;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  background:
    rgba(226, 170, 22, 0.06);

  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -230px;

  width: 400px;
  height: 400px;

  border-radius: 50%;

  background:
    rgba(140, 24, 50, 0.18);

  pointer-events: none;
}

.footer-main {
  position: relative;
  z-index: 2;

  padding: 72px 0 58px;
}

.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.35fr)
    minmax(140px, 0.65fr)
    minmax(170px, 0.8fr)
    minmax(220px, 1fr);

  gap: 46px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

.footer-logo img {
  width: 76px;
  height: 76px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 9px 18px rgba(0, 0, 0, 0.24)
    );
}

.footer-logo div {
  display: flex;
  flex-direction: column;
}

.footer-logo strong {
  max-width: 230px;

  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
}

.footer-logo span {
  margin-top: 4px;

  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-brand > p {
  max-width: 340px;
  margin-top: 22px;

  color: rgba(255, 255, 255, 0.67);
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 25px;
}

.footer-social a {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  color: #ffffff;
  font-size: 1rem;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.footer-social a:hover {
  transform: translateY(-4px);

  background: var(--wine);
  border-color: var(--wine);
  color: #ffffff;
}

.footer-column h3 {
  position: relative;

  margin-bottom: 23px;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
}

.footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;

  width: 35px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--wine)
    );

  border-radius: 999px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-links a {
  width: fit-content;

  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-links a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

.footer-contact ul {
  display: grid;
  gap: 17px;

  list-style: none;
}

.footer-contact li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 9px;

  color: rgba(255, 255, 255, 0.66);
  font-size: 0.86rem;
  line-height: 1.55;
}

.footer-contact li i {
  margin-top: 4px;

  color: var(--gold);
  font-size: 0.95rem;
}

.footer-contact li a {
  color: rgba(255, 255, 255, 0.7);

  overflow-wrap: anywhere;

  transition: color 0.25s ease;
}

.footer-contact li a:hover {
  color: var(--gold);
}

.footer-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: 44px;
  margin-top: 25px;
  padding: 0 18px;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      #ad294b
    );

  border-radius: 999px;

  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.footer-contact-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.24);
}

.footer-bottom {
  position: relative;
  z-index: 2;

  border-top:
    1px solid rgba(255, 255, 255, 0.1);

  background: rgba(2, 9, 20, 0.28);
}

.footer-bottom-content {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.footer-bottom-content p {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.76rem;
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  font-weight: 800;

  transition: color 0.25s ease;
}

.footer-back-top:hover {
  color: var(--gold);
}

.footer-back-top i {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-main {
    padding: 58px 0 45px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-brand > p {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-column h3 {
    text-align: center;
  }

  .footer-column h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    align-items: center;
  }

  .footer-contact ul {
    width: min(330px, 100%);
    margin: 0 auto;
  }

  .footer-contact-button {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom-content {
    min-height: auto;
    padding: 22px 0;

    flex-direction: column;
    text-align: center;
  }
}

/* =========================
   PÁGINAS EN CONSTRUCCIÓN
========================= */

.placeholder-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.under-construction {
  flex: 1;
  min-height: calc(100vh - 120px);

  display: grid;
  place-items: center;

  padding: 130px 20px 60px;

  background:
    radial-gradient(
      circle at top left,
      rgba(43, 102, 177, 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(214, 164, 55, 0.17),
      transparent 32%
    ),
    var(--bg);
}

.under-construction-card {
  width: min(720px, 100%);
  padding: 60px 40px;

  text-align: center;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;

  box-shadow: 0 24px 70px rgba(13, 35, 64, 0.13);
}

.construction-tag {
  display: inline-block;
  margin-bottom: 14px;

  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.under-construction h1 {
  color: var(--primary-dark);
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: 1;
}

.under-construction p {
  max-width: 560px;
  margin: 22px auto 30px;

  color: var(--muted);
  font-size: 1.1rem;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
    z-index: 1001;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;

    width: min(320px, 85%);
    height: 100vh;

    flex-direction: column;
    align-items: flex-start;

    padding: 110px 32px 40px;

    background:
      linear-gradient(
        180deg,
        var(--dark-deep),
        var(--primary-dark)
      );

    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.2);

    transition: right 0.3s ease;
  }

  .nav-links.open {
    right: 0;
  }

  .nav-links a {
    font-size: 1.1rem;
  }

  @media (max-width: 900px) {
  .nav-links {
    visibility: hidden;
    pointer-events: none;
  }

  .nav-links.open {
    right: 0;
    visibility: visible;
    pointer-events: auto;
  }
}

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .cta-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    min-height: auto;
  }

  .hero-content {
    padding-top: 135px;
    padding-bottom: 100px;
  }

  .stats {
    margin-top: -38px;
  }

  .stats-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    min-height: 120px;
  }

  .stat-card:nth-child(2) {
    border-right: none;
  }

  .stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100% - 50px, 1180px);
  }

  .navbar {
    min-height: 72px;
  }

  .brand-text strong {
    font-size: 0.82rem;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.5rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section {
    padding: 76px 0;
  }

  .stat-card {
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cta-box,
  .under-construction-card {
    padding: 38px 24px;
  }

  .navbar {
    height: 76px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .brand-text strong {
    font-size: 0.8rem;
  }

  .brand-text span {
    font-size: 0.64rem;
  }

  .hero-content {
    padding-top: 120px;
    padding-bottom: 75px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .stats {
    margin-top: -22px;
    padding-bottom: 50px;
  }

  .stats-box {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .stat-card {
    min-height: 105px;
    padding: 22px 20px;

    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .stat-card:last-child {
    border-bottom: none;
  }

  .stat-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
  }

  .stat-content strong {
    font-size: 2.3rem;
  }
}


.hero-title-main,
.hero-title-highlight {
  display: block;
}

.hero-title-main {
  color: #ffffff;
  font-size: clamp(2.8rem, 4.2vw, 5.25rem);
}

.hero-title-highlight {
  margin-top: 5px;
  color: var(--gold);
}

.featured-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.65fr;
  gap: 42px;
  align-items: center;
}

.featured-intro h2 span {
  color: var(--wine);
}

.featured-intro p {
  margin: 18px 0 24px;
  color: var(--muted);
  font-size: 1rem;
}

.feature-card-wine::before {
  background: var(--wine);
}

.feature-card-navy::before {
  background: var(--navy);
}

.feature-card-gold::before {
  background: var(--gold);
}

.feature-card-wine h3 {
  color: var(--wine);
}

.feature-card-navy h3 {
  color: var(--navy);
}

.feature-card-gold h3 {
  color: #b47a00;
}

@media (max-width: 900px) {
  .about-preview {
  background: #ffffff;
  }
}

.about-preview-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.about-preview-image {
  position: relative;
}

.about-preview-image::before {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -18px;

  width: 70%;
  height: 70%;

  background: var(--gold);
  border-radius: 24px;
}

.about-preview-image img {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 400px;
  object-fit: cover;

  border-radius: 24px;
  box-shadow: var(--shadow);
}

.about-preview-content h2 span {
  color: var(--wine);
}

.about-preview-content p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
}

@media (max-width: 900px) {
  .about-preview-grid {
    grid-template-columns: 1fr;
  }

  .about-preview-image img {
    min-height: 360px;
  }
}

/* =========================
   PROYECTOS
========================= */

.projects-preview {
    background: #fff;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:36px;
    gap:20px;
}

.projects-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.project-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.35s;
}

.project-card:hover{
    transform:translateY(-8px);
}

.project-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.project-card-content{
    padding:24px;
}

.project-card-content span{
    color:var(--wine);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.project-card-content h3{
    margin:12px 0;
    color:var(--navy);
    font-family:"Montserrat";
    font-size:1.45rem;
}

.project-card-content p{
    color:var(--muted);
    margin-bottom:18px;
}

/* =========================
   GALERÍA
========================= */

.gallery-preview{
  background:var(--bg);
}

.gallery-preview-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}

.gallery-preview-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
  transition:.35s;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.gallery-preview-grid img:hover{
  transform:scale(1.03);
}

/* =========================
   REDES SOCIALES
========================= */

.social{
  background:#fff;
  text-align:center;
}

.social p{
  max-width:620px;
  margin:16px auto 34px;
  color:var(--muted);
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.social-card{
  background:var(--surface);
  padding:26px;
  border-radius:22px;
  box-shadow:var(--shadow);
  transition:.35s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.social-card:hover{
  transform:translateY(-8px);
}

.social-card i{
  font-size:2rem;
  color:var(--wine);
}

.social-card span{
  font-weight:700;
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .gallery-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .section {
    padding: 58px 0;
  }

  .section h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .project-card img {
    height: 220px;
  }

  .gallery-preview-grid,
  .social-grid {
    grid-template-columns: 1fr;
  }

  .gallery-preview-grid img {
    height: 210px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .featured-layout {
    display: block;
  }

  .featured-intro {
    width: 100%;
    margin-bottom: 32px;
  }

  .featured-intro h2 {
    margin-bottom: 16px;
  }

  .featured-intro p {
    margin: 16px 0 22px;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }

  .feature-card {
    width: 100%;
    min-height: auto;
    padding: 24px;
  }

  .card-number {
    margin-bottom: 20px;
  }

  .feature-card h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
  }

  .feature-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* =========================
   AGENDA PYSC
========================= */

.agenda-section {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      125deg,
      var(--navy-dark) 0%,
      var(--navy) 58%,
      var(--wine-dark) 100%
    );

  color: #ffffff;
}

.agenda-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 38px 38px;
  pointer-events: none;
}

.agenda-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.agenda-decoration-one {
  width: 330px;
  height: 330px;
  top: -180px;
  right: -90px;

  background: rgba(226, 170, 22, 0.13);
}

.agenda-decoration-two {
  width: 260px;
  height: 260px;
  left: -130px;
  bottom: -150px;

  background: rgba(180, 32, 69, 0.2);
}

.agenda-section .container {
  position: relative;
  z-index: 2;
}

.agenda-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;

  margin-bottom: 38px;
}

.agenda-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 13px;

  color: var(--gold);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.agenda-heading h2 {
  max-width: 650px;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.12;
}

.agenda-heading p {
  max-width: 600px;
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
}

.agenda-live {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 9px 14px;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  white-space: nowrap;
}

.agenda-live span {
  width: 8px;
  height: 8px;

  background: #5ee48c;
  border-radius: 50%;

  box-shadow: 0 0 0 5px rgba(94, 228, 140, 0.12);
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}

.agenda-loading {
  grid-column: 1 / -1;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  min-height: 160px;

  color: rgba(255, 255, 255, 0.75);
}

.agenda-card {
  position: relative;
  overflow: hidden;

  min-width: 0;

  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 19px;

  color: var(--text);

  box-shadow: 0 18px 42px rgba(4, 14, 29, 0.24);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.agenda-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow: 0 25px 55px rgba(4, 14, 29, 0.34);
}

.agenda-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background: var(--wine);
}

.agenda-event {
  background: #f1cad1;
}

.agenda-event::before {
  background: linear-gradient(
    90deg,
    #8c1832,
    #c73a59
  );
}

.agenda-notice {
  background: #f5e6bd;
}

.agenda-notice::before {
  background: linear-gradient(
    90deg,
    #E39516,
    #F2C94C
  );
}

.agenda-call {
  background: #ceddf3;
}

.agenda-call::before {
  background: linear-gradient(
    90deg,
    #133D75,
    #3F73B9
  );
}

.agenda-birthday {
  background: #fae7f1;
}

.agenda-birthday::before {
  background: linear-gradient(
    90deg,
    #C63D87,
    #EE70BB
  );
}

.agenda-workshop {
  background: #e1daf5;
}

.agenda-workshop::before {
  background: linear-gradient(
    90deg,
    #6F3CA5,
    #A56DDD
  );
}

.agenda-trip {
  background: #d9f7f5;
}

.agenda-trip::before {
  background: linear-gradient(
    90deg,
    #18899A,
    #55C8D4
  );
}

.agenda-presentation {
  background: #dcfce7;
}

.agenda-presentation::before {
  background: linear-gradient(
    90deg,
    #15803D,
    #4ADE80
  );
}

.agenda-contest {
  background: #fde7c7;
}

.agenda-contest::before {
  background: linear-gradient(
    90deg,
    #D97706,
    #F59E0B
  );
}

.agenda-general {
  background: #f8eddb;
}

.agenda-general::before {
  background: linear-gradient(
    90deg,
    var(--gold),
    var(--wine)
  );
}

.agenda-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 22px 21px 0;
}

.agenda-emoji {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  background: #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border-radius: 15px;

  font-size: 1.75rem;
}

.agenda-badge {
  padding: 6px 10px;

  background: rgba(140, 24, 50, 0.08);
  border-radius: 999px;

  color: var(--wine);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.agenda-notice .agenda-badge {
  background: rgba(227, 149, 22, 0.12);
  color: #ad6900;
}

.agenda-call .agenda-badge {
  background: rgba(19, 47, 93, 0.1);
  color: var(--navy);
}

.agenda-birthday .agenda-badge {
  background: rgba(185, 50, 124, 0.1);
  color: #a5286d;
}

.agenda-workshop .agenda-badge {
  background: rgba(111, 60, 165, 0.1);
  color: #6f3ca5;
}

.agenda-trip .agenda-badge {
  background: rgba(24, 137, 154, 0.1);
  color: #137582;
}

.agenda-card-body {
  padding: 20px 21px 23px;
}

.agenda-date {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 17px;
}

.agenda-date strong {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 2.15rem;
  line-height: 1;
}

.agenda-date div {
  display: flex;
  flex-direction: column;
}

.agenda-date span {
  color: var(--wine);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.agenda-date small {
  color: var(--muted);
  font-size: 0.7rem;
}

.agenda-card h3 {
  margin-bottom: 10px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.03rem;
  line-height: 1.32;
}

.agenda-description {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.agenda-place {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  margin-top: 14px;

  color: #777;
  font-size: 0.82rem;
}

.agenda-place i {
  margin-top: 4px;
  color: var(--gold);
}

.agenda-link {
  display: inline-flex;
  margin-top: 15px;

  color: var(--wine);
  font-size: 0.83rem;
  font-weight: 800;
}

.agenda-link:hover {
  color: var(--gold);
}

.agenda-card-featured {
  transform: translateY(-6px);
}

.agenda-card-featured:hover {
  transform: translateY(-10px);
}

.agenda-empty {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  gap: 24px;

  padding: 32px;

  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;

  box-shadow: 0 18px 42px rgba(4, 14, 29, 0.22);
}

.agenda-empty-icon {
  flex: 0 0 74px;

  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(226, 170, 22, 0.18),
      rgba(140, 24, 50, 0.12)
    );

  border-radius: 20px;

  font-size: 2.25rem;
}

.agenda-empty-kicker {
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.agenda-empty h3 {
  margin: 5px 0 7px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
}

.agenda-empty p {
  max-width: 650px;
  color: var(--muted);
  font-size: 0.92rem;
}

.agenda-empty-link {
  display: inline-flex;
  margin-top: 12px;

  color: var(--wine);
  font-size: 0.85rem;
  font-weight: 800;
}

@media (max-width: 1000px) {
  .agenda-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .agenda-card-featured {
    transform: none;
  }

  .agenda-card-featured:hover {
    transform: translateY(-7px);
  }
}

@media (max-width: 700px) {
  .agenda-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .agenda-live {
    white-space: normal;
  }

  .agenda-grid {
    grid-template-columns: 1fr;
  }

  .agenda-card {
    display: grid;
    grid-template-columns: 92px 1fr;
  }

  .agenda-card::before {
    width: 5px;
    height: 100%;
  }

  .agenda-card-top {
    padding: 20px 12px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;

    background: #f8f6f2;
  }

  .agenda-badge {
    text-align: center;
    white-space: normal;
  }

  .agenda-card-body {
    padding: 20px;
  }

  .agenda-empty {
    align-items: flex-start;
    padding: 25px;
  }
}

@media (max-width: 460px) {
  .agenda-card {
    display: block;
  }

  .agenda-card::before {
    width: 100%;
    height: 5px;
  }

  .agenda-card-top {
    padding: 21px 20px 0;
    flex-direction: row;
    justify-content: space-between;

    background: transparent;
  }

  .agenda-empty {
    flex-direction: column;
  }
}

/* =========================
   FELICITACIÓN DE CUMPLEAÑOS
========================= */

.birthday-section {
  position: relative;
  padding: 34px 0 10px;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      #fff8ec
    );
}

.birthday-section[hidden] {
  display: none;
}

.birthday-card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 38px;

  padding: 34px 42px;

  background:
    radial-gradient(
      circle at top right,
      rgba(238, 112, 187, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(226, 170, 22, 0.2),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #fff3f9,
      #fff9e9
    );

  border: 1px solid rgba(198, 61, 135, 0.18);
  border-radius: 24px;

  box-shadow:
    0 22px 50px rgba(80, 35, 70, 0.13);

  animation: birthdayAppear 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.birthday-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 6px;

  background:
    linear-gradient(
      90deg,
      var(--wine),
      #d14f91,
      var(--gold),
      var(--navy)
    );
}

.birthday-decoration {
  position: absolute;
  z-index: 1;

  font-size: 2.8rem;
  opacity: 0.75;

  pointer-events: none;
}

.birthday-decoration-left {
  left: 22px;
  top: 20px;

  transform: rotate(-12deg);
}

.birthday-decoration-right {
  right: 25px;
  bottom: 18px;

  transform: rotate(12deg);
}

.birthday-photo-wrapper {
  position: relative;
  z-index: 2;

  width: 220px;
  aspect-ratio: 1 / 1;

  margin: 0 auto;
  padding: 8px;

  display: block;

  border-radius: 50%;
  isolation: isolate;
  overflow: hidden;

  box-shadow:
    0 16px 35px rgba(140, 24, 50, 0.2);

  animation:
    birthdayPhotoAppear 0.75s 0.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.birthday-photo {
  position: absolute;
  inset: 8px;
  z-index: 1;

  width: calc(100% - 16px);
  height: calc(100% - 16px);

  display: block;

  object-fit: cover;
  object-position: center;

  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.birthday-photo-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;

  background:
    conic-gradient(
      from 0deg,
      var(--wine),
      #ef75bb,
      var(--gold),
      var(--navy),
      var(--wine)
    );

  animation:
    birthdayBorderRotate 7s linear infinite;
}

.birthday-photo-wrapper::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;

  background: #ffffff;
  border-radius: inherit;
}

@keyframes birthdayBorderRotate {
  to {
    transform: rotate(360deg);
  }
}

.birthday-photo-wrapper[hidden] {
  display: none;
}


.birthday-content {
  position: relative;
  z-index: 2;
}

.birthday-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 12px;

  color: #b9327c;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.birthday-content h2 {
  max-width: 650px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.12;
}

.birthday-message {
  max-width: 670px;
  margin-top: 15px;

  color: #5f5960;
  font-size: 1rem;
  line-height: 1.65;
}

.birthday-signature {
  margin-top: 13px;

  color: #777077;
  font-size: 0.9rem;
}

.birthday-signature strong {
  color: var(--wine);
}

.birthday-share {
  min-height: 44px;
  margin-top: 22px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      #b93264
    );

  border: none;
  border-radius: 999px;

  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 11px 24px rgba(140, 24, 50, 0.22);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.birthday-share:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      #a32145,
      var(--wine)
    );

  box-shadow:
    0 15px 30px rgba(140, 24, 50, 0.28);
}

.birthday-share-status {
  display: block;
  min-height: 20px;
  margin-top: 10px;

  color: var(--wine);
  font-size: 0.82rem;
  font-weight: 700;
}

@keyframes birthdayAppear {
  0% {
    opacity: 0;
    transform:
      translateY(35px)
      scale(0.96);
    filter: blur(7px);
  }

  55% {
    opacity: 1;
    transform:
      translateY(-5px)
      scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
    filter: blur(0);
  }
}

@media (max-width: 800px) {
  .birthday-card {
    grid-template-columns: 180px 1fr;
    gap: 28px;

    padding: 30px;
  }

  .birthday-photo-wrapper {
    width: 170px;
  }
}

@media (max-width: 620px) {
  .birthday-section {
    padding-top: 24px;
  }

  .birthday-card {
    grid-template-columns: 1fr;
    gap: 24px;

    padding: 34px 24px;

    text-align: center;
  }

  .birthday-photo-wrapper {
    width: 160px;
  }

  .birthday-content h2,
  .birthday-message {
    margin-left: auto;
    margin-right: auto;
  }

  .birthday-kicker {
    justify-content: center;
  }

  .birthday-share {
    width: 100%;
  }

  .birthday-decoration {
    font-size: 2rem;
  }
}

.birthday-content {
  animation:
    birthdayContentAppear 0.75s 0.32s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes birthdayPhotoAppear {
  from {
    opacity: 0;
    transform: scale(0.72) rotate(-7deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes birthdayContentAppear {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   GLOBOS DE CUMPLEAÑOS
========================= */

.birthday-balloons {
  position: absolute;
  inset: 0;
  z-index: 1;

  overflow: hidden;
  pointer-events: none;
}

.birthday-balloon {
  position: absolute;

  width: 38px;
  height: 48px;

  border-radius: 50% 50% 46% 46%;

  opacity: 0.72;

  animation:
    birthdayBalloonFloat 5s
    ease-in-out infinite;
}

.birthday-balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;

  width: 8px;
  height: 9px;

  background: inherit;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.birthday-balloon::after {
  content: "";
  position: absolute;
  top: 47px;
  left: 50%;

  width: 1px;
  height: 60px;

  background: rgba(80, 70, 80, 0.35);
}

.balloon-wine {
  top: 32px;
  left: 25px;

  background:
    linear-gradient(
      135deg,
      #dc6683,
      var(--wine)
    );

  animation-delay: 0s;
}

.balloon-gold {
  right: 38px;
  top: 65px;

  width: 32px;
  height: 41px;

  background:
    linear-gradient(
      135deg,
      #ffd96b,
      var(--gold)
    );

  animation-delay: -1.3s;
}

.balloon-blue {
  left: 43%;
  bottom: -10px;

  width: 30px;
  height: 39px;

  background:
    linear-gradient(
      135deg,
      #7093c5,
      var(--navy)
    );

  animation-delay: -2.5s;
}

.balloon-pink {
  right: 18px;
  bottom: 35px;

  width: 28px;
  height: 37px;

  background:
    linear-gradient(
      135deg,
      #f5a1ce,
      #c63d87
    );

  animation-delay: -3.4s;
}

@keyframes birthdayBalloonFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-3deg);
  }

  50% {
    transform:
      translateY(-14px)
      rotate(4deg);
  }
}

@media (max-width: 620px) {
  .balloon-blue,
  .balloon-gold {
    display: none;
  }

  .birthday-balloon {
    opacity: 0.52;
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-card,
  .birthday-photo-wrapper,
  .birthday-content,
  .birthday-balloon,
  .birthday-photo-wrapper::before {
    animation: none !important;
  }
}

.birthday-download {
  min-height: 44px;
  margin-top: 10px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  background: var(--navy);
  border: none;
  border-radius: 999px;

  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;

  cursor: pointer;
}

.birthday-download:hover {
  background: var(--navy-dark);
}


/* =========================
   NUESTRA ESENCIA
========================= */

.essence {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(226, 170, 22, 0.09),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(140, 24, 50, 0.08),
      transparent 30%
    ),
    #ffffff;
}

.essence::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 1px;
  height: 100%;

  background:
    linear-gradient(
      transparent,
      rgba(19, 47, 93, 0.08),
      transparent
    );

  pointer-events: none;
}

.essence-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 70px;
}

/* Imagen */

.essence-image {
  position: relative;
  padding: 0 0 28px 28px;
}

.essence-image::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 72%;
  height: 72%;

  background:
    linear-gradient(
      145deg,
      var(--gold),
      #f1cb63
    );

  border-radius: 28px;
}

.essence-image-frame {
  position: relative;
  z-index: 2;

  overflow: hidden;

  min-height: 500px;

  border-radius: 28px;

  box-shadow:
    0 28px 60px rgba(19, 47, 93, 0.18);
}

.essence-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(12, 34, 66, 0.42)
    );

  pointer-events: none;
}

.essence-image-frame img {
  width: 100%;
  height: 100%;
  min-height: 500px;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.7s ease;
}

.essence-image:hover img {
  transform: scale(1.04);
}

/* Etiqueta sobre la foto */

.essence-year {
  position: absolute;
  right: -25px;
  bottom: 62px;
  z-index: 3;

  min-width: 205px;
  padding: 20px 24px;

  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy)
    );

  border-left: 5px solid var(--gold);
  border-radius: 16px;

  color: #ffffff;

  box-shadow:
    0 18px 40px rgba(12, 34, 66, 0.26);
}

.essence-year strong {
  display: block;

  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
}

.essence-year span {
  display: block;
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
}

/* Contenido */

.essence-content h2 {
  max-width: 650px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
}

.essence-content h2 span {
  color: var(--wine);
}

.essence-content > p {
  max-width: 650px;

  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.essence-lead {
  margin-top: 22px;
  margin-bottom: 13px;

  color: #454545 !important;
  font-size: 1.08rem !important;
  font-weight: 700;
}

/* Pilares */

.essence-pillars {
  display: grid;
  gap: 14px;

  margin-top: 30px;
}

.essence-pillar {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 17px;

  padding: 17px 20px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;

  box-shadow:
    0 12px 30px rgba(19, 47, 93, 0.07);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.essence-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 5px;
  height: 100%;
}

.essence-pillar:hover {
  transform: translateX(7px);

  box-shadow:
    0 18px 38px rgba(19, 47, 93, 0.11);
}

.pillar-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  font-size: 1.2rem;
}

.essence-pillar h3 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

.essence-pillar p {
  margin-top: 3px;

  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Pasión */

.pillar-wine::before {
  background: var(--wine);
}

.pillar-wine .pillar-icon {
  background: rgba(140, 24, 50, 0.1);
  color: var(--wine);
}

/* Identidad */

.pillar-gold::before {
  background: var(--gold);
}

.pillar-gold .pillar-icon {
  background: rgba(226, 170, 22, 0.14);
  color: #ad7700;
}

/* Comunidad */

.pillar-navy::before {
  background: var(--navy);
}

.pillar-navy .pillar-icon {
  background: rgba(19, 47, 93, 0.1);
  color: var(--navy);
}

/* Responsive */

@media (max-width: 900px) {
  .essence::before {
    display: none;
  }

  .essence-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .essence-image {
    width: min(650px, 100%);
    margin: 0 auto;
  }

  .essence-image-frame,
  .essence-image-frame img {
    min-height: 430px;
  }

  .essence-year {
    right: -10px;
  }
}

@media (max-width: 560px) {
  .essence-grid {
    gap: 38px;
  }

  .essence-image {
    padding: 0 0 16px 16px;
  }

  .essence-image-frame {
    border-radius: 20px;
  }

  .essence-image-frame,
  .essence-image-frame img {
    min-height: 350px;
  }

  .essence-image::before {
    border-radius: 20px;
  }

  .essence-year {
    position: relative;
    right: auto;
    bottom: auto;

    width: calc(100% - 30px);
    margin: -42px auto 0;
  }

  .essence-content h2 {
    font-size: clamp(1.9rem, 9vw, 2.45rem);
  }

  .essence-pillar {
    grid-template-columns: 46px 1fr;
    padding: 15px 17px;
  }

  .pillar-icon {
    width: 43px;
    height: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .essence-image-frame img {
    transition: none;
  }
}

/* =========================
   CONTADOR DE HISTORIA
========================= */

.history-counter {
  position: relative;
  z-index: 5;

  padding: 18px 0 72px;

  background: #ffffff;
}

.history-counter-box {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 38px;

  padding: 38px 42px;

  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.17),
      transparent 32%
    ),
    linear-gradient(
      125deg,
      var(--navy-dark),
      var(--navy) 65%,
      var(--wine-dark)
    );

  border: 1px solid rgba(226, 170, 22, 0.42);
  border-radius: 24px;

  color: #ffffff;

  box-shadow:
    0 24px 55px rgba(12, 34, 66, 0.22);
}

.history-counter-box::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -90px;
  bottom: -130px;

  border-radius: 50%;

  background:
    rgba(226, 170, 22, 0.12);
}

.history-counter-box::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: -70px;
  top: -90px;

  border-radius: 50%;

  background:
    rgba(140, 24, 50, 0.22);
}

.history-counter-intro,
.history-time,
.history-counter-footer {
  position: relative;
  z-index: 2;
}

.history-counter-kicker {
  display: inline-block;
  margin-bottom: 10px;

  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.history-counter-intro h2 {
  max-width: 540px;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.12;
}

.history-counter-intro h2 span {
  display: block;
  color: var(--gold);
}

.history-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.history-time-item {
  min-width: 92px;
  text-align: center;
}

.history-time-item strong {
  display: block;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 800;
  line-height: 0.95;

  text-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2);
}

.history-time-item span {
  display: block;
  margin-top: 10px;

  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.history-time-separator {
  width: 1px;
  height: 58px;

  background:
    linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );
}

.history-counter-footer {
  grid-column: 1 / -1;

  margin-top: -8px;
  padding-top: 20px;

  color: rgba(255, 255, 255, 0.65);
  font-size: 0.86rem;

  border-top:
    1px solid rgba(255, 255, 255, 0.11);
}

@media (max-width: 850px) {
  .history-counter-box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .history-counter-intro h2 {
    margin: 0 auto;
  }

  .history-counter-footer {
    text-align: center;
  }
}

@media (max-width: 560px) {
  .history-counter {
    padding: 6px 0 58px;
  }

  .history-counter-box {
    padding: 32px 22px;
    gap: 28px;
  }

  .history-time {
    width: 100%;
    gap: 10px;
  }

  .history-time-item {
    min-width: 0;
    flex: 1;
  }

  .history-time-item strong {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .history-time-separator {
    height: 48px;
  }
}

/* =========================
   RECONOCIMIENTOS
========================= */

.recognitions {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(226, 170, 22, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(19, 47, 93, 0.08),
      transparent 30%
    ),
    var(--bg);
}

.recognitions-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

.recognitions-heading h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.14;
}

.recognitions-heading h2 span {
  color: var(--wine);
}

.recognitions-heading p {
  margin-top: 17px;

  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.recognitions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.recognition-card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  gap: 26px;

  min-height: 230px;
  padding: 28px;

  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 22px;

  box-shadow:
    0 18px 45px rgba(19, 47, 93, 0.09);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.recognition-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--wine),
      var(--gold),
      var(--navy)
    );
}

.recognition-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(140, 24, 50, 0.18);

  box-shadow:
    0 26px 55px rgba(19, 47, 93, 0.14);
}

.recognition-logo {
  width: 140px;
  height: 140px;

  display: grid;
  place-items: center;

  padding: 18px;

  background: #ffffff;
  border: 1px solid rgba(19, 47, 93, 0.1);
  border-radius: 20px;

  box-shadow:
    inset 0 0 0 5px rgba(250, 248, 244, 0.8);
}

.recognition-logo img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  filter: grayscale(1);
  opacity: 0.82;

  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.recognition-card:hover .recognition-logo img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

.recognition-type {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recognition-content h3 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
}

.recognition-content p {
  margin-top: 10px;

  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.recognition-content strong {
  display: inline-block;
  margin-top: 13px;

  color: var(--wine);
  font-size: 0.82rem;
}

.recognitions-note {
  margin-top: 22px;

  color: #858585;
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 900px) {
  .recognitions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .recognition-card {
    grid-template-columns: 1fr;
    gap: 20px;

    padding: 24px;

    text-align: center;
  }

  .recognition-logo {
    width: 130px;
    height: 130px;

    margin: 0 auto;
  }
}

/* =========================
   NUESTRA CULTURA SIN FRONTERAS
========================= */

.culture-map {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(226, 170, 22, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(140, 24, 50, 0.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #f8f6f1
    );
}

.culture-map-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.culture-map-heading h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.13;
}

.culture-map-heading h2 span {
  color: var(--wine);
}

.culture-map-heading p {
  margin-top: 16px;

  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.culture-map-layout {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 34px;
  align-items: stretch;
}

/* Mapa visual */

.culture-map-pulse {
  position: absolute;
  left: 16px;
  top: 16px;

  width: 18px;
  height: 18px;

  background: var(--gold);
  border: 4px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 0 0 9px rgba(226, 170, 22, 0.15),
    0 0 0 18px rgba(226, 170, 22, 0.08);

  animation:
    culturePulse 2.4s ease-out infinite;
}


/* Frase */

.culture-map-quote {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 28px;
  padding: 22px 26px;

  background:
    linear-gradient(
      135deg,
      rgba(140, 24, 50, 0.08),
      rgba(226, 170, 22, 0.1)
    );

  border-left: 5px solid var(--wine);
  border-radius: 16px;
}

.culture-map-quote i {
  color: var(--wine);
  font-size: 1.7rem;
}

.culture-map-quote p {
  max-width: 820px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .culture-map-layout {
    grid-template-columns: 1fr;
  }

  .culture-map-visual {
    min-height: 500px;
  }
}

/* =========================
   MAPA INTERACTIVO
========================= */

.culture-map-visual {
  position: relative;
  overflow: hidden;

  min-height: 570px;
  padding: 35px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy) 62%,
      var(--wine-dark)
    );

  border: 1px solid rgba(226, 170, 22, 0.35);
  border-radius: 28px;

  box-shadow:
    0 24px 55px rgba(12, 34, 66, 0.2);
}

.culture-map-visual::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 34px 34px;
  pointer-events: none;
}

.south-america-map {
  position: relative;
  z-index: 2;

  width: min(470px, 90%);
  height: 500px;

  display: grid;
  place-items: center;
}

.south-america-map svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.map-loading {
  display: flex;
  align-items: center;
  gap: 10px;

  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

/* Países normales */

.south-america-map svg path,
.south-america-map svg polygon,
.south-america-map svg polyline {
  transition:
    fill 0.3s ease,
    stroke 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}

/* Países disponibles */

.south-america-map .map-country {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}

.south-america-map .map-country:hover,
.south-america-map .map-country:focus {
  filter:
    drop-shadow(
      0 8px 10px rgba(0, 0, 0, 0.35)
    );

  transform: scale(1.025);
  outline: none;
}

/* País seleccionado */

.south-america-map .map-country-active {
  stroke: #ffffff !important;
  stroke-width: 3px !important;

  filter:
    drop-shadow(
      0 10px 13px rgba(0, 0, 0, 0.42)
    );

  transform: scale(1.035);
}

/* Punto de origen */

.culture-map-origin-badge {
  position: absolute;
  left: 25px;
  bottom: 24px;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 13px 17px;

  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;

  color: #ffffff;

  backdrop-filter: blur(10px);
}

.culture-map-origin-badge .culture-map-pulse {
  position: relative;
  left: auto;
  top: auto;

  flex: 0 0 auto;

  width: 16px;
  height: 16px;
}

.culture-map-origin-badge strong {
  display: block;

  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
}

.culture-map-origin-badge small {
  display: block;
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.67);
  font-size: 0.7rem;
}

.culture-map-help {
  position: absolute;
  right: 24px;
  bottom: 27px;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 7px;

  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
}

/* Panel derecho */

.culture-country-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.culture-country-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.culture-country-button {
  min-height: 58px;
  padding: 8px 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;

  color: var(--navy);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.culture-country-button span {
  font-size: 1.25rem;
}

.culture-country-button:hover {
  transform: translateY(-3px);
  border-color: rgba(140, 24, 50, 0.25);
}

.culture-country-button.active {
  background:
    linear-gradient(
      135deg,
      var(--wine),
      var(--wine-dark)
    );

  border-color: transparent;
  color: #ffffff;

  box-shadow:
    0 11px 25px rgba(140, 24, 50, 0.2);
}

.culture-country-detail {
  position: relative;
  overflow: hidden;
  flex: 1;

  padding: 32px;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 23px;

  box-shadow:
    0 19px 45px rgba(19, 47, 93, 0.1);
}

.culture-country-detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 6px;

  background:
    linear-gradient(
      90deg,
      var(--wine),
      var(--gold),
      var(--navy)
    );
}

.culture-country-detail-top {
  display: flex;
  align-items: center;
  gap: 17px;
}

.culture-country-detail-type {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.culture-country-detail h3 {
  margin-top: 3px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
}

.culture-country-years {
  display: inline-flex;

  margin-top: 27px;
  padding: 8px 13px;

  background: rgba(140, 24, 50, 0.08);
  border-radius: 999px;

  color: var(--wine);
  font-size: 0.78rem;
  font-weight: 800;
}

.culture-country-detail > p {
  margin-top: 19px;

  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.culture-country-highlight {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin-top: 25px;
  padding: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(226, 170, 22, 0.12),
      rgba(140, 24, 50, 0.07)
    );

  border-radius: 15px;

  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.culture-country-highlight i {
  margin-top: 4px;
  color: var(--wine);
}

/* Animación al cambiar país */

.culture-country-detail.country-changing {
  animation:
    countryDetailChange 0.38s ease;
}

@keyframes countryDetailChange {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 620px) {
  .culture-map-visual {
    min-height: 520px;
    padding: 25px 15px 85px;
  }

  .south-america-map {
    width: 95%;
    height: 420px;
  }

  .culture-map-help {
    display: none;
  }

  .culture-map-origin-badge {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .culture-country-buttons {
    grid-template-columns: 1fr;
  }

  .culture-country-button {
    justify-content: flex-start;
    padding-left: 18px;
  }

  .culture-country-detail {
    padding: 27px 22px;
  }
}

.culture-country-flag {
  width: 28px;
  height: 20px;

  object-fit: cover;

  border-radius: 3px;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15);
}

.culture-country-detail-flag {
  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  background: #f7f4ed;
  border-radius: 19px;
}

.culture-country-detail-flag img {
  width: 46px;
  height: 32px;

  object-fit: cover;

  border-radius: 4px;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.16);
}

/* =========================
   UBICACIÓN
========================= */

.location {

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #faf8f4
    );

}

.location-grid{
  display:grid;
  grid-template-columns:
    1fr
    1fr;
  gap:55px;
  align-items:center;
}

.location-image{
  overflow:hidden;
  border-radius:28px;
  box-shadow:
    0 22px 55px rgba(19,47,93,.15);
}

.location-image img{
  width:100%;
  height:520px;
  object-fit:cover;
  transition:.7s;
}

.location-image:hover img{
  transform:scale(1.05);
}

.location-content h2{
  color:var(--navy);
  font-size:clamp(2rem,3vw,2.8rem);
}

.location-content p{
  margin-top:18px;
  line-height:1.8;
}

.location-data{
  display:grid;
  gap:18px;
  margin:35px 0;
}

.location-data li{
  display:flex;
  gap:18px;
  align-items:center;
}

.location-data i{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  background:
    rgba(140,24,50,.08);

  color:var(--wine);
  border-radius:15px;
  font-size:1.3rem;
}

.location-data strong{
  display:block;
  color:var(--navy);
}

.location-data span{
  color:var(--muted);
  font-size:.9rem;
}

.location-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

@media(max-width:900px){
  .location-grid{
    grid-template-columns:1fr;
  }

  .location-image img{
    height:380px;
  }
}

.location .btn-outline {
  color: var(--navy);
  border-color: var(--navy);
  background: transparent;
}

.location .btn-outline:hover {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
}










/* =========================
   ANIMACIONES AL HACER SCROLL
========================= */

[data-reveal] {
  opacity: 0;

  transition:
    opacity 0.75s ease,
    transform 0.75s
      cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity,
    transform;
}

[data-reveal="up"] {
  transform: translateY(38px);
}

[data-reveal="left"] {
  transform: translateX(-42px);
}

[data-reveal="right"] {
  transform: translateX(42px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal].reveal-active {
  opacity: 1;
  transform: none;
}

/*
  Cuando JavaScript todavía no ha cargado,
  evitamos mantener oculto el contenido indefinidamente.
*/
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (max-width: 620px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(30px);
  }

  [data-reveal="scale"] {
    transform:
      translateY(22px)
      scale(0.97);
  }

  [data-reveal].reveal-active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   NAVEGACIÓN INTELIGENTE
========================= */

/* Barra de progreso */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;

  width: 0;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--wine),
      var(--gold),
      var(--navy)
    );

  box-shadow:
    0 0 12px rgba(226, 170, 22, 0.45);

  pointer-events: none;

  transition: width 0.08s linear;
}

/* Evita que el header tape secciones enlazadas */

section[id] {
  scroll-margin-top: 95px;
}

/* Header compacto */

.site-header .navbar,
.site-header .brand-logo,
.site-header .brand-text strong,
.site-header .brand-text span {
  transition:
    height 0.3s ease,
    width 0.3s ease,
    font-size 0.3s ease,
    opacity 0.3s ease;
}

.site-header.scrolled .navbar {
  height: 66px;
}

.site-header.scrolled .brand-logo {
  width: 52px;
  height: 52px;
}

.site-header.scrolled .brand-text strong {
  font-size: 0.9rem;
}

.site-header.scrolled .brand-text span {
  font-size: 0.65rem;
}

/* Fondo oscuro del menú móvil */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;

  background: rgba(3, 12, 25, 0.66);
  backdrop-filter: blur(3px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.menu-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Bloqueo del fondo cuando el menú está abierto */

body.menu-open {
  overflow: hidden;
}

/* Animación del botón hamburguesa */

.menu-toggle {
  position: relative;
  width: 35px;
  height: 35px;
}

.menu-toggle span {
  position: absolute;
  left: 4px;

  width: 27px;

  transition:
    top 0.25s ease,
    transform 0.25s ease,
    opacity 0.2s ease;
}

.menu-toggle span:nth-child(1) {
  top: 8px;
}

.menu-toggle span:nth-child(2) {
  top: 16px;
}

.menu-toggle span:nth-child(3) {
  top: 24px;
}

.menu-toggle.active span:nth-child(1) {
  top: 16px;
  transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  top: 16px;
  transform: rotate(-45deg);
}

/* Botón volver arriba */

.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 900;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      var(--wine-dark)
    );

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  color: #ffffff;
  font-size: 1rem;

  cursor: pointer;

  box-shadow:
    0 13px 30px rgba(12, 34, 66, 0.28);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(18px)
    scale(0.88);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.25s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}

.back-to-top:hover {
  background:
    linear-gradient(
      135deg,
      var(--gold),
      #c78c00
    );

  color: #111111;

  transform:
    translateY(-4px)
    scale(1.03);
}

.back-to-top:focus-visible,
.menu-toggle:focus-visible,
.nav-links a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

/* Responsive */

@media (max-width: 900px) {
  .nav-links {
    z-index: 1000;
  }

  .menu-toggle {
    z-index: 1010;
  }

  .site-header.scrolled .navbar {
    height: 68px;
  }
}

@media (max-width: 560px) {
  section[id] {
    scroll-margin-top: 82px;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;

    width: 44px;
    height: 44px;
  }

  .site-header.scrolled .brand-logo {
    width: 46px;
    height: 46px;
  }

  .site-header.scrolled .brand-text strong {
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .back-to-top,
  .menu-toggle span,
  .site-header .navbar,
  .site-header .brand-logo {
    transition: none !important;
  }
}


/* =========================
   HERO INTERNO
========================= */

.inner-hero {
  position: relative;
  min-height: 520px;

  display: flex;
  align-items: center;

  overflow: hidden;
  isolation: isolate;

  color: #ffffff;
  background: var(--navy-dark);
}

.inner-hero-background {
  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    url("../img/nosotros-hero.jpg")
    center 42% / cover no-repeat;

  transform: scale(1.03);
}

.inner-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(5, 15, 31, 0.95) 0%,
      rgba(12, 34, 66, 0.84) 42%,
      rgba(104, 17, 37, 0.58) 75%,
      rgba(140, 24, 50, 0.32) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 10, 22, 0.12),
      rgba(3, 10, 22, 0.6)
    );
}

.inner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  opacity: 0.12;

  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(255, 255, 255, 0.09) 47%,
      rgba(255, 255, 255, 0.09) 49%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      rgba(226, 170, 22, 0.08) 47%,
      rgba(226, 170, 22, 0.08) 49%,
      transparent 50%
    );

  background-size: 52px 52px;

  pointer-events: none;
}

.inner-hero-content {
  padding-top: 155px;
  padding-bottom: 95px;
}

.inner-hero-kicker {
  display: inline-block;
  margin-bottom: 14px;

  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.inner-hero h1 {
  max-width: 760px;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 1;

  text-shadow:
    0 12px 35px rgba(0, 0, 0, 0.28);
}

.inner-hero-content > p {
  max-width: 620px;
  margin-top: 18px;

  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
}

.inner-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 30px;

  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}

.inner-hero-breadcrumb a {
  transition: color 0.25s ease;
}

.inner-hero-breadcrumb a:hover {
  color: var(--gold);
}

.inner-hero-breadcrumb i {
  font-size: 0.62rem;
  color: var(--gold);
}

/* =========================
   PRESENTACIÓN INSTITUCIONAL
========================= */

.about-introduction {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.09),
      transparent 30%
    ),
    #ffffff;
}

.about-introduction-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 65px;
}

.about-introduction-image {
  position: relative;
  padding: 0 0 24px 24px;
}

.about-introduction-image::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 72%;
  height: 72%;

  background:
    linear-gradient(
      145deg,
      var(--wine),
      var(--wine-dark)
    );

  border-radius: 28px;
}

.about-introduction-image img {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 520px;

  object-fit: cover;
  object-position: center;

  border-radius: 28px;

  box-shadow:
    0 28px 60px rgba(19, 47, 93, 0.17);
}

.about-introduction-badge {
  position: absolute;
  right: -22px;
  bottom: 60px;
  z-index: 3;

  min-width: 190px;
  padding: 18px 22px;

  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy)
    );

  border-left: 5px solid var(--gold);
  border-radius: 15px;

  color: #ffffff;

  box-shadow:
    0 17px 38px rgba(12, 34, 66, 0.25);
}

.about-introduction-badge strong {
  display: block;

  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
}

.about-introduction-badge span {
  display: block;
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
}

.about-introduction-content h2 {
  max-width: 640px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
}

.about-introduction-content h2 span {
  color: var(--wine);
}

.about-introduction-content > p {
  margin-top: 16px;

  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.about-introduction-lead {
  color: #414141 !important;
  font-size: 1.08rem !important;
  font-weight: 700;
}

.about-introduction-quote {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 15px;

  margin-top: 28px;
  padding: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(140, 24, 50, 0.08),
      rgba(226, 170, 22, 0.09)
    );

  border-left: 4px solid var(--wine);
  border-radius: 15px;
}

.about-introduction-quote i {
  color: var(--wine);
  font-size: 1.55rem;
}

.about-introduction-quote p {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .inner-hero {
    min-height: 470px;
  }

  .inner-hero-content {
    padding-top: 145px;
    padding-bottom: 85px;
  }

  .about-introduction-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-introduction-image {
    width: min(680px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .inner-hero {
    min-height: 430px;
  }

  .inner-hero-content {
    padding-top: 130px;
    padding-bottom: 70px;
  }

  .inner-hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
  }

  .about-introduction-grid {
    gap: 38px;
  }

  .about-introduction-image {
    padding: 0 0 16px 16px;
  }

  .about-introduction-image img {
    min-height: 390px;
    border-radius: 21px;
  }

  .about-introduction-image::before {
    border-radius: 21px;
  }

  .about-introduction-badge {
    position: relative;
    right: auto;
    bottom: auto;

    width: calc(100% - 30px);
    margin: -42px auto 0;
  }
}

/*=========================
  LO QUE NOS MUEVE
=========================*/

.purpose{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
  180deg,
  #ffffff,
  #faf8f5
  );

}

.purpose::before{

  content:"";

  position:absolute;

  top:-180px;
  right:-120px;

  width:420px;
  height:420px;

  border-radius:50%;

  background:
  radial-gradient(
  rgba(226,170,22,.08),
  transparent 70%
  );

}

.purpose-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:32px;

  margin-top:60px;

}

.purpose-card{

  position:relative;

  padding:42px 34px;

  background:#fff;

  border-radius:24px;

  overflow:hidden;

  box-shadow:
  0 20px 45px rgba(20,35,70,.08);

  transition:
  transform .35s,
  box-shadow .35s;

}

.purpose-card::before{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:6px;

  background:
  linear-gradient(
  90deg,
  var(--wine),
  var(--gold),
  var(--navy)
  );

}

.purpose-card:hover{

  transform:
  translateY(-8px);

  box-shadow:
  0 28px 60px rgba(20,35,70,.14);

}

.purpose-icon{

  width:74px;
  height:74px;
  margin-bottom:24px;
  display:grid;
  place-items:center;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  var(--wine),
  var(--navy)
  );

  color:#fff;
  font-size:1.8rem;
}

.purpose-card h3{
  margin-bottom:16px;
  color:var(--navy);
  font-size:1.5rem;
}

.purpose-card p{
  color:#666;
  line-height:1.8;
}

@media(max-width:960px){
  .purpose-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   NUESTROS VALORES
========================= */

.values {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(226, 170, 22, 0.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 86%,
      rgba(140, 24, 50, 0.1),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy) 62%,
      var(--wine-dark)
    );

  color: #ffffff;
}

.values::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 40px 40px;
  pointer-events: none;
}

.values .container {
  position: relative;
  z-index: 2;
}

.values-heading {
  max-width: 720px;
  margin-bottom: 46px;
}

.values-heading h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
}

.values-heading p {
  max-width: 660px;
  margin-top: 16px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.7;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.value-card {
  position: relative;
  overflow: hidden;

  grid-column: span 2;

  min-height: 270px;
  padding: 28px;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;

  color: var(--text);

  box-shadow:
    0 20px 42px rgba(3, 12, 28, 0.22);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.value-card:nth-child(4),
.value-card:nth-child(5) {
  grid-column: span 3;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--wine),
      var(--gold),
      var(--navy)
    );
}

.value-card::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -65px;

  width: 150px;
  height: 150px;

  border-radius: 50%;
  background: rgba(19, 47, 93, 0.05);
}

.value-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 28px 58px rgba(3, 12, 28, 0.3);
}

.value-card-featured {
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.18),
      transparent 38%
    ),
    #ffffff;
}

.value-icon {
  position: relative;
  z-index: 2;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      var(--wine-dark)
    );

  border-radius: 17px;

  color: #ffffff;
  font-size: 1.35rem;

  box-shadow:
    0 11px 24px rgba(140, 24, 50, 0.21);
}

.value-number {
  position: absolute;
  top: 24px;
  right: 24px;

  color: rgba(19, 47, 93, 0.12);
  font-family: "Montserrat", sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}

.value-card h3 {
  position: relative;
  z-index: 2;

  margin-top: 23px;

  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
}

.value-card p {
  position: relative;
  z-index: 2;

  margin-top: 11px;

  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.65;
}

.value-card:nth-child(2) .value-icon {
  background:
    linear-gradient(
      135deg,
      var(--navy),
      #315b9b
    );
}

.value-card:nth-child(3) .value-icon {
  background:
    linear-gradient(
      135deg,
      #c98c00,
      var(--gold)
    );

  color: #242424;
}

.value-card:nth-child(4) .value-icon {
  background:
    linear-gradient(
      135deg,
      #6d3a99,
      #9d67c7
    );
}

.value-card:nth-child(5) .value-icon {
  background:
    linear-gradient(
      135deg,
      #177f78,
      #39a69d
    );
}

.values-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  max-width: 820px;
  margin: 30px auto 0;
  padding: 19px 24px;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;

  backdrop-filter: blur(8px);
}

.values-message i {
  flex: 0 0 auto;

  color: var(--gold);
  font-size: 1.45rem;
}

.values-message p {
  color: rgba(255, 255, 255, 0.83);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-card,
  .value-card:nth-child(4),
  .value-card:nth-child(5) {
    grid-column: auto;
  }

  .value-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card,
  .value-card:last-child {
    grid-column: auto;
  }

  .value-card {
    min-height: auto;
    padding: 25px;
  }

  .values-message {
    align-items: flex-start;
  }
}

/* =========================
   NUESTRA LABOR CULTURAL
========================= */

.cultural-work {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(226, 170, 22, 0.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #faf8f4
    );
}

.cultural-work-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 68px;
}

/* Imagen */

.cultural-work-image {
  position: relative;
  padding: 0 24px 24px 0;
}

.cultural-work-image::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;

  width: 72%;
  height: 72%;

  background:
    linear-gradient(
      145deg,
      var(--navy),
      var(--navy-dark)
    );

  border-radius: 28px;
}

.cultural-work-image img {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 620px;

  object-fit: cover;
  object-position: center;

  border-radius: 28px;

  box-shadow:
    0 28px 60px rgba(19, 47, 93, 0.18);
}

.cultural-work-badge {
  position: absolute;
  left: -24px;
  bottom: 65px;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 230px;
  padding: 17px 20px;

  background:
    linear-gradient(
      135deg,
      var(--wine),
      var(--wine-dark)
    );

  border-left: 5px solid var(--gold);
  border-radius: 15px;

  color: #ffffff;

  box-shadow:
    0 17px 38px rgba(12, 34, 66, 0.24);
}

.cultural-work-badge i {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  color: var(--gold);
  font-size: 1.1rem;
}

.cultural-work-badge strong {
  display: block;

  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
}

.cultural-work-badge span {
  display: block;
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

/* Contenido */

.cultural-work-content h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
}

.cultural-work-content h2 span {
  color: var(--wine);
}

.cultural-work-lead {
  max-width: 650px;
  margin-top: 18px;

  color: #444444;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.72;
}

.cultural-work-list {
  display: grid;
  gap: 16px;

  margin-top: 30px;
}

.cultural-work-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: start;
  gap: 17px;

  padding: 18px 20px;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 17px;

  box-shadow:
    0 12px 30px rgba(19, 47, 93, 0.06);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.cultural-work-item:hover {
  transform: translateX(7px);

  border-color:
    rgba(140, 24, 50, 0.18);

  box-shadow:
    0 18px 38px rgba(19, 47, 93, 0.11);
}

.cultural-work-icon {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(140, 24, 50, 0.11),
      rgba(226, 170, 22, 0.13)
    );

  border-radius: 15px;

  color: var(--wine);
  font-size: 1.2rem;
}

.cultural-work-item:nth-child(2)
.cultural-work-icon {
  color: var(--navy);

  background:
    rgba(19, 47, 93, 0.09);
}

.cultural-work-item:nth-child(3)
.cultural-work-icon {
  color: #ad7700;

  background:
    rgba(226, 170, 22, 0.15);
}

.cultural-work-item:nth-child(4)
.cultural-work-icon {
  color: #a5286d;

  background:
    rgba(198, 61, 135, 0.1);
}

.cultural-work-item h3 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

.cultural-work-item p {
  margin-top: 5px;

  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.58;
}

.cultural-work-link {
  margin-top: 25px;
}

/* Responsive */

@media (max-width: 960px) {
  .cultural-work-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .cultural-work-image {
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .cultural-work-image img {
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .cultural-work-grid {
    gap: 40px;
  }

  .cultural-work-image {
    padding: 0 16px 16px 0;
  }

  .cultural-work-image img {
    min-height: 390px;
    border-radius: 21px;
  }

  .cultural-work-image::before {
    border-radius: 21px;
  }

  .cultural-work-badge {
    position: relative;
    left: auto;
    bottom: auto;

    width: calc(100% - 30px);
    margin: -42px auto 0;
  }

  .cultural-work-item {
    grid-template-columns: 48px 1fr;
    padding: 16px;
  }

  .cultural-work-icon {
    width: 46px;
    height: 46px;
  }
}

/*=========================
NUESTRO EQUIPO
=========================*/

.team {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f5f1 100%
    );
}

.team-introduction {
  max-width: 900px;
  margin: 48px auto 60px;
  padding: 28px 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-left: 5px solid var(--gold);
  border-radius: 0 18px 18px 0;
  background: #fff;
  box-shadow:
    0 18px 45px rgba(15, 25, 45, 0.08);
}

.team-introduction i {
  flex-shrink: 0;
  font-size: 2.2rem;
  color: var(--wine);
}

.team-introduction p {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.85;
}

.team-director {
  max-width: 1050px;
  margin: 0 auto 65px;
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: 28px;
  background: var(--navy);
  box-shadow:
    0 28px 70px rgba(8, 18, 38, 0.2);
}

.team-director-image {
  min-height: 470px;
}

.team-director-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.team-director-content {
  padding: 55px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-director-label {
  margin-bottom: 12px;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.team-director-content h3 {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
}

.team-director-role {
  display: block;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.team-director-content p {
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.85;
}

.team-director-content p:last-child {
  margin-bottom: 0;
}

.team-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.team-work-card {
  position: relative;
  padding: 38px 34px;
  overflow: hidden;
  border: 1px solid rgba(10, 25, 50, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 18px 45px rgba(15, 25, 45, 0.07);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.team-work-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background:
    linear-gradient(
      90deg,
      var(--wine),
      var(--gold),
      var(--navy)
    );
}

.team-work-card:hover {
  transform: translateY(-7px);
  border-color: rgba(200, 150, 20, 0.35);
  box-shadow:
    0 26px 60px rgba(15, 25, 45, 0.12);
}

.team-work-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--wine);
  font-size: 1.55rem;
  background:
    linear-gradient(
      135deg,
      rgba(125, 25, 50, 0.12),
      rgba(220, 170, 30, 0.14)
    );
}

.team-work-card h3 {
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 1.35rem;
}

.team-work-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.8;
}

.team-closing {
  max-width: 900px;
  margin: 65px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.team-closing span {
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );
}

.team-closing span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}

.team-closing p {
  max-width: 620px;
  margin: 0;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 900px) {

  .team-director {
    grid-template-columns: 1fr;
  }

  .team-director-image {
    min-height: 480px;
    max-height: 580px;
  }

  .team-work-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 620px) {

  .team-introduction {
    margin-top: 35px;
    padding: 24px;
    align-items: flex-start;
  }

  .team-introduction i {
    font-size: 1.7rem;
  }

  .team-director {
    border-radius: 20px;
  }

  .team-director-image {
    min-height: 400px;
  }

  .team-director-content {
    padding: 36px 26px;
  }

  .team-work-card {
    padding: 32px 25px;
  }

  .team-closing {
    grid-template-columns: 1fr;
  }

  .team-closing span {
    width: 90px;
    margin: auto;
  }

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1000px){

  .team-areas{
    grid-template-columns:
    repeat(2,1fr);
  }

}

@media(max-width:640px){
  .team-director{
    padding:35px 25px;
  }

  .team-director img{
    width:150px;
    height:150px;
  }

  .team-director h3{
    font-size:1.6rem;
  }

  .team-areas{
    grid-template-columns:1fr;
  }
}

/*=========================
LO QUE CREEMOS
=========================*/

.beliefs{

    position:relative;
    overflow:hidden;
    color:#fff;

    background:
    linear-gradient(
    rgba(10,25,50,.82),
    rgba(35,10,20,.82)
    ),
    url("../img/lo-que-creemos.jpg")
    center/cover
    no-repeat;

}

.beliefs-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(226,170,22,.15),
    transparent 35%
    );

    pointer-events:none;

}

.section-heading.light h2,
.section-heading.light p,
.section-heading.light .section-kicker{

    color:#fff;

}

.beliefs-list{
    max-width:900px;
    margin:70px auto;
    display:grid;
    gap:40px;
}

.belief-item{
    display:grid;
    grid-template-columns:6px 1fr;
    gap:28px;
    align-items:flex-start;
}

.belief-line{

    display:block;
    width:6px;
    height:100%;
    border-radius:20px;
    background:
    linear-gradient(
      180deg,
      var(--gold),
      #fff2b0
    );
}

.belief-item h3{
    font-size:1.8rem;
    color:#fff;
    margin-bottom:12px;
    line-height:1.3;
}

.belief-item p{
    color:rgba(255,255,255,.88);
    line-height:1.9;
    font-size:1.02rem;
}

.beliefs-quote{
    margin-top:90px;
    text-align:center;
}

.belief-star{
    display:block;
    margin-bottom:18px;
    color:var(--gold);
    font-size:2rem;
}

.beliefs-quote blockquote{
    max-width:720px;
    margin:auto;
    font-size:clamp(1.8rem,4vw,2.8rem);
    font-family:"Montserrat",sans-serif;
    font-weight:800;
    line-height:1.35;
}

.beliefs-quote::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    margin:35px auto 0;
    border-radius:20px;
    background:var(--gold);
}

@media(max-width:768px){
  .belief-item{
    grid-template-columns:4px 1fr;
    gap:18px;
  }

  .belief-item h3{
    font-size:1.35rem;
  }

  .belief-item p{
    font-size:.95rem;
    line-height:1.75;
  }
  .beliefs-list{
    gap:28px;
  }
}

/*=========================
FOTOGRAFÍA PANORÁMICA
=========================*/

.full-width-photo{
    position:relative;
    width:100%;
    height:650px;
    overflow:hidden;
    background: var(--navy);
}

.full-width-photo img {
  position: relative;
  z-index: 0;

  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 1.8s ease;
}

.full-width-photo:hover img{

    transform:scale(1.04);

}

/* Overlay principal */

.full-width-photo::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        to bottom,
        rgba(8,23,38,.05) 0%,
        rgba(8,23,38,.15) 35%,
        rgba(8,23,38,.35) 70%,
        rgba(8,23,38,.75) 100%
    );

}

/* Luz dorada sutil */

.full-width-photo::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        to bottom,
        rgba(8,23,38,.35) 0%,
        transparent 18%,
        transparent 45%,
        rgba(0,0,0,.45) 70%,
        rgba(8,23,38,.95) 100%
    );

}

@media(max-width:768px){

  .full-width-photo{

    height:420px;

  }

}

/* =========================
   PÁGINA HISTORIA
========================= */

.history-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-dark);
  color: #ffffff;
}

.history-hero-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    url("../img/historia-hero.jpg")
    center center / cover no-repeat;
  transform: scale(1.04);
}

.history-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(
      90deg,
      rgba(4, 14, 30, 0.95) 0%,
      rgba(12, 34, 66, 0.84) 43%,
      rgba(104, 17, 37, 0.62) 76%,
      rgba(140, 24, 50, 0.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 10, 22, 0.08),
      rgba(3, 10, 22, 0.72)
    );
}

.history-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.13;
  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(255, 255, 255, 0.09) 47%,
      rgba(255, 255, 255, 0.09) 49%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      rgba(226, 170, 22, 0.09) 47%,
      rgba(226, 170, 22, 0.09) 49%,
      transparent 50%
    );
  background-size: 56px 56px;
}

.history-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 180px;
  padding-bottom: 120px;
}

.history-hero-kicker {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.history-hero h1 {
  max-width: 840px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 0.98;
  text-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.history-hero-content > p {
  max-width: 650px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
}

.history-hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 46px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.history-hero-scroll i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--gold);
  animation: historyScrollHint 1.8s ease-in-out infinite;
}

@keyframes historyScrollHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.history-opening {
  position: relative;
  overflow: hidden;
  padding-top: 115px;
  padding-bottom: 115px;
  background:
    radial-gradient(circle at 85% 20%, rgba(226, 170, 22, 0.1), transparent 30%),
    #ffffff;
}

.history-opening-year {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: rgba(19, 47, 93, 0.045);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(10rem, 24vw, 20rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.history-opening-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  text-align: center;
}

.history-opening-content h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.16;
}

.history-opening-content h2 span {
  color: var(--wine);
}

.history-opening-content > p {
  max-width: 740px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.history-opening-date {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(19, 47, 93, 0.09);
}

.history-opening-date > div {
  text-align: left;
}

.history-opening-date strong {
  display: block;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.history-opening-date span {
  display: block;
  margin-top: 5px;
  color: var(--wine);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.history-opening-separator {
  width: 1px;
  height: 46px;
  margin: 0 !important;
  background: rgba(19, 47, 93, 0.18);
}

.history-chapter-guide {
  position: relative;
  z-index: 10;
  padding: 23px 0;
  background: var(--navy-dark);
  border-top: 1px solid rgba(226, 170, 22, 0.35);
  border-bottom: 1px solid rgba(226, 170, 22, 0.35);
}

.history-chapter-guide-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.history-chapter-guide a {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 12px;
  text-align: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.history-chapter-guide a:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
}

.history-chapter-guide span {
  display: block;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.history-chapter-guide strong {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  line-height: 1.3;
}

.history-chapter {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 16%, rgba(226, 170, 22, 0.09), transparent 27%),
    linear-gradient(180deg, #ffffff, #faf8f4);
}

.history-chapter-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 72px;
}

.history-chapter-number {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.history-chapter-content h2,
.history-next-placeholder h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.1;
}

.history-chapter-phrase {
  margin: 24px 0 22px !important;
  padding-left: 20px;
  border-left: 4px solid var(--gold);
  color: var(--wine) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem !important;
  font-weight: 700;
  line-height: 1.65 !important;
}

.history-chapter-content > p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.history-memory-card {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at top right, rgba(226, 170, 22, 0.16), transparent 34%),
    linear-gradient(145deg, var(--navy-dark), var(--navy) 64%, var(--wine-dark));
  border: 1px solid rgba(226, 170, 22, 0.42);
  border-radius: 28px;
  box-shadow: 0 28px 65px rgba(12, 34, 66, 0.24);
  color: #ffffff;
}

.history-memory-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.08) 47%, rgba(255, 255, 255, 0.08) 49%, transparent 50%),
    linear-gradient(-45deg, transparent 46%, rgba(226, 170, 22, 0.08) 47%, rgba(226, 170, 22, 0.08) 49%, transparent 50%);
  background-size: 48px 48px;
}

.history-memory-card > * {
  position: relative;
  z-index: 2;
}

.history-memory-label {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.history-memory-date {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.history-memory-date > strong {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 5.8rem;
  line-height: 0.82;
}

.history-memory-date div span,
.history-memory-date div b {
  display: block;
}

.history-memory-date div span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.history-memory-date div b {
  margin-top: 3px;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 2.1rem;
}

.history-memory-line {
  width: 100%;
  height: 1px;
  margin: 32px 0 25px;
  background: linear-gradient(90deg, var(--gold), rgba(255, 255, 255, 0.08));
}

.history-memory-card ul {
  display: grid;
  gap: 18px;
  list-style: none;
}

.history-memory-card li {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.93rem;
}

.history-memory-card li i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  color: var(--gold);
}

.history-origin-question {
  max-width: 900px;
  margin-top: 85px;
  padding: 50px 45px;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(226, 170, 22, 0.13), transparent 32%),
    #ffffff;
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 24px 55px rgba(19, 47, 93, 0.11);
}

.history-origin-question > i {
  color: var(--wine);
  font-size: 2rem;
}

.history-origin-question > p {
  margin-top: 15px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
}

.history-origin-question > span {
  display: block;
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--muted);
  line-height: 1.7;
}

.history-origin-words {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 32px;
}

.history-origin-words strong {
  padding: 16px 14px;
  border-radius: 14px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-origin-words strong:nth-child(1) { background: var(--wine); }
.history-origin-words strong:nth-child(2) { background: var(--navy); }
.history-origin-words strong:nth-child(3) { background: #b37b00; }

.history-next-placeholder {
  background: var(--navy-dark);
  color: #ffffff;
  text-align: center;
}

.history-next-placeholder .container {
  max-width: 780px;
}

.history-next-placeholder h2 {
  color: #ffffff;
}

.history-next-placeholder p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
}

@media (max-width: 960px) {
  .history-chapter-guide-track {
    grid-template-columns: repeat(4, 1fr);
  }

  .history-chapter-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .history-memory-card {
    min-height: 430px;
  }
}

@media (max-width: 620px) {
  .history-hero {
    min-height: 620px;
  }

  .history-hero-content {
    padding-top: 150px;
    padding-bottom: 95px;
  }

  .history-hero-scroll span {
    display: none;
  }

  .history-opening {
    padding-top: 85px;
    padding-bottom: 85px;
  }

  .history-opening-date {
    width: 100%;
    justify-content: center;
    gap: 16px;
    padding: 16px;
  }

  .history-chapter-guide {
    overflow-x: auto;
  }

  .history-chapter-guide-track {
    width: 760px;
    grid-template-columns: repeat(7, 100px);
  }

  .history-memory-card {
    min-height: auto;
    padding: 32px 24px;
    border-radius: 22px;
  }

  .history-memory-date > strong {
    font-size: 4.6rem;
  }

  .history-origin-question {
    margin-top: 58px;
    padding: 38px 22px;
  }

  .history-origin-words {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-hero-scroll i {
    animation: none;
  }
}

/* =========================
   HISTORIA · PRIMEROS AÑOS
========================= */

.history-early-years {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(133, 24, 47, 0.08),
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 75%,
      rgba(226, 170, 22, 0.1),
      transparent 28%
    ),
    #ffffff;
}

.history-early-years::before {
  content: "2009";
  position: absolute;
  top: 70px;
  right: -30px;
  color: rgba(19, 47, 93, 0.035);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(9rem, 19vw, 16rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.history-early-years-header {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.history-early-years-header h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}

.history-early-years-header .history-chapter-phrase {
  max-width: 720px;
  margin: 24px auto 26px !important;
  padding-left: 0;
  border-left: 0;
  color: var(--wine) !important;
}

.history-early-years-header > p:not(.history-chapter-phrase) {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Tarjetas */

.history-early-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 65px;
}

.history-early-card {
  position: relative;
  min-height: 350px;
  padding: 34px 30px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(19, 47, 93, 0.09);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.history-early-card:hover {
  transform: translateY(-8px);
  border-color: rgba(226, 170, 22, 0.65);
  box-shadow: 0 28px 58px rgba(19, 47, 93, 0.15);
}

.history-early-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 135px;
  height: 135px;
  background: rgba(226, 170, 22, 0.08);
  border-radius: 50%;
}

.history-early-card-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy)
    );
  border-radius: 18px;
  color: var(--gold);
  font-size: 1.4rem;
  box-shadow: 0 13px 26px rgba(19, 47, 93, 0.2);
}

.history-early-card > span {
  position: absolute;
  top: 30px;
  right: 30px;
  color: rgba(19, 47, 93, 0.11);
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.history-early-card h3 {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
}

.history-early-card p {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Anécdotas */

.history-memories {
  position: relative;
  z-index: 2;
  margin-top: 95px;
  padding: 55px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.16),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy) 66%,
      var(--wine-dark)
    );
  border: 1px solid rgba(226, 170, 22, 0.35);
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(12, 34, 66, 0.23);
}

.history-memories::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(255, 255, 255, 0.08) 47%,
      rgba(255, 255, 255, 0.08) 49%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      rgba(226, 170, 22, 0.08) 47%,
      rgba(226, 170, 22, 0.08) 49%,
      transparent 50%
    );
  background-size: 52px 52px;
}

.history-memories > * {
  position: relative;
  z-index: 2;
}

.history-memories-heading {
  max-width: 680px;
}

.history-memories-heading h3 {
  margin-top: 10px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.2;
}

.history-memories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 38px;
}

.history-memory-story {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 20px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}

.history-memory-story-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.14);
  border: 1px solid rgba(226, 170, 22, 0.32);
  border-radius: 16px;
  color: var(--gold);
  font-size: 1.25rem;
}

.history-memory-story span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.history-memory-story h4 {
  margin-top: 7px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
  line-height: 1.35;
}

.history-memory-story p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.91rem;
  line-height: 1.7;
}

.history-memory-story blockquote {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  color: rgba(255, 255, 255, 0.92);
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  font-style: italic;
}

/* Frase final */

.history-early-closing {
  max-width: 850px;
  margin: 75px auto 0;
  padding: 38px 45px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(19, 47, 93, 0.1);
}

.history-early-closing i {
  color: var(--gold);
  font-size: 1.7rem;
}

.history-early-closing p {
  margin-top: 14px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.45;
}

/* Responsive */

@media (max-width: 960px) {
  .history-early-cards {
    grid-template-columns: 1fr;
  }

  .history-early-card {
    min-height: auto;
  }

  .history-memories {
    padding: 45px 35px;
  }

  .history-memories-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .history-early-cards {
    margin-top: 45px;
    gap: 18px;
  }

  .history-early-card {
    padding: 28px 24px;
    border-radius: 20px;
  }

  .history-early-card > span {
    top: 26px;
    right: 24px;
  }

  .history-memories {
    margin-top: 65px;
    padding: 35px 22px;
    border-radius: 23px;
  }

  .history-memory-story {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .history-early-closing {
    margin-top: 55px;
    padding: 32px 22px;
  }
}

/* =========================
   HISTORIA · NUEVOS HORIZONTES
========================= */

.history-growth {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(133, 24, 47, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #faf8f4, #ffffff);
}

.history-growth-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 75px;
}

.history-growth-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(12, 34, 66, 0.2);
}

.history-growth-image img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.history-growth-image:hover img {
  transform: scale(1.04);
}

.history-growth-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(4, 14, 30, 0.88) 100%
    );
}

.history-growth-year {
  position: absolute;
  z-index: 2;
  left: 35px;
  right: 35px;
  bottom: 34px;
  color: #ffffff;
}

.history-growth-year strong {
  display: block;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 4.8rem;
  line-height: 1;
}

.history-growth-year span {
  display: block;
  max-width: 330px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

.history-growth-content h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}

.history-growth-content > p {
  margin-top: 17px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.history-growth-content .history-chapter-phrase {
  margin: 24px 0 25px !important;
}

.history-growth-highlight {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 24px;
  background: rgba(226, 170, 22, 0.1);
  border: 1px solid rgba(226, 170, 22, 0.38);
  border-radius: 18px;
}

.history-growth-highlight i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--navy);
  border-radius: 15px;
  color: var(--gold);
  font-size: 1.25rem;
}

.history-growth-highlight p {
  color: var(--navy);
  line-height: 1.65;
}

.history-growth-highlight strong {
  color: var(--wine);
}

.history-growth-lessons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 80px;
}

.history-growth-lessons article {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 18px 42px rgba(19, 47, 93, 0.08);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.history-growth-lessons article:hover {
  transform: translateY(-7px);
  border-color: rgba(226, 170, 22, 0.55);
  box-shadow: 0 25px 50px rgba(19, 47, 93, 0.13);
}

.history-growth-lessons i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background: rgba(19, 47, 93, 0.08);
  border-radius: 16px;
  color: var(--wine);
  font-size: 1.25rem;
}

.history-growth-lessons h3 {
  margin-top: 20px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
}

.history-growth-lessons p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

@media (max-width: 960px) {
  .history-growth-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .history-growth-image,
  .history-growth-image img {
    min-height: 520px;
  }

  .history-growth-lessons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .history-growth-image,
  .history-growth-image img {
    min-height: 430px;
  }

  .history-growth-image {
    border-radius: 22px;
  }

  .history-growth-year {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .history-growth-year strong {
    font-size: 3.8rem;
  }

  .history-growth-highlight {
    grid-template-columns: 1fr;
  }

  .history-growth-lessons {
    grid-template-columns: 1fr;
    margin-top: 55px;
  }
}

/* =========================
   HISTORIA · LOS FRUTOS
========================= */

.history-achievements {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(226, 170, 22, 0.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(133, 24, 47, 0.08),
      transparent 28%
    ),
    #ffffff;
}

.history-achievements::before {
  content: "2017";
  position: absolute;
  top: 110px;
  left: -45px;
  color: rgba(19, 47, 93, 0.035);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(9rem, 19vw, 16rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.history-achievements-header {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.history-achievements-header h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}

.history-achievements-header .history-chapter-phrase {
  max-width: 740px;
  margin: 24px auto 26px !important;
  padding-left: 0;
  border-left: 0;
}

.history-achievements-header > p:not(.history-chapter-phrase) {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Línea de tiempo */

.history-achievements-timeline {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 36px;
  max-width: 1080px;
  margin: 80px auto 0;
}

.history-achievements-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 165px;
  width: 2px;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--gold) 8%,
      var(--gold) 92%,
      transparent
    );
}

.history-achievement-item {
  display: grid;
  grid-template-columns: 165px 1fr;
  align-items: center;
  position: relative;
}

.history-achievement-year {
  position: relative;
  z-index: 3;
  padding-right: 35px;
  text-align: right;
}

.history-achievement-year::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--gold);
  border: 5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(226, 170, 22, 0.25);
}

.history-achievement-year strong {
  display: block;
  color: var(--wine);
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.history-achievement-year span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.history-achievement-content {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  margin-left: 40px;
  padding: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(19, 47, 93, 0.09);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.history-achievement-content:hover {
  transform: translateY(-6px);
  border-color: rgba(226, 170, 22, 0.55);
  box-shadow: 0 28px 58px rgba(19, 47, 93, 0.14);
}

.history-achievement-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy)
    );
  border-radius: 18px;
  color: var(--gold);
  font-size: 1.35rem;
  box-shadow: 0 14px 28px rgba(19, 47, 93, 0.18);
}

.history-achievement-content h3 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.22rem;
  line-height: 1.35;
}

.history-achievement-content p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.history-achievement-content strong {
  color: var(--wine);
}

.history-achievement-content blockquote {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--gold);
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.65;
  font-style: italic;
}

/* Cierre */

.history-achievements-summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 24px;
  max-width: 850px;
  margin: 75px auto 0;
  padding: 32px 38px;
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.14),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy)
    );
  border: 1px solid rgba(226, 170, 22, 0.35);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(12, 34, 66, 0.2);
}

.history-achievements-summary-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.13);
  border: 1px solid rgba(226, 170, 22, 0.3);
  border-radius: 18px;
  color: var(--gold);
  font-size: 1.4rem;
}

.history-achievements-summary span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-achievements-summary p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* Responsive */

@media (max-width: 760px) {
  .history-achievements-timeline::before {
    left: 10px;
  }

  .history-achievement-item {
    grid-template-columns: 1fr;
    padding-left: 38px;
  }

  .history-achievement-year {
    padding-right: 0;
    text-align: left;
  }

  .history-achievement-year::after {
    top: 8px;
    right: auto;
    left: -37px;
    transform: none;
  }

  .history-achievement-content {
    grid-template-columns: 52px 1fr;
    gap: 18px;
    margin-top: 18px;
    margin-left: 0;
    padding: 28px 24px;
  }

  .history-achievement-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
}

@media (max-width: 520px) {
  .history-achievement-content {
    grid-template-columns: 1fr;
  }

  .history-achievements-summary {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
}

/* =========================
   HISTORIA · SIN FRONTERAS
========================= */

.history-international {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-dark);
  color: #ffffff;
}

.history-international-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    url("../img/historia-internacional.jpg")
    center center / cover no-repeat;
}

.history-international-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(
      135deg,
      rgba(4, 14, 30, 0.96),
      rgba(12, 34, 66, 0.91) 55%,
      rgba(104, 17, 37, 0.84)
    );
}

.history-international::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.1;
  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(255, 255, 255, 0.08) 47%,
      rgba(255, 255, 255, 0.08) 49%,
      transparent 50%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      rgba(226, 170, 22, 0.08) 47%,
      rgba(226, 170, 22, 0.08) 49%,
      transparent 50%
    );
  background-size: 58px 58px;
}

.history-international-content {
  position: relative;
  z-index: 2;
}

.history-international-header {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.history-international-header h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.12;
}

.history-international-header .history-chapter-phrase {
  max-width: 740px;
  margin: 24px auto 26px !important;
  padding-left: 0;
  border-left: 0;
  color: var(--gold) !important;
}

.history-international-header > p:not(.history-chapter-phrase) {
  max-width: 760px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  line-height: 1.8;
}

/* Ruta */

.history-international-route {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
  max-width: 850px;
  margin: 60px auto 0;
}

.history-route-point {
  display: flex;
  align-items: center;
  gap: 16px;
}

.history-route-point:last-child {
  justify-content: flex-end;
  text-align: right;
}

.history-route-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.13);
  border: 1px solid rgba(226, 170, 22, 0.35);
  border-radius: 17px;
  color: var(--gold);
  font-size: 1.3rem;
}

.history-route-point strong {
  display: block;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

.history-route-point div > span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}

.history-route-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}

.history-route-line span {
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(226, 170, 22, 0.15),
      var(--gold)
    );
}

.history-route-line span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--gold),
      rgba(226, 170, 22, 0.15)
    );
}

/* Tarjetas */

.history-international-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 70px;
}

.history-international-card {
  position: relative;
  min-height: 415px;
  padding: 34px 27px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.history-international-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(226, 170, 22, 0.48);
}

.history-international-card-featured {
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.17),
      transparent 36%
    ),
    rgba(133, 24, 47, 0.3);
  border-color: rgba(226, 170, 22, 0.38);
}

.history-international-card-year {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(255, 255, 255, 0.09);
  font-family: "Montserrat", sans-serif;
  font-size: 3.3rem;
  font-weight: 800;
  line-height: 1;
}

.history-international-card-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.13);
  border: 1px solid rgba(226, 170, 22, 0.3);
  border-radius: 17px;
  color: var(--gold);
  font-size: 1.25rem;
}

.history-international-country {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 25px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-international-card h3 {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.13rem;
  line-height: 1.4;
}

.history-international-card p {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.91rem;
  line-height: 1.72;
}

.history-international-secret {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 14px;
  background: rgba(4, 14, 30, 0.28);
  border: 1px solid rgba(226, 170, 22, 0.25);
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.74);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  cursor: default;
}

.history-international-secret i {
  color: var(--gold);
}

/* Frase final */

.history-international-quote {
  max-width: 880px;
  margin: 75px auto 0;
  text-align: center;
}

.history-international-quote i {
  color: var(--gold);
  font-size: 2rem;
}

.history-international-quote p {
  margin-top: 16px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .history-international-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .history-international-route {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .history-route-point,
  .history-route-point:last-child {
    justify-content: flex-start;
    text-align: left;
  }

  .history-route-line {
    width: 150px;
    transform: rotate(90deg);
    margin: 20px auto;
  }
}

@media (max-width: 620px) {
  .history-international-cards {
    grid-template-columns: 1fr;
  }

  .history-international-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .history-international-quote {
    margin-top: 55px;
  }
}

/* =========================
   HISTORIA · COMUNIDAD
========================= */

.history-community {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(226, 170, 22, 0.1),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(133, 24, 47, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #ffffff, #faf8f4);
}

.history-community::before {
  content: "COMUNIDAD";
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(19, 47, 93, 0.028);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.history-community-header {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.history-community-header h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.12;
}

.history-community-header .history-chapter-phrase {
  max-width: 760px;
  margin: 24px auto 26px !important;
  padding-left: 0;
  border-left: 0;
}

.history-community-header > p:not(.history-chapter-phrase) {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Composición principal */

.history-community-showcase {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-areas:
    "left image right"
    "bottom-left image bottom-right";
  gap: 24px;
  align-items: stretch;
  margin-top: 75px;
}

.history-community-image {
  grid-area: image;
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(12, 34, 66, 0.2);
}

.history-community-image img {
  width: 100%;
  height: 100%;
  min-height: 690px;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.history-community-image:hover img {
  transform: scale(1.04);
}

.history-community-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 30, 0.02) 35%,
      rgba(4, 14, 30, 0.88) 100%
    );
}

.history-community-image-content {
  position: absolute;
  z-index: 2;
  left: 32px;
  right: 32px;
  bottom: 32px;
}

.history-community-image-content span {
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-community-image-content strong {
  display: block;
  margin-top: 10px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.35rem;
  line-height: 1.45;
}

.history-community-card {
  position: relative;
  padding: 30px 26px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(19, 47, 93, 0.09);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.history-community-card:hover {
  transform: translateY(-7px);
  border-color: rgba(226, 170, 22, 0.55);
  box-shadow: 0 27px 55px rgba(19, 47, 93, 0.14);
}

.history-community-card-left {
  grid-area: left;
}

.history-community-card-right {
  grid-area: right;
}

.history-community-card-bottom-left {
  grid-area: bottom-left;
}

.history-community-card-bottom-right {
  grid-area: bottom-right;
}

.history-community-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy)
    );
  border-radius: 17px;
  color: var(--gold);
  font-size: 1.3rem;
  box-shadow: 0 13px 26px rgba(19, 47, 93, 0.18);
}

.history-community-card > span {
  display: block;
  margin-top: 23px;
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.history-community-card h3 {
  margin-top: 7px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  line-height: 1.35;
}

.history-community-card p {
  margin-top: 13px;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.72;
}

/* AFLA */

.history-community-recognition {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 26px;
  max-width: 920px;
  margin: 75px auto 0;
  padding: 38px 42px;
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.15),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy) 68%,
      var(--wine-dark)
    );
  border: 1px solid rgba(226, 170, 22, 0.37);
  border-radius: 26px;
  box-shadow: 0 26px 65px rgba(12, 34, 66, 0.22);
}

.history-community-recognition-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.13);
  border: 1px solid rgba(226, 170, 22, 0.3);
  border-radius: 20px;
  color: var(--gold);
  font-size: 1.5rem;
}

.history-community-recognition span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.history-community-recognition h3 {
  margin-top: 7px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.45rem;
}

.history-community-recognition p {
  margin-top: 11px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.94rem;
  line-height: 1.75;
}

/* Valores */

.history-community-values {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 70px;
}

.history-community-values article {
  padding: 26px 22px;
  text-align: center;
  background: rgba(19, 47, 93, 0.045);
  border: 1px solid rgba(19, 47, 93, 0.1);
  border-radius: 18px;
}

.history-community-values strong {
  color: var(--wine);
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
}

.history-community-values p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.62;
}

/* Cierre */

.history-community-closing {
  max-width: 850px;
  margin: 70px auto 0;
  text-align: center;
}

.history-community-closing i {
  color: var(--gold);
  font-size: 2rem;
}

.history-community-closing p {
  margin-top: 16px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.5;
}

/* Responsive */

@media (max-width: 1080px) {
  .history-community-showcase {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "image image"
      "left right"
      "bottom-left bottom-right";
  }

  .history-community-image,
  .history-community-image img {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .history-community-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "left"
      "right"
      "bottom-left"
      "bottom-right";
  }

  .history-community-image,
  .history-community-image img {
    min-height: 480px;
  }

  .history-community-values {
    grid-template-columns: repeat(2, 1fr);
  }

  .history-community-recognition {
    grid-template-columns: 1fr;
    padding: 32px 26px;
  }
}

@media (max-width: 520px) {
  .history-community-image,
  .history-community-image img {
    min-height: 410px;
  }

  .history-community-image {
    border-radius: 22px;
  }

  .history-community-image-content {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .history-community-card {
    padding: 27px 23px;
  }

  .history-community-values {
    grid-template-columns: 1fr;
  }
}

/* =========================
   HISTORIA · EL LEGADO
========================= */

.history-legacy {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(226, 170, 22, 0.11),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 74%,
      rgba(133, 24, 47, 0.1),
      transparent 30%
    ),
    #ffffff;
}

.history-legacy::before {
  content: "EL LEGADO";
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(19, 47, 93, 0.028);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.history-legacy-header {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.history-legacy-header h2 {
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.12;
}

.history-legacy-header .history-chapter-phrase {
  max-width: 740px;
  margin: 24px auto 26px !important;
  padding-left: 0;
  border-left: 0;
}

.history-legacy-header > p:not(.history-chapter-phrase) {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Fotografía principal */

.history-legacy-photo {
  position: relative;
  z-index: 2;
  min-height: 620px;
  margin-top: 70px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 35px 80px rgba(12, 34, 66, 0.22);
}

.history-legacy-photo img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.history-legacy-photo:hover img {
  transform: scale(1.035);
}

.history-legacy-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 14, 30, 0.91) 0%,
      rgba(4, 14, 30, 0.65) 43%,
      rgba(4, 14, 30, 0.15) 100%
    ),
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(4, 14, 30, 0.55) 100%
    );
}

.history-legacy-photo-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 65px;
  width: min(520px, calc(100% - 130px));
  transform: translateY(-50%);
}

.history-legacy-photo-content span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.history-legacy-photo-content h3 {
  margin-top: 12px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.16;
}

.history-legacy-photo-content p {
  max-width: 470px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.8;
}

/* Generaciones */

.history-legacy-generations {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 75px;
}

.history-legacy-generation {
  position: relative;
  min-height: 360px;
  padding: 38px 34px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 25px;
  box-shadow: 0 22px 52px rgba(19, 47, 93, 0.1);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.history-legacy-generation:hover {
  transform: translateY(-7px);
  border-color: rgba(226, 170, 22, 0.55);
  box-shadow: 0 30px 62px rgba(19, 47, 93, 0.15);
}

.history-legacy-generation::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  background: rgba(226, 170, 22, 0.08);
  border-radius: 50%;
}

.history-legacy-generation-number {
  position: absolute;
  top: 28px;
  right: 30px;
  color: rgba(19, 47, 93, 0.09);
  font-family: "Montserrat", sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
}

.history-legacy-generation-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy)
    );
  border-radius: 18px;
  color: var(--gold);
  font-size: 1.4rem;
  box-shadow: 0 14px 28px rgba(19, 47, 93, 0.2);
}

.history-legacy-generation > span {
  display: block;
  margin-top: 25px;
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-legacy-generation h3 {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.35rem;
}

.history-legacy-generation p {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.history-legacy-connector {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}

.history-legacy-connector span {
  height: 1px;
  background: rgba(226, 170, 22, 0.45);
}

/* Mensaje central */

.history-legacy-message {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 28px;
  max-width: 960px;
  margin: 75px auto 0;
  padding: 42px 46px;
  background:
    radial-gradient(
      circle at top right,
      rgba(226, 170, 22, 0.16),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy) 68%,
      var(--wine-dark)
    );
  border: 1px solid rgba(226, 170, 22, 0.36);
  border-radius: 28px;
  box-shadow: 0 28px 68px rgba(12, 34, 66, 0.23);
}

.history-legacy-message-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  background: rgba(226, 170, 22, 0.13);
  border: 1px solid rgba(226, 170, 22, 0.32);
  border-radius: 21px;
  color: var(--gold);
  font-size: 1.65rem;
}

.history-legacy-message span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.history-legacy-message h3 {
  margin-top: 7px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.55rem;
}

.history-legacy-message p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.96rem;
  line-height: 1.76;
}

/* Valores */

.history-legacy-values {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 70px;
}

.history-legacy-values article {
  padding: 30px 23px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(19, 47, 93, 0.08);
}

.history-legacy-values i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background: rgba(19, 47, 93, 0.07);
  border-radius: 16px;
  color: var(--wine);
  font-size: 1.25rem;
}

.history-legacy-values strong {
  display: block;
  margin-top: 18px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
}

.history-legacy-values p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.65;
}

/* Cierre final */

.history-legacy-final {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 90px auto 0;
  padding: 70px 60px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(226, 170, 22, 0.2),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      var(--navy-dark),
      var(--navy) 60%,
      var(--wine-dark)
    );
  border: 1px solid rgba(226, 170, 22, 0.4);
  border-radius: 34px;
  box-shadow: 0 35px 85px rgba(12, 34, 66, 0.27);
}

.history-legacy-final::before {
  content: "2009";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.035);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(8rem, 18vw, 14rem);
  font-weight: 800;
  line-height: 1;
}

.history-legacy-final > * {
  position: relative;
  z-index: 2;
}

.history-legacy-final-kicker {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.history-legacy-final h2 {
  margin-top: 12px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
}

.history-legacy-final > p {
  max-width: 720px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  line-height: 1.8;
}

.history-legacy-final blockquote {
  max-width: 760px;
  margin: 35px auto 0;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.55;
}

.history-legacy-signature {
  margin-top: 38px;
}

.history-legacy-signature::before {
  content: "";
  display: block;
  width: 65px;
  height: 2px;
  margin: 0 auto 20px;
  background: var(--gold);
}

.history-legacy-signature span {
  display: block;
  color: var(--gold);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

.history-legacy-signature small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Responsive */

@media (max-width: 900px) {
  .history-legacy-generations {
    grid-template-columns: 1fr;
  }

  .history-legacy-connector {
    width: 160px;
    margin: 5px auto;
    transform: rotate(90deg);
  }

  .history-legacy-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .history-legacy-photo,
  .history-legacy-photo img {
    min-height: 520px;
  }

  .history-legacy-photo-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 14, 30, 0.15),
        rgba(4, 14, 30, 0.9)
      );
  }

  .history-legacy-photo-content {
    top: auto;
    right: 28px;
    bottom: 34px;
    left: 28px;
    width: auto;
    transform: none;
  }

  .history-legacy-message {
    grid-template-columns: 1fr;
    padding: 35px 28px;
  }

  .history-legacy-final {
    padding: 55px 30px;
  }
}

@media (max-width: 520px) {
  .history-legacy-photo,
  .history-legacy-photo img {
    min-height: 460px;
  }

  .history-legacy-photo {
    border-radius: 24px;
  }

  .history-legacy-generation {
    min-height: auto;
    padding: 32px 25px;
  }

  .history-legacy-values {
    grid-template-columns: 1fr;
  }

  .history-legacy-final {
    margin-top: 65px;
    border-radius: 26px;
  }
}

/* =========================
   LÍNEA DE TIEMPO FLOTANTE
========================= */

.history-floating-timeline {
  position: fixed;
  z-index: 900;
  top: 50%;
  left: 18px;
  width: 210px;
  transform: translateY(-50%);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease;
}

.history-floating-timeline.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-20px, -50%);
  pointer-events: none;
}

.history-floating-timeline-inner {
  position: relative;
  width: 54px;
  overflow: hidden;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(19, 47, 93, 0.12);
  border-radius: 20px;
  box-shadow: 0 20px 55px rgba(12, 34, 66, 0.16);
  backdrop-filter: blur(14px);
  transition:
    width 0.35s ease,
    padding 0.35s ease;
}

.history-floating-timeline:hover
.history-floating-timeline-inner,
.history-floating-timeline.is-open
.history-floating-timeline-inner {
  width: 210px;
  padding: 22px 18px 20px;
}

.history-floating-title {
  display: block;
  width: 150px;
  margin-bottom: 16px;
  padding-left: 26px;
  opacity: 0;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Línea base */

.history-floating-progress {
  position: absolute;
  top: 68px;
  bottom: 34px;
  left: 25px;
  width: 2px;
  overflow: hidden;
  background: rgba(19, 47, 93, 0.13);
  border-radius: 20px;
}

.history-floating-progress span {
  display: block;
  width: 100%;
  height: 0;
  background:
    linear-gradient(
      180deg,
      var(--gold),
      var(--wine)
    );
  border-radius: inherit;
  transition: height 0.35s ease;
}

/* Elementos */

.history-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 55px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
}

.history-timeline-dot {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 4px;
  background: #ffffff;
  border: 3px solid #c8cbd1;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.history-timeline-text {
  display: block;
  min-width: 0;
}

.history-timeline-text small {
  display: block;
  color: #989da6;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.history-timeline-text strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* Capítulos ya recorridos */

.history-timeline-item.done .history-timeline-dot {
  background: var(--gold);
  border-color: var(--gold);
}

.history-timeline-item.done .history-timeline-text small {
  color: var(--gold-dark, #a87908);
}

/* Capítulo actual */

.history-timeline-item.active .history-timeline-dot {
  background-color: var(--wine, #861f41) !important;
  border-color: var(--wine, #861f41) !important;
  transform: scale(1.35);

  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 0 0 9px rgba(134, 31, 65, 0.18);
}

.history-timeline-item.active .history-timeline-text small {
  color: var(--wine, #861f41) !important;
}

.history-timeline-item.active .history-timeline-text strong {
  color: var(--wine, #861f41) !important;
  transform: translateX(3px);
}

/* Hover */

.history-timeline-item:hover .history-timeline-dot {
  border-color: var(--gold);
  transform: scale(1.15);
}

.history-timeline-item:hover .history-timeline-text strong {
  color: var(--wine);
}

/* Evita que el título del capítulo quede detrás del header */

section[id^="capitulo-"] {
  scroll-margin-top: 105px;
}

/* Ocultar en pantallas pequeñas */

@media (max-width: 1250px) {
  .history-floating-timeline {
    left: 12px;
    width: 185px;
  }

  .history-floating-timeline-inner {
    padding-right: 12px;
    padding-left: 14px;
  }

  .history-timeline-text strong {
    font-size: 0.75rem;
  }
}

@media (max-width: 1050px) {
  .history-floating-timeline {
    display: none;
  }
}

.history-floating-timeline:hover
.history-floating-title,
.history-floating-timeline.is-open
.history-floating-title {
  opacity: 1;
}

.history-floating-progress {
  position: absolute;
  top: 65px;
  bottom: 31px;
  left: 25px;
  width: 2px;
  overflow: hidden;
  background: rgba(19, 47, 93, 0.13);
  border-radius: 20px;
}

.history-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 175px;
  min-height: 55px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: none;
}

.history-timeline-text {
  display: block;
  min-width: 130px;
  opacity: 0;
  transform: translateX(-8px);
  white-space: nowrap;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.history-floating-timeline:hover
.history-timeline-text,
.history-floating-timeline.is-open
.history-timeline-text {
  opacity: 1;
  transform: translateX(0);
}

.inner-hero-projects .inner-hero-background{
    background-image:url("../img/hero-proyectos.jpg");
}

/*=========================
  INTRODUCCIÓN PROYECTOS
=========================*/

.mission-introduction{
  position:relative;
  overflow:hidden;
}

.mission-introduction-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}

.mission-introduction-content h2{
  margin:18px 0 28px;
}

.mission-introduction-content h2 span {
  color: var(--wine);
}

.mission-introduction-lead {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 22px;
}

.mission-introduction-content p{
  margin-bottom:18px;
}

.mission-introduction-image{
  position:relative;
}

.mission-introduction-image img{
  width:100%;
  display:block;
  border-radius:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.mission-introduction-badge{
  position:absolute;
  left:-25px;
  bottom:30px;

  display:flex;
  align-items:center;
  gap:16px;

  background:#fff;

  padding:18px 22px;

  border-radius:18px;

  box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.mission-introduction-badge i{
  width:58px;
  height:58px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:var(--wine);
  color:#fff;

  font-size:1.4rem;
}

.mission-introduction-badge strong{
  display:block;
  color:var(--navy);
}

.mission-introduction-badge span{
  color:#777;
  font-size:.92rem;
}

@media (max-width:900px){

  .mission-introduction-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .mission-introduction-badge{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:-40px;
    width:calc(100% - 40px);
    margin-inline:auto;
  }

}

/*=========================
  SECCIÓN ORGANIZAMOS
=========================*/

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

.mission-heading{
  max-width:760px;
  margin-bottom:56px;
}

.mission-heading h2{
  margin:18px 0 22px;
}

.mission-heading h2 span{
  color:var(--wine);
}

.mission-heading p{
  max-width:680px;
  font-size:1.05rem;
  line-height:1.8;
}


/* Proyecto principal */

.mission-project-featured{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:64px;

  margin-bottom:55px;
  padding:34px;

  background:#fff;
  border-radius:28px;

  box-shadow:0 24px 65px rgba(15,32,60,.1);
}

.mission-project-image{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}

.mission-project-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(15,32,60,.22),
    transparent 55%
  );
  pointer-events:none;
}

.mission-project-image img{
  width:100%;
  height:470px;
  display:block;
  object-fit:cover;

  transition:transform .7s ease;
}

.mission-project-featured:hover
.mission-project-image img{
  transform:scale(1.04);
}

.mission-project-content{
  padding:18px 20px 18px 0;
}

.mission-project-tag{
  display:inline-flex;
  align-items:center;

  margin-bottom:18px;
  padding:8px 14px;

  border-radius:50px;

  background:rgba(132,31,56,.1);
  color:var(--wine);

  font-family:"Montserrat", sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mission-project-content h3{
  margin-bottom:22px;

  color:var(--navy);

  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.08;
}

.mission-project-content p{
  margin-bottom:18px;
  line-height:1.8;
}

.mission-project-content .btn{
  margin-top:12px;
}


/* Proyectos secundarios */

.mission-projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:30px;
}

.mission-small-project{
  overflow:hidden;

  background:#fff;
  border:1px solid rgba(15,32,60,.08);
  border-radius:24px;

  box-shadow:0 16px 40px rgba(15,32,60,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.mission-small-project:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 55px rgba(15,32,60,.13);
}

.mission-small-project img{
  width:100%;
  height:285px;
  display:block;
  object-fit:cover;

  transition:transform .65s ease;
}

.mission-small-project:hover img{
  transform:scale(1.045);
}

.mission-small-project div{
  padding:28px 30px 32px;
}

.mission-small-project span{
  display:block;
  margin-bottom:10px;

  color:var(--wine);

  font-family:"Montserrat", sans-serif;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mission-small-project h3{
  margin-bottom:14px;

  color:var(--navy);

  font-family:"Montserrat", sans-serif;
  font-size:1.45rem;
}

.mission-small-project p{
  margin:0;
  line-height:1.75;
}


/* Responsive */

@media (max-width:950px){

  .mission-project-featured{
    grid-template-columns:1fr;
    gap:34px;
  }

  .mission-project-content{
    padding:0 8px 10px;
  }

  .mission-project-image img{
    height:420px;
  }

}

@media (max-width:720px){

  .mission-heading{
    margin-bottom:38px;
  }

  .mission-project-featured{
    padding:18px;
    border-radius:22px;
  }

  .mission-project-image{
    border-radius:17px;
  }

  .mission-project-image img{
    height:310px;
  }

  .mission-projects-grid{
    grid-template-columns:1fr;
  }

  .mission-small-project img{
    height:260px;
  }

}

@media (max-width:480px){

  .mission-project-featured{
    padding:13px;
  }

  .mission-project-image img{
    height:250px;
  }

  .mission-project-content h3{
    font-size:1.9rem;
  }

  .mission-small-project img{
    height:230px;
  }

  .mission-small-project div{
    padding:24px 22px 27px;
  }

}

/*=========================
  SECCIÓN REPRESENTAMOS
=========================*/

.mission-representation{
  position:relative;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8f4f1 100%
  );
}

.representation-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
  margin-bottom:58px;
}


/* Imagen principal */

.representation-main-image{
  position:relative;
  overflow:hidden;
  min-height:560px;
  border-radius:28px;
  box-shadow:0 26px 70px rgba(15,32,60,.13);
}

.representation-main-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(15,32,60,.82) 0%,
    rgba(15,32,60,.18) 45%,
    transparent 72%
  );
  pointer-events:none;
}

.representation-main-image img{
  width:100%;
  height:560px;
  display:block;
  object-fit:cover;
  transition:transform .7s ease;
}

.representation-main-image:hover img{
  transform:scale(1.045);
}

.representation-image-caption{
  position:absolute;
  z-index:2;
  left:32px;
  right:32px;
  bottom:30px;
  color:#fff;
}

.representation-image-caption span{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-family:"Montserrat", sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.representation-image-caption strong{
  display:block;
  max-width:460px;
  font-family:"Montserrat", sans-serif;
  font-size:clamp(1.45rem, 3vw, 2.2rem);
  line-height:1.15;
}


/* Contenido */

.representation-content h3{
  margin:18px 0 22px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.1;
}

.representation-content > p{
  margin-bottom:18px;
  line-height:1.8;
}


/* Estadísticas */

.representation-stats{
  display:grid;
  gap:16px;
  margin-top:30px;
}

.representation-stat{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  background:#fff;
  border:1px solid rgba(15,32,60,.08);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(15,32,60,.06);
}

.representation-stat i{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(132,31,56,.1);
  color:var(--wine);
  font-size:1.25rem;
}

.representation-stat strong{
  display:block;
  margin-bottom:3px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:1rem;
}

.representation-stat span{
  color:#6d7380;
  font-size:.94rem;
}


/* Tarjetas inferiores */

.representation-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.representation-card{
  position:relative;
  overflow:hidden;
  padding:34px 30px 32px;
  background:#fff;
  border:1px solid rgba(15,32,60,.08);
  border-radius:22px;
  box-shadow:0 16px 42px rgba(15,32,60,.07);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.representation-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:linear-gradient(
    90deg,
    var(--wine),
    var(--gold)
  );
}

.representation-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 58px rgba(15,32,60,.12);
}

.representation-card-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:18px;
  background:var(--navy);
  color:#fff;
  font-size:1.35rem;
  transition:
    transform .35s ease,
    background .35s ease;
}

.representation-card:hover
.representation-card-icon{
  transform:rotate(-5deg) scale(1.05);
  background:var(--wine);
}

.representation-card h3{
  margin-bottom:14px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:1.28rem;
  line-height:1.3;
}

.representation-card p{
  margin:0;
  line-height:1.75;
}


/* Responsive */

@media (max-width:980px){

  .representation-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .representation-main-image,
  .representation-main-image img{
    min-height:470px;
    height:470px;
  }

  .representation-cards{
    grid-template-columns:repeat(2, 1fr);
  }

  .representation-card:last-child{
    grid-column:1 / -1;
  }

}

@media (max-width:720px){

  .representation-layout{
    margin-bottom:42px;
  }

  .representation-main-image,
  .representation-main-image img{
    min-height:380px;
    height:380px;
  }

  .representation-image-caption{
    left:24px;
    right:24px;
    bottom:24px;
  }

  .representation-cards{
    grid-template-columns:1fr;
  }

  .representation-card:last-child{
    grid-column:auto;
  }

}

@media (max-width:480px){

  .representation-main-image,
  .representation-main-image img{
    min-height:310px;
    height:310px;
  }

  .representation-image-caption{
    left:20px;
    right:20px;
    bottom:20px;
  }

  .representation-stat{
    align-items:flex-start;
    padding:16px;
  }

  .representation-stat i{
    flex-basis:48px;
    width:48px;
    height:48px;
  }

  .representation-card{
    padding:30px 24px 27px;
  }

}

/*=========================
  SECCIÓN COMPARTIMOS
=========================*/

.mission-sharing{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.sharing-feature{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:64px;
  align-items:center;
  margin-bottom:56px;
}


/* Contenido principal */

.sharing-feature-content h3{
  margin:18px 0 22px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.1;
}

.sharing-feature-content p{
  margin-bottom:18px;
  line-height:1.8;
}


/* Imagen */

.sharing-feature-image{
  position:relative;
}

.sharing-feature-image img{
  width:100%;
  height:500px;
  display:block;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 26px 70px rgba(15,32,60,.13);
}

.sharing-feature-image::before{
  content:"";
  position:absolute;
  top:-18px;
  right:-18px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(201,161,74,.18);
  z-index:-1;
}

.sharing-feature-image::after{
  content:"";
  position:absolute;
  left:-22px;
  bottom:35px;
  width:95px;
  height:95px;
  border-radius:24px;
  background:rgba(132,31,56,.12);
  transform:rotate(12deg);
  z-index:-1;
}

.sharing-feature-message{
  position:absolute;
  left:-28px;
  bottom:30px;
  display:flex;
  align-items:center;
  gap:16px;
  max-width:360px;
  padding:18px 22px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(15,32,60,.14);
}

.sharing-feature-message i{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--wine);
  color:#fff;
  font-size:1.25rem;
}

.sharing-feature-message strong{
  display:block;
  margin-bottom:3px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:.98rem;
}

.sharing-feature-message span{
  color:#707681;
  font-size:.9rem;
  line-height:1.4;
}


/* Tarjetas */

.sharing-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.sharing-card{
  position:relative;
  min-height:100%;
  padding:34px 30px 32px;
  overflow:hidden;
  background:#f9f6f3;
  border:1px solid rgba(15,32,60,.07);
  border-radius:22px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.sharing-card:hover{
  transform:translateY(-7px);
  background:#fff;
  box-shadow:0 22px 52px rgba(15,32,60,.11);
}

.sharing-card-number{
  position:absolute;
  top:20px;
  right:24px;
  color:rgba(15,32,60,.08);
  font-family:"Montserrat", sans-serif;
  font-size:3.2rem;
  font-weight:800;
  line-height:1;
}

.sharing-card > i{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border-radius:18px;
  background:rgba(132,31,56,.1);
  color:var(--wine);
  font-size:1.35rem;
  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease;
}

.sharing-card:hover > i{
  transform:rotate(-5deg) scale(1.05);
  background:var(--wine);
  color:#fff;
}

.sharing-card h3{
  margin-bottom:14px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:1.28rem;
  line-height:1.3;
}

.sharing-card p{
  margin:0;
  line-height:1.75;
}


/* Responsive */

@media (max-width:980px){

  .sharing-feature{
    grid-template-columns:1fr;
    gap:42px;
  }

  .sharing-feature-image img{
    height:440px;
  }

  .sharing-cards{
    grid-template-columns:repeat(2, 1fr);
  }

  .sharing-card:last-child{
    grid-column:1 / -1;
  }

}

@media (max-width:720px){

  .sharing-feature{
    margin-bottom:42px;
  }

  .sharing-feature-image img{
    height:360px;
    border-radius:22px;
  }

  .sharing-feature-message{
    position:relative;
    left:auto;
    bottom:auto;
    width:calc(100% - 36px);
    max-width:none;
    margin:-34px auto 0;
  }

  .sharing-cards{
    grid-template-columns:1fr;
  }

  .sharing-card:last-child{
    grid-column:auto;
  }

}

@media (max-width:480px){

  .sharing-feature-image img{
    height:290px;
  }

  .sharing-feature-message{
    align-items:flex-start;
    padding:16px 18px;
  }

  .sharing-feature-message i{
    flex-basis:48px;
    width:48px;
    height:48px;
  }

  .sharing-card{
    padding:30px 24px 27px;
  }

  .sharing-card-number{
    font-size:2.7rem;
  }

}

/*=========================
  SECCIÓN FORTALECEMOS
=========================*/

.mission-growth{
  position:relative;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    #f8f4f1 0%,
    #ffffff 100%
  );
}

.growth-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}


/* Imagen */

.growth-image{
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 26px 70px rgba(15,32,60,.12);
}

.growth-image img{
  width:100%;
  height:560px;
  display:block;
  object-fit:cover;
  transition:transform .7s ease;
}

.growth-image:hover img{
  transform:scale(1.05);
}


/* Contenido */

.growth-content h3{
  margin:18px 0 22px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
}

.growth-content p{
  margin-bottom:18px;
  line-height:1.8;
}


/* Lista */

.growth-highlights{
  display:grid;
  gap:18px;
  margin-top:34px;
}

.growth-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:#fff;
  border:1px solid rgba(15,32,60,.08);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(15,32,60,.06);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.growth-item:hover{
  transform:translateX(8px);
  box-shadow:0 18px 40px rgba(15,32,60,.1);
}

.growth-item i{
  width:56px;
  height:56px;
  flex:0 0 56px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(132,31,56,.1);
  color:var(--wine);

  font-size:1.3rem;
}

.growth-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
}

.growth-item span{
  color:#6d7380;
  line-height:1.5;
}


/* Responsive */

@media (max-width:980px){

  .growth-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .growth-image img{
    height:450px;
  }

}

@media (max-width:720px){

  .growth-image img{
    height:340px;
  }

}

@media (max-width:480px){

  .growth-image img{
    height:280px;
  }

  .growth-item{
    align-items:flex-start;
    padding:16px;
  }

  .growth-item i{
    width:48px;
    height:48px;
    flex-basis:48px;
    font-size:1.1rem;
  }

}

/*=========================
  SECCIÓN DIFUNDIMOS
=========================*/

.mission-diffusion{
  position:relative;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8f4f1 100%
  );
}

.diffusion-layout{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:64px;
  align-items:center;
}


/* Contenido */

.diffusion-content h3{
  margin:18px 0 22px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
}

.diffusion-content p{
  margin-bottom:18px;
  line-height:1.8;
}


/* Lista */

.diffusion-highlights{
  display:grid;
  gap:18px;
  margin-top:34px;
}

.diffusion-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:#fff;
  border:1px solid rgba(15,32,60,.08);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(15,32,60,.06);
}

.diffusion-item i{
  width:56px;
  height:56px;
  flex:0 0 56px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(132,31,56,.1);
  color:var(--wine);

  font-size:1.3rem;
}

.diffusion-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
  font-family:"Montserrat", sans-serif;
}

.diffusion-item span{
  color:#6d7380;
  line-height:1.5;
}


/* Galería */

.diffusion-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.diffusion-gallery figure{
  position:relative;
  overflow:hidden;
  margin:0;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(15,32,60,.12);
}

.diffusion-gallery img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s ease;
}

.diffusion-gallery figure:hover img{
  transform:scale(1.06);
}


/* Imagen principal */

.diffusion-gallery-main{
  grid-column:1 / -1;
  height:380px;
}

.diffusion-gallery-main figcaption{

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  align-items:center;
  gap:18px;

  padding:24px 28px;

  background:linear-gradient(
    to top,
    rgba(15,32,60,.92),
    rgba(15,32,60,.35),
    transparent
  );

  color:#fff;

}

.diffusion-gallery-main i{

  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.18);

  backdrop-filter:blur(8px);

  font-size:1.3rem;

}

.diffusion-gallery-main span{
  display:block;
  color:var(--gold);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:"Montserrat", sans-serif;
  font-weight:700;
}

.diffusion-gallery-main strong{
  display:block;
  margin-top:4px;
  font-size:1.2rem;
}


/* Imágenes inferiores */

.diffusion-gallery figure:not(.diffusion-gallery-main){
  height:220px;
}


/* Responsive */

@media (max-width:980px){

  .diffusion-layout{
    grid-template-columns:1fr;
    gap:44px;
  }

}

@media (max-width:720px){

  .diffusion-gallery{
    grid-template-columns:1fr;
  }

  .diffusion-gallery-main{
    height:300px;
  }

  .diffusion-gallery figure:not(.diffusion-gallery-main){
    height:240px;
  }

}

@media (max-width:480px){

  .diffusion-gallery-main{
    height:250px;
  }

  .diffusion-gallery figure:not(.diffusion-gallery-main){
    height:200px;
  }

  .diffusion-gallery-main figcaption{
    padding:18px;
  }

  .diffusion-gallery-main i{
    width:48px;
    height:48px;
    font-size:1.1rem;
  }

}

/*=========================
  SECCIÓN IMPULSAMOS
=========================*/

.mission-future{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.future-panel{
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;

  padding:72px 68px;

  background:linear-gradient(
    135deg,
    var(--navy) 0%,
    #182d4e 55%,
    #263e63 100%
  );

  border-radius:32px;

  box-shadow:0 30px 80px rgba(15,32,60,.2);
}


/* Decoraciones */

.future-decoration{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.future-decoration-one{
  width:260px;
  height:260px;
  top:-130px;
  right:-80px;

  background:rgba(201,161,74,.14);
}

.future-decoration-two{
  width:180px;
  height:180px;
  left:-80px;
  bottom:-95px;

  background:rgba(132,31,56,.28);
}


/* Contenido */

.future-content{
  position:relative;
  z-index:2;
}

.future-kicker{
  display:inline-block;

  margin-bottom:18px;

  color:var(--gold);

  font-family:"Montserrat", sans-serif;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.future-content h2{
  margin-bottom:24px;

  color:#fff;

  font-family:"Montserrat", sans-serif;
  font-size:clamp(2.3rem,5vw,4rem);
  line-height:1.05;
}

.future-content h2 span{
  display:block;
  color:var(--gold);
}

.future-content p{
  max-width:670px;
  margin-bottom:17px;

  color:rgba(255,255,255,.78);

  font-size:1.03rem;
  line-height:1.8;
}


/* Botones */

.future-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;

  margin-top:32px;
}

.future-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.future-secondary-link{
  position:relative;

  color:#fff;

  font-family:"Montserrat", sans-serif;
  font-size:.92rem;
  font-weight:700;

  text-decoration:none;
}

.future-secondary-link::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-6px;

  width:100%;
  height:2px;

  background:var(--gold);

  transform:scaleX(0);
  transform-origin:right;

  transition:transform .3s ease;
}

.future-secondary-link:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}


/* Pilares */

.future-pillars{
  position:relative;
  z-index:2;

  display:grid;
  gap:17px;
}

.future-pillar{
  display:flex;
  align-items:center;
  gap:18px;

  padding:20px 22px;

  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);

  border-radius:19px;

  backdrop-filter:blur(8px);

  transition:
    transform .3s ease,
    background .3s ease;
}

.future-pillar:hover{
  transform:translateX(7px);
  background:rgba(255,255,255,.14);
}

.future-pillar i{
  width:56px;
  height:56px;
  flex:0 0 56px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--gold);
  color:var(--navy);

  font-size:1.25rem;
}

.future-pillar strong{
  display:block;

  margin-bottom:4px;

  color:#fff;

  font-family:"Montserrat", sans-serif;
  font-size:1rem;
}

.future-pillar span{
  color:rgba(255,255,255,.7);

  font-size:.92rem;
  line-height:1.45;
}


/* Responsive */

@media (max-width:980px){

  .future-panel{
    grid-template-columns:1fr;
    gap:44px;

    padding:58px 48px;
  }

  .future-pillars{
    grid-template-columns:repeat(3, 1fr);
  }

  .future-pillar{
    align-items:flex-start;
    flex-direction:column;
  }

}

@media (max-width:760px){

  .future-panel{
    padding:46px 30px;
    border-radius:25px;
  }

  .future-pillars{
    grid-template-columns:1fr;
  }

  .future-pillar{
    flex-direction:row;
    align-items:center;
  }

}

@media (max-width:480px){

  .future-panel{
    padding:40px 22px;
  }

  .future-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .future-pillar{
    align-items:flex-start;
    padding:17px;
  }

  .future-pillar i{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

}

/*=========================
  HERO GALERÍA
=========================*/

.gallery-hero{
  position:relative;
  min-height:520px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  background:
    url("../img/galeria/hero-galeria.jpg")
    center 38% / cover no-repeat;
}

.gallery-hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(10,24,45,.92) 0%,
      rgba(10,24,45,.72) 45%,
      rgba(10,24,45,.32) 100%
    ),
    linear-gradient(
      to top,
      rgba(10,24,45,.82) 0%,
      transparent 58%
    );
}

.gallery-hero-content{
  position:relative;
  z-index:2;

  width:100%;
  padding-top:170px;
  padding-bottom:78px;
}

.gallery-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-bottom:16px;

  color:var(--gold);

  font-family:"Montserrat", sans-serif;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.gallery-hero-kicker::before{
  content:"";

  width:42px;
  height:2px;

  background:var(--gold);
}

.gallery-hero h1{
  margin:0 0 18px;

  color:#fff;

  font-family:"Montserrat", sans-serif;
  font-size:clamp(3.4rem,8vw,6.3rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.045em;
}

.gallery-hero p{
  max-width:660px;
  margin:0;

  color:rgba(255,255,255,.84);

  font-size:1.08rem;
  line-height:1.75;
}


/*=========================
  INTRODUCCIÓN GALERÍA
=========================*/

.gallery-intro{
  position:relative;
  overflow:hidden;

  background:#fff;
}

.gallery-intro::before{
  content:"";

  position:absolute;
  top:-140px;
  right:-130px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:rgba(201,161,74,.07);

  pointer-events:none;
}

.gallery-intro-grid{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:start;
}

.gallery-intro-heading h2{
  max-width:560px;
  margin:14px 0 0;

  color:var(--navy);

  font-family:"Montserrat", sans-serif;
  font-size:clamp(2.25rem,4.8vw,3.7rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.035em;
}

.gallery-intro-heading h2 span{
  display:block;
  color:var(--wine);
}

.gallery-intro-text{
  position:relative;

  padding-left:34px;

  border-left:2px solid rgba(201,161,74,.55);
}

.gallery-intro-text p{
  margin:0;

  color:#656d79;

  font-size:1rem;
  line-height:1.85;
}

.gallery-intro-text p + p{
  margin-top:18px;
}

.gallery-intro-text .gallery-intro-lead{
  color:var(--navy);

  font-size:1.15rem;
  font-weight:600;
  line-height:1.75;
}


/*=========================
  RESPONSIVE
=========================*/

@media (max-width:900px){

  .gallery-hero{
    min-height:470px;

    background-position:center;
  }

  .gallery-hero-content{
    padding-top:150px;
    padding-bottom:64px;
  }

  .gallery-intro-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .gallery-intro-text{
    max-width:760px;
  }

}

@media (max-width:620px){

  .gallery-hero{
    min-height:430px;

    background-position:58% center;
  }

  .gallery-hero-overlay{
    background:
      linear-gradient(
        to top,
        rgba(10,24,45,.94) 0%,
        rgba(10,24,45,.64) 70%,
        rgba(10,24,45,.36) 100%
      );
  }

  .gallery-hero-content{
    padding-top:135px;
    padding-bottom:48px;
  }

  .gallery-hero p{
    font-size:1rem;
    line-height:1.65;
  }

  .gallery-intro-text{
    padding-left:22px;
  }

  .gallery-intro-text .gallery-intro-lead{
    font-size:1.05rem;
  }

}

/*=========================
  FILTROS DE GALERÍA
=========================*/

.gallery-section{
  position:relative;
  padding:30px 0 100px;
  overflow:hidden;
  background:#fff;
}

.gallery-filter-heading{
  max-width:760px;
  margin:0 auto 42px;
  text-align:center;
}

.gallery-filter-heading h2{
  margin:14px 0 18px;

  color:var(--navy);

  font-family:"Montserrat", sans-serif;
  font-size:clamp(2rem, 4.5vw, 3.35rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.035em;
}

.gallery-filter-heading h2 span{
  color:var(--wine);
}

.gallery-filter-heading p{
  max-width:620px;
  margin:0 auto;

  color:#69717e;

  font-size:1rem;
  line-height:1.75;
}


/* Contenedor de filtros */

.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;

  padding:10px;
}


/* Botones */

.gallery-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:48px;
  padding:11px 20px;

  border:1px solid rgba(15, 32, 60, .12);
  border-radius:999px;

  background:#fff;
  color:#5e6673;

  font-family:"Montserrat", sans-serif;
  font-size:.88rem;
  font-weight:700;

  cursor:pointer;

  box-shadow:0 8px 22px rgba(15, 32, 60, .05);

  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.gallery-filter i{
  color:var(--wine);
  font-size:.92rem;

  transition:color .3s ease;
}

.gallery-filter:hover{
  transform:translateY(-3px);

  color:var(--wine);
  border-color:rgba(132, 31, 56, .3);

  box-shadow:0 12px 28px rgba(15, 32, 60, .1);
}


/* Filtro activo */

.gallery-filter.active{
  color:#fff;
  background:var(--wine);
  border-color:var(--wine);

  box-shadow:0 12px 28px rgba(132, 31, 56, .22);
}

.gallery-filter.active i{
  color:var(--gold);
}

.gallery-filter:focus-visible{
  outline:3px solid rgba(201, 161, 74, .4);
  outline-offset:3px;
}


/* Responsive */

@media (max-width:720px){

  .gallery-section{
    padding-top:20px;
    padding-bottom:78px;
  }

  .gallery-filter-heading{
    margin-bottom:32px;
  }

  .gallery-filters{
    justify-content:flex-start;
    flex-wrap:nowrap;

    margin-right:calc(var(--container-padding, 20px) * -1);
    padding:8px 20px 16px 0;

    overflow-x:auto;
    scrollbar-width:none;
  }

  .gallery-filters::-webkit-scrollbar{
    display:none;
  }

  .gallery-filter{
    flex:0 0 auto;
    min-height:45px;
    padding:10px 17px;
  }

}

/*=========================
  MOSAICO DE GALERÍA
=========================*/

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:110px;
  gap:18px;
  margin-top:42px;
}

.gallery-item{
  grid-column:span 4;
  grid-row:span 3;
}

.gallery-item-large{
  grid-column:span 8;
  grid-row:span 4;
}

.gallery-item-tall{
  grid-column:span 4;
  grid-row:span 5;
}

.gallery-item-wide{
  grid-column:span 8;
  grid-row:span 3;
}


/* Imagen */

.gallery-item-button{
  position:relative;

  width:100%;
  height:100%;

  padding:0;

  overflow:hidden;

  border:none;
  border-radius:22px;

  background:#eceff3;

  cursor:pointer;

  box-shadow:0 16px 38px rgba(15,32,60,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.gallery-item-button:hover{
  transform:translateY(-6px);

  box-shadow:0 22px 48px rgba(15,32,60,.16);
}

.gallery-item img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:transform .8s ease;
}

.gallery-item-button:hover img{
  transform:scale(1.08);
}


/* Overlay */

.gallery-item-overlay{
  position:absolute;
  inset:0;

  background:rgba(12,25,46,.22);

  opacity:0;

  transition:opacity .35s ease;
}

.gallery-item-button:hover .gallery-item-overlay{
  opacity:1;
}


/* Icono */

.gallery-item-icon{
  position:absolute;
  top:18px;
  right:18px;

  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.94);

  color:var(--wine);

  font-size:1rem;

  transform:scale(.8);
  opacity:0;

  transition:
    transform .3s ease,
    opacity .3s ease,
    background .3s ease;
}

.gallery-item-button:hover .gallery-item-icon{
  transform:scale(1);
  opacity:1;
}

.gallery-item-icon:hover{
  background:#fff;
}


/* Ocultos por filtros */

.gallery-item.is-hidden{
  display:none;
}


/* Responsive */

@media (max-width:980px){

  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:220px;
  }

  .gallery-item,
  .gallery-item-large,
  .gallery-item-tall,
  .gallery-item-wide{
    grid-column:span 1;
    grid-row:span 1;
  }

  .gallery-item-large,
  .gallery-item-wide{
    grid-column:span 2;
  }

}

@media (max-width:620px){

  .gallery-grid{
    grid-template-columns:1fr;
    grid-auto-rows:280px;
    gap:15px;
  }

  .gallery-item,
  .gallery-item-large,
  .gallery-item-tall,
  .gallery-item-wide{
    grid-column:1;
    grid-row:auto;
  }

  .gallery-item-icon{
    opacity:1;
    transform:scale(1);
  }

}

/*=========================
  LIGHTBOX DE GALERÍA
=========================*/

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px 90px;

  background:rgba(5,12,24,.94);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.gallery-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lightbox-content{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  max-width:1200px;
  width:100%;
  height:calc(100vh - 80px);
}

.lightbox-content img{
  display:block;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  border-radius:12px;

  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.lightbox-close,
.lightbox-arrow{
  position:absolute;
  z-index:2;

  display:grid;
  place-items:center;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,.12);
  color:#fff;

  cursor:pointer;

  transition:
    background .25s ease,
    transform .25s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover{
  background:rgba(255,255,255,.24);
}

.lightbox-close{
  top:24px;
  right:28px;

  width:52px;
  height:52px;

  font-size:1.35rem;
}

.lightbox-close:hover{
  transform:rotate(90deg);
}

.lightbox-arrow{
  top:50%;

  width:56px;
  height:56px;

  font-size:1.2rem;

  transform:translateY(-50%);
}

.lightbox-prev{
  left:24px;
}

.lightbox-next{
  right:24px;
}

.lightbox-counter{
  position:absolute;
  left:50%;
  bottom:16px;

  transform:translateX(-50%);

  padding:8px 15px;

  border-radius:999px;

  background:rgba(5,12,24,.72);
  color:#fff;

  font-family:"Montserrat",sans-serif;
  font-size:.85rem;
}

body.lightbox-open{
  overflow:hidden;
}

@media (max-width:700px){

  .gallery-lightbox{
    padding:75px 16px 85px;
  }

  .lightbox-content{
    height:calc(100vh - 160px);
  }

  .lightbox-close{
    top:16px;
    right:16px;

    width:46px;
    height:46px;
  }

  .lightbox-arrow{
    top:auto;
    bottom:18px;

    width:48px;
    height:48px;

    transform:none;
  }

  .lightbox-prev{
    left:calc(50% - 62px);
  }

  .lightbox-next{
    right:calc(50% - 62px);
  }

  .lightbox-counter{
    bottom:-52px;
  }

}

/*=========================
  INTRO CONTACTO
=========================*/

.contact-intro{
    background:#fff;
}

.contact-intro-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:70px;
    align-items:center;
}

.contact-intro-title h2{

    margin-top:14px;

    color:var(--navy);

    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.15;
}

.contact-intro-title h2 span{
    color:var(--wine);
}

.contact-intro-content p{

    margin-bottom:20px;

    color:var(--text);

    font-size:1.05rem;
    line-height:1.9;
}

.contact-intro-content p:last-child{
    margin-bottom:0;
}

@media (max-width:900px){

    .contact-intro-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

}

/*=========================
  OPCIONES DE CONTACTO
=========================*/

.contact-options{
  background:#f8f4f1;
}

.contact-options-heading{
  max-width:760px;
  margin:0 auto 52px;
  text-align:center;
}

.contact-options-heading h2{
  margin:14px 0 18px;

  color:var(--navy);

  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.15;
}

.contact-options-heading h2 span{
  color:var(--wine);
}

.contact-options-heading p{
  max-width:680px;
  margin:0 auto;

  color:var(--text);
  font-size:1.03rem;
  line-height:1.8;
}


.contact-options-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:22px;
}

.contact-option-card{
  grid-column:span 2;

  display:flex;
  flex-direction:column;

  min-height:330px;
  padding:30px;

  border:1px solid rgba(15,32,60,.08);
  border-radius:24px;

  background:#fff;

  box-shadow:0 16px 38px rgba(15,32,60,.07);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.contact-option-card:hover{
  transform:translateY(-7px);

  border-color:rgba(116,24,48,.18);

  box-shadow:0 22px 48px rgba(15,32,60,.13);
}

.contact-option-featured{
  grid-column:span 3;
  min-height:300px;
}

.contact-option-icon{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  margin-bottom:28px;

  border-radius:18px;

  background:rgba(116,24,48,.09);
  color:var(--wine);

  font-size:1.35rem;
}

.contact-option-content{
  display:flex;
  flex-direction:column;
  flex:1;
}

.contact-option-label{
  display:block;

  margin-bottom:9px;

  color:var(--gold);

  font-family:"Montserrat",sans-serif;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-option-content h3{
  margin:0 0 14px;

  color:var(--navy);

  font-family:"Montserrat",sans-serif;
  font-size:1.35rem;
  line-height:1.25;
}

.contact-option-content p{
  margin:0 0 22px;

  color:var(--text);
  line-height:1.75;
}

.contact-option-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  width:max-content;
  margin-top:auto;

  color:var(--wine);

  font-family:"Montserrat",sans-serif;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;

  transition:
    gap .25s ease,
    color .25s ease;
}

.contact-option-link:hover{
  gap:14px;
  color:var(--navy);
}

.contact-option-link i{
  font-size:.8rem;
}


@media (max-width:1000px){

  .contact-options-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-option-card,
  .contact-option-featured{
    grid-column:span 1;
  }

}


@media (max-width:650px){

  .contact-options-heading{
    margin-bottom:38px;
    text-align:left;
  }

  .contact-options-heading p{
    margin:0;
  }

  .contact-options-grid{
    grid-template-columns:1fr;
  }

  .contact-option-card{
    min-height:auto;
    padding:26px;
  }

}

/*=========================
  CONTACTO - WHATSAPP CTA
=========================*/

.contact-whatsapp{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.contact-whatsapp-card{
  position:relative;
  isolation:isolate;

  display:grid;
  grid-template-columns:auto 1fr;
  gap:38px;
  align-items:center;

  overflow:hidden;

  padding:58px 64px;

  border-radius:30px;

  background:
    linear-gradient(
      135deg,
      var(--navy) 0%,
      #172f52 100%
    );

  box-shadow:0 26px 60px rgba(15,32,60,.2);
}

.contact-whatsapp-decoration{
  position:absolute;
  z-index:-1;

  border-radius:50%;

  pointer-events:none;
}

.contact-whatsapp-decoration-one{
  top:-160px;
  right:-100px;

  width:360px;
  height:360px;

  border:70px solid rgba(255,255,255,.04);
}

.contact-whatsapp-decoration-two{
  bottom:-120px;
  left:20%;

  width:240px;
  height:240px;

  background:rgba(116,24,48,.2);
  filter:blur(5px);
}

.contact-whatsapp-icon{
  width:104px;
  height:104px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;

  background:rgba(255,255,255,.1);
  color:#fff;

  font-size:3.1rem;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 35px rgba(0,0,0,.16);
}

.contact-whatsapp-content{
  max-width:800px;
}

.contact-whatsapp-kicker{
  display:block;

  margin-bottom:13px;

  color:var(--gold);

  font-family:"Montserrat",sans-serif;
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.contact-whatsapp-content h2{
  max-width:720px;
  margin:0 0 18px;

  color:#fff;

  font-family:"Montserrat",sans-serif;
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.12;
}

.contact-whatsapp-content h2 span{
  color:var(--gold);
}

.contact-whatsapp-content > p{
  max-width:750px;
  margin:0;

  color:rgba(255,255,255,.78);

  font-size:1.04rem;
  line-height:1.8;
}

.contact-whatsapp-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;

  margin-top:30px;
}

.contact-whatsapp-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  min-height:54px;
  padding:0 25px;

  border-radius:999px;

  background:#fff;
  color:var(--navy);

  font-family:"Montserrat",sans-serif;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;

  box-shadow:0 12px 26px rgba(0,0,0,.16);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.contact-whatsapp-button:hover{
  transform:translateY(-3px);

  background:#f8f4f1;

  box-shadow:0 17px 32px rgba(0,0,0,.22);
}

.contact-whatsapp-button i{
  color:#25d366;
  font-size:1.3rem;
}

.contact-email-link{
  display:inline-flex;
  align-items:center;
  gap:11px;

  color:rgba(255,255,255,.76);

  font-size:.9rem;
  line-height:1.4;
  text-decoration:none;

  transition:color .25s ease;
}

.contact-email-link:hover{
  color:#fff;
}

.contact-email-link i{
  color:var(--gold);
  font-size:1.15rem;
}

.contact-email-link strong{
  display:block;
  color:#fff;
  font-weight:700;
}


/* Tablet */

@media (max-width:900px){

  .contact-whatsapp-card{
    grid-template-columns:1fr;
    gap:26px;

    padding:48px 42px;
  }

  .contact-whatsapp-icon{
    width:82px;
    height:82px;

    border-radius:23px;

    font-size:2.5rem;
  }

}


/* Móvil */

@media (max-width:620px){

  .contact-whatsapp-card{
    padding:36px 25px;

    border-radius:24px;
  }

  .contact-whatsapp-content h2{
    font-size:2rem;
  }

  .contact-whatsapp-actions{
    align-items:stretch;
    flex-direction:column;
    gap:20px;
  }

  .contact-whatsapp-button{
    width:100%;
  }

  .contact-email-link{
    align-items:flex-start;
  }

}

/* =========================
   NOTIFICACIONES
========================= */

.notifications-section {
  padding-top: 50px;
  padding-bottom: 30px;
}

.notifications-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid rgba(140, 24, 50, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(140, 24, 50, 0.05),
      rgba(226, 170, 22, 0.08)
    ),
    #ffffff;
  box-shadow:
    0 18px 45px rgba(19, 47, 93, 0.09);
}

.notifications-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(226, 170, 22, 0.12);
}

.notifications-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 16px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #8c1832,
      #b12c4c
    );
  box-shadow:
    0 12px 28px rgba(140, 24, 50, 0.25);
  font-size: 22px;
}

.notifications-content {
  position: relative;
  z-index: 1;
}

.notifications-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: #8c1832;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notifications-content h2 {
  margin: 0 0 10px;
  color: #132f5d;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.notifications-content p {
  max-width: 680px;
  margin: 0;
  color: #566176;
  line-height: 1.7;
}

.notifications-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 18px;
}

.notifications-types span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #263750;
  font-size: 0.9rem;
  font-weight: 700;
}

.notifications-types i {
  color: #8c1832;
  font-size: 0.78rem;
}

.notifications-action {
  position: relative;
  z-index: 1;
  min-width: 230px;
  text-align: center;
}

.notifications-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 18px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: #8c1832;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow:
    0 10px 24px rgba(140, 24, 50, 0.22);
}

.notifications-button:hover {
  transform: translateY(-2px);
  background: #741329;
  box-shadow:
    0 14px 30px rgba(140, 24, 50, 0.28);
}

.notifications-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.notifications-button.is-active {
  cursor: default;
  color: #ffffff;
  background: #247a4b;
  box-shadow:
    0 10px 24px rgba(36, 122, 75, 0.2);
}

.notifications-status {
  min-height: 22px;
  margin: 10px 0 0;
  color: #596579;
  font-size: 0.82rem;
  line-height: 1.45;
}

.notifications-status.is-error {
  color: #a31d35;
}

.notifications-status.is-success {
  color: #247a4b;
}

@media (max-width: 900px) {
  .notifications-card {
    grid-template-columns: auto 1fr;
    padding: 28px;
  }

  .notifications-action {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .notifications-button {
    width: auto;
    min-width: 240px;
  }
}

@media (max-width: 600px) {
  .notifications-section {
    padding-top: 35px;
  }

  .notifications-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 21px;
    border-radius: 20px;
  }

  .notifications-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 25px;
  }

  .notifications-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .notifications-action {
    width: 100%;
    text-align: left;
  }

  .notifications-button {
    width: 100%;
    min-width: 0;
  }
}

.notifications-section {
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.notifications-section.is-hidden {
  opacity: 0;
  transform: translateY(-15px);
  pointer-events: none;
  display: none;
}

.notifications-section {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.notifications-card {
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.notifications-section.is-highlighted
.notifications-card {
  transform: scale(1.015);
  box-shadow:
    0 0 0 4px rgba(226, 170, 22, 0.22),
    0 18px 45px rgba(19, 47, 93, 0.16);
}

/* =========================================================
   MENÚ DESPLEGABLE "MÁS"
   ========================================================= */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Botón Más */

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 10px 0;

  color: #ffffff;
  border: 0;
  cursor: pointer;
  background: transparent;

  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;

  transition: color 0.25s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.open .nav-dropdown-toggle {
  color: #d5aa4f;
}

.nav-dropdown-toggle i {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}

.nav-dropdown.open .nav-dropdown-toggle i {
  transform: rotate(180deg);
}

/* Menú desplegable */

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1100;

  min-width: 220px;
  padding: 8px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;

  background: rgba(15, 15, 15, 0.98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

  transform: translateY(-8px);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

/* Espacio invisible entre Más y el desplegable */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -15px;
  right: 0;

  width: 100%;
  height: 15px;
}

/* Abrir en escritorio:
   - al hacer clic
   - al pasar el mouse
   - al navegar con teclado
*/

.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Enlaces del desplegable */

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;
  padding: 12px 14px;

  border-radius: 7px;

  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.nav-dropdown-menu a i {
  flex: 0 0 18px;
  width: 18px;

  color: #d5aa4f;
  text-align: center;
}

/* =========================================================
   RINCÓN SECRETO
   ========================================================= */

.navbar-secret-game {
  display: none !important;
}

.navbar-secret-game.visible {
  display: flex !important;
}

/* =========================================================
   VERSIÓN MÓVIL
   ========================================================= */

@media (max-width: 900px) {
  .nav-dropdown {
    width: 100%;
    display: block;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;

    padding: 15px 8px;

    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-dropdown-menu {
    position: static;

    width: 100%;
    min-width: 0;
    max-height: 0;
    padding: 0;

    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;

    border: 0;
    border-radius: 0;

    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;

    transform: none;

    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  /*
    En móvil no se abre al pasar el dedo.
    Solo se abre cuando JavaScript agrega .open.
  */

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    max-height: 0;
    padding: 0;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 280px;
    padding: 6px 0;

    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-dropdown-menu a {
    padding: 13px 20px;
  }
}