/* ==========================================================================
   MANANTIAL DE ORO · Cooperativa de Ahorro y Crédito
   Hoja de estilos principal (CSS separado del HTML por seguridad y mantenimiento)
   Paleta oficial: #E30613 (rojo principal), #8F040C (rojo oscuro),
                   #ffffff (blanco), #f8f9fa (fondo claro), #111111 (texto fuerte)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&display=swap');

:root{
  --color-primary:#E30613;
  --color-primary-dark:#8F040C;
  --color-primary-soft:#fdf1f3;
  --color-white:#ffffff;
  --color-bg-light:#f8f9fa;
  --color-dark:#111111;
  --color-text:#333333;
  --color-text-muted:#666666;
  --color-border:#eef0f2;
  /* Dorado de marca: referencia directa al nombre "Manantial de Oro",
     usado como acento de firma en vez de colores genéricos sin relación
     con la identidad de la cooperativa. */
  --color-gold:#b8862c;
  --color-gold-dark:#8a6420;
  --shadow-soft:0 6px 18px rgba(0,0,0,0.06);
  --shadow-card:0 4px 16px rgba(17,17,17,0.05);
  --shadow-hover:0 20px 36px rgba(227,6,19,0.16);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:8px;
  /* Forma orgánica de "gota": firma visual para fotografías, evocando el
     manantial (la fuente de agua) que da nombre a la cooperativa. */
  --radius-droplet:56px 16px 56px 16px;
  --font-display:'Fraunces', Georgia, serif;
  --header-height:84px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Poppins', sans-serif;
  color:var(--color-text);
  background:var(--color-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-height);
}

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

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

ul{ margin:0; padding:0; list-style:none; }

.inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
}

/* padding-top/bottom (no shorthand) a propósito: si se usa "padding:70px 0"
   aquí, la regla choca con ".inner{padding:0 20px}" cuando ambas clases
   están en el mismo elemento (".inner.section") y el orden en la hoja de
   estilos gana, dejando el contenido sin margen izquierdo/derecho. */
.section{ padding-top:70px; padding-bottom:70px; }
.section-tight{ padding-top:40px; padding-bottom:40px; }

.subtitle{
  color:var(--color-primary);
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px;
}

.section-title{
  font-family:var(--font-display);
  color:var(--color-dark);
  font-size:2.25rem;
  font-weight:600;
  margin:0 0 18px 0;
  line-height:1.15;
  letter-spacing:-.01em;
}

.section-lead{
  color:var(--color-text-muted);
  font-size:1.05rem;
  max-width:720px;
  margin:0 0 10px 0;
}

.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* Skip link (accesibilidad) */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--color-primary);
  color:#fff;
  padding:12px 20px;
  z-index:10000;
  border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

/* ==========================================================================
   HEADER / NAVEGACIÓN
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-height);
  background:rgba(255,255,255,0.97);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--color-border);
  z-index:1000;
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 20px rgba(17,17,17,0.08); }

.nav-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.brand img{ height:52px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  justify-content:center;
}

.main-nav > li{ position:relative; }

.main-nav > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  font-weight:600;
  font-size:.97rem;
  color:var(--color-dark);
  border-radius:8px;
  transition:color .2s ease, background-color .2s ease;
}

.main-nav > li > a:hover,
.main-nav > li > a.is-active{
  color:var(--color-primary);
  background:var(--color-primary-soft);
}

.main-nav .chev{
  width:9px; height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .2s ease;
}
.main-nav li.has-dropdown:hover .chev{ transform:rotate(225deg); margin-top:3px; }

/* Mega dropdown de Nuestros Productos */
.dropdown-panel{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:560px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:0 24px 48px rgba(17,17,17,0.16);
  border:1px solid var(--color-border);
  padding:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:1200;
}

li.has-dropdown:hover .dropdown-panel,
li.has-dropdown:focus-within .dropdown-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.dropdown-col-title{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--color-primary);
  margin:6px 10px 8px;
}

.dropdown-panel a{
  display:block;
  padding:9px 10px;
  border-radius:8px;
  font-size:.9rem;
  font-weight:500;
  color:var(--color-text);
  transition:background-color .2s ease, color .2s ease;
}
.dropdown-panel a:hover{ background:var(--color-primary-soft); color:var(--color-primary); }

/* Variante de dropdown simple: una sola columna con pocos enlaces
   (por ejemplo, el menú "La Manantial") */
.dropdown-panel.dropdown-panel-simple{
  grid-template-columns:1fr;
  min-width:240px;
  gap:2px;
}

.nav-cta{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.btn-app{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color:#fff !important;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.3px;
  box-shadow:0 10px 20px rgba(227,6,19,0.28);
  transition:transform .2s ease, box-shadow .2s ease;
  border:none;
  cursor:pointer;
}
.btn-app:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(227,6,19,0.36); }
.btn-app svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  display:block;
  width:20px; height:2px;
  background:var(--color-dark);
  position:relative;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:rotate(45deg); top:0; }
.nav-toggle.is-open span::after{ transform:rotate(-45deg); top:0; }

@media (max-width:1080px){
  .nav-wrap{ gap:10px; }
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; flex-shrink:0; }
  .nav-cta{ flex-shrink:0; gap:8px; margin-left:auto; }
  .btn-app{ padding:11px 16px; font-size:.82rem; }
  .brand img{ height:42px; }

  .site-header.nav-open .main-nav{
    display:flex;
    position:fixed;
    top:var(--header-height);
    left:0; right:0;
    height:calc(100vh - var(--header-height));
    z-index:1000;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:14px 20px 30px;
    overflow-y:auto;
    gap:2px;
  }
  /* !important necesario aquí: en móvil, tocar el enlace le da foco y activa
     la regla de escritorio ":focus-within" (pensada para :hover), que de
     otra forma reintroduce el transform de centrado absoluto y descoloca
     el panel. Este bloque es la versión "táctil" y debe ganar siempre. */
  .site-header.nav-open .dropdown-panel{
    position:static !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transform:none !important;
    display:none;
    grid-template-columns:1fr;
    box-shadow:none;
    border:none;
    padding:4px 0 4px 14px;
    min-width:0;
  }
  .site-header.nav-open li.has-dropdown.is-open .dropdown-panel{ display:grid; }
}

@media (max-width:420px){
  .nav-wrap{ padding:0 12px; }
  .brand img{ height:34px; }
  .btn-app{ padding:11px; border-radius:12px; }
  .btn-app-text{ display:none; }
  .btn-app svg{ width:20px; height:20px; margin:0; }
}

/* ==========================================================================
   HERO SLIDER (portada)
   ========================================================================== */
.md-hero-slider{
  position:relative;
  height:640px;
  max-height:78vh;
  min-height:480px;
  overflow:hidden;
  background-color:#14171a;
}
.md-slide{
  position:absolute; inset:0;
  opacity:0; z-index:1;
  transition:opacity 1.1s ease;
}
.md-slide.is-active{ opacity:1; z-index:2; }

.md-slide-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1);
  transition:transform 7s ease-out;
}
.md-slide.is-active .md-slide-bg{ transform:scale(1.12); }

.md-slide-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,12,15,0.78) 0%, rgba(10,12,15,0.58) 28%, rgba(10,12,15,0.22) 52%, rgba(10,12,15,0) 72%),
    linear-gradient(0deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 28%);
}

.md-slide-content{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left; padding:40px 20px 110px 20px;
}

.md-slide-content .hero-subtitle{
  color:var(--color-primary);
  font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  margin-bottom:14px; background:#fff; display:inline-block; padding:5px 16px; border-radius:20px;
}

.md-slide-content h1{
  font-family:var(--font-display);
  color:#fff; font-size:2.9rem; font-weight:600; margin:0 0 16px 0; line-height:1.12;
  letter-spacing:-.01em;
  max-width:780px; text-shadow:0 2px 12px rgba(0,0,0,.15);
}

.md-slide-content p{
  font-size:1.1rem; max-width:560px; margin:0 0 28px 0; color:#fff; opacity:.95;
  line-height:1.6; text-shadow:0 2px 10px rgba(0,0,0,.25);
}

.hero-btn{
  display:inline-block; background-color:#fff; color:var(--color-primary) !important;
  padding:14px 32px; border-radius:6px; font-weight:700;
  transition:background-color .3s ease, transform .2s ease, box-shadow .3s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.hero-btn:hover{ background-color:#f1f1f1; color:#B4050F !important; transform:translateY(-2px); }

.md-slide-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, transform .2s ease;
}
.md-slide-arrow:hover{ background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.06); }
.md-arrow-prev{ left:24px; }
.md-arrow-next{ right:24px; }

.md-slide-dots{
  position:absolute; left:0; right:0; bottom:78px; z-index:4;
  display:flex; justify-content:center; gap:10px;
}
.md-dot{
  width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.45);
  cursor:pointer; padding:0; transition:background-color .25s ease, width .25s ease;
}
.md-dot.is-active{ background:#fff; width:26px; border-radius:6px; }

@media (max-width:768px){
  .md-hero-slider{ height:560px; min-height:440px; }
  .md-slide-content{ padding:30px 18px 100px 18px; }
  .md-slide-content h1{ font-size:1.85rem; }
  .md-slide-content p{ font-size:1rem; }
  .md-slide-arrow{ display:none; }
}

/* Cabecera interior (páginas secundarias) */
.page-header{
  position:relative;
  background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding:78px 0 60px;
  color:#fff;
  overflow:hidden;
}
.page-header::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.12) 0, transparent 45%);
}
.page-header .inner{ position:relative; z-index:2; }
.breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:.85rem; font-weight:600; opacity:.85; margin-bottom:14px;
  text-transform:uppercase; letter-spacing:.5px;
}
.breadcrumb a{ opacity:.85; }
.breadcrumb a:hover{ opacity:1; text-decoration:underline; }
.page-header h1{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; letter-spacing:-.01em; margin:0 0 12px; max-width:720px; }
.page-header p{ font-size:1.05rem; max-width:640px; opacity:.92; margin:0; }

/* ==========================================================================
   ACCESOS RÁPIDOS
   ========================================================================== */
.quick-access-wrap{ position:relative; z-index:10; margin-top:-60px; margin-bottom:60px; }
.quick-access-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; }
.quick-card{
  background:linear-gradient(135deg, var(--color-primary) 0%, #B4050F 100%);
  color:#fff !important; padding:28px 20px 24px; text-align:center; border-radius:10px;
  font-weight:600; text-transform:uppercase; transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px;
  box-shadow:0 12px 24px rgba(128,10,29,.25);
}
.quick-card svg{ width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.8; }
.quick-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(128,10,29,.32); color:#fff !important; }
@media (max-width:768px){ .quick-access-wrap{ margin-top:-36px; } }

/* ==========================================================================
   ANIMACIÓN AL HACER SCROLL
   ========================================================================== */
.md-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.md-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   SOBRE NOSOTROS / EXPERIENCIA
   ========================================================================== */
.about-section{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:768px){ .about-section{ grid-template-columns:1fr; } }

.about-media{ position:relative; }
.about-media img{
  width:100%; min-height:280px; border-radius:var(--radius-droplet); box-shadow:0 24px 44px rgba(17,17,17,.14);
  background:var(--color-bg-light); /* respaldo visual si la imagen no llega a cargar */
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.about-media:hover img{ transform:scale(1.05); }
.about-badge{
  position:absolute; left:-16px; bottom:-18px;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color:#fff; padding:18px 24px; border-radius:14px; text-align:center;
  box-shadow:0 16px 32px rgba(128,10,29,.35);
}
.about-badge .about-badge-num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; line-height:1; }
.about-badge .about-badge-label{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; opacity:.92; margin-top:4px; }
@media (max-width:480px){
  .about-badge{ left:10px; bottom:-14px; padding:14px 18px; }
  .about-badge .about-badge-num{ font-size:1.5rem; }
}

.value-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-top:26px; }
.value-chip{ background:var(--color-primary-soft); border-radius:14px; padding:20px 18px; }
.value-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--color-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.value-icon svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; }
.value-title{ font-weight:700; color:var(--color-primary); margin-bottom:4px; }
.value-chip p{ font-size:.9rem; line-height:1.5; margin:0; }

.btn-more{
  display:inline-block; margin-top:25px; padding:12px 30px; background-color:var(--color-primary);
  color:#fff !important; border-radius:5px; font-weight:600; transition:background-color .3s ease;
}
.btn-more:hover{ background-color:#B4050F; color:#fff !important; }

.btn-outline{
  display:inline-block; margin-top:25px; padding:11px 28px; background:transparent;
  color:var(--color-primary) !important; border:2px solid var(--color-primary); border-radius:5px;
  font-weight:600; transition:background-color .3s ease, color .3s ease;
}
.btn-outline:hover{ background-color:var(--color-primary); color:#fff !important; }

/* ==========================================================================
   PRODUCTOS Y SERVICIOS
   ========================================================================== */
.services-section{ background:#fff; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:25px; margin-top:40px; }

.service-card{
  position:relative; background-color:#fff; border:1px solid var(--color-border);
  padding:34px 26px 28px; border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display:block; box-shadow:var(--shadow-card);
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.service-card:hover::before{ transform:scaleX(1); }
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); border-color:transparent; }

.service-icon{
  width:48px; height:48px; border-radius:14px; background:rgba(227,6,19,.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  transition:background-color .35s ease;
}
.service-icon svg{ width:24px; height:24px; stroke:var(--color-primary); fill:none; stroke-width:1.8; transition:stroke .35s ease; }
.service-card:hover .service-icon{ background-color:var(--color-primary); }
.service-card:hover .service-icon svg{ stroke:#fff; }
.service-card h3{ color:var(--color-dark); margin-bottom:8px; font-size:1.15rem; font-weight:700; }
.service-card p{ font-size:.95rem; color:#555; line-height:1.5; margin:0 0 14px; }
.service-card .service-link{ font-size:.85rem; font-weight:700; color:var(--color-primary); }

.category-tag{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--color-primary); background:var(--color-primary-soft); padding:5px 12px; border-radius:20px;
  margin-bottom:14px;
}

.product-detail-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; margin-top:18px; }
.product-detail-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-card);
}
.product-detail-card ul{ margin-top:14px; }
.product-detail-card li{
  position:relative; padding-left:22px; margin-bottom:8px; font-size:.92rem; color:var(--color-text);
}
.product-detail-card li::before{
  content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--color-primary);
}

.product-section-anchor{ scroll-margin-top:calc(var(--header-height) + 20px); }

.tabs-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 8px;
  border-bottom:1px solid var(--color-border);
}
.tabs-nav a{
  padding:12px 18px; font-weight:700; font-size:.92rem; color:var(--color-text-muted);
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tabs-nav a:hover{ color:var(--color-primary); }

/* ==========================================================================
   LOGROS
   ========================================================================== */
.achievements-section{ padding:70px 20px; background-color:var(--color-bg-light); }
.achievements-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:30px; margin-top:40px; }
.achievement-card{
  background:#fff; padding:32px 28px 30px; border-radius:var(--radius-lg);
  border-bottom:3px solid var(--color-primary); box-shadow:0 6px 18px rgba(0,0,0,.05);
  border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); border-top:1px solid var(--color-border);
  transition:transform .35s ease, box-shadow .35s ease;
}
.achievement-card:hover{ transform:translateY(-8px); box-shadow:0 20px 34px rgba(227,6,19,.14); }
.badge-number{
  font-family:var(--font-display); font-weight:600; font-size:2.6rem; line-height:1;
  color:var(--color-primary); margin-bottom:12px; letter-spacing:-.02em;
}
.achievement-card h4{ color:var(--color-dark); margin-bottom:8px; font-size:1.1rem; font-weight:700; }
.achievement-card p{ color:var(--color-text-muted); font-size:.95rem; margin:0; }

/* ==========================================================================
   SEGURO DE DEPÓSITOS (COSEDE)
   ========================================================================== */
.deposit-guarantee{
  display:grid; grid-template-columns:minmax(220px,300px) auto minmax(280px,1fr);
  align-items:center; gap:24px; margin:20px 0 10px;
}
.deposit-guarantee-text{ background:var(--color-bg-light); border-radius:14px; padding:26px 24px; }
.deposit-guarantee-text h3{ color:var(--color-dark); font-size:1.2rem; font-weight:700; margin:0 0 10px; line-height:1.3; }
.deposit-guarantee-text p{ color:#555; font-size:.95rem; line-height:1.55; margin:0; }
.deposit-guarantee-arrow{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--color-primary-soft); flex-shrink:0; justify-self:center;
}
.deposit-guarantee-arrow svg{ width:22px; height:22px; stroke:var(--color-primary); fill:none; stroke-width:2; }
.deposit-guarantee-banner{ border-radius:14px; overflow:hidden; background:var(--color-bg-light); }
.deposit-guarantee-banner img{
  width:100%; height:auto; border-radius:14px; box-shadow:0 10px 24px rgba(17,17,17,.08);
  transition:transform .5s ease;
}
.deposit-guarantee-banner:hover img{ transform:scale(1.04); }
@media (max-width:768px){
  .deposit-guarantee{ grid-template-columns:1fr; gap:14px; }
  .deposit-guarantee-arrow{ transform:rotate(90deg); margin:0 auto; }
}

/* ==========================================================================
   PÁGINA NOSOTROS
   ========================================================================== */
.mv-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; margin-top:20px; }
.mv-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:32px 28px; box-shadow:var(--shadow-card);
}
.mv-card .value-icon{ margin-bottom:18px; }
.mv-card h3{ font-size:1.25rem; color:var(--color-dark); margin:0 0 10px; }
.mv-card p{ margin:0; color:var(--color-text-muted); font-size:.96rem; }

.timeline{ margin-top:30px; border-left:3px solid var(--color-primary-soft); padding-left:28px; }
.timeline-item{ position:relative; padding-bottom:32px; }
.timeline-item::before{
  content:""; position:absolute; left:-35px; top:2px; width:14px; height:14px; border-radius:50%;
  background:var(--color-primary); border:3px solid #fff; box-shadow:0 0 0 2px var(--color-primary);
}
.timeline-item h4{ margin:0 0 6px; color:var(--color-dark); }
.timeline-item p{ margin:0; color:var(--color-text-muted); font-size:.94rem; }

.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; margin-top:20px; }
.team-card{ text-align:center; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:26px 20px; box-shadow:var(--shadow-card); }
.team-avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.4rem;
}
.team-card h4{ margin:0 0 4px; font-size:1.02rem; color:var(--color-dark); }
.team-card span{ font-size:.85rem; color:var(--color-primary); font-weight:600; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start; margin-top:10px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info-list{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-icon{
  flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--color-primary-soft);
  display:flex; align-items:center; justify-content:center;
}
.contact-info-icon svg{ width:22px; height:22px; stroke:var(--color-primary); fill:none; stroke-width:1.8; }
.contact-info-item h4{ margin:0 0 4px; font-size:.98rem; color:var(--color-dark); }
.contact-info-item p{ margin:0; font-size:.92rem; color:var(--color-text-muted); }
.placeholder-field{
  background:#fff3cd; color:#7a5c00; padding:1px 7px; border-radius:5px; font-weight:600; font-size:.85em;
}

.social-row{ display:flex; gap:10px; margin-top:22px; }
.social-row a{
  width:40px; height:40px; border-radius:50%; background:var(--color-primary-soft);
  display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, transform .2s ease;
}
.social-row a:hover{ background:var(--color-primary); transform:translateY(-2px); }
.social-row a:hover svg{ stroke:#fff; }
.social-row svg{ width:18px; height:18px; stroke:var(--color-primary); fill:none; stroke-width:1.8; }

.contact-form-card{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:.88rem; font-weight:600; color:var(--color-dark); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--color-border); border-radius:10px;
  font-family:inherit; font-size:.95rem; color:var(--color-text); transition:border-color .2s ease, box-shadow .2s ease;
  background:#fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(227,6,19,.12);
}
.form-group textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:var(--color-text-muted); margin-top:10px; }
.btn-submit{
  width:100%; padding:14px; background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color:#fff; border:none; border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer;
  box-shadow:0 10px 20px rgba(227,6,19,.28); transition:transform .2s ease, box-shadow .2s ease;
}
.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(227,6,19,.36); }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-submit .btn-spinner{
  display:inline-block; width:15px; height:15px; margin-right:8px; vertical-align:-3px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* Campo trampa para bots (honeypot): oculto para personas, visible para
   robots que rellenan formularios automáticamente. */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }

/* Aviso de estado del envío (éxito / error) de los formularios reales */
.form-status{
  display:none; margin-top:14px; padding:12px 14px; border-radius:10px;
  font-size:.86rem; font-weight:600; line-height:1.45;
}
.form-status.is-visible{ display:block; }
.form-status.is-sending{ background:var(--color-bg-light); color:var(--color-text-muted); }
.form-status.is-success{ background:#e7f6ec; color:#1c7a3f; border:1px solid #b7e6c6; }
.form-status.is-error{ background:#fdece9; color:#a3251f; border:1px solid #f6c6c0; }
.form-status a{ color:inherit; text-decoration:underline; }

/* Fila "Nombre / Apellidos" con etiqueta compartida y pista debajo de cada campo */
.field-hint{ display:block; font-size:.75rem; color:var(--color-text-muted); margin-top:5px; }

/* Casilla de aceptación + texto legal de un formulario */
.form-checkbox-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; }
.form-checkbox-row input[type="checkbox"]{
  margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color:var(--color-primary); cursor:pointer;
}
.form-checkbox-row label{
  font-size:.78rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  color:var(--color-dark); cursor:pointer;
}
.form-legal-text{
  font-size:.78rem; line-height:1.6; color:var(--color-text-muted);
  background:var(--color-bg-light); border-radius:var(--radius-sm); padding:14px 16px; margin:0 0 16px;
}
.form-legal-text strong{ color:var(--color-dark); }

.map-embed{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-top:24px; height:280px; background:var(--color-bg-light); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:.9rem; text-align:center; padding:20px; border:1px dashed var(--color-border); }

/* ==========================================================================
   TRABAJA CON NOSOTROS
   ========================================================================== */
.benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:30px; }
.benefit-card{ background:#fff; border:1px solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-sm); padding:26px; box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease; }
.benefit-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.benefit-card .value-icon{ margin-bottom:14px; }
.benefit-card h4{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:0 0 6px; color:var(--color-dark); }
.benefit-card p{ margin:0; font-size:.9rem; color:var(--color-text-muted); }

.cv-cta{
  margin-top:50px; background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius:var(--radius-lg); padding:44px; text-align:center; color:#fff;
}
.cv-cta h3{ font-size:1.6rem; margin:0 0 10px; }
.cv-cta p{ margin:0 0 24px; opacity:.92; max-width:560px; margin-left:auto; margin-right:auto; }
.cv-cta .hero-btn{ box-shadow:none; }

/* ==========================================================================
   MANANTIAPP
   ========================================================================== */
.app-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
@media (max-width:900px){ .app-hero{ grid-template-columns:1fr; } }
.app-store-row{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; gap:10px; background:var(--color-dark); color:#fff !important;
  padding:12px 20px; border-radius:12px; font-weight:600; transition:transform .2s ease, background-color .2s ease;
}
.store-badge:hover{ transform:translateY(-2px); background:#000; }
.store-badge svg{ width:22px; height:22px; stroke:#fff; fill:none; }
.store-badge span{ display:flex; flex-direction:column; line-height:1.15; }
.store-badge small{ font-size:.65rem; opacity:.8; font-weight:400; }
.store-badge strong{ font-size:.95rem; }

.phone-mockup{
  position:relative; margin:0 auto; width:260px; height:520px; border-radius:36px;
  background:linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  box-shadow:0 30px 60px rgba(128,10,29,.35); padding:14px; display:flex; align-items:center; justify-content:center;
}
.phone-mockup::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:60px; height:6px; border-radius:4px; background:rgba(255,255,255,.5);
}
.phone-mockup-screen{
  width:100%; height:100%; background:#fff; border-radius:24px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:20px; text-align:center;
}
.phone-mockup-screen img{ height:46px; width:auto; margin-bottom:6px; }
.phone-mockup-screen strong{ color:var(--color-dark); font-size:1rem; }
.phone-mockup-screen span{ font-size:.8rem; color:var(--color-text-muted); }

.app-feature-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px; margin-top:20px; }

.security-strip{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center;
  background:var(--color-bg-light); border-radius:var(--radius-lg); padding:28px; margin-top:50px;
}
.security-strip .badge-pill{
  display:flex; align-items:center; gap:8px; background:#fff; padding:10px 16px; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--color-dark); box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.security-strip svg{ width:18px; height:18px; stroke:var(--color-primary); fill:none; stroke-width:2; }

/* ==========================================================================
   404
   ========================================================================== */
.error-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 20px; }
.error-page .code{ font-size:6rem; font-weight:800; color:var(--color-primary); line-height:1; margin-bottom:10px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--color-dark); color:#d8d8d8; }
.footer-top{ padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

.footer-brand img{ height:44px; margin-bottom:14px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:.88rem; line-height:1.6; color:#a8a8a8; max-width:280px; }
.footer-col h5{ color:#fff; font-size:.92rem; text-transform:uppercase; letter-spacing:.6px; margin:0 0 16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.9rem; color:#b8b8b8; transition:color .2s ease; }
.footer-col a:hover{ color:#fff; }
.footer-col .contact-info-item p, .footer-col .contact-info-item h4{ color:#c9c9c9; }
.footer-col .contact-info-icon{ background:rgba(255,255,255,.08); }
.footer-col .contact-info-icon svg{ stroke:#fff; }

.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background-color .2s ease; }
.footer-social a:hover{ background:var(--color-primary); }
.footer-social svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:12px; font-size:.82rem; color:#9a9a9a;
}
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a{ color:#9a9a9a; }
.footer-legal a:hover{ color:#fff; }
.security-mark{ display:flex; align-items:center; gap:6px; }
.security-mark svg{ width:16px; height:16px; stroke:#7bd88f; fill:none; stroke-width:2; }

/* ==========================================================================
   PROTECCIÓN DE IMÁGENES (complementa js/security.js)
   ========================================================================== */
img, .protected-media{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}

.protected-media{
  position:relative;
  overflow:hidden;
  border-radius:inherit;
}
.protected-media img{ pointer-events:none; }
.protected-media::after{
  content:"";
  position:absolute; inset:0;
  background:transparent;
  z-index:2;
}

.watermark::before{
  content:"MANANTIAL DE ORO";
  position:absolute;
  inset:0;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.16);
  font-weight:800; font-size:1.6rem; letter-spacing:2px;
  transform:rotate(-22deg);
  pointer-events:none;
  text-align:center;
  white-space:nowrap;
}

/* Botón flotante "volver arriba" */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--color-primary); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px rgba(227,6,19,.35);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.4; }

/* Utilidades */
.mt-0{ margin-top:0 !important; }
.text-muted{ color:var(--color-text-muted); }

/* ==========================================================================
   ACORDEÓN (Transparencia de la Información)
   ========================================================================== */
.accordion-list{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }

.accordion-item{
  border:1px solid var(--color-border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-card);
}

.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:19px 24px;
  background:linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color:#fff;
  border:none;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.accordion-trigger .accordion-icon{
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.accordion-trigger .accordion-icon svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4; }
.accordion-item.is-open .accordion-trigger .accordion-icon{ transform:rotate(180deg); }

.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }

.accordion-panel-inner{ overflow:hidden; }

.accordion-body{ padding:10px 14px 20px; display:flex; flex-direction:column; gap:2px; }

.accordion-body a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:10px;
  font-size:.93rem; font-weight:500; color:var(--color-text);
  transition:background-color .2s ease, color .2s ease;
}
.accordion-body a:hover{ background:var(--color-primary-soft); color:var(--color-primary); }
.accordion-body a svg{ width:17px; height:17px; stroke:var(--color-primary); fill:none; stroke-width:1.8; flex-shrink:0; }

.accordion-empty-note{ font-size:.85rem; color:var(--color-text-muted); padding:8px 14px 16px; line-height:1.5; }

/* ==========================================================================
   SIMULADORES (Crédito / Inversiones)
   ========================================================================== */
.simulator-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:32px;
}
@media (max-width:600px){ .simulator-card{ padding:22px; } }

.simulator-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:36px; align-items:start; margin-top:10px; }
@media (max-width:860px){ .simulator-grid{ grid-template-columns:1fr; } }

.type-toggle{ display:flex; gap:10px; margin-bottom:24px; }
.type-toggle button{
  flex:1; padding:14px; border-radius:12px; border:2px solid var(--color-border);
  background:#fff; font-weight:700; font-size:.92rem; color:var(--color-text-muted);
  cursor:pointer; transition:border-color .2s ease, color .2s ease, background-color .2s ease;
  font-family:inherit;
}
.type-toggle button.is-active{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }

.sim-field{ margin-bottom:22px; }
.sim-field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:8px; color:var(--color-dark); }
.sim-field input[type="range"]{ width:100%; accent-color:var(--color-primary); }
.sim-field .sim-hint{ font-size:.8rem; color:var(--color-text-muted); margin-top:6px; }
.sim-amount-display{ font-size:1.7rem; font-weight:800; color:var(--color-primary); margin-bottom:2px; }

.sim-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.sim-actions button{ font-family:inherit; font-size:.95rem; cursor:pointer; }
.sim-actions button.btn-more{ border:none; }

.sim-summary-card{
  background:linear-gradient(150deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius:var(--radius-lg); padding:28px; color:#fff;
}
.sim-summary-card .sim-cuota-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.6px; opacity:.85; }
.sim-summary-card .sim-cuota-value{ font-size:2.3rem; font-weight:800; margin:4px 0 20px; }

.sim-summary-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.sim-summary-mini div{ background:rgba(255,255,255,.14); border-radius:10px; padding:10px 6px; text-align:center; }
.sim-summary-mini strong{ display:block; font-size:1rem; }
.sim-summary-mini span{ font-size:.66rem; opacity:.85; text-transform:uppercase; letter-spacing:.3px; }

.sim-summary-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.sim-summary-tags span{ background:rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; font-size:.76rem; font-weight:600; }

.sim-detail-table{ width:100%; border-collapse:collapse; margin-top:18px; font-size:.9rem; }
.sim-detail-table td{ padding:10px 4px; border-bottom:1px solid var(--color-border); }
.sim-detail-table td:last-child{ text-align:right; font-weight:700; color:var(--color-dark); }

.amort-table-wrap{ overflow-x:auto; margin-top:22px; border:1px solid var(--color-border); border-radius:var(--radius-md); max-height:420px; overflow-y:auto; }
.amort-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:560px; }
.amort-table th{ background:var(--color-bg-light); text-align:left; padding:11px 12px; font-weight:700; color:var(--color-dark); position:sticky; top:0; }
.amort-table td{ padding:9px 12px; border-top:1px solid var(--color-border); }
.amort-table tr:nth-child(even){ background:#fbfbfc; }

.sim-disclaimer{
  display:flex; gap:12px; background:#fff3cd; border:1px solid #ffe69c; border-radius:12px;
  padding:16px 18px; margin-top:26px; font-size:.86rem; color:#7a5c00; align-items:flex-start;
}
.sim-disclaimer svg{ width:20px; height:20px; stroke:#a07300; fill:none; stroke-width:2; flex-shrink:0; margin-top:1px; }

.sim-error{ color:#b91c1c; font-size:.85rem; margin:-10px 0 16px; font-weight:600; }

.sim-rate-table{ width:100%; border-collapse:collapse; margin-top:18px; }
.sim-rate-table th{ background:var(--color-primary-soft); color:var(--color-primary); text-align:left; padding:11px 14px; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; }
.sim-rate-table td{ padding:11px 14px; border-top:1px solid var(--color-border); font-size:.9rem; }
.sim-rate-table tr.is-active-tier td{ background:var(--color-primary-soft); font-weight:700; color:var(--color-primary); }

/* ==========================================================================
   OBJETIVOS INSTITUCIONALES
   ========================================================================== */
.objectives-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-top:30px; }
.objective-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:24px;
  box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease;
}
.objective-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.objective-icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.objective-icon svg{ width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; }
.objective-card h4{ margin:0 0 6px; font-size:1rem; color:var(--color-dark); }
.objective-card p{ margin:0; font-size:.87rem; color:var(--color-text-muted); line-height:1.5; }

/* Paleta de acento cíclica para variedad visual (el rojo institucional predomina en el resto del sitio) */
.objective-icon.accent-1{ background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.objective-icon.accent-2{ background:linear-gradient(135deg, #d97706, #b45309); }
.objective-icon.accent-3{ background:linear-gradient(135deg, #0891b2, #0e7490); }
.objective-icon.accent-4{ background:linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); }
.objective-icon.accent-5{ background:linear-gradient(135deg, #059669, #047857); }

/* ==========================================================================
   FILOSOFÍA INSTITUCIONAL (variante con acento superior de color)
   ========================================================================== */
.mv-card{ border-top:4px solid var(--color-primary); }
.mv-card.accent-2{ border-top-color:#d97706; }
.mv-card.accent-3{ border-top-color:#0891b2; }
.mv-card.accent-4{ border-top-color:var(--color-gold); }

/* ==========================================================================
   BARRA DE CIFRAS ANIMADAS
   ========================================================================== */
.stats-band{
  background:linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius:var(--radius-lg); padding:42px 30px; display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; margin-top:36px; position:relative; overflow:hidden;
}
.stats-band::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 90% 10%, rgba(255,255,255,.14) 0, transparent 40%),
                    radial-gradient(circle at 8% 92%, rgba(255,255,255,.10) 0, transparent 40%);
}
.stat-item{ position:relative; z-index:1; text-align:center; color:#fff; }
.stat-number{ font-size:2.2rem; font-weight:800; display:flex; align-items:baseline; justify-content:center; gap:2px; }
.stat-label{ font-size:.78rem; opacity:.88; margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
@media (max-width:700px){ .stats-band{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   SECCIÓN "HISTORIA" CON FOTO CIRCULAR
   ========================================================================== */
.story-section{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; }
@media (max-width:860px){ .story-section{ grid-template-columns:1fr; } }

.story-media{ position:relative; display:flex; align-items:center; justify-content:center; min-height:320px; }
.story-photo-ring{
  position:absolute; width:112%; height:112%; border:2px dashed rgba(227,6,19,.4);
  border-radius:50%; animation:md-spin 44s linear infinite;
}
.story-photo-ring.ring-2{ width:128%; height:128%; border-color:rgba(227,6,19,.18); animation-duration:60s; animation-direction:reverse; }
@keyframes md-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.story-photo{
  position:relative; width:320px; height:320px; max-width:78vw; border-radius:50%; overflow:hidden;
  box-shadow:0 30px 60px rgba(128,10,29,.25); border:7px solid #fff; z-index:1;
  background:var(--color-bg-light); /* respaldo visual si la imagen no llega a cargar */
  cursor:pointer;
}
.story-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.story-photo:hover img{ transform:scale(1.12); }

.story-check-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.story-check-item{
  display:flex; align-items:center; gap:10px; background:var(--color-primary-soft);
  padding:12px 18px; border-radius:10px; font-weight:600; font-size:.9rem; color:var(--color-dark);
}
.story-check-item svg{ width:18px; height:18px; stroke:var(--color-primary); fill:none; stroke-width:2.2; flex-shrink:0; }

/* ==========================================================================
   CTA TRANSPARENCIA
   ========================================================================== */
.transparency-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--color-dark); border-radius:var(--radius-lg); padding:30px 34px; color:#fff; margin-top:20px;
}
.transparency-cta h3{ margin:0 0 6px; font-size:1.2rem; }
.transparency-cta p{ margin:0; opacity:.78; font-size:.9rem; max-width:520px; }
.transparency-cta .hero-btn{ box-shadow:none; flex-shrink:0; }

/* Nota informativa reutilizable (avisos editoriales) */
.info-note{ background:var(--color-bg-light); border-radius:14px; padding:22px 24px; margin-bottom:10px; }
.info-note h3{ color:var(--color-dark); font-size:1.05rem; font-weight:700; margin:0 0 8px; }
.info-note p{ color:#555; font-size:.92rem; line-height:1.55; margin:0; }

/* ==========================================================================
   TARJETAS DE AGENCIA (Contáctanos)
   ========================================================================== */
.agency-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; margin-top:30px; }

.agency-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.agency-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }

.agency-map{ position:relative; height:190px; background:var(--color-bg-light); }
.agency-map iframe{ width:100%; height:100%; border:0; display:block; }

.agency-body{ padding:22px; flex:1; display:flex; flex-direction:column; }

.agency-badge{
  display:inline-block; align-self:flex-start; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:#fff;
  padding:5px 12px; border-radius:20px; margin-bottom:12px;
}
.agency-badge.accent-1{ background:var(--color-primary); }
.agency-badge.accent-2{ background:#d97706; }
.agency-badge.accent-3{ background:#0891b2; }
.agency-badge.accent-4{ background:var(--color-gold-dark); }

.agency-body h3{ margin:0 0 14px; font-size:1.1rem; color:var(--color-dark); }

.agency-info-item{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:.86rem; color:var(--color-text-muted); line-height:1.4; }
.agency-info-item svg{ width:16px; height:16px; stroke:var(--color-primary); fill:none; stroke-width:1.8; flex-shrink:0; margin-top:2px; }

.agency-card .btn-outline{ margin-top:auto; padding-top:12px; padding-bottom:12px; text-align:center; font-size:.86rem; width:100%; }

/* ==========================================================================
   FOTOGRAFÍAS INTERACTIVAS
   Imagen con zoom al pasar el cursor (o al tocar en móvil), overlay con
   etiqueta/leyenda que aparece, y una entrada "pop-in" al hacer scroll.
   Reutilizable en cualquier sección de cualquier página.
   ========================================================================== */
.photo-feature{
  position:relative;
  border-radius:var(--radius-droplet);
  overflow:hidden;
  box-shadow:0 24px 48px rgba(17,17,17,.18);
  isolation:isolate;
  cursor:pointer;
  background:var(--color-bg-light); /* respaldo visual si la imagen no llega a cargar */
}
.photo-feature::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,4,6,.72) 0%, rgba(10,4,6,.05) 55%, rgba(10,4,6,0) 75%);
  z-index:1; pointer-events:none;
}
.photo-feature img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3;
  transform:scale(1.06);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
  filter:saturate(1.02);
}
.photo-feature:hover img, .photo-feature:focus-within img{
  transform:scale(1.15) rotate(.3deg);
  filter:saturate(1.18) brightness(1.04);
}
.photo-feature-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 24px;
  color:#fff;
  transform:translateY(18px);
  opacity:.9;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.photo-feature:hover .photo-feature-caption, .photo-feature:focus-within .photo-feature-caption{
  transform:translateY(0);
}
.photo-feature-caption .tag{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.32);
  padding:5px 12px; border-radius:20px; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px;
}
.photo-feature-caption h4{ font-family:var(--font-display); margin:0 0 4px; font-size:1.25rem; font-weight:600; }
.photo-feature-caption p{ margin:0; font-size:.85rem; opacity:.9; max-width:360px; line-height:1.4; }

/* Marco decorativo: bloque de color desplazado detrás de la foto */
.photo-feature-frame{ position:relative; }
.photo-feature-frame::before{
  content:""; position:absolute; z-index:0;
  width:90%; height:90%; border-radius:var(--radius-droplet);
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity:.9;
}
.photo-feature-frame.frame-br::before{ right:-18px; bottom:-18px; }
.photo-feature-frame.frame-tl::before{ left:-18px; top:-18px; }
.photo-feature-frame .photo-feature{ position:relative; z-index:1; }

/* Entrada animada al hacer scroll: además del fade estándar de .md-reveal,
   la foto "aparece" desde un ligero zoom para llamar más la atención. */
.photo-zoom-reveal{ transform:translateY(28px) scale(.94); }
.photo-zoom-reveal.is-visible{ transform:translateY(0) scale(1); }

/* En pantallas táctiles no existe :hover fiable, así que la leyenda queda
   siempre visible y el efecto de interés se apoya en la entrada animada. */
@media (hover:none){
  .photo-feature-caption{ transform:translateY(0); opacity:1; }
  .photo-feature img{ transform:scale(1.02); }
}
@media (max-width:600px){
  .photo-feature-frame::before{ display:none; }
  .photo-feature-caption{ padding:16px 18px; }
}

/* Grilla genérica para mostrar una o varias fotos interactivas seguidas */
.photo-showcase-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:26px; margin:34px 0 6px;
}
.photo-showcase-grid .photo-feature{ height:100%; min-height:260px; }
.photo-showcase-grid .photo-feature img{ height:100%; }