/* =========================
   Cassará Ecuador · inicio.css (PREMIUM)
   Elegante, serio y 100% legible sobre video
   ========================= */

/* -------- Tokens -------- */
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --line:#e7ecf5;
  --ink:#0b1220;
  --muted:#667085;

  --blue-950:#0e244d;
  --blue-900:#1f3a7a;
  --blue-800:#224b92;
  --blue-700:#2f5dcc;
  --blue-600:#356ee0;
  --blue-500:#3e7bf0;
  --blue-300:#59a9ff;
  --blue-200:#8ec8ff;

  --cyan:#2cc6ff;
  --teal:#19c3c8;

  --r-xl:26px; --r-lg:18px; --r:12px;

  --shadow:0 12px 34px rgba(18,44,96,.12);
  --overlay-shift: 0px; /* ajuste fino vertical del overlay */
}

/* -------- Base -------- */
html{ height:auto; }
body{
  min-height:100%;
  margin:0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html, body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ========= HERO FULL-BLEED ========= */
.hero--bleed{
  padding:0;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  position:relative;
}
/* Versión base: Desktop (queda como está) */
.hero--bleed .hero-media {
  position: relative;
  width: 100%;
  height: 270px;
  overflow: hidden;
}

/* Tablets en vertical y móviles grandes (<= 768px) */
@media (max-width: 768px) {
  .hero--bleed .hero-media {
    height: 220px;
  }
}

/* Móviles medianos (<= 480px) */
@media (max-width: 480px) {
  .hero--bleed .hero-media {
    height: 180px;
  }
}

/* Móviles pequeños (<= 360px) */
@media (max-width: 360px) {
  .hero--bleed .hero-media {
    height: 150px;
  }
}

.about-text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;                /* permite dividir palabras en algunos navegadores */
}

/* En pantallas pequeñas: mejor alineado a la izquierda */
@media (max-width: 480px) {
  .about-text {
    text-align: left;
  }
}

/* 1) Bajamos un poco el brillo del video para legibilidad */
.hero--bleed .hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block; border:0;
  box-shadow:var(--shadow);
  /* filter:brightness(.72) contrast(.98); */
}


/* Overlay de texto */
.hero-overlay{ position:absolute; inset:0; z-index:3; }
.overlay-inner{
  position:absolute;
  left:24px; right:auto;
  top:50%;
  transform: translateY(calc(-50% + var(--overlay-shift)));
  max-width:650px;
}

/* 4) Panel vidrio con tinta (oscuro, elegante y legible) */
.overlay-panel {
    background: rgba(0, 0, 0, 0.438);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(8, 20, 40, .28);
    padding: 20px 30px 20px 40px;
}

/* ===== Tipografía del hero ===== */
.eyebrow{
  display:inline-block; padding:6px 14px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff; font-weight:700; font-size:.82rem;
  letter-spacing:.3px;
  backdrop-filter: blur(4px);
}
.eyebrow::before{
  content:""; display:inline-block; width:8px; height:8px;
  background:var(--blue-500); border-radius:50%; margin-right:6px;
}

/* Título principal: blanco puro con micro-sombra (no “stroke”) */
.h1{
  font-size:clamp(2.6rem, 4vw + .6rem, 4rem);
  line-height:1.08;
  margin:14px 0 10px;
  font-weight:800;
  color:#fff;                     /* clave */
  letter-spacing:-0.5px;
  text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.25); /* micro-sombra elegante */
}

/* Subtítulo con alto contraste */
.subtitle{
  font-size:1.16rem;
  color:rgb(255, 255, 255);   /* legible sobre panel oscuro */
  margin:0 0 20px;
  max-width:60ch;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}

/* Botones */
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 18px; border-radius:999px;
  font-weight:900; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--blue-700); color:#fff; }
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-1px); }
.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff;
}
.btn-ghost:hover{
  border-color:#fff; transform:translateY(-1px);
}

.btn-primary:hover::after{ left:160%; }

/* ========= MÉTRICAS ========= */
.strip{
  background:#fff;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  justify-content: center;
  padding-top: 20px;
}


@media (max-width:980px){ .metric-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .metric-row{ grid-template-columns:1fr; } }

/* === tarjetas métricas más compactas === */
.metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: linear-gradient(179deg, #fff, #9ca4ff21);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 12px;
    min-height: 100px;
    text-align: center;
    transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.metric2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    padding: 14px 12px;
    min-height: 100px;
    text-align: center;
    transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.metric:hover{
  transform:translateY(-2px);
  border-color:rgba(62,123,240,.22);
  background:linear-gradient(180deg,#fff,#fafdff);
}
.metric .num{ font-size:1.4rem; font-weight:900; color:var(--blue-800); line-height:1; }
.metric .label{ color:var(--muted); font-weight:700; font-size:.92rem; }

.metric--double{ gap:10px; }
.metric--double .pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;       /* antes 10px 14px */
  border-radius:999px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--line);
}
.metric--double .pill .num{ font-size:1.1rem; color:var(--blue-800); }
.metric--double .pill em{ font-style:normal; color:var(--muted); font-weight:700; font-size:.9rem; }

/* ==== Áreas foco (botones dentro del metric) ==== */
.metric--focus .label{ margin-bottom:4px; }
/* Botones de Áreas foco: mismo tamaño */
.metric--focus .metric-actions{
  flex-direction: column;
  align-items: stretch;
}
.metric--focus .btn-sm{
  width: 100%;
  text-align: center;
}
.metric-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--line);
  box-shadow:0 3px 8px rgba(14,36,77,.08);
  margin-bottom:8px;
  color:var(--blue-700);
  font-size:22px;
}

.metric-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Botón compacto para métricas */
.btn-sm{
  padding:10px 14px;
  font-weight:800;
  font-size:.92rem;
  line-height:1;
}

/* Hover en métricas */
.metric .btn:hover{
  transform:translateY(-1px);
}

/* Overrides botones ghost en métricas */
.metric--focus .btn-ghost{
  color: var(--blue-800);
  border-color: rgba(47,93,204,.28);
  background:#fff;
}
.metric--focus .btn-ghost:hover{
  border-color: var(--blue-600);
  background: linear-gradient(180deg,#fff,#fafdff);
  transform: translateY(-1px);
}
.metric--focus .btn-primary{
  box-shadow: 0 6px 16px rgba(47,93,204,.18);
}

/* ========= SECCIONES ========= */
.section{ padding:60px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.section h2{ margin:0; font-size:clamp(1.4rem,2.2vw + .5rem,2.1rem); }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f7fbff); color:var(--ink); font-weight:800; font-size:.82rem;
}
.chip::before{ content:""; width:10px; height:10px; border-radius:2px; background:var(--blue-500); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr; } }

.card{
  position:relative; border-radius:var(--r-lg); padding:22px; overflow:hidden;
  background:linear-gradient(180deg,#fff,#f9fcff);
  border:1px solid var(--line);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(62,123,240,.22);
  background:linear-gradient(180deg,#fff,#fafdff);
}
.card h3{ margin:6px 0 8px; font-size:1.15rem; }
.card p{ margin:0; color:var(--muted); }

/* ========= BANDAS / CTA ========= */
.band{
  position:relative; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff;
  padding:0; margin-top:12px;
}
.band-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:28px; }
.band h3{ margin:0; font-size:1.25rem; }
.band p{ margin:6px 0 0; color:var(--muted); }
.band::after{
  content:""; position:absolute; top:0; right:0; width:110px; height:100%;
  background:
    linear-gradient(0deg, transparent 0 14%, rgba(0,0,0,0.02) 14% 15%, transparent 15% 29%, rgba(0,0,0,0.02) 29% 30%,
                           transparent 30% 44%, rgba(0,0,0,0.02) 44% 45%, transparent 45% 59%, rgba(0,0,0,0.02) 59% 60%,
                           transparent 60% 74%, rgba(0,0,0,0.02) 74% 75%, transparent 75% 100%);
}

/* ========= FOOTER ========= */
footer{ background:#fff; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; padding:28px 0; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr; } }
.foot-note{ color:var(--muted); }

/* ========= RESPONSIVE ========= */
@media (max-width: 880px){
  .overlay-inner{ left:16px; }
  .overlay-panel{ padding:16px; border-radius:16px; background: rgba(10,18,32,.52); }
  .h1{ font-size:clamp(2.2rem, 6vw, 3rem); }
  .subtitle{ font-size:1.06rem; }
  .btn{ padding:12px 16px; }
}
@media (max-width: 560px){
  .overlay-inner{
    left:0; right:0;
    padding:0 16px;
  }
  .overlay-panel{
    width:100%;
    padding:16px;
    border-radius:16px;
    box-sizing:border-box;
  }
  .h1{ font-size:clamp(2rem, 7.2vw, 2.6rem); }
}
/* === Fix: botones centrados sin desbordar en móvil === */
.metric{
  overflow: hidden;                 /* recorta lo que se sale del borde redondeado */
}

.btn{
  box-sizing: border-box;           /* el ancho incluye borde/padding -> sin desbordes raros */
}

.metric--focus .metric-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;      /* centra horizontal */
  justify-content: center;  /* centra vertical */
  width: 100%;
  padding-inline: 8px;      /* respiro para que el 100% no toque el borde del card */
  text-align: center;       /* asegura que texto y botones se alineen al centro */
}

.metric--focus .btn-sm{
  display:block;
  width: 100%;                      /* ocupa el ancho disponible del contenedor */
  max-width: 320px;                 /* límite elegante en móvil */
  margin-inline: auto;              /* centrado perfecto */
  text-align: center;
}

/* En pantallas medianas+ quieres fila centrada? */
@media (min-width: 768px){
  .metric--focus .metric-actions{
    flex-direction: row;
    justify-content: center;
    padding-inline: 0;
  }
  .metric--focus .btn-sm{
    width: auto;
    min-width: 220px;               /* ambos iguales visualmente */
  }
}

/* ========== HERO · ACENTOS AZULES MINIMAL (no rompe nada) ========== */

/* 0) Grid sutil sobre el video (blueprint elegante) */
.hero--bleed .hero-media::before{
  content:"";
  position:absolute; inset:0;
  z-index:1; /* debajo del scrim, encima del video */
  pointer-events:none;
  background:
    /* líneas finas verticales */
    linear-gradient(to right, rgba(62,123,240,.06) 1px, transparent 1px) 0 0 / 24px 24px,
    /* líneas finas horizontales */
    linear-gradient(to bottom, rgba(62,123,240,.06) 1px, transparent 1px) 0 0 / 24px 24px;
  mix-blend-mode: soft-light;
}

/* 1) Subrayados dobles del título (dos barras desfasadas) */
.h1{
  position:relative;
  isolation:isolate;
}


/* 2) Esquineros finos en el panel (marco técnico) */
.overlay-panel{
  position:relative;
}
.overlay-panel::before,
.overlay-panel::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  pointer-events:none;
  border-radius:6px;
}
.overlay-panel::before{
  /* esquina sup-izq */
  top:10px; left:10px;
  border-top:2px solid rgba(94,153,255,.9);
  border-left:2px solid rgba(94,153,255,.9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.overlay-panel::after{
  /* esquina inf-der */
  right:10px; bottom:10px;
  border-right:2px solid rgba(47,93,204,.9);
  border-bottom:2px solid rgba(47,93,204,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}

/* 3) Swoosh diagonal muy suave (identidad dinámica) */
.hero-overlay::after{
  content:"";
  position:absolute;
  inset:auto 0 18% 0;           /* parte baja del hero */
  height:140px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(62,123,240,.18), transparent);
  transform:skewY(-6deg);
  filter:blur(18px);
  opacity:.35;
  animation: cassaraSweep 7.5s ease-in-out infinite alternate;
}
@keyframes cassaraSweep{
  from{ transform: translateX(-8%) skewY(-6deg); opacity:.28; }
  to  { transform: translateX(8%)  skewY(-6deg); opacity:.40; }
}


/* Accesibilidad: si prefieren menos movimiento, apagamos animación */
@media (prefers-reduced-motion: reduce){
  .hero-overlay::after{ animation:none; }
}

/* Responsivo fino para que los acentos no invadan */
@media (max-width:880px){
  .h1::after{ right:20%; height:5px; }
  .h1::before{ right:44%; bottom:-14px; }
}
@media (max-width:880px){
  .h1::after{ right:20%; height:5px; }
.overlay-panel {
    background: rgba(0, 9, 34, 0.19);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(8, 20, 40, .28);
    padding: 20px 30px 20px 40px;
}
}
@media (max-width:560px){
  .h1::after{ right:12%; height:4px; bottom:-8px; }
  .h1::before{ right:38%; bottom:-12px; }
  .hero-overlay::after{ height:110px; filter:blur(14px); }
}
/* ===== Sección About moderna debajo del hero ===== */
.about-cassara{
  position: relative;
  padding: clamp(12px, 3vw, 20px) 0;
  /* fondo sutil con diagonal azul muy tenue */
  background: rgb(250, 247, 255);
}

.about-cassara::before{
  /* línea/ornamento minimal en esquina superior izquierda */
  content:"";
  position:absolute; inset:0 auto auto 0;
  width:120px; height:120px; translate: -24px -24px;
  filter: blur(16px);
  pointer-events:none;
  z-index:-1;
}

.about-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* imagen un poquito más grande */
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
}

/* Imagen tipo “card” elegante */
.about-media{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: clip;
  background: #fff;

}
.about-media img{
  display:block; width:100%; height:auto;
  aspect-ratio: 16/11; object-fit: cover;
  transform: translateZ(0);
}

/* ===== Video slider (About) ===== */
.video-slider{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 9;
  padding: 0 6px; /* recorte solo izquierda/derecha con borde blanco */
}
.video-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.video-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.video-slide video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0b1220;
}

.video-label{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 3;
}
.video-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.9);
  color: var(--blue-700);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 3;
}
.video-prev{ left: 10px; }
.video-next{ right: 10px; }
.video-nav:focus-visible{ outline: 2px solid var(--blue-700); outline-offset: 2px; }

.video-slider:hover .video-label,
.video-slider:hover .video-nav{
  opacity: 1;
}

@media (max-width: 640px){
  .video-nav{
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }
}

/* Mobile: label y botones siempre visibles fuera del video */
@media (max-width: 640px){
  .video-slider{
    padding-top: 40px;
  }
  .video-label{
    top: 6px;
    left: 8px;
    opacity: 1;
  }
  .video-nav{
    top: 20px;
    opacity: 1;
  }
  .video-prev{ left: auto; right: 52px; }
  .video-next{ right: 8px; }
}
.about-media::after{
  /* máscara de degradado muy sutil para dar profundidad */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,36,77,.03), rgba(14,36,77,.00) 35%, rgba(14,36,77,.05));
  pointer-events:none;
}

/* Texto */
.about-copy .eyebrow{
  display:inline-block;
  font-size: .85rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: rgba(47,93,204,.08);
  border: 1px solid rgba(47,93,204,.18);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.about-copy h2{
  margin: 8px 0 10px;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink);
}
.about-copy p{
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  max-width: 52ch;
  text-align: justify;
  text-justify: inter-word;
}


/* CTA */
.about-cta{ margin-top: 18px; }
.btn-outline{
  display:inline-block;
  border:1px solid var(--blue-700);
  color: var(--blue-700);
  background: transparent;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-outline:hover{
  background: var(--blue-700);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47,93,204,.24);
  transform: translateY(-1px);
}

/* Hover/parallax muy leve en desktop */
/* Responsive */
@media (max-width: 980px){
  .about-wrap{ grid-template-columns: 1fr; }
  .about-media{ order: 1; }
  .about-copy{ order: 2; }
  .about-copy p{ max-width: none; }
}



/* Accesibilidad: respeta usuarios con motion reducido */
@media (prefers-reduced-motion: reduce){
  .about-media, .btn-outline{ transition: none !important; }
}
/* ===== Líneas terapéuticas (full-bleed, 2 columnas) ===== */
.thera--bleed{
  background:#fff;
  text-align: center;
}

.thera-head {
    padding: 40px;
}

.thera-title{
    margin:0;
    font-size: 2.19em;
    color: var(--ink);
}
.thera-title-not{
    margin:0;
    font-size: 2.19em;
    color: var(--ink);
    text-align: left;
    padding: 40px 40px 10px 25px;
}
/* Fila full-bleed: ocupa todo el ancho de la ventana */
.thera-row{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Tarjeta con imagen */
.thera-card{
  position: relative;
  min-height: clamp(220px, 38vw, 420px);
  overflow: hidden;
  display: block;
  isolation: isolate;
}
.thera-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* Scrim de legibilidad */
.thera-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.08) 40%, rgba(0,0,0,.12));
  z-index: 1;
  pointer-events: none;
}

/* Pastilla centrada */
.thera-pill{
  position:absolute; inset:50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background:#fff;
  color: var(--blue-900);
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(14,36,77,.10);
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(14,36,77,.16);
  text-align: center;
  white-space: nowrap;
}

/* Hover limpio */
@media (hover:hover){
  .thera-card:hover img{ transform: scale(1.06); }
}

/* Responsive: 1 columna en móvil */
@media (max-width: 880px){
  .thera-row{ grid-template-columns: 1fr; }
  .thera-card{ min-height: clamp(220px, 48vw, 360px); }
  .thera-pill{ padding: 11px 18px; }
}
@media (max-width: 643px) {
    h3.thera-title {
    margin: 0 !important;
    font-size: 1.8rem !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
  }
    h3.thera-title-not {
    margin: 0 !important;
    font-size: 1.8rem !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
    padding-bottom: 10px !important;
  }
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* inicia oculto */
}

.hero-video.is-loaded {
  opacity: 1; /* se muestra con transición */
}


/* ===== Lo que hacemos · Cards (aislado) ===== */
.hacemos .container{ max-width: 1200px; margin: 0 auto; padding: 0px 20px 40px 20px; }

.hacemos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}

.hacemos-card{
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 10px 26px rgba(18,44,96,.06);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

.hacemos-card:hover{
  border: 1px solid var(--line, #e7ecf5);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(18,44,96,.10);
  border-color: rgb(0, 66, 199);
}

/* Icono redondo */
.hacemos-icon{
  width: 44px;
  height: 44px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.hacemos-icon i {
  font-size: 1.8rem; /* 22px */
  color: var(--blue-700, #2f5dcc);
}

/* Títulos y texto */
.hacemos-title{
  margin: 0 0 10px;
  font-size: 1.125rem; /* 18px */
  line-height: 1.35;
  color: var(--ink, #0b1220);
  font-weight: 700;
  letter-spacing: .2px;
}

.hacemos-text{
  margin: 0;
  color: var(--muted, #667085);
  font-size: .95rem;
  line-height: 1.65;
}

/* Responsivo */
@media (max-width: 1024px){
  .hacemos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){

  .hacemos-grid{ grid-template-columns: 1fr; gap: 18px; }
  .hacemos-card{ padding: 20px 18px; border-radius: 16px; }
  .hacemos-title{ font-size: 1.05rem; }
  .hacemos-text{ font-size: .95rem; }
}


/* ===== Distribución Futuro 2025 ===== */
.distribucion-futuro{
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* Fondo abstracto animado (sobrio) */
.distribucion-bg{
  position: absolute; inset:0;
  background:
    radial-gradient(1200px circle at 15% 30%, rgb(27, 63, 161), transparent 70%),
    radial-gradient(900px circle at 85% 70%, rgb(2, 5, 54), transparent 60%),
    linear-gradient(135deg, #090e58 0%, #09295a 100%);
  z-index:0;
  animation: bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Layout 2 columnas (exacto 50/50) */
.distribucion-futuro .container{
  max-width: 100%;
  padding: 0;
}

.distribucion-wrap{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ✅ mitad/mitad exacto */
  min-height: clamp(320px, 48vw, 420px);
  align-items: stretch;
}

/* ===== Columna izquierda: imagen ===== */
.distribucion-media{
  position: relative;
  overflow: hidden;
}
.distribucion-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ===== Columna derecha: bloque azul ===== */
.distribucion-card{
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
  padding: 80px;
  background: #034c8a;   /* ✅ sólido azul */
  border-radius: 0; box-shadow: none;
}

.distribucion-card h2{
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  color: #fff;
}
.distribucion-card .distribucion-text {
  margin: 0;
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: #e9f1ff;

  /* Estética bonita */
  text-align: justify;
  text-justify: inter-word;
  text-wrap: balance;
  hyphens: auto;

  letter-spacing: 0.01em;
  word-spacing: 0em;
}


/* Solo justificar cuando hay ancho suficiente (desktop grande) */
@media (min-width: 1200px){
  .distribucion-card .distribucion-text{
    text-align: justify;
    text-justify: inter-word;
    text-wrap: balance;  /* líneas más parejas en ancho grande */
  }
}


/* Responsive: apilar en móvil */
@media (max-width: 880px){
  .distribucion-wrap{ grid-template-columns: 1fr; }
  .distribucion-media{ min-height: 220px; }
  .distribucion-card{ padding: 24px 20px; }
}


/* ===== Nuestros valores · grid 2025 ===== */
.valores{ background:#fff; }

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

/* Tarjeta */
.valores-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg,#fff,#f9fcff);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 8px 22px rgba(14,36,77,.08);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Imagen con aspecto fijo para que todas midan igual */
.valores-media{
  margin: 0;                 /* quita margen default del <figure> */
  height: 220px;             /* alto fijo del cuadro (ajústalo a gusto) */
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.valores-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 🔑 rellena sin deformar, recortando lo que sobra */
  object-position: center;   /* centra el recorte */
  display: block;
}
/* Contenido */
.valores-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 18px;
  min-height: 210px;            /* uniformidad visual */
}
.valores-title{
  margin:0;
  font-size: 1.1rem;
  line-height:1.25;
  font-weight:800;
  color: var(--ink);
  letter-spacing:.2px;
}
.valores-text {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.65;

  /* Justificación limpia */
  text-align: justify;
  text-justify: inter-word;
  text-wrap: balance;
  hyphens: auto;
}

/* Acento lateral sutil (identidad Cassará) */
.valores-card::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-300));
  opacity:.9;
}

/* Responsivo */
@media (max-width: 1100px){
  .valores-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .valores-media{ height: 240px; }
}
@media (max-width: 560px){
  .valores-grid{ grid-template-columns: 1fr; }
  .valores-body{ min-height: unset; }
}


/* ===== Farmacias y Clientes · partners ===== */
.partners{
  padding-top: 45px;
  background: #fff;
}
.partners-head{ text-align:center; margin-bottom: 14px; }
.partners-title{
  margin:0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--ink);
}
.partners-sub{
  margin: 6px auto 0;
  color: var(--muted);
  max-width: 62ch;
  font-weight: 700;
  font-size: .96rem;
}

/* Grid moderno de logos */
.partners-grid{
  list-style:none; margin: 14px 0 0; padding:0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.partners-item{
  background: linear-gradient(180deg,#fff,#f9fcff);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px;
  display:grid; place-items:center;
  min-height: 92px;
  box-shadow: 0 6px 16px rgba(14,36,77,.06);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.partners-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(14,36,77,.10);
  border-color: rgba(47,93,204,.18);
}
.partners-item img{
  max-width: 150px;
  max-height: 46px;
  width: auto; height: auto;
  object-fit: contain;
  transition: filter .25s ease, transform .2s ease;
}
.partners-item:hover img{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.03);
}

/* ===== Franja tipo marquee con dos tracks ===== */
.partners-strip{
  display: grid;
  gap: 10px; /* espacio entre SET A y SET B */
}

/* Cada set controla su pista */
.partners-lane{
  position: relative;     /* clave para posicionar .partners-track */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: none;
  height: 70px;           /* alto de la franja */
}

/* Pista animada */
.partners-track{
  position: absolute;
  top: 50%;
  transform: translate(130%, -50%); /* arranca fuera a la derecha */
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
  white-space: nowrap;
  will-change: transform;
}
.partners-track img{
  height: 40px; width: auto; object-fit: contain;
  transition: filter .2s ease, transform .2s ease;
}

/* ===== Animación (misma velocidad; B espera 10s) ===== */
:root{
  --marquee-duration: 40s;  /* velocidad global */
  --marquee-delay-b: 23s;   /* B sale 10s después */
}

.partners-track-a{
  animation: marquee var(--marquee-duration) linear infinite;
  animation-fill-mode: both;
}

.partners-track-b{
  animation: marquee var(--marquee-duration) linear infinite;
  animation-delay: var(--marquee-delay-b);
  animation-fill-mode: both; /* se queda fuera mientras espera */
}

/* Recorrido: de derecha (130%) a izquierda (-100%) */
@keyframes marquee{
  0%   { transform: translate(125%, -50%); }
  100% { transform: translate(-100%, -50%); }
}

/* Responsive */
@media (max-width: 980px){
  .partners-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .partners-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .partners-item{ min-height: 84px; padding: 14px; }
  .partners-item img{ max-width: 130px; max-height: 40px; }
  .partners-strip{ display:none; } /* oculta franja en móvil si quieres */
}

/* ===== Justificar solo párrafos (inicio) ===== */
@media (min-width: 640px){
  p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}
/* Mantener títulos y textos especiales sin justificar / o corrigiendo herencias de centrado */
h1, h3, h4, h5, h6,
.h1,
.thera-title,
.hacemos-title,
.valores-title,
.partners-title { text-align: center !important; }
.subtitle{ text-align: left; }

.thera-title-not{ text-align: left !important; }



/* ===== Hacemos: cards con resumen alineado y botón al fondo (versión moderna) ===== */
.hacemos-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* icono, título, texto, botón */
  gap: 10px;
}

/* Texto truncado visualmente con número fijo de líneas */
.hacemos-text.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;

  display: box;
  box-orient: vertical;
  line-clamp: 5;

  overflow: hidden;
  text-overflow: ellipsis;

  hyphens: auto;                /* mejora visual del corte */
  text-align: justify;          /* mantiene tu estilo global */
}

/* Contenedor del botón */
.hacemos-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

/* Estilo del botón */
.hacemos .btn-sm {
  font-weight: 700;
  font-size: .92rem;
  padding: 10px 16px;
  border-radius: 12px;
}

/* En pantallas pequeñas puedes mostrar más texto */
@media (max-width: 640px) {
  .hacemos-text.clamp {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}










/* =======================================================
   CARRUSEL · DESTACADAS (NIVELADO · MOBILE FIRST)
   ======================================================= */
.news-featured{
  margin:24px 0 36px;
  position:relative;
}

.news-carousel{
  position:relative;
  overflow:visible;
  padding-inline:30px;          /* en desktop aumentamos para flechas */
  border:0; border-radius:0;
}

/* Pista */
.news-track{
  display:flex;
  gap:14px;
  align-items:stretch;
  will-change:transform;
  transition:transform .28s ease;
  overflow-x:auto;              /* swipe en celus */
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:30px;
  padding-bottom:0;             /* sin aire extra */
}
.news-track::-webkit-scrollbar{ display:none; }

/* Slide (card) */
.news-slide{
  flex:0 0 86%;
  min-width:260px;
  background:#fff;
  box-shadow:0 6px 16px rgba(14,36,77,.06);
  display:flex;
  align-items:stretch;
  border:0; border-radius:12px;
  scroll-snap-align:center;
  scroll-snap-stop:always;      /* << imán fuerte para encajar en cada slide */
  padding-bottom:0;             /* seguridad */
  overflow:visible;
}

/* Contenedor del contenido */
.news-slide__link{
  display:grid;                  /* base desktop */
  grid-template-rows:auto 1fr;
  width:100%; height:100%;
  color:inherit; text-decoration:none;
  gap:0;
  padding:0;
}

/* Media (figure) */
.news-media--hero{
  margin:0!important;
  padding:0!important;
  border:0;
  aspect-ratio:4/3;              /* alto agradable en celus */
  overflow:hidden;
  display:block;
  line-height:0;                 /* mata espacio baseline */
}
.news-media--hero img{
  width:100%;
  height:100%;
  display:block;                 /* sin inline-gap */
  object-fit:cover;
  object-position:center;
  -webkit-user-drag:none;
  user-select:none;
}

/* Meta (texto) */
.news-slide__meta{
  display:grid;
  grid-template-rows:auto auto 1fr; /* tag, título, texto */
  gap:10px;
  padding:14px 14px 16px;
  background:#fff;
  margin:0;
  overflow:visible;
  position:relative; z-index:5;  /* ← siempre por encima de flechas */
}
.news-slide__title,
.news-slide__excerpt{ position:relative; z-index:5; }

.news-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  font-size:.82rem; font-weight:800;
  color:var(--blue-900,#1f3a7a);
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--line,#e7ecf5);
  border-radius:999px;
}
.news-tag .news-date{ color:inherit; }
.news-date{ display:inline-block; font-size:.85rem; color:#6b7280; }

/* Título */
.news-slide__title{
  font-size:clamp(1rem,2.4vw + .6rem,1.35rem);
  font-weight:800;
  line-height:1.35;
  margin:0;
  color:var(--ink,#0b1220);
  overflow:hidden;
}

/* Extracto (altura reservada SOLO en >=600px para igualar cards) */
.news-slide__excerpt{
  --lines:6;
  line-height:1.6;
  min-height:calc(var(--lines) * 1.6em);
  max-height:calc(var(--lines) * 1.6em);
  margin:0;
  color:var(--muted,#667085);
  text-align:justify;
  overflow:hidden;
  position:relative;
}
/* Sin degradado */
.news-slide__excerpt::after{ content:none!important; display:none!important; }

/* Flechas (por defecto ocultas) */
.news-nav{
  position:absolute;
  top:50%;
  width:44px; height:44px; line-height:42px;
  border-radius:50%;
  border:1px solid var(--line,#e7ecf5);
  background:#fff;
  color:var(--blue-700,#2f5dcc);
  font-size:1.4rem; text-align:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(14,36,77,.06);
  z-index:2;                      /* por debajo del texto */
  transform:translateY(-50%);
  display:none;                   /* móvil: ocultas */
}
.news-nav:focus-visible{ outline:2px solid #2f5dcc; }

/* =======================================================
   MOBILE OVERRIDES — texto pegado a la imagen (sin aire)
   ======================================================= */
@media (max-width:767.98px){


  .news-slide__meta{
    flex:1 1 auto;
    padding:16px 16px 12px!important;
    margin:0!important;
    display:flex;                 /* control vertical */
    flex-direction:column;
    justify-content:flex-end;     /* ancla título + texto abajo */
    gap:10px;
  }



  .news-media--hero{
    order:3;
    margin-top:auto!important;    /* pega al fondo de la card */
    width:100%;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
  }

  .news-slide{
    flex-basis:90%;
    min-width:280px;
    padding-bottom:0!important;
  }
  .news-slide__title{ font-size:clamp(1.05rem,2.6vw + .6rem,1.35rem); }

  .news-carousel{ padding-inline:12px; }
  .news-track{ gap:0px; padding-bottom:0!important; scroll-padding-inline:12px; }

  .news-nav{ display:none!important; }   /* swipe-only en móvil */
}

/* =======================================================
   BREAKPOINTS
   ======================================================= */
@media (min-width:600px){
  .news-carousel{ padding-inline:24px; }
  .news-track{ gap:16px; scroll-padding-inline:24px; }
  .news-slide{ flex-basis:62%; }
  .news-media--hero{ aspect-ratio:3/2; }
  .news-slide__excerpt{ --lines:3; }     /* vuelve la reserva leve */
}

@media (min-width:768px){
  /* Reservamos margen para flechas y las ponemos por fuera sin tapar */
  .news-carousel{ padding-inline:52px; }  /* margen seguro para clic */
  .news-track{
    gap:18px; scroll-padding-inline:52px;
    overflow-x:hidden;                 /* desktop usa flechas/JS */
  }
  .news-slide{ flex-basis:48%; }
  .news-media--hero{ aspect-ratio:16/9; order:initial; margin-top:0; }
  .news-slide__excerpt{ --lines:6; }

  .news-nav{ display:block; }
  .news-prev{ left:-28px; }   /* ← fuera del carrusel, sin translateX */
  .news-next{ right:-28px; }
}

@media (min-width:1024px){
  .news-carousel{ padding-inline:70px; }
  .news-track{ gap:0px; scroll-padding-inline:68px; }
  .news-slide{ flex-basis:33.333%; }
  .news-slide__title{ font-size:clamp(1.05rem,1.1vw + .7rem,1.45rem); }
  .news-slide__excerpt{ --lines:6; }

  .news-prev{ left:-34px; }
  .news-next{ right:-34px; }
}

@media (min-width:1400px){
  .news-carousel{ padding-inline:70px; }
  .news-track{ gap:0px; scroll-padding-inline:68px; }
  .news-slide{ flex-basis:33.333%; }
  .news-slide__title{ font-size:clamp(1.05rem,1.1vw + .7rem,1.45rem); }
  .news-slide__excerpt{ --lines:4; }

  .news-prev{ left:-34px; }
  .news-next{ right:-34px; }
}

/* Dots (por defecto ocultos) */
.news-dots{ display:none; }










/* =======================================================
   GRILLA · ÚLTIMAS
   ======================================================= */
.news-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
.news-card{
  background:#fff; border:1px solid var(--line, #e7ecf5);
  border-radius:16px; box-shadow:0 6px 16px rgba(14,36,77,.06);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.news-card > a{
  display:grid; grid-template-rows:auto 1fr; gap:0;
  height:100%; color:inherit; text-decoration:none; padding:0;
}
.news-card__media{
  margin:0 !important; padding:0 !important; border:0;
  aspect-ratio: 16 / 9;
  overflow:hidden; display:block;
}
.news-card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.news-card__body{
  display:grid; grid-template-rows:auto auto auto auto;
  gap:10px; padding:16px; background:#fff;
}
.news-card__body .news-tag{ margin-bottom:2px; }
.news-card__title{
  margin:0; font-size:1rem; line-height:1.35;
  color:var(--ink,#0b1220); font-weight:800;
}
.news-card__excerpt{
  --lines:4; line-height:1.65;
  min-height:calc(var(--lines)*1.65em);
  max-height:calc(var(--lines)*1.65em);
  margin:0; color:var(--muted,#667085);
  text-align:justify; overflow:hidden; position:relative;
}
.news-card__excerpt::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--surface,#fff) 85%);
  pointer-events:none;
}
.news-card__footer{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.news-ctaa{
  display:inline-block; padding:8px 12px; border-radius:12px;
  border:1px solid var(--blue-700,#2f5dcc); color:var(--blue-700,#2f5dcc);
  font-weight:700; font-size:.9rem; line-height:1;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.news-card:hover{ background:var(--blue-700,#2f5dcc); color:#fff; box-shadow:0 10px 24px rgba(47,93,204,.18); transform:translateY(-1px); }
.news-ctaa:hover{ background:var(--blue-700,#2f5dcc); color:#fff; box-shadow:0 10px 24px rgba(47,93,204,.18); transform:translateY(-1px); }

/* -------- Botón "Ver todas" -------- */
.news-all{ margin-top:26px; text-align:center; }
.news-all .btn-outline{
  padding:12px 20px; border-radius:999px; font-weight:800;
  border:1px solid var(--blue-700,#2f5dcc); color:var(--blue-700,#2f5dcc);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.news-all .btn-outline:hover{
  background:var(--blue-700,#2f5dcc); color:#fff;
  box-shadow:0 10px 24px rgba(47,93,204,.18);
}

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 1100px){
  .news-slide{ flex-basis: 50%; }
  .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .news-slide{ flex-basis: 100%; }
  .news-prev, .news-next{ display:none; }
  .news-grid{ grid-template-columns: 1fr; }
  .news-slide__title{ --tlines: 2; }
  .news-slide__excerpt{ --lines: 4; }
  .news-card__excerpt{ --lines: 5; }
  .news-card__media{ aspect-ratio: 4 / 3; } /* un poco más alta en móvil */
}

/* Prevención de bugs raros */
.news-card img, .news-slide img{ -webkit-user-drag:none; user-select:none; }
.news-card a, .news-slide a{ outline:none; }
.news-card a:focus-visible, .news-slide a:focus-visible{
  outline: 2px solid var(--blue-500,#3e7bf0); outline-offset: 2px;
}

/* ===== Noticias · Estilos premium (refactor) ===== */

/* Contenedor general */
.news-wrap{ margin-top:16px; display:grid; gap:28px; }

/* Pill/Tag */
.news-tag{
  display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.02em;
  color:#1554c0; background:rgba(53,110,224,.10); border:1px solid rgba(53,110,224,.25);
  padding:.25rem .6rem; border-radius:999px; white-space:nowrap;
}

/* ===== Carrusel destacado ===== */
.news-featured{ position:relative; }
.news-carousel{
  position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg,#fff,#f9fbff);
  box-shadow: 0 12px 34px rgba(18,44,96,.06);
}

/* Pista */
.news-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.news-track::-webkit-scrollbar{ display:none; }
.news-track{ scrollbar-width:none; }

/* Slide */
.news-slide{
  min-width:100%; scroll-snap-align:center;
  grid-template-columns: 1.15fr 1fr; align-items:stretch;
}
@media (max-width: 900px){
  .news-slide{ grid-template-columns:1fr; }
}

/* Clickable */
.news-slide__link{
  display:grid; grid-template-columns:inherit; color:inherit; text-decoration:none;
}

/* Imagen principal (forzamos relación y recorte) */
.news-media{ margin:0; height:100%; }
.news-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 16 / 9 !important;}
.news-media.news-media--hero{ aspect-ratio: 16/9; height:auto; } /* consistente en desktop */
@media (min-width: 901px){
  .news-media.news-media--hero{ aspect-ratio:auto; min-height:450px; }
}

.news-slide__excerpt {
  display: -webkit-box;
  display: box; /* Fallback (muy limitado, algunos navegadores antiguos) */

  -webkit-box-orient: vertical;
  box-orient: vertical; /* Estándar */

    --lines: 6;
    line-clamp: 6;

  overflow: hidden;
  text-overflow: ellipsis;

  text-align: justify;
  text-justify: inter-word;
  text-wrap: balance;
  hyphens: auto;

  line-height: 1.6;
}
@media (max-width: 364px) {
  .news-slide__excerpt {
    text-align: left;
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}


/* Meta textual */
.news-slide__meta{
  padding:28px; display:grid; align-content:center; gap:12px; max-width:640px;
}
@media (max-width: 900px){
  .news-slide__meta{ padding:20px; }
  .news-slide__excerpt{ --lines:5; }

  .news-prev{ left:-34px; }
  .news-next{ right:-34px; }
}
.news-slide__title{ margin:0; font-size: clamp(1.1rem, 2.2vw, 1.8rem); line-height:1.25; color:var(--ink); }
.news-slide__excerpt{ margin:0; color:var(--muted); font-size:clamp(.95rem, 1.4vw, 1rem); }
.news-date{ font-size:.85rem; color:#5a6b89; }

/* Navegación (prev/next) */
.news-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:999px; border:1px solid var(--line);
  background:#fff; box-shadow: 0 6px 16px rgba(18,44,96,.10);
  display:grid; place-items:center; font-size:22px; line-height:1; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.news-prev{ left:12px; } .news-next{ right:12px; }
.news-nav:hover{ border-color:#cbd6ee; transform:translateY(-50%) scale(1.03); }
@media (max-width: 640px){
  .news-nav{ width:38px; height:38px; font-size:20px; }
}

/* Dots */
.news-dots{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:1;
}
.news-dot{
  width:8px; height:8px; border-radius:999px; background:#c7d5f7; border:1px solid #bcd0ff; opacity:.7;
  transition: width .22s ease, background .2s ease, opacity .2s ease, border-color .2s ease;
}
.news-dot.is-active{ width:22px; background:var(--blue-600); border-color:var(--blue-600); opacity:1; }

/* ===== Grilla de cards ===== */
.news-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    padding: 11px 0px;
}
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .news-grid{ grid-template-columns: 1fr;} }

.news-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow: 0 8px 20px rgba(18,44,96,.06); transition: transform .14s ease, box-shadow .2s ease;
}
.news-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(18,44,96,.09); }

/* Forzamos altura visual de la media */
.news-card a{ display:grid; grid-template-rows: auto 1fr; color:inherit; text-decoration:none; }
.news-card__media{ aspect-ratio: 16/9; }
.news-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.news-card__body {
    padding: 25px;
    display: grid;
    gap: 8px;
}
.news-card__title{ margin:0; font-size:1rem; line-height:1.35; color:var(--ink); }
.news-card__excerpt{ margin:0; color:var(--muted); font-size:.95rem; }
.news-card__footer{
  margin-top:6px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.news-cta{
  font-weight:600; font-size:.95rem; color:var(--blue-700);
  border-bottom:1px solid rgba(47,93,204,.35);
}
.news-cta:hover{ color:var(--blue-600); border-color:var(--blue-600); }

/* CTA general */
.news-all{ display:flex; justify-content:center; margin-bottom: 50px;}


/* ===== Fixes finos ===== */
/* Evita “saltos” por imágenes tardías */
.news-carousel img,
.news-grid img{ transform:translateZ(0); }

/* En móviles, pone primero el texto para que se lea antes del scroll de imagen (opcional) */
@media (max-width:900px){
  .news-slide__link{ 
    display:block;           /* asegura bloque */
    grid-auto-flow:row; 
  }

  .news-slide__meta{ 
    order:-1; 
    width:100%;              /* ocupa todo el ancho */
    max-width:none;          /* quita el tope de 640px */
    padding:20px; 
    margin:0;
    box-sizing:border-box;   /* padding sin desbordes */
    display:flex; 
    flex-direction:column; 
    gap:12px;
  }

  .news-nav{
    position:absolute;
    top:70%;
    transform:translateY(-50%);
    z-index:2;
    width:42px; height:42px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:0 6px 16px rgba(18,44,96,.10);
    display:grid; place-items:center;
    font-size:22px; line-height:1;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
}

@media (max-width:373px){  .news-nav {
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 6px 16px rgba(18, 44, 96, .10);
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
}


.modal-cert {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  position: relative;
}

.modal-content h3 {
  margin-bottom: 16px;
  font-size: 20px;
}

.sello-modal {
  height: 100px;
  width: auto;
  margin: 0 10px;
}

.close-btn {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 24px;
  cursor: pointer;
}
.metric
.sello-cert {
  height: 65px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 0.2s ease;
}

.sello-cert:hover {
  transform: scale(1.06);
}
/* ===== MODAL de Certificados ===== */
.modal-cert {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 16px;
  max-width: 700px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.modal-content h3 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 600;
}

.sello-modal {
  height: 100px;
  width: auto;
  transition: transform 0.2s ease;
}
.sello-modal:hover {
  transform: scale(1.08);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}