/* Grupo Ávila — ajustes de diseño para páginas con tridente mejorado.
   Hoja externa (no CSS embebido). */

/* --- Hero: conservar tamaño del título aunque el elemento sea <div>, y
   garantizar contraste sobre fotos reales --- */
.hero-1 .hero-title{ font-size:64px; font-weight:700; line-height:1.12; }
.hero-1 .hero-title, .hero-1 .hero-text{ text-shadow:0 2px 12px rgba(0,0,0,.6); }
.hero-1 .th-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%); }
@media (max-width:1199px){ .hero-1 .hero-title{ font-size:46px; } }
@media (max-width:767px){ .hero-1 .hero-title{ font-size:32px; } }

/* --- Tarjetas de contenido --- */
.av-card{ background:#fff; border:1px solid #ececed; border-radius:16px; padding:26px;
  height:100%; transition:transform .2s ease, box-shadow .2s ease; }
.av-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.09); transform:translateY(-4px); }
.av-card h3{ font-size:20px; margin:0 0 10px; }
.av-card p{ margin:0; }

/* Tarjeta con imagen (sistemas / ciudades) */
.av-media{ border-radius:16px; overflow:hidden; background:#f2f2f4; }
.av-media img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .4s ease; }
.av-media:hover img{ transform:scale(1.05); }

/* Paso numerado (cómo trabajamos) */
.av-num{ width:48px; height:48px; border-radius:50%; background:#a70707; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; margin-bottom:16px; }

/* Imagen lateral de sección */
.av-side-img{ width:100%; border-radius:18px; object-fit:cover; box-shadow:0 16px 40px rgba(0,0,0,.12); }

/* Enlace de ciudad */
.av-city-link{ display:inline-block; margin-top:10px; font-weight:600; color:#a70707; }

/* helpers para no usar estilos inline */
.av-narrow{ max-width:840px; margin-left:auto; margin-right:auto; }
.av-sub-white{ color:#fff !important; }
.av-dim{ opacity:.9; }
.av-dim2{ opacity:.85; }

/* --- Fix: el slider del hero usa translateY(165px)+margin-top:-165px (patrón
   de tarjeta "counter" flotante). Como reemplazamos esa sección, compensamos
   el desfase para que la primera sección NO se monte sobre el banner. --- */
/* Solo cuando existe el hero grande (páginas madre). Las hijas usan banner
   breadcumb y NO deben llevar esta compensación (por eso el selector .hero-1 ~). */
.hero-1 ~ #contenido{ margin-top: 165px; }
@media (max-width:1199px){ .hero-1 ~ #contenido{ margin-top: 120px; } }
@media (max-width:767px){ .hero-1 ~ #contenido{ margin-top: 70px; } }

/* --- Banner breadcumb: canvas de animación (gotas) detrás del texto --- */
.breadcumb-wrapper{ position: relative; overflow: hidden; }
.av-banner-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.breadcumb-wrapper .container{ position: relative; z-index: 2; }

/* enlace blanco subrayado (sobre bandas oscuras) */
.av-link-white{ color:#fff; text-decoration:underline; }
.av-link-white:hover{ color:#ffd; }

/* --- Fix: barra de copyright con fondo oscuro (bg-title-dark) pero texto
   heredado en negro = ilegible. Aclaramos texto y enlaces del footer inferior. --- */
.copyright-wrap.bg-title-dark .copyright-text{ color:rgba(255,255,255,.78); }
.copyright-wrap.bg-title-dark .copyright-text a{ color:#fff; }
.copyright-wrap.bg-title-dark .copyright-text a:hover{ color:#ffd; }
.copyright-wrap.bg-title-dark .footer-links a{ color:rgba(255,255,255,.7); }
.copyright-wrap.bg-title-dark .footer-links a:hover{ color:#fff; }