/* ═══════════════════════════════════════════════════════════════
   HELGA · 4 GRANDES GRUPOS DE ATENCIÓN
   Panel a color por grupo, independiente del tema activo del sitio
   (a propósito: el objetivo es diferenciación fuerte, no armonía tonal)
   Cargar DESPUÉS de helga-sections.css
   ═══════════════════════════════════════════════════════════════ */

.groups {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .groups { grid-template-columns: repeat(2, 1fr); }
}

.group {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(2rem, 3.6vw, 2.8rem) clamp(1.7rem, 3.2vw, 2.6rem);
    isolation: isolate;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-soft);
    will-change: transform;
}
.group:hover { transform: translateY(-6px); }

/* ── Capa de fotografía de fondo (opcional) ──
   Se activa agregando <img class="group__photo"> como PRIMER hijo del
   artículo. La imagen queda entintada por el degradado de color del
   grupo, que se dibuja encima con blend-mode. Sin imagen, el grupo se
   ve exactamente igual que antes: el color sigue siendo el protagonista. */
.group__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(35%) contrast(1.05);
    opacity: .55;
    transform: scale(1.06);
    transition: transform .9s var(--ease-out), opacity .5s var(--ease-soft), filter .5s;
}
.group:hover .group__photo { transform: scale(1.11); opacity: .62; }

/* Velo de color que se dibuja SOBRE la fotografía: aquí vive el
   "entintado". mix-blend-mode: multiply deja pasar el detalle de la
   foto mientras la tiñe por completo con el color del grupo. */
.group__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: .92;
    transition: opacity .5s var(--ease-soft);
}
.group:hover .group__tint { opacity: .86; }
/* Un segundo velo, sin blend, agrega oscuridad hacia abajo para que
   el texto blanco siempre tenga contraste suficiente, tenga o no foto. */
.group__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(200deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.4) 100%);
    pointer-events: none;
}

/* Textura de fondo compartida: puntitos sutiles + forma orgánica */
.group::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
    background-size: 15px 15px;
    opacity: .5;
    mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
}
.group::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 340px; height: 340px;
    border-radius: 50%;
    right: -110px; bottom: -130px;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
    filter: blur(2px);
}

.group__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.group__icon {
    flex-shrink: 0;
    width: 74px; height: 74px;
}
.group__icon svg { width: 100%; height: 100%; display: block; }

.group__index {
    font-family: var(--serif);
    font-size: .78rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.5);
    text-align: right;
}
.group__index b {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}

.group__eyebrow {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: .5rem;
    opacity: .85;
}

.group h3 {
    position: relative;
    z-index: 2;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: .9rem;
}

.group__chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem;
}
.group__chip {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 500;
    padding: .4rem .95rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(3px);
    transition: background-color .3s, transform .3s var(--ease-back);
}
.group:hover .group__chip { background: rgba(255,255,255,.22); }
.group__chip:hover { transform: translateY(-2px); }

.group__link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,.4);
    transition: border-color .3s, gap .3s var(--ease-out);
}
.group__link:hover { gap: .85rem; border-color: #fff; }

/* ── Paletas por grupo (inspiradas en la referencia visual) ── */
.group--ginecologia {
    background: linear-gradient(150deg, #1B3A6B 0%, #12294F 60%, #0D1F3D 100%);
    color: #fff;
    box-shadow: 0 20px 55px -22px rgba(19,41,79,.55);
}
.group--ginecologia .group__eyebrow { color: #9FC1F2; }
.group--ginecologia:hover { box-shadow: 0 26px 64px -20px rgba(19,41,79,.65); }

.group--ginecologia .group__tint {
    background: linear-gradient(150deg, #1B3A6B 0%, #12294F 60%, #0D1F3D 100%);
}

.group--obstetricia {
    background: linear-gradient(150deg, #EAF4EE 0%, #F7EFE6 100%);
    color: #234337;
    box-shadow: 0 20px 55px -24px rgba(35,67,55,.28);
}
.group--obstetricia .group__tint {
    background: linear-gradient(150deg, #DCEEE2 0%, #F3E3D2 100%);
    mix-blend-mode: soft-light;
    opacity: .85;
}
.group--obstetricia .group__shade {
    background: linear-gradient(200deg, rgba(35,67,55,.02) 0%, rgba(35,67,55,.22) 100%);
}
.group--obstetricia::before { opacity: .35; mix-blend-mode: multiply; }
.group--obstetricia .group__eyebrow { color: #B5652E; }
.group--obstetricia .group__index { color: rgba(35,67,55,.45); }
.group--obstetricia .group__index b { color: rgba(35,67,55,.8); }
.group--obstetricia .group__chip {
    background: rgba(35,67,55,.08);
    border-color: rgba(35,67,55,.16);
    color: #234337;
}
.group--obstetricia:hover .group__chip { background: rgba(35,67,55,.14); }
.group--obstetricia .group__link { color: #B5652E; border-color: rgba(181,101,46,.4); }
.group--obstetricia .group__link:hover { border-color: #B5652E; }
.group--obstetricia:hover { box-shadow: 0 26px 64px -22px rgba(35,67,55,.32); }

.group--endoscopia {
    background: linear-gradient(150deg, #0E1B33 0%, #0A1428 100%);
    color: #fff;
    box-shadow: 0 20px 55px -22px rgba(6,12,26,.6);
}
.group--endoscopia .group__eyebrow { color: #7FA8D9; }
.group--endoscopia::after { background: radial-gradient(circle, rgba(127,168,217,.16), transparent 70%); }
.group--endoscopia:hover { box-shadow: 0 26px 64px -20px rgba(6,12,26,.7); }
.group--endoscopia .group__tint {
    background: linear-gradient(150deg, #0E1B33 0%, #0A1428 100%);
}

.group--regenerativa {
    background: linear-gradient(150deg, #6B1E45 0%, #4E1533 60%, #3A0F26 100%);
    color: #fff;
    box-shadow: 0 20px 55px -22px rgba(74,20,45,.55);
}
.group--regenerativa .group__eyebrow { color: #F0A8C4; }
.group--regenerativa:hover { box-shadow: 0 26px 64px -20px rgba(74,20,45,.65); }
.group--regenerativa .group__tint {
    background: linear-gradient(150deg, #6B1E45 0%, #3A0F26 100%);
}

/* ───────────────────────────────────────────────
   MODO FOTOGRAFÍA — activado automáticamente con :has()
   No requiere ninguna clase adicional ni JavaScript: en cuanto el
   artículo contiene una <img class="group__photo"> que carga con
   éxito, estas reglas entran en vigor solas. Si la imagen falta o
   falla (ver onerror="this.remove()" en el HTML), el nodo se retira
   del DOM y :has() deja de coincidir: el grupo vuelve exactamente a
   su apariencia original, sin ninguna intervención manual.

   El texto pasa a blanco de forma UNIFORME —incluso en Obstetricia,
   que sin foto usa texto oscuro sobre fondo claro— así el contraste
   queda garantizado sin importar qué tan clara resulte la imagen.

   Compatibilidad: :has() funciona en Chrome/Edge 105+, Safari 15.4+
   y Firefox 121+ (~95% de navegadores en uso). En navegadores más
   antiguos la fotografía se muestra igual, solo sin este ajuste
   automático de contraste — un caso marginal y no crítico.
   ─────────────────────────────────────────────── */
.group:has(.group__photo) { color: #fff; }
.group:has(.group__photo) .group__index,
.group:has(.group__photo) .group__index b { color: rgba(255,255,255,.9); }
.group:has(.group__photo) .group__eyebrow { color: rgba(255,255,255,.85); }
.group:has(.group__photo) .group__chip {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
.group:has(.group__photo):hover .group__chip { background: rgba(255,255,255,.26); }
.group:has(.group__photo) .group__link { color: #fff; border-color: rgba(255,255,255,.45); }
.group:has(.group__photo) .group__link:hover { border-color: #fff; }

/* Con foto, el velo inferior se oscurece más para proteger el texto,
   sin importar cuán clara sea la fotografía real. */
.group:has(.group__photo) .group__shade {
    background: linear-gradient(200deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 100%);
}

/* El tint de Obstetricia es pastel cuando no hay foto (para que el
   texto oscuro se lea bien); con foto, cambia a una versión saturada
   acorde al texto blanco forzado arriba. */
.group--obstetricia:has(.group__photo) .group__tint {
    background: linear-gradient(150deg, #2E5C46 0%, #6B3A1F 100%);
    mix-blend-mode: multiply;
    opacity: .82;
}

/* ── Trazo decorativo del ícono (currentColor, se adapta a cada panel) ── */
.group__icon svg { color: inherit; }
.group--ginecologia .group__icon svg   { color: #A9CBFB; }
.group--obstetricia .group__icon svg   { color: #B5652E; }
.group--endoscopia .group__icon svg    { color: #8FB4E8; }
.group--regenerativa .group__icon svg  { color: #F3B8D2; }

/* ───────────────────────────────────────────────
   Nota interna: pendiente de imágenes reales
   ─────────────────────────────────────────────── */
.groups-note {
    max-width: 760px;
    margin: 1.6rem auto 0;
    font-size: .82rem;
    color: var(--slate);
    text-align: center;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .group { transition: none !important; }
    .group:hover { transform: none !important; }
}