/*
Theme Name: FGC Riesgos
Description: Tema personalizado para Focus Growth Consulting - Auditoría Operativa y Gestión de Riesgos
Author: Felipe García Castaño
Version: 2.0
*/

:root{
  --navy-950:#0B1D33;
  --navy-800:#16304F;
  --steel-500:#4C6B8A;
  --paper-100:#F6F4EF;
  --caution-500:#E8A33D;
  --safety-600:#2F6B4F;
  --ink-900:#1B1F24;

  --f-display:'Space Grotesk', sans-serif;
  --f-body:'Public Sans', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink-900);
  line-height:1.65;
  background:var(--paper-100);
}

h1,h2,h3{
  font-family:var(--f-display);
  letter-spacing:-0.01em;
}

.contenedor{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- DIVISOR HORIZONTE (elemento de firma) ---------- */
.horizonte{
  position:relative;
  height:3px;
  background:linear-gradient(90deg, var(--steel-500) 0%, var(--navy-950) 100%);
  margin:0;
}
.horizonte-marca{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:12px; height:12px;
  background:var(--caution-500);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--paper-100);
}

/* ---------- NAV ---------- */
.nav-principal{
  background:var(--paper-100);
  border-bottom:1px solid #E3DFD5;
}
.nav-principal .contenedor{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px;
  flex-wrap:wrap;
}

/* Logo + nombre de la empresa juntos */
.marca{ display:flex; align-items:center; gap:14px; }
.marca .custom-logo-link img,
.marca img.custom-logo{
  max-height:64px;
  width:auto;
  display:block;
}
.marca-texto{ text-decoration:none; line-height:1.15; }
.marca-nombre{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:1.05rem; color:var(--navy-950);
}
.marca-tagline{
  display:block; font-family:var(--f-mono); font-size:0.65rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-500);
}

/* Botón hamburguesa (oculto en escritorio) */
.menu-toggle{
  display:none;
  background:none; border:none;
  font-size:1.8rem; color:var(--navy-950);
  cursor:pointer; line-height:1; padding:4px 10px;
}

/* Lista del menú */
.menu-list{
  display:flex; gap:30px; list-style:none; margin:0; padding:0;
}
.menu-list a{
  font-family:var(--f-body); font-weight:600; font-size:0.95rem;
  text-decoration:none; color:var(--navy-950);
}
.menu-list a:hover{ color:var(--steel-500); }

@media (max-width:860px){
  .menu-toggle{ display:block; order:2; }
  .marca{ order:1; }
  .marca-tagline{ display:none; }
  .menu-list{
    order:3; flex-direction:column; width:100%;
    max-height:0; overflow:hidden; gap:0;
    transition:max-height .3s ease;
  }
  .nav-principal.active .menu-list{ max-height:500px; }
  .menu-list li{ border-top:1px solid #E3DFD5; }
  .menu-list a{ display:block; padding:14px 4px; }
}

/* ---------- HERO (2 columnas) ---------- */
.hero {
  background: var(--navy-950);
  color: #fff;
  padding: 90px 0 70px;
}

.hero .contenedor {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--caution-500);
  margin-bottom: 16px;
  display: block;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0 0 22px;
}

.hero p {
  font-size: 1.08rem;
  color: #C7D2E0;
  max-width: 520px;
  margin: 0 0 30px;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Ajuste de imágenes en el hero */
.hero-foto img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;   /* llena el espacio en escritorio */
  aspect-ratio: 4/3;
  border-radius: 6px;
}

/* Responsive */
@media (max-width:860px){
  .hero .contenedor {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    max-width: 100%;   /* antes estaba en 220px */
    margin: 0 auto 20px;
  }
  .hero-foto img {
    object-fit: contain; /* en móvil se muestra completa */
    aspect-ratio: auto;
  }
}


/* Indicador de actitud interactivo (horizonte artificial) */

/* Anillo exterior: fijo, solo flota levemente con el scroll */
.gauge-ring{
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.35));
  transform: translateY(var(--gauge-float, 0px));
  transition:transform .1s linear;
  will-change:transform;
}

/* Disco interior: el único que rota/inclina con el mouse */
.gauge-dial{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform:
    rotate(var(--gauge-roll, 0deg))
    translateY(var(--gauge-pitch, 0px));
  transition:transform .12s linear;
  will-change:transform;
}

.hero-visual .hero-caption{ margin:0; }

/* ---------- CTA ---------- */
.btn-cta{
  display:inline-block;
  background:var(--caution-500);
  color:var(--navy-950);
  font-family:var(--f-mono);
  font-weight:600;
  font-size:0.92rem;
  padding:14px 28px;
  border-radius:2px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,163,61,0.35); }
.btn-cta.oscuro{ background:var(--navy-950); color:#fff; }
.btn-cta.oscuro:hover{ box-shadow:0 6px 16px rgba(11,29,51,0.35); }

/* ---------- SECCIONES ---------- */
section{ padding:76px 0; }
.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  color:var(--steel-500);
  display:block;
  text-align:center;
  margin-bottom:10px;
}
section h2{
  color:var(--navy-950);
  font-size:1.85rem;
  text-align:center;
  margin:0 0 46px;
}

/* ---------- METODOLOGIA ---------- */
.metodologia-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.metodologia-item{
  padding:0 28px;
  border-left:1px solid #DDD6C7;
}
.metodologia-item:first-child{ border-left:none; padding-left:0; }
.metodologia-item .numero{
  font-family:var(--f-mono);
  font-size:0.85rem;
  color:var(--caution-500);
  display:block;
  margin-bottom:10px;
}
.metodologia-item h3{ font-size:1.15rem; margin:0 0 10px; color:var(--navy-950); }
.metodologia-item p{ font-size:0.96rem; color:#5A5F66; }

/* ---------- SERVICIOS ---------- */
.servicios { background:#fff; }

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

.servicio-card {
  background: var(--paper-100);
  border-radius: 6px;
  padding: 32px 28px;
  border-left: 4px solid var(--steel-500);
  transition: border-color .2s ease, transform .2s ease;
  cursor: pointer; /* indica que es clickeable */
}

.servicio-card:nth-child(1){ border-left-color: var(--navy-950); }
.servicio-card:nth-child(2){ border-left-color: var(--caution-500); }
.servicio-card:nth-child(3){ border-left-color: var(--safety-600); }

.servicio-card:hover { transform: translateY(-4px); }

.servicio-card h3 { color: var(--navy-950); font-size: 1.2rem; margin-top: 0; }
.servicio-card ul { padding-left: 18px; margin: 16px 0; color: #4A4F56; font-size: 0.95rem; }
.servicio-card li { margin-bottom: 6px; }



/* ---------- CASOS DE EXITO ---------- */
.casos {
  background: var(--navy-800);
  color: #fff;
  padding: 80px 0;
}

.casos .contenedor {
  max-width: 900px;
  margin: 0 auto;
  text-align: left; /* Alinea todo el bloque a la izquierda */
  padding-left: 10px; /* Ajusta este valor para que coincida con la línea roja */
}

.casos .eyebrow {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--caution-500);
  display: block;
  margin-bottom: 10px;
  text-align: left;
}

.casos h2 {
  color: #fff;
  font-size: 1.85rem;
  margin: 0 0 16px;
  text-align: left;
}

.casos p.descripcion {
  color: #CDD7E3;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center; /* Centra el texto descriptivo */
}

.testimonio {
  font-style: italic;
  font-family: var(--f-display);
  font-size: 1.15rem;
  border-left: 3px solid var(--caution-500);
  padding-left: 22px;
  margin: 26px auto 0;
  text-align: left;
  color: #fff;
}


/* ---------- PROXIMAMENTE ---------- */
.proximamente-wrap{ background:#fff; }
.proximamente{
  background:linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color:#fff;
  border-radius:10px;
  padding:56px;
  text-align:center;
}
.proximamente .eyebrow{ color:var(--caution-500); }
.proximamente h2{ color:#fff; }
.proximamente ul{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 24px;
  max-width:560px;
  margin:26px auto 34px;
  text-align:left;
  font-family:var(--f-mono);
  font-size:0.92rem;
}
.proximamente li{ border-left:2px solid var(--caution-500); padding-left:12px; }

/* ---------- SEGUROS ---------- */
.seguros{ background:var(--paper-100); text-align:center; }
.seguros p{ max-width:640px; margin:0 auto; color:#4A4F56; }



/* ---------- CAJA DE DEFINICIÓN ("¿Qué es...?") ---------- */
.definicion{
  background:#fff;
  border:1px solid #E3DFD5;
  border-left:4px solid var(--steel-500);
  border-radius:6px;
  padding:34px 38px;
  max-width:760px;
  margin:0 auto;
  text-align:left;
}
.definicion p{ font-size:1.05rem; color:#3C4147; margin:0; }
.definicion p + p{ margin-top:14px; }
.definicion .dato-clave{
  font-family:var(--f-mono); color:var(--navy-950); font-weight:600;
}

/* ---------- LISTA DE BENEFICIOS (check) ---------- */
.lista-check{
  list-style:none; padding:0; max-width:620px; margin:0 auto;
  display:grid; gap:16px;
}
.lista-check li{
  position:relative; padding-left:36px;
  font-size:1rem; color:#3C4147; text-align:left;
}
.lista-check li::before{
  content:'\2713';
  position:absolute; left:0; top:1px;
  width:22px; height:22px; line-height:22px; text-align:center;
  background:var(--safety-600); color:#fff; border-radius:50%;
  font-size:0.72rem; font-weight:700;
}

/* ---------- LÍNEA DE PROCESO (waypoints, como el horizonte) ---------- */
.proceso-timeline{
  list-style:none; padding:0; max-width:620px; margin:0 auto;
}
.proceso-timeline li{
  position:relative; padding:0 0 32px 42px; text-align:left;
}
.proceso-timeline li:last-child{ padding-bottom:0; }
.proceso-timeline li::before{
  content:''; position:absolute; left:8px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--caution-500); box-shadow:0 0 0 4px var(--paper-100);
  z-index:1;
}
.proceso-timeline li::after{
  content:''; position:absolute; left:13px; top:16px; bottom:-8px;
  width:2px; background:var(--steel-500);
}
.proceso-timeline li:last-child::after{ display:none; }
.proceso-timeline .paso-titulo{
  font-family:var(--f-mono); font-weight:600; color:var(--navy-950);
  display:block; margin-bottom:4px; font-size:0.92rem;
  text-transform:uppercase; letter-spacing:0.04em;
}
.proceso-timeline p{ margin:0; color:#5A5F66; font-size:0.96rem; }

/* ---------- IMAGEN DE CONTEXTO (banner ancho entre secciones) ---------- */
.imagen-contexto {
  width: 100%;
  max-width: 1000px;
  margin: 44px auto 0;
  border-radius: 8px;
  overflow: hidden;
}

.imagen-contexto img {
  width: 100%;
  height: auto;            /* mantiene proporción original */
  display: block;
  object-fit: cover;       /* llena el espacio en escritorio */
  max-height: 380px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 860px) {
  .imagen-contexto {
    max-width: 100%;       /* ocupa todo el ancho en móvil */
    margin: 24px auto 0;
  }
  .imagen-contexto img {
    object-fit: contain;   /* muestra la imagen completa en móvil */
    max-height: none;      /* elimina límite de altura */
  }
}


/* ---------- NOSOTROS ---------- */
.nosotros{ background:#fff; text-align:center; }
.nosotros .contenedor{ max-width:680px; }
.nosotros p{ color:#4A4F56; font-size:1.05rem; }

/* ---------- CONTACTO ---------- */
.contacto{ background:var(--navy-950); color:#fff; }
.contacto h2{ color:#fff; }
.contacto .contenedor{ max-width:560px; }
.contacto label{ font-family:var(--f-mono); font-size:0.85rem; color:#C7D2E0; display:block; margin-bottom:16px; }
.contacto input, .contacto select, .contacto textarea{
  width:100%; padding:12px; margin-top:6px;
  background:var(--navy-800); border:1px solid #2C4A6E; color:#fff;
  border-radius:3px; font-family:var(--f-body);
}
.contacto input:focus, .contacto select:focus, .contacto textarea:focus{
  outline:2px solid var(--caution-500); outline-offset:1px;
}

footer{
  background:var(--navy-950);
  color:#8FA0B8;
  text-align:center;
  padding:26px 0;
  font-size:0.85rem;
  border-top:1px solid #223A56;
}

@media (max-width:860px){
  .hero .contenedor{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:220px; margin:0 auto 20px; }
  .metodologia-grid, .servicios-grid, .proximamente ul{ grid-template-columns:1fr; }
  .metodologia-item{ border-left:none; border-top:1px solid #DDD6C7; padding:24px 0 0; }
  .metodologia-item:first-child{ border-top:none; padding-top:0; }
}

/* ---------- ANIMACIONES DE ENTRADA AL HACER SCROLL ---------- */
/* Solo se ocultan si JS confirma que puede revelarlas (clase .js en <html>).
   Sin JS, todo el contenido queda visible normalmente — no depende del script. */
.js section,
.js .servicio-card,
.js .metodologia-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.js section.visible,
.js .servicio-card.visible,
.js .metodologia-item.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   DASHBOARD INTERACTIVO - HERO (usado en page-mejoracontinuayanalitica.php)
   ========================================================= */

.dashboard-demo {
  width: 100%;
  background: #101820;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    0 25px 60px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.15);
  color: #fff;
  overflow: hidden;
}

/* Cabecera */

.dashboard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.dashboard-mini-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #E8A33D;
  font-weight: 700;
  margin-bottom: 3px;
}

.dashboard-top h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.dashboard-status {
  font-size: 9px;
  color: #aeb8bf;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7CD9A0;
  margin-right: 5px;
  box-shadow: 0 0 8px rgba(124,217,160,.8);
}

/* Tabs */

.dashboard-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  background: rgba(255,255,255,.055);
  border-radius: 9px;
  margin-bottom: 13px;
}

.dash-tab {
  flex: 1;
  border: 0;
  border-radius: 6px;
  padding: 8px 5px;
  background: transparent;
  color: #9da8b0;
  font-size: 9px;
  cursor: pointer;
  transition: all .2s ease;
}

.dash-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

.dash-tab.active {
  color: #101820;
  background: #E8A33D;
  font-weight: 700;
}

/* Resumen */

.dashboard-summary {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr .8fr;
  gap: 7px;
  margin-bottom: 9px;
}

.summary-main,
.summary-item {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  padding: 11px;
}

.summary-main span,
.summary-item span {
  display: block;
  font-size: 8px;
  color: #9da8b0;
  margin-bottom: 4px;
}

.summary-main strong {
  display: block;
  font-size: 25px;
  line-height: 1;
  color: #fff;
}

.summary-main small {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  color: #7CD9A0;
}

.summary-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-item strong {
  font-size: 17px;
  color: #fff;
}

/* KPI */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 9px;
}

.kpi-card {
  background: #f7f8f8;
  border-radius: 9px;
  padding: 11px;
  color: #18232b;
}

.kpi-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: #647078;
  margin-bottom: 7px;
}

.kpi-card > strong {
  display: block;
  font-size: 21px;
  line-height: 1;
  margin-bottom: 8px;
}

.kpi-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  font-weight: bold;
}

.kpi-icon.good {
  background: #dff5e7;
  color: #31945b;
}

.kpi-icon.warning {
  background: #fff0d2;
  color: #c98212;
}

.kpi-progress {
  height: 4px;
  background: #e5e9eb;
  border-radius: 10px;
  overflow: hidden;
}

.kpi-progress span {
  display: block;
  height: 100%;
  background: #7CD9A0;
  border-radius: 10px;
  transition: width .35s ease;
}

.kpi-card small {
  display: block;
  font-size: 7px;
  color: #8a949b;
  margin-top: 5px;
}

/* Gráfico */

.dashboard-bottom {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 7px;
}

.chart-card,
.alerts-card {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  padding: 11px;
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  color: #dce2e5;
  margin-bottom: 8px;
}

.chart-title span:last-child {
  color: #7f8a91;
  font-size: 7px;
}

.chart {
  height: 100px;
}

.chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart svg path:first-of-type {
  fill: url(#areaGradient);
}

.chart svg path:nth-of-type(2) {
  fill: none;
  stroke: #E8A33D;
  stroke-width: 3;
  stroke-linecap: round;
}

.chart svg circle {
  fill: #E8A33D;
  stroke: #101820;
  stroke-width: 3;
}

/* Alertas */

.alert-count {
  background: #9e4646;
  color: #fff !important;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.alert-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.alert-row:last-child {
  border-bottom: 0;
}

.alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}

.alert-dot.red {
  background: #e56d6d;
}

.alert-dot.yellow {
  background: #E8A33D;
}

.alert-dot.green {
  background: #7CD9A0;
}

.alert-row strong {
  display: block;
  font-size: 8px;
  color: #e9edef;
  margin-bottom: 2px;
}

.alert-row small {
  display: block;
  font-size: 7px;
  color: #7f8a91;
  line-height: 1.3;
}

/* Footer */

.dashboard-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 7px;
  color: #737e85;
}

.dashboard-footer span:first-child {
  color: #7CD9A0;
}

/* Caption */

.gauge-caption {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin: 10px 0 0;
}

/* Responsive */

@media (max-width: 850px) {

  .dashboard-summary {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-bottom {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .dashboard-demo {
    padding: 12px;
  }

  .dashboard-tabs {
    overflow-x: auto;
  }

  .dash-tab {
    min-width: 72px;
  }

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

  .dashboard-top {
    align-items: flex-start;
  }

  .dashboard-status {
    display: none;
  }

}

/* =========================================================
   CASOS DE ÉXITO — carrusel (movido desde front-page.php)
   ========================================================= */

/* ========================================================= SECCIÓN ========================================================= */ .casos  {
   position: relative;
   overflow: hidden;
}
 /* ========================================================= ENCABEZADO ========================================================= */ .casos-header  {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 40px;
   margin-bottom: 30px;
}
 .casos-header h2  {
   margin-bottom: 0;
}
 .casos-header p  {
   max-width: 420px;
   margin: 0;
   color: rgba(255,255,255,.68);
   line-height: 1.6;
}
 /* ========================================================= CARRUSEL — ANCHO COMPLETO DE LA PANTALLA ========================================================= */ .casos-carousel  {
   width: 100vw;
   margin-left: calc(50% - 50vw);
   box-sizing: border-box;
   display: flex;
   gap: 20px;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 5px 40px 30px 40px;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: thin;
   scrollbar-color: #E8A33D rgba(255,255,255,.08);
   cursor: grab;
}
 /* Cuando el usuario está arrastrando */ .casos-carousel:active  {
   cursor: grabbing;
}
 /* ========================================================= BARRA DE SCROLL — CHROME / EDGE / SAFARI ========================================================= */ .casos-carousel::-webkit-scrollbar  {
   height: 5px;
}
 .casos-carousel::-webkit-scrollbar-track  {
   background: rgba(255,255,255,.06);
   border-radius: 10px;
}
 .casos-carousel::-webkit-scrollbar-thumb  {
   background: #E8A33D;
   border-radius: 10px;
}
 .casos-carousel::-webkit-scrollbar-thumb:hover  {
   background: #F2B65D;
}
 /* ========================================================= TARJETAS ========================================================= */ .caso-card  {
   position: relative;
   flex: 0 0 380px;
   min-height: 535px;
   box-sizing: border-box;
   padding: 25px;
   display: flex;
   flex-direction: column;
   scroll-snap-align: start;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,.10);
   background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) );
   color: #fff;
   text-decoration: none;
   transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
 /* ========================================================= TARJETAS CON ENLACE ========================================================= */ a.caso-card  {
   cursor: pointer;
}
 a.caso-card:hover  {
   transform: translateY(-6px);
   border-color: rgba(232,163,61,.60);
   background: linear-gradient( 145deg, rgba(232,163,61,.11), rgba(255,255,255,.035) );
   box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
 /* ========================================================= CABECERA DE TARJETA ========================================================= */ .caso-top  {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 22px;
}
 .caso-numero  {
   color: #E8A33D;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
}
 .caso-sector  {
   padding: 5px 10px;
   border-radius: 20px;
   background: rgba(255,255,255,.07);
   color: rgba(255,255,255,.65);
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: .8px;
}
 /* ========================================================= TITULO ========================================================= */ .caso-card h3  {
   margin: 0;
   color: #fff;
   font-size: 23px;
   line-height: 1.25;
}
 /* ========================================================= SEPARADOR ========================================================= */ .caso-separador  {
   width: 35px;
   height: 2px;
   margin: 18px 0 20px;
   background: #E8A33D;
}
 /* ========================================================= ETIQUETAS ========================================================= */ .caso-label  {
   display: block;
   margin-bottom: 6px;
   color: #E8A33D;
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}
 /* ========================================================= TEXTO ========================================================= */ .caso-card p  {
   margin: 0 0 18px;
   color: rgba(255,255,255,.67);
   font-size: 12px;
   line-height: 1.65;
}
 /* ========================================================= RESULTADO ========================================================= */ .caso-resultado  {
   margin-top: auto;
   padding: 15px;
   border-radius: 10px;
   background: rgba(0,0,0,.18);
   border: 1px solid rgba(255,255,255,.06);
}
 .caso-resultado span  {
   display: block;
   margin-bottom: 5px;
   color: rgba(255,255,255,.42);
   font-size: 8px;
   text-transform: uppercase;
   letter-spacing: 1px;
}
 .caso-resultado strong  {
   display: block;
   margin-bottom: 5px;
   color: #7CD9A0;
   font-size: 14px;
}
 .caso-resultado small  {
   display: block;
   color: rgba(255,255,255,.55);
   font-size: 10px;
   line-height: 1.5;
}
 /* ========================================================= ENLACE ========================================================= */ .caso-link  {
   margin-top: 18px;
   color: #E8A33D;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .3px;
}
 /* ========================================================= INDICADOR ========================================================= */ .casos-indicador  {
   margin-top: 8px;
   padding-bottom: 5px;
   color: rgba(255,255,255,.40);
   font-size: 9px;
}
 /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px)  {
   .casos-header  {
   display: block;
}
 .casos-header p  {
   margin-top: 15px;
}
 .casos-carousel  {
   gap: 16px;
   padding-left: 25px;
   padding-right: 25px;
}
 .caso-card  {
   flex-basis: 320px;
}
}
 /* ========================================================= CELULAR ========================================================= */ @media (max-width: 500px)  {
   .casos-carousel  {
   gap: 15px;
   padding-left: 20px;
   padding-right: 20px;
}
 .caso-card  {
   flex-basis: calc(100vw - 60px);
   min-height: 500px;
   padding: 22px;
}
 .caso-card h3  {
   font-size: 21px;
}
 .caso-card p  {
   font-size: 11.5px;
}
}


/* ---------- Ajuste responsive para tablets ---------- */
@media (min-width:600px) and (max-width:860px) {
  .hero-foto img {
    object-fit: cover;    /* mantiene un look elegante */
    max-height: 320px;    /* altura moderada en tablets */
  }

  .imagen-contexto img {
    object-fit: cover;    /* recorte suave en tablets */
    max-height: 300px;    /* evita que el banner sea demasiado alto */
  }
}