.hero { position: relative; min-height: 734px; overflow: hidden; background: var(--verde-profundo); }
.hero-foto { position: absolute; inset: 0; background: url("../imagenes/hero/hero-reunion-clientes-gael-20260808.png") 72% center / cover no-repeat; }
.hero-capa { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 58, 53, .97) 0%, rgba(3, 58, 53, .94) 20%, rgba(3, 58, 53, .82) 36%, rgba(3, 58, 53, .44) 57%, rgba(3, 58, 53, .12) 74%, rgba(3, 58, 53, 0) 86%); }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0 54% 0 0; opacity: .26; background: repeating-linear-gradient(135deg, rgba(55, 158, 135, .22) 0 1px, transparent 1px 13px); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); }
.hero-contenedor { position: relative; z-index: 2; min-height: 734px; display: flex; align-items: center; }
.hero-contenido { width: min(780px, 51.5%); padding: 54px 0 46px; color: #fff; }
.hero-contenido .etiqueta-seccion { margin-bottom: 33px; }
.hero-contenido .etiqueta-seccion--oscura { border-color: var(--amarillo); color: var(--blanco); background: rgba(6, 71, 61, .18); box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset; }
.hero-contenido .etiqueta-seccion--oscura > span { background: var(--blanco); }
.hero h1 { margin: 0 0 23px; max-width: 9.2em; font: 800 clamp(48px, 3.2vw, 62px) / 1.08 "Montserrat", sans-serif; letter-spacing: 0; }
.hero h1 em { position: relative; color: var(--amarillo); font-style: normal; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px; border-radius: 50%; background: var(--amarillo); transform: rotate(-2deg) scaleX(0); transform-origin: left; animation: dibujar-subrayado 1s .25s cubic-bezier(.22, 1, .36, 1) forwards; }
.hero-descripcion { max-width: 620px; margin: 0; font-size: 19px; line-height: 1.38; }
.acciones { margin-top: 29px; display: flex; gap: 24px; }
.acciones .boton { min-width: 220px; }
.boton-secundario { border-color: var(--amarillo); background: rgba(3, 58, 53, .38); color: #fff; }
.boton-secundario:hover { background: rgba(3, 58, 53, .78); }
.beneficios { margin-top: 50px; display: flex; align-items: center; gap: 26px; }
.beneficio { display: flex; align-items: center; gap: 13px; font-size: 15px; line-height: 1.4; white-space: nowrap; }
.beneficio-icono { width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .96); color: var(--verde-medio); box-shadow: 0 5px 14px rgba(0, 25, 22, .18); }
.beneficio-icono svg { width: 25px; height: 25px; stroke-width: 2; }
.linea { width: 1px; height: 46px; background: rgba(255, 255, 255, .55); }
.whatsapp-flotante { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); transition: transform .2s, background-color .2s; }
.whatsapp-flotante:hover { background: #1fbd5a; transform: translateY(-2px); }
.whatsapp-flotante svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }

@keyframes dibujar-subrayado {
  to { transform: rotate(-2deg) scaleX(1); }
}