/* =========================================================================
   Inicio — estilos de front-page.php (fuente: prototipo/Inicio.dc.html 1:1).
   Héroe: variante "Inmersivo claro" (foto a sangre + velo cálido + frost).
   Resto con variante por defecto: Panel unificado · Carrusel suave ·
   presencia Sutil · densidad Aireada. Todo scopeado bajo .pg-inicio.
   ========================================================================= */

/* Contenedor interior estándar de cada sección (1272px centrado) */
.pg-inicio .in-seccion { max-width: 1272px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

/* Cabecera de sección: título + enlace a la derecha */
.pg-inicio .in-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pg-inicio .in-titulo-seccion { font-size: 30px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.02em; }
.pg-inicio .in-enlace-seccion { font-size: 15px; font-weight: 600; color: var(--oc-orange-600); white-space: nowrap; }

/* =========================================================================
   Héroe "Inmersivo claro" — carrusel a sangre completa con Ken Burns suave,
   velo cálido claro (izq → der) + brillos radiales, panel frost con sedes
   ========================================================================= */
/* §20: zoom-out puro por GPU (scale3d, nunca llega a 1 exacto para no salir
   del compositor), amplitud reducida y velocidad constante; la animación es
   continua y solo la reproduce la foto visible — las capas ocultas quedan
   pausadas y retoman su propia fase al volver. */
@keyframes oc-kb {
	from { transform: translateZ(0) scale3d(1.045, 1.045, 1); }
	to { transform: translateZ(0) scale3d(1.008, 1.008, 1); }
}
.pg-inicio .oc-kb { display: block; transform-origin: center center; will-change: transform; backface-visibility: hidden; animation: oc-kb 30s linear infinite alternate; animation-play-state: paused; }
.pg-inicio .in-hero__foto.activa .oc-kb { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .pg-inicio .oc-kb { animation: none; transform: none; } }

.pg-inicio .in-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--neutral-0); min-height: 480px; display: flex; align-items: center; }
.pg-inicio .in-hero__fondo { position: absolute; inset: 0; }
.pg-inicio .in-hero__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-standard); }
.pg-inicio .in-hero__foto.activa { opacity: 1; }
.pg-inicio .in-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.pg-inicio .in-hero__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,244,234,0.98) 0%, rgba(255,244,234,0.92) 28%, rgba(255,246,238,0.6) 58%, rgba(255,248,242,0.1) 94%); }
.pg-inicio .in-hero__brillos { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 42% 62% at 12% 30%, rgba(255,226,201,0.5) 0%, rgba(255,226,201,0) 70%), radial-gradient(ellipse 34% 50% at 78% 22%, rgba(255,238,222,0.42) 0%, rgba(255,238,222,0) 70%), linear-gradient(0deg, rgba(255,244,234,0.45) 0%, rgba(255,244,234,0) 44%); }

.pg-inicio .in-hero__cont { position: relative; width: 100%; max-width: 1272px; margin: 0 auto; padding: 60px 64px; box-sizing: border-box; }
.pg-inicio .in-hero__texto { max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.pg-inicio .in-hero__eyebrow { margin: 0; color: var(--oc-orange-600); letter-spacing: 0.16em; }
.pg-inicio .in-hero__titulo { font-family: var(--font-display); font-size: 45px; font-weight: 700; line-height: 1.14; color: var(--navy); margin: 0; letter-spacing: -0.025em; }
.pg-inicio .in-hero__bajada { font-size: 18.5px; font-weight: 400; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 46ch; }

/* Panel unificado (variante por defecto del banner) sobre tarjeta frost */
.pg-inicio .in-hero__panel { display: flex; flex-direction: column; gap: 18px; margin-top: 2px; }
.pg-inicio .in-hero__cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: #fff; background: var(--oc-orange-600); padding: 14px 26px; border-radius: var(--radius-md); }
.pg-inicio .in-hero__cta:hover { background: var(--oc-orange-700); color: #fff; }
/* Tarjeta de vidrio (§7 liquid glass, oficial 2026-07-15) */
.pg-inicio .in-hero__tarjeta { display: flex; flex-direction: column; gap: 11px; background: linear-gradient(165deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.26) 100%); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius-lg); padding: 14px 20px; backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); box-shadow: 0 12px 34px -10px rgba(32,46,71,0.25), inset 0 1px 0 rgba(255,255,255,0.8); max-width: 620px; }
.pg-inicio .in-hero__fila { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
/* Chip de estado (por defecto cerrado = danger; JS marca [data-abierto]) */
.pg-inicio .in-hero__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--danger); background: rgba(180,67,58,0.1); border: 1px solid rgba(180,67,58,0.3); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.pg-inicio .in-hero__estado .punto-estado { width: 8px; height: 8px; border-radius: 50%; background: #B4433A; animation: pulso-estado 2.4s ease-in-out infinite; }
.pg-inicio .in-hero__estado[data-abierto] { color: var(--success); background: rgba(46,125,99,0.12); border-color: rgba(46,125,99,0.32); }
.pg-inicio .in-hero__estado[data-abierto] .punto-estado { background: #2E7D63; }
.pg-inicio .in-hero__horario { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.pg-inicio .in-hero__divisor { height: 1px; background: rgba(32,46,71,0.1); }
.pg-inicio .in-hero__sedes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.pg-inicio .in-hero__sede { display: flex; flex-direction: column; gap: 7px; }
.pg-inicio .in-hero__sede-nombre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-3); margin: 0; }
.pg-inicio .in-hero__sede-datos { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.pg-inicio .in-hero__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); }
.pg-inicio .in-hero__tel:hover { color: var(--navy); }
.pg-inicio .in-hero__fono { font-family: var(--font-mono); font-size: 13px; }
.pg-inicio .in-hero__chip-wa { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--neutral-0); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; }
.pg-inicio .in-hero__chip-wa:hover { background: var(--bg-muted); color: var(--navy); }

/* Leyenda de la foto + puntos del carrusel (esquina inferior derecha) —
   píldoras de vidrio (§7 liquid glass) */
.pg-inicio .in-hero__pie { position: absolute; right: 30px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.pg-inicio .in-hero__leyenda { color: rgba(32,46,71,0.85); background: linear-gradient(165deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.28) 100%); border: 1px solid rgba(255,255,255,0.5); padding: 3px 11px; border-radius: 999px; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 4px 14px -10px rgba(32,46,71,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
.pg-inicio .in-hero__puntos { display: flex; gap: 9px; background: linear-gradient(165deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.28) 100%); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 4px 9px; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 4px 14px -10px rgba(32,46,71,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
.pg-inicio .in-hero__puntos button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; padding: 0; }
.pg-inicio .in-hero__puntos button span { width: 6.5px; height: 6.5px; border-radius: 50%; background: rgba(255,255,255,0.4); box-shadow: 0 0 0 1px rgba(32,46,71,0.18); transition: background 200ms var(--ease-standard); }
.pg-inicio .in-hero__puntos button.activa span { background: var(--neutral-0); }

/* =========================================================================
   Acciones rápidas
   ========================================================================= */
.pg-inicio .in-acciones { padding: 48px 64px 56px; }
.pg-inicio .in-acciones__inner { gap: 16px; }
.pg-inicio .in-acciones__eyebrow { margin: 0; }
.pg-inicio .in-acciones__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-inicio .in-accion { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 26px 28px; background: var(--neutral-0); box-shadow: var(--shadow-sm); }
.pg-inicio .in-accion:hover { box-shadow: var(--shadow-md); color: inherit; }
.pg-inicio .in-accion__icono { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.pg-inicio .in-accion__icono--naranja { background: var(--oc-orange-50); }
.pg-inicio .in-accion__icono--teal { background: var(--ac-teal-50); }
.pg-inicio .in-accion__icono--neutro { background: var(--bg-muted); }
.pg-inicio .in-accion__titulo { font-size: 18px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-inicio .in-accion__texto { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.pg-inicio .in-accion__cta { font-size: 14.5px; font-weight: 600; margin-top: auto; }
.pg-inicio .in-accion__cta--naranja { color: var(--oc-orange-600); }
.pg-inicio .in-accion__cta--teal { color: var(--ac-teal-700); }
.pg-inicio .in-accion__cta--navy { color: var(--navy-700); }

/* =========================================================================
   Empiece aquí
   ========================================================================= */
.pg-inicio .in-empiece { padding: 0 64px 64px; }
.pg-inicio .in-empiece__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-inicio .in-paso { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.pg-inicio .in-paso__num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--oc-orange-600); }
.pg-inicio .in-paso__titulo { font-size: 19px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-inicio .in-paso__texto { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* =========================================================================
   Equipo
   ========================================================================= */
.pg-inicio .in-equipo { padding: 64px; background: var(--bg-subtle); border-top: 1px solid var(--divider); }
.pg-inicio .in-equipo__titulos { display: flex; flex-direction: column; gap: 8px; }
.pg-inicio .in-equipo__bajada { font-size: 16px; color: var(--fg-2); margin: 0; }
.pg-inicio .in-equipo__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-inicio .in-medico { background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pg-inicio .in-medico__foto { width: 104px; height: 104px; margin-bottom: 10px; }
.pg-inicio .in-medico__nombre { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-inicio .in-medico__cargo { font-size: 14px; color: var(--fg-3); margin: 0; }
.pg-inicio .in-medico-mas { background: var(--neutral-0); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.pg-inicio .in-medico-mas:hover { border-color: var(--oc-orange-600); color: inherit; }
.pg-inicio .in-medico-mas__titulo { font-size: 15px; font-weight: 600; color: var(--fg-2); margin: 0; }
.pg-inicio .in-medico-mas__texto { font-size: 14px; color: var(--fg-3); margin: 0; }

/* =========================================================================
   Banda Acerey — navy con acento teal (presencia de marca "Sutil")
   ========================================================================= */
.pg-inicio .in-acerey { position: relative; overflow: hidden; background: var(--navy); }
.pg-inicio .in-acerey__elipse { position: absolute; bottom: -60px; left: -90px; width: 520px; color: var(--ac-teal); opacity: 0.35; pointer-events: none; }
.pg-inicio .in-acerey__grid { position: relative; max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: center; padding: 56px 64px; }
.pg-inicio .in-acerey__texto { display: flex; flex-direction: column; gap: 14px; }
.pg-inicio .in-acerey__marca { display: flex; align-items: center; gap: 14px; }
.pg-inicio .in-acerey__marca img { height: 30px; width: auto; }
.pg-inicio .in-acerey__eyebrow { margin: 0; color: var(--ac-teal); border-left: 1px solid rgba(255,255,255,0.25); padding-left: 14px; }
.pg-inicio .in-acerey__titulo { font-size: 26px; font-weight: 700; color: var(--neutral-0); margin: 0; letter-spacing: -0.01em; }
.pg-inicio .in-acerey__bajada { font-size: 16px; line-height: 1.6; color: var(--neutral-300); margin: 0; max-width: 64ch; }
.pg-inicio .in-acerey__fuente { display: inline-flex; width: fit-content; color: var(--ac-teal-200); font-size: 13.5px; line-height: 1.45; text-decoration: underline; text-decoration-color: rgba(94, 234, 212, 0.4); text-underline-offset: 3px; }
.pg-inicio .in-acerey__fuente:hover { color: var(--neutral-0); }
.pg-inicio .in-acerey__cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--navy); background: var(--neutral-0); padding: 13px 22px; border-radius: var(--radius-md); white-space: nowrap; margin-top: 6px; }
.pg-inicio .in-acerey__cta:hover { background: var(--neutral-100); color: var(--navy); }
.pg-inicio .in-acerey__media { display: flex; flex-direction: column; gap: 10px; }
.pg-inicio .in-acerey__video { position: relative; width: 100%; max-width: 280px; }
.pg-inicio .in-acerey__video .oc-reel { width: 100%; }
.pg-inicio .in-acerey__leyenda { font-size: 14px; color: var(--neutral-300); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-inicio .in-acerey__leyenda a { color: var(--neutral-0); font-weight: 600; }
.pg-inicio .in-acerey__leyenda a:hover { color: var(--ac-teal); }

/* =========================================================================
   Sucursales — mapa + tarjetas con estado y resalte sincronizado
   ========================================================================= */
@keyframes pulso-estado { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.pg-inicio .in-sucursales { padding: 64px; }
.pg-inicio .in-sucursales__panel { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 44px 56px; display: grid; grid-template-columns: 280px minmax(0, 740px); gap: 64px; align-items: center; justify-content: center; }
.pg-inicio #mapa-chile-cont { justify-self: center; min-height: 470px; }
.pg-inicio .in-sucursales__tarjetas { display: flex; flex-direction: column; gap: 20px; }
.pg-inicio .in-sucursal { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.pg-inicio .in-sucursal:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
.pg-inicio .in-sucursal__anillo { position: absolute; inset: -1px; border-radius: var(--radius-lg); border: 2px solid var(--oc-orange); opacity: 0; pointer-events: none; transition: opacity 160ms; }
.pg-inicio .in-sucursal.resaltada .in-sucursal__anillo { opacity: 1; }
.pg-inicio .in-sucursal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pg-inicio .in-sucursal__nombre { font-size: 20px; font-weight: 600; color: var(--navy); margin: 0; }
/* Estado por defecto: cerrado (JS lo actualiza según hora de Chile) */
.pg-inicio .in-sucursal__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg-3); background: var(--bg-muted); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.pg-inicio .in-sucursal__estado .punto-estado { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pg-inicio .in-sucursal__estado[data-abierto] { color: var(--success); background: var(--success-bg); }
.pg-inicio .in-sucursal__estado[data-abierto] .punto-estado { animation: pulso-estado 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pg-inicio .punto-estado { animation: none !important; } }
.pg-inicio .in-sucursal__datos { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--fg-2); }
.pg-inicio .in-sucursal__dato { display: flex; align-items: center; gap: 10px; }
.pg-inicio .in-sucursal__fono { font-family: var(--font-mono); font-size: 14px; }
.pg-inicio .in-sucursal__cta { font-size: 15px; font-weight: 600; color: var(--oc-orange-600); }

/* =========================================================================
   Educación
   ========================================================================= */
.pg-inicio .in-educacion { padding: 0 64px 72px; }
.pg-inicio .in-educacion__titulos { display: flex; flex-direction: column; gap: 8px; }
.pg-inicio .in-educacion__bajada { font-size: 16px; color: var(--fg-2); margin: 0; }
.pg-inicio .in-educacion__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-inicio .in-articulo { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.pg-inicio .in-articulo:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
.pg-inicio .in-articulo__img { height: 160px; }
.pg-inicio .in-articulo__cuerpo { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.pg-inicio .in-articulo__titulo { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0; line-height: 1.35; }
.pg-inicio .in-articulo__meta { font-size: 13px; color: var(--fg-3); margin: 0; }

/* =========================================================================
   Responsive (V2 §6): hero 1 col, mapa de Chile oculto, grillas colapsadas
   ========================================================================= */
@media (max-width: 900px) {
	.pg-inicio .in-hero { min-height: 0; }
	.pg-inicio .in-hero__cont { padding: 48px 20px 60px; }
	.pg-inicio .in-hero__titulo { font-size: 32px; }
	/* Velo mobile: gradiente vertical más denso para legibilidad sobre la foto */
	.pg-inicio .in-hero__velo { background: linear-gradient(0deg, rgba(255,244,234,0.94) 0%, rgba(255,244,234,0.86) 55%, rgba(255,244,234,0.62) 100%); }
	.pg-inicio .in-hero__sedes { grid-template-columns: 1fr; }
	.pg-inicio .in-hero__pie { display: none; }
	.pg-inicio .in-titulo-seccion { font-size: 26px; }
	.pg-inicio .in-cabecera { flex-direction: column; align-items: flex-start; gap: 8px; }
	.pg-inicio .in-acciones { padding: 40px 20px 44px; }
	.pg-inicio .in-empiece { padding: 0 20px 48px; }
	.pg-inicio .in-educacion { padding: 0 20px 56px; }
	.pg-inicio .in-acciones__grid,
	.pg-inicio .in-empiece__grid,
	.pg-inicio .in-educacion__grid { grid-template-columns: 1fr; }
	.pg-inicio .in-equipo { padding: 44px 20px; }
	.pg-inicio .in-equipo__grid { grid-template-columns: 1fr 1fr; }
	.pg-inicio .in-acerey__grid { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px; }
	.pg-inicio .in-sucursales { padding: 44px 20px; }
	.pg-inicio .in-sucursales__panel { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
	.pg-inicio #mapa-chile-cont { display: none; }
	.pg-inicio .in-sucursal__cabecera { flex-wrap: wrap; }
}

/* Sin backdrop-filter, la tarjeta y las píldoras van casi sólidas (van sobre foto) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pg-inicio .in-hero__tarjeta,
	.pg-inicio .in-hero__leyenda,
	.pg-inicio .in-hero__puntos { background: rgba(255, 255, 255, 0.82); }
}