/* ---------------------------------------------------------------------------
   iGrupo — la casa

   Corporativo sobrio: azul, Georgia en los títulos y sin estridencias. Es el
   sitio que explica la red, no el que compite por atención, así que la
   identidad se construye con aire y jerarquía tipográfica en vez de color.

   Es el único de los siete que no busca retener al visitante: su trabajo es
   que entienda qué es esto y se vaya a uno de los otros sitios. Por eso la
   apertura es una declaración de texto y no una foto: no hay nada que vender.

   Todo cuelga de `.sitio-igrupo` y no puede alcanzar a ningún otro sitio.
--------------------------------------------------------------------------- */

:root {
    --tinta:      #172033;
    --tinta-suave:#64748b;
    --fondo:      #ffffff;
    --fondo-alt:  #f1f5f9;
    --acento:     #1e3a8a;
    --acento-oscuro: #172c6b;
    --borde:      #e2e8f0;
    --radio:      8px;
    --fuente:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-titulo: Georgia, serif;
    --ancho:      1000px;

    /* --- Profundidad y color de sistema ---------------------------------- */

    /* Azul rebajadísimo de fondo. La casa era la más blanca de las siete y por
       eso la que se veía más apagada, justo el sitio que tiene que dar ganas de
       entrar a los otros. */
    --lienzo:     #f4f7fc;
    --superficie: #ffffff;
    --acento-tenue: #e7eefb;

    --pie-fondo:  #101f45;
    --pie-tinta:  #a6b6d6;
    --pie-titulo: #ffffff;
    --pie-enlace: #ffffff;
    --pie-borde:  rgba(255, 255, 255, .16);

}

/* --- Cabecera ------------------------------------------------------------- */

/* Una línea azul arriba y nada más. En una corporativa, la cabecera tiene que
   desaparecer: lo que importa está debajo. */
.sitio-igrupo .cabecera { border-top: 3px solid var(--acento); }

.sitio-igrupo .cabecera-fila { padding: 22px 16px; }

.sitio-igrupo .marca-nombre {
    font-size: 1.6rem;
    letter-spacing: -.01em;
    color: var(--acento);
}

.sitio-igrupo .marca-lema {
    font-size: .82rem;
    letter-spacing: .02em;
}

.sitio-igrupo .menu a {
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--tinta-suave);
    padding-bottom: 2px;
}
/* Subrayado que aparece: el gesto más discreto que existe para un menú. */
.sitio-igrupo .menu a:hover {
    color: var(--acento);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--acento);
}

.sitio-igrupo .buscador input { border-radius: 6px; }
.sitio-igrupo .buscador button { border-radius: 6px; }

/* --- Declaración de apertura ---------------------------------------------- */

/*
   Texto grande sobre fondo claro, con la medida corta. Es la única parte del
   sitio que se permite tamaño: dice en dos líneas qué es la red, que es la
   pregunta con la que llega quien entra acá.
*/
/*
   La apertura sobre el azul de la casa.

   Era un recuadro gris claro con texto oscuro: correcto y completamente
   olvidable, en el sitio que justamente tiene que dar ganas de recorrer los
   otros seis. En azul profundo la frase se lee como una declaración y no como
   un aviso legal, y sobre él las cifras de la red tienen dónde apoyarse.

   El tejido del fondo son dos gradientes cónicos muy suaves: la red dibujada
   sin una sola imagen que descargar.
*/
.sitio-igrupo .declaracion {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(96, 165, 250, .38), transparent 60%),
        radial-gradient(90% 120% at 10% 110%, rgba(15, 118, 110, .30), transparent 55%),
        linear-gradient(135deg, #1e3a8a, #101f45);
    border-radius: 16px;
    padding: 52px 44px 44px;
    margin-bottom: 48px;
    color: #fff;
    box-shadow: var(--sombra-alta);
}

/* La trama de puntos: una sola capa, casi invisible, para que el azul no sea
   un plano muerto. */
.sitio-igrupo .declaracion::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}

.sitio-igrupo .declaracion p {
    position: relative;
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.25;
    max-width: 24ch;
    margin: 0;
    color: #fff;
}

/* La bajada vuelve al cuerpo de texto normal: si también fuera serif grande,
   no habría jerarquía entre las dos. */
.sitio-igrupo .declaracion .sub {
    font-family: var(--fuente);
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .82);
    max-width: 58ch;
    margin-top: 18px;
    line-height: 1.65;
}

/*
   Las tres cifras de la red.

   Números grandes y rótulo chico debajo, que es como se leen las cifras
   sueltas: al revés hay que buscar el dato. Van dentro del azul y no en una
   franja aparte porque son parte de la misma frase —esto es la red y esto es
   lo que se movió este mes—.
*/
.sitio-igrupo .cifras {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    margin: 30px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.sitio-igrupo .cifras dt {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .72);
}

.sitio-igrupo .cifras dd {
    margin: 2px 0 0;
    font-family: var(--fuente-titulo);
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
}

/* --- Títulos de sección --------------------------------------------------- */

/* Antetítulo en versales sobre el título serif: la fórmula de cualquier
   documento corporativo, y funciona porque ordena sin decorar. */
.sitio-igrupo .titulo-seccion,
.sitio-igrupo .resumen h1,
.sitio-igrupo .relacionados > h2 {
    font-size: 1.45rem;
    border-bottom: 1px solid var(--borde);
    padding-bottom: 10px;
    margin-bottom: 24px;
}

.sitio-igrupo .antetitulo {
    display: block;
    font-family: var(--fuente);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--acento);
    margin-bottom: 6px;
}

/* --- Tarjetas ------------------------------------------------------------- */

.sitio-igrupo .tarjeta { border-radius: 10px; }

/*
   Acá había una regla que escondía las miniaturas del listado, con el
   argumento de que un comunicado no se elige por la foto y de que las fichas
   sin imagen dejaban huecos de distinta altura en la fila.

   El segundo problema ya no existe —la ficha sin foto pinta una portada de
   color con el emoji de su sección, así que la fila queda pareja— y el primero
   resultó ser al revés: una rejilla de puro texto gris es exactamente lo que
   hacía que este sitio se viera apagado al lado de los otros seis.
*/
.sitio-igrupo .tarjeta:hover { border-color: var(--acento); }

.sitio-igrupo .tarjeta-titulo { font-size: 1.12rem; line-height: 1.3; }
.sitio-igrupo .tarjeta-titulo a { color: var(--tinta); }
.sitio-igrupo .tarjeta:hover .tarjeta-titulo a { color: var(--acento); text-decoration: none; }

.sitio-igrupo .etiqueta {
    color: var(--acento);
    font-weight: 700;
    letter-spacing: .1em;
}

.sitio-igrupo .rejilla { align-items: start; }

/* --- Vitrina de la red ----------------------------------------------------- */

/*
   Un bloque por sitio hermano, y cada uno con su color.

   `--marca` es lo único que cambia entre bloques: el color entra por la clase
   del tema y de ahí lo toman la barra del encabezado, el chip de la sección y
   la portada de las notas sin foto. Escribir siete veces las mismas reglas con
   un color distinto era la alternativa.
*/
.sitio-igrupo .red-sitio { margin-bottom: 44px; }

.sitio-igrupo .red-sitio--inoticias   { --marca: #c8102e; --marca-oscura: #9d0c24; }
.sitio-igrupo .red-sitio--iofertas    { --marca: #0f9d58; --marca-oscura: #0b7a44; }
.sitio-igrupo .red-sitio--imotores    { --marca: #ff6b1a; --marca-oscura: #b8480c; }
.sitio-igrupo .red-sitio--imascotas   { --marca: #e08b2e; --marca-oscura: #96560f; }
.sitio-igrupo .red-sitio--tips        { --marca: #7c3aed; --marca-oscura: #5b21b6; }
.sitio-igrupo .red-sitio--valdebenito { --marca: #8a5a2b; --marca-oscura: #6d4620; }
.sitio-igrupo .red-sitio--igrupo      { --marca: #1e3a8a; --marca-oscura: #172c6b; }

/* Encabezado del bloque: nombre a la izquierda, cifras al medio y la salida al
   sitio a la derecha. La raya de abajo lleva el color de la marca y es lo que
   convierte seis listas seguidas en seis secciones distinguibles. */
.sitio-igrupo .red-sitio-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--marca, var(--acento));
}

.sitio-igrupo .red-sitio-nombre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    color: var(--marca-oscura, var(--tinta));
}

/* El lema, al lado y en gris: dice de qué va el sitio a quien no lo conoce,
   sin competir con el nombre. */
.sitio-igrupo .red-sitio-nombre span {
    font-family: var(--fuente);
    font-size: .82rem;
    font-weight: 400;
    color: var(--tinta-suave);
}

.sitio-igrupo .red-sitio-cifras {
    margin: 0;
    font-size: .8rem;
    color: var(--tinta-suave);
}

/* La salida al sitio hermano, empujada al extremo. Es el enlace más importante
   del bloque —el trabajo de esta portada es repartir tráfico— así que se pinta
   con el color de la marca y crece un pelo al pasar por encima. */
.sitio-igrupo .red-sitio-ir {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--marca, var(--acento));
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: var(--sombra);
    transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.sitio-igrupo .red-sitio-ir:hover {
    text-decoration: none;
    background: var(--marca-oscura, var(--acento-oscuro));
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta);
}
/* La flecha se adelanta: el gesto dice «te vas a otro sitio» sin escribirlo. */
.sitio-igrupo .red-sitio-ir span { transition: transform var(--transicion); }
.sitio-igrupo .red-sitio-ir:hover span { transform: translateX(3px); }

/* Las fichas de la vitrina toman el color de su sitio en el borde superior:
   basta esa línea para saber de dónde viene cada una aunque la fila se mire de
   lejos. */
/* La vitrina va en cuatro columnas y no en las tres de la rejilla normal: con
   tres, la cuarta nota de cada sitio caía sola en una fila y el bloque se leía
   como si le faltara algo. Fichas más chicas, y la fila cierra. */
.sitio-igrupo .red-sitio .rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.sitio-igrupo .red-sitio .tarjeta-cuerpo { padding: 14px; gap: 7px; }
.sitio-igrupo .red-sitio .tarjeta-titulo { font-size: 1rem; }
.sitio-igrupo .red-sitio .tarjeta-extracto { font-size: .86rem; }

.sitio-igrupo .tarjeta--red { border-top: 3px solid var(--marca, var(--acento)); }
.sitio-igrupo .tarjeta--red:hover { border-color: var(--marca, var(--acento)); }

.sitio-igrupo .tarjeta--red .etiqueta--marca {
    background: color-mix(in srgb, var(--marca, var(--acento)) 14%, #fff);
    color: var(--marca-oscura, var(--acento-oscuro));
}

/*
   Las notas de la vitrina entran escalonadas.

   Es la única animación de carga de los siete sitios y está solo acá: en un
   diario sería una molestia, pero esta es la pantalla que tiene que dar la
   sensación de que la red se está moviendo. Son 4 fichas por bloque, así que el
   retardo se reparte entre las cuatro y termina antes de medio segundo.

   Quien pidió menos movimiento no ve nada de esto: `prefers-reduced-motion` lo
   apaga en base.css.
*/
@keyframes red-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.sitio-igrupo .tarjeta--red {
    animation: red-entra 420ms cubic-bezier(.2, .6, .2, 1) both;
}
.sitio-igrupo .rejilla .tarjeta--red:nth-child(2) { animation-delay: 60ms; }
.sitio-igrupo .rejilla .tarjeta--red:nth-child(3) { animation-delay: 120ms; }
.sitio-igrupo .rejilla .tarjeta--red:nth-child(4) { animation-delay: 180ms; }

/* Las lecturas van en el pie de la ficha, del mismo tamaño que la fecha: es
   el motivo por el que la nota está acá, no un premio que haya que destacar. */
.sitio-igrupo .leidas { color: var(--tinta-suave); }

/* --- Nota ---------------------------------------------------------------- */

.sitio-igrupo .nota { max-width: 680px; }

.sitio-igrupo .nota h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    line-height: 1.25;
}

.sitio-igrupo .nota-datos {
    border-bottom: 1px solid var(--borde);
    padding-bottom: 14px;
}

.sitio-igrupo .nota-bajada {
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--tinta);
}

.sitio-igrupo .nota-cuerpo { line-height: 1.75; }
.sitio-igrupo .nota-cuerpo h2 { font-family: var(--fuente-titulo); margin-top: 32px; }

/* Cita destacada para los comunicados. Se escribe en el cuerpo desde el panel
   con <blockquote>. */
.sitio-igrupo .nota-cuerpo blockquote {
    margin: 26px 0;
    padding-left: 22px;
    border-left: 3px solid var(--acento);
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    color: var(--tinta);
}

/* --- Varios --------------------------------------------------------------- */

.sitio-igrupo .vacio {
    background: var(--fondo-alt);
    border-radius: 8px;
    padding: 36px 20px;
    text-align: center;
}

.sitio-igrupo .paginacion a {
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: .9rem;
}
.sitio-igrupo .paginacion a:hover { border-color: var(--acento); text-decoration: none; }

.sitio-igrupo .pie { background: var(--pie-fondo); }

/* --- Pantalla angosta ------------------------------------------------------ */

@media (max-width: 720px) {

    /* El hero con el relleno de escritorio deja la frase en una columna de
       cuatro palabras. */
    .sitio-igrupo .declaracion { padding: 32px 22px 28px; border-radius: 12px; }
    .sitio-igrupo .cifras { gap: 12px 26px; }
    .sitio-igrupo .cifras dd { font-size: 1.5rem; }

    /* La salida al sitio hermano deja de ir al extremo: en una columna angosta
       quedaba sola en su propia línea, muy lejos del nombre al que pertenece. */
    .sitio-igrupo .red-sitio-ir { margin-left: 0; }

    /* Dos fichas por fila en vez de cuatro: con 210 px de mínimo entrarían dos
       apretadas y el título se parte en cinco líneas. */
    .sitio-igrupo .red-sitio .rejilla {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
}