/* ---------------------------------------------------------------------------
   Estructura común a los siete sitios.

   Acá va solo lo que NO distingue a un sitio de otro: la retícula, los
   tamaños, el comportamiento responsive. Los colores y las tipografías viven
   en el tema de cada sitio y se leen de las variables de más abajo.

   La separación importa: un arreglo de maquetación se hace una vez y llega a
   los siete, mientras que la identidad de cada uno se toca sin miedo a romper
   los demás.
--------------------------------------------------------------------------- */

:root {
    /* Valores por defecto. Cada tema los pisa; si un tema olvidara alguno, el
       sitio se ve sobrio en vez de roto. */
    --tinta:      #1a1a1a;
    --tinta-suave:#5c5c5c;
    --fondo:      #ffffff;
    --fondo-alt:  #f5f5f5;
    --acento:     #2563eb;
    --acento-oscuro: #1d4ed8;
    --borde:      #e2e2e2;
    --radio:      10px;
    --fuente:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-titulo: var(--fuente);
    --ancho:      1100px;

    /*
        Lienzo y superficie: los dos blancos que faltaban.

        Con un solo color, la página era una tarjeta blanca sobre un fondo
        blanco y lo único que separaba una cosa de otra era una línea gris de
        un píxel. Se veía lavado porque literalmente no había figura ni fondo.

        Ahora el `lienzo` es el papel —apenas tocado por el color del sitio— y
        la `superficie` es lo que se apoya encima: tarjetas, paneles, la
        cabecera. Cada tema define su par; acá caen a `--fondo` para que un
        tema que no los declare siga viéndose como antes en vez de romperse.
    */
    --lienzo:     var(--fondo);
    --superficie: var(--fondo);

    /*
        Dos alturas de sombra y ninguna más. Con una sola no hay diferencia
        entre lo que está quieto y lo que responde al puntero; con cinco, nadie
        recuerda cuál va dónde.

        Tono azulado y no negro puro: una sombra gris sobre papel cálido se ve
        sucia, y esta se apoya en el mismo azul de la tinta.
    */
    --sombra:     0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .07);
    --sombra-alta:0 2px 6px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .13);

    /* El acento rebajado a fondo: para chips y realces donde el color pleno
       gritaría. Cada tema pone el suyo, que no es lo mismo que el acento con
       opacidad —sobre un fondo cálido eso se apaga a gris—. */
    --acento-tenue: #eef2ff;

    /* Un solo tiempo para todo lo que reacciona al puntero. Corto: por encima
       de 200 ms la interfaz se siente perezosa, no elegante. */
    --transicion: 170ms cubic-bezier(.2, .6, .2, 1);

    /* El pie, que en los siete era una franja gris apagada. Cada tema decide
       si el suyo cierra en oscuro o en papel. */
    --pie-fondo:  var(--fondo-alt);
    --pie-tinta:  var(--tinta-suave);
    --pie-titulo: var(--tinta);
    --pie-enlace: var(--acento);
    --pie-borde:  var(--borde);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--tinta);
    background: var(--lienzo);
    line-height: 1.6;
}

/* El foco se ve, siempre y en los siete sitios. Quien navega con teclado
   necesita saber dónde está parado, y el contorno del navegador desaparecía
   sobre los fondos de color de las cabeceras. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Nada de esto es información: quien pidió menos movimiento ve la misma página
   quieta. Va acá arriba, antes que las reglas que animan, para que se lea como
   parte del sistema y no como un parche del final. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

/* Cabecera ---------------------------------------------------------------- */
.cabecera { border-bottom: 1px solid var(--borde); background: var(--superficie); }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px; }
.marca { display: flex; flex-direction: column; }
.marca-nombre { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 700; color: var(--tinta); }
.marca-lema { font-size: .8rem; color: var(--tinta-suave); }
.menu { display: flex; flex-wrap: wrap; gap: 16px; }
.menu a { color: var(--tinta-suave); font-size: .95rem; }
/* El emoji del menú: un pelo más grande que el texto y separado, para que se
   lea como icono y no como parte de la palabra. Los emoji no heredan el color
   del texto, así que no hay nada de contraste que ajustar acá. */
.menu-emoji { font-size: 1.05em; margin-right: 4px; line-height: 1; }
/* El rótulo del grupo: no es un enlace y no debe parecerlo. Va más chico, en
   mayúsculas y con una línea a la izquierda que lo separa del grupo anterior. */
.menu-grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
              color: var(--tinta-suave); opacity: .7; padding-left: 10px;
              border-left: 1px solid var(--borde); }
.menu-grupo:first-child { border-left: 0; padding-left: 0; }

/* Menú desplegable por grupos (iOfertas). El panel se posiciona sobre el
   contenido en vez de empujarlo: abrir un grupo no puede mover la portada.
   `name` en el <details> hace que abrir uno cierre el anterior en los
   navegadores que lo soportan; donde no, se cierran con otro clic. */
.menu-desplegable { position: relative; }
.menu-desplegable > summary { cursor: pointer; list-style: none; padding: 4px 2px;
                              color: var(--tinta-suave); font-size: .95rem; white-space: nowrap; }
.menu-desplegable > summary::-webkit-details-marker { display: none; }
.menu-desplegable > summary::after { content: " ▾"; opacity: .6; }
.menu-desplegable[open] > summary { color: var(--tinta); font-weight: 600; }
.menu-panel { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 200px;
              display: flex; flex-direction: column; gap: 2px; padding: 8px;
              background: var(--fondo); border: 1px solid var(--borde);
              border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.menu-panel a { padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.menu-panel a:hover { background: var(--fondo-alt); }

/* En pantalla angosta el panel ocupa el ancho y va bajo el grupo: flotando se
   sale de la pantalla por la derecha. */
@media (max-width: 640px) {
    .menu-desplegable { position: static; }
    .menu-panel { position: static; box-shadow: none; }
}

/* Buscador de la cabecera. Está en los siete sitios, así que vive acá y cada
   tema solo lo reviste con sus colores. */
.buscador { display: flex; gap: 6px; }
.buscador input {
    padding: 7px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font: inherit;
    font-size: .9rem;
    min-width: 180px;
    background: var(--fondo);
    color: var(--tinta);
}
.buscador button {
    padding: 7px 14px;
    border: 0;
    border-radius: var(--radio);
    background: var(--acento);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.buscador button:hover { background: var(--acento-oscuro); }

/* Visible para lectores de pantalla, no para el ojo: la etiqueta del campo
   sobra en pantalla —el placeholder ya lo dice— pero no en un lector. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Rejillas ---------------------------------------------------------------- */
main { padding: 28px 16px 48px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.rejilla--productos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.titulo-seccion { font-family: var(--fuente-titulo); font-size: 1.4rem; margin: 8px 0 20px; }

/* Tarjetas ---------------------------------------------------------------- */
/*
   La tarjeta se levanta del papel.

   Antes era un rectángulo blanco con borde gris sobre fondo blanco: no había
   nada que mirara al visitante. Ahora tiene sombra propia, y al pasar el
   puntero sube tres píxeles y se le enciende el borde con el color del sitio.
   Ese movimiento es lo que convierte una lista en algo que se recorre.
*/
.tarjeta {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
    border-color: var(--acento);
}
.tarjeta-foto { overflow: hidden; display: block; }
.tarjeta-foto img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    transition: transform 420ms cubic-bezier(.2, .6, .2, 1);
}
/* La foto se acerca un punto al pasar por encima. Es el gesto que más barato
   sale y más vida da: la imagen deja de ser un adorno pegado y se comporta
   como parte del enlace. */
.tarjeta:hover .tarjeta-foto img { transform: scale(1.05); }

/*
   La portada de la nota que no trae foto.

   Mismo alto que una miniatura de verdad, para que la fila de la rejilla no
   quede escalonada, y el emoji de la sección en grande encima de un fondo de
   color. No es un relleno: en un listado dice de qué habla la nota antes de
   leer el titular, que es lo mismo que hace la foto cuando la hay.

   El color sale del acento del sitio; en la vitrina de iGrupo, de la marca del
   sitio hermano.
*/
.tarjeta-foto--vacia,
.tarjeta-foto--marca {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .35), transparent 60%),
        linear-gradient(135deg, var(--acento), var(--acento-oscuro));
}
.tarjeta-foto--marca {
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .35), transparent 60%),
        linear-gradient(135deg, var(--marca, var(--acento)), var(--marca-oscura, var(--acento-oscuro)));
}
.tarjeta-emoji {
    font-size: 2.6rem;
    line-height: 1;
    /* La sombra lo despega del color de fondo: un emoji plano sobre un
       degradado del mismo tono se pierde. */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
    transition: transform 420ms cubic-bezier(.2, .6, .2, 1);
}
.tarjeta:hover .tarjeta-emoji { transform: scale(1.12) rotate(-4deg); }
.tarjeta-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-titulo { font-family: var(--fuente-titulo); font-size: 1.1rem; margin: 0; line-height: 1.35; }
.tarjeta-titulo a { color: var(--tinta); }
.tarjeta-extracto { margin: 0; color: var(--tinta-suave); font-size: .92rem; }
.tarjeta-pie { margin: 0; font-size: .8rem; color: var(--tinta-suave); }
/* La sección, como chip y no como texto suelto: es la única mancha de color
   de la tarjeta y lo que deja distinguir de qué habla cada una sin leer el
   titular. El fondo es el acento rebajado, nunca el acento pleno, que
   competiría con el título. */
.etiqueta {
    display: inline-block;
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--acento-oscuro);
    background: var(--acento-tenue);
    padding: 3px 10px;
    border-radius: 999px;
    transition: background var(--transicion), color var(--transicion);
}
a.etiqueta:hover { background: var(--acento); color: #fff; text-decoration: none; }
.fuente { font-weight: 600; }

.destacado { margin-bottom: 32px; }
.destacado a { display: block; overflow: hidden; border-radius: var(--radio); }
.destacado img {
    border-radius: var(--radio);
    aspect-ratio: 21 / 9;
    object-fit: cover;
    width: 100%;
    transition: transform 500ms cubic-bezier(.2, .6, .2, 1);
}
.destacado a:hover img { transform: scale(1.03); }
.destacado h1 { font-family: var(--fuente-titulo); font-size: 2rem; margin: 16px 0 8px; line-height: 1.2; }
.destacado h1 a { color: var(--tinta); }

/* Titulares (agregador) ---------------------------------------------------- */
.titulares { display: flex; flex-direction: column; }
/* La fila del agregador también responde: se tiñe el fondo y la foto se
   acerca. Sin esto, una lista de treinta titulares no da ninguna señal de
   que cada línea es una puerta. */
.titular {
    display: flex;
    gap: 16px;
    padding: 16px 12px;
    margin: 0 -12px;
    border-bottom: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: background var(--transicion);
}
.titular:hover { background: var(--fondo-alt); }
.titular-foto { overflow: hidden; border-radius: 6px; flex-shrink: 0; }
.titular-foto img {
    width: 140px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 420ms cubic-bezier(.2, .6, .2, 1);
}
.titular:hover .titular-foto img { transform: scale(1.06); }
.titular h2 { font-family: var(--fuente-titulo); font-size: 1.05rem; margin: 0 0 6px; line-height: 1.35; }
.titular h2 a { color: var(--tinta); }
.titular-datos { margin: 0; font-size: .8rem; color: var(--tinta-suave); }

/* Nota -------------------------------------------------------------------- */
.nota { max-width: 720px; margin: 0 auto; }
.nota h1 { font-family: var(--fuente-titulo); font-size: 2.1rem; line-height: 1.2; margin: 0 0 12px; }
.nota-datos { color: var(--tinta-suave); font-size: .85rem; margin: 0 0 20px; }
/* La foto de apertura se recorta a lo ancho en vez de crecer a lo alto. Una
   foto vertical a ancho completo mide más de una pantalla: el texto queda
   entero bajo el pliegue y la nota se lee como si fuera solo una imagen. El
   tope va acá y no en cada tema porque le pasa a los siete. */
.nota-foto {
    border-radius: var(--radio);
    margin-bottom: 20px;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

.nota-bajada { font-size: 1.15rem; color: var(--tinta-suave); }
.nota-cuerpo { font-size: 1.05rem; }
.nota-cuerpo img { border-radius: var(--radio); margin: 20px 0; }
.nota-origen { margin-top: 28px; padding: 14px 16px; background: var(--fondo-alt); border-radius: var(--radio); font-size: .92rem; }
.relacionados { margin-top: 48px; }

/* Productos --------------------------------------------------------------- */
.producto {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    box-shadow: var(--sombra);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--acento); }
.producto--baja { border-color: #16a34a; }
.producto-foto { overflow: hidden; display: block; }
.producto-foto img {
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    padding: 10px;
    width: 100%;
    transition: transform 420ms cubic-bezier(.2, .6, .2, 1);
}
.producto:hover .producto-foto img { transform: scale(1.04); }
.producto-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.producto-titulo { font-size: .95rem; margin: 0; line-height: 1.35; }
.producto-titulo a { color: var(--tinta); }
.producto-precio { font-size: 1.3rem; font-weight: 700; margin: 0; }
.producto-antes { font-size: .9rem; font-weight: 400; color: var(--tinta-suave); text-decoration: line-through; margin-left: 6px; }
.producto-pie { margin: 0; font-size: .78rem; color: var(--tinta-suave); }
.variacion { margin: 0; font-weight: 700; font-size: .9rem; }
.variacion--baja { color: #16a34a; }
.variacion--alza { color: #dc2626; }
.minimo { margin: 0; font-size: .78rem; color: #16a34a; font-weight: 600; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.ficha-foto { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.ficha h1 { font-family: var(--fuente-titulo); font-size: 1.6rem; margin: 0 0 12px; }
.ficha-precio { font-size: 2.2rem; font-weight: 800; margin: 0 0 4px; }
.ficha-tabla { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 20px 0; font-size: .92rem; }
.ficha-tabla dt { color: var(--tinta-suave); }
.ficha-tabla dd { margin: 0; font-weight: 600; }
.ficha-nota { font-size: .8rem; color: var(--tinta-suave); }

/* Los sellos de la ficha: una línea con emoji que dice de un vistazo si el
   precio de hoy vale la pena. El color hace el trabajo junto con la palabra,
   nunca solo (un daltónico ve la frase igual). */
.ficha-sello { display: inline-block; margin: 0 0 10px; padding: 4px 10px;
    border-radius: 999px; font-size: .85rem; font-weight: 700; }
.ficha-sello--minimo  { background: #dcfce7; color: #14532d; }
.ficha-sello--baja    { background: #fef3c7; color: #7c2d12; }
.ficha-sello--agotado { background: #fee2e2; color: #7f1d1d; }
.boton {
    display: inline-block;
    background: var(--acento);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radio);
    font-weight: 600;
    box-shadow: var(--sombra);
    transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { background: var(--acento-oscuro); text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton:active { transform: translateY(0); }

.historial { margin-top: 40px; }
/* Los productos sugeridos del final de la ficha. Van separados del banner por
   una línea: sin ella se leían como parte del anuncio. */
/* Las variantes de la ficha: fichas chicas en fila, con el precio al lado del
   color. La que está más barata que la actual se marca con el acento, que es la
   razón por la que este bloque existe. */
.variantes { margin: 20px 0; }
.variantes-titulo { display: block; font-size: .8rem; color: var(--tinta-suave);
                    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.variantes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.variante { display: inline-block; padding: 6px 12px; border: 1px solid var(--borde);
            border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--tinta); }
a.variante:hover { border-color: var(--acento); }
.variante--actual { background: var(--fondo-alt); font-weight: 600; }
.variante--barata { border-color: var(--acento); color: var(--acento-oscuro); font-weight: 600; }

/* El pie de la tarjeta es un enlace a la tienda: se subraya al pasar por
   encima y conserva el gris del resto del pie para no competir con el precio. */
.producto-pie a { color: inherit; text-decoration: none; }
.producto-pie a:hover { text-decoration: underline; }

.sugeridos { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borde); }

/* El gráfico de precio de la ficha (iofertas). El SVG se escribe a mano y toma
   los colores del tema: así el trazo es el verde del sitio sin repetirlo acá. */
.grafico-precio { margin: 0 0 24px; }
.grafico-precio svg { width: 100%; height: auto; display: block; }
.grafico-precio figcaption { margin-top: 8px; font-size: .82rem; color: var(--tinta-suave); }
.grafico-eje { stroke: var(--borde); stroke-width: 1; }
.grafico-etiqueta { fill: var(--tinta-suave); font-size: 12px; font-family: var(--fuente); }
.grafico-etiqueta--precio { fill: var(--tinta); font-weight: 600; }
.grafico-linea { fill: none; stroke: var(--acento-oscuro); stroke-width: 2.5;
                 stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico-punto { fill: var(--acento-oscuro); }
/* El precio de hoy va en blanco con anillo: es el único punto que se distingue
   sin depender del color, que es la comparación que se viene a hacer. */
.grafico-hoy { fill: var(--fondo); stroke: var(--acento-oscuro); stroke-width: 3; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { text-align: left; padding: 10px; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--tinta-suave); font-weight: 600; }

/* Varios ------------------------------------------------------------------ */
.paginacion { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 40px 0 0; }
.vacio { color: var(--tinta-suave); grid-column: 1 / -1; }
.resumen { margin-bottom: 28px; }
.resumen h1 { font-family: var(--fuente-titulo); margin: 0 0 4px; }
/*
   El pie cierra la página en vez de desvanecerla.

   Era una franja gris con dos líneas de texto: el mismo gris del fondo, el
   mismo tamaño, ninguna razón para mirarlo. Ahora cada tema le da su color
   —varios cierran en oscuro— y los sitios de la red se ven como fichas y no
   como una fila de enlaces separados por puntos. Es el último lugar donde el
   visitante decide si sigue en la red o cierra la pestaña.
*/
.pie {
    border-top: 1px solid var(--pie-borde);
    padding: 36px 0 28px;
    margin-top: 56px;
    color: var(--pie-tinta);
    font-size: .88rem;
    background: var(--pie-fondo);
}
.pie p { margin: 0 0 14px; }
.pie-titulo {
    color: var(--pie-titulo);
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1rem;
}
.pie-red { display: flex; flex-wrap: wrap; gap: 10px; }

/*
   Cada sitio de la red con su color de marca, que aparece al pasar por encima.

   Es el único lugar donde los siete se ven juntos, y en gris no se distinguían
   entre sí. El color va en `--marca` y se enciende en el hover: en reposo la
   fila se lee como un pie ordenado, no como un semáforo.
*/
.pie-sitio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--pie-borde);
    border-radius: 999px;
    color: var(--pie-enlace);
    font-weight: 600;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.pie-sitio:hover {
    text-decoration: none;
    color: #fff;
    background: var(--marca, var(--acento));
    border-color: var(--marca, var(--acento));
    transform: translateY(-2px);
}
/* El punto de color adelanta de qué sitio se trata sin depender del hover. */
.pie-sitio::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--marca, var(--acento));
    flex-shrink: 0;
}
.pie-sitio:hover::before { background: #fff; }

.pie-sitio--inoticias   { --marca: #c8102e; }
.pie-sitio--iofertas    { --marca: #0f9d58; }
.pie-sitio--imotores    { --marca: #ff6b1a; }
.pie-sitio--imascotas   { --marca: #e08b2e; }
.pie-sitio--tips        { --marca: #7c3aed; }
.pie-sitio--igrupo      { --marca: #1e3a8a; }
.pie-sitio--valdebenito { --marca: #8a5a2b; }

/* En el sitio donde ya estás, el enlace a ese mismo sitio sobra. */
.sitio-inoticias   .pie-sitio--inoticias,
.sitio-iofertas    .pie-sitio--iofertas,
.sitio-imotores    .pie-sitio--imotores,
.sitio-imascotas   .pie-sitio--imascotas,
.sitio-tips        .pie-sitio--tips,
.sitio-igrupo      .pie-sitio--igrupo,
.sitio-valdebenito .pie-sitio--valdebenito { display: none; }

@media (max-width: 720px) {
    .ficha { grid-template-columns: 1fr; }
    .titular-foto img { width: 96px; }
    .destacado h1 { font-size: 1.5rem; }
    .nota h1 { font-size: 1.6rem; }

    .cabecera-fila { padding: 14px 16px; gap: 10px; }

    /*
        El menú pasa a una sola línea que se arrastra a lo ancho.

        Con diez categorías —iNoticias— y `flex-wrap`, el menú ocupa tres
        líneas y empuja la primera noticia casi fuera de la pantalla: en un
        teléfono había que bajar para ver el primer titular. En una línea que
        se desplaza, la cabecera mide siempre lo mismo tenga el sitio dos
        categorías o diez.

        El `mask-image` desvanece el borde derecho para que se vea que la fila
        sigue; sin esa pista, un menú cortado en seco parece un menú completo.
    */
    .menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 14px;
        /* Espacio para que el desvanecido no coma la última categoría. */
        padding-right: 24px;
        margin-right: -16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { white-space: nowrap; }

    /* El buscador toma el ancho completo de su fila: al lado del menú no cabe
       en un teléfono, y a medio ancho no se lee lo que se escribe. */
    .buscador { width: 100%; }
    .buscador input { min-width: 0; flex: 1; }

    main { padding: 20px 16px 36px; }

    /* En el teléfono, 460 px de foto son más de la mitad de la pantalla y la
       bajada de la nota queda fuera. Con 280 entra el arranque del texto junto
       con la imagen. */
    .nota-foto { max-height: 280px; }
}


/* El conteo junto al título de una sección: dice cuánto hay sin obligar a
   contar tarjetas. */
.conteo {
    font-size: .8rem;
    font-weight: 400;
    color: var(--tinta-suave);
    vertical-align: middle;
    margin-left: 6px;
}
/* El extremo sin destino del paginador: visible pero apagado, para que la fila
   no se mueva al cambiar de página. */
.paginador-inerte { color: #c7cdd3; }

/* --- Publicidad ---------------------------------------------------------- */

/* El hueco tiene medida propia para que, al cambiar de anuncio, el contenido de
   alrededor no se mueva. La marca "Publicidad" no es opcional: confundir un
   anuncio con contenido propio es lo que un sitio no debe hacer. */
.anuncio {
    display: block;
    position: relative;
    border: 1px solid var(--borde);
    background: var(--fondo-alt);
    border-radius: var(--radio);
    overflow: hidden;
    margin: 28px 0;
    box-shadow: var(--sombra);
    transition: box-shadow var(--transicion), border-color var(--transicion);
}
.anuncio:hover { box-shadow: var(--sombra-alta); border-color: var(--acento); }
.anuncio-marca {
    position: absolute;
    top: 0; left: 0;
    background: var(--borde);
    color: var(--tinta-suave);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 2px 8px;
    z-index: 1;
}
/* El espacio de arriba deja pasar el rótulo "Publicidad", que va posicionado
   sobre esta esquina. Con un título grande —y varios temas los agrandan— el
   rótulo terminaba encima del texto, que es justo lo que no puede pasar: tiene
   que leerse que esto es un anuncio. */
.anuncio a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 30px 20px 18px;
    color: var(--tinta);
}
.anuncio a:hover { text-decoration: none; }
.anuncio img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anuncio strong { font-family: var(--fuente-titulo); font-size: 1.5rem; line-height: 1.1; }
.anuncio span { color: var(--tinta-suave); font-size: .9rem; margin-top: 4px; }
.anuncio em {
    font-style: normal;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: 10px;
    color: var(--acento);
}
/*
   El anuncio sin pieza gráfica.

   Hoy no hay ninguno activo —los siete sitios tienen banner propio— pero el
   formato sigue existiendo para el anunciante que llegue con texto y sin
   imagen. Con un fondo tintado y el título en el color del sitio, al menos se
   lee como un aviso y no como un bloque que no terminó de cargar.
*/
.anuncio--texto {
    background: linear-gradient(135deg, var(--acento-tenue), var(--fondo-alt));
}
.anuncio--texto strong { color: var(--acento-oscuro); }

.anuncio--ancho { min-height: 130px; }
.anuncio--caja  { min-height: 250px; }
.anuncio--caja strong { font-size: 1.7rem; }
/* En el pie va discreto: es el cierre de la página, no una interrupción. */
.anuncio--pie { min-height: 90px; margin: 0 0 20px; }
.anuncio--pie strong { font-size: 1.1rem; }
.anuncio--pie.anuncio--texto a { padding: 28px 16px 14px; }

/*
   El anuncio con pieza gráfica: la imagen a sangre, sin relleno ni fondo del
   hueco. El `min-height` deja de mandar porque la imagen ya trae su propia
   proporción; forzarla a una altura fija la recortaba por el medio y se comía
   la mitad del mensaje.

   Se levanta al pasar por encima como cualquier otra pieza del sitio: un
   banner que no reacciona parece una imagen decorativa, y lo que se busca es
   que se note que lleva a alguna parte.
*/
.anuncio--imagen { background: transparent; min-height: 0; border: 0; box-shadow: none; }
.anuncio--imagen:hover { box-shadow: none; }
/* La sombra pasa a la pieza misma, que es lo que se ve: en el recuadro
   quedaba flotando alrededor de una imagen que ya no lo llena. */
.anuncio--imagen img { border-radius: var(--radio); box-shadow: var(--sombra); }
.anuncio--imagen:hover img { box-shadow: var(--sombra-alta); }
.anuncio--imagen a { padding: 0; display: block; height: auto; }
.anuncio--imagen img { height: auto; transition: transform 500ms cubic-bezier(.2, .6, .2, 1); }
.anuncio--imagen:hover img { transform: scale(1.02); }

/*
   Sobre una pieza gráfica el rótulo sale de encima y se pone antes.

   Puesto sobre la imagen tapaba siempre algo: a la izquierda el logo del
   anunciante, a la derecha su botón. En una pieza pagada eso no es un detalle
   estético —es esconder lo que se está pagando por mostrar—. Así que en los
   banners con imagen el rótulo va en su propia línea encima, que además es
   como se marca la publicidad en los diarios.

   El color se hereda del bloque de alrededor: en el pie oscuro sale claro y
   sobre el papel sale gris, sin tener que saber acá dónde va a caer.
*/
.anuncio--imagen .anuncio-marca {
    position: static;
    /* En línea y no en bloque: varios temas le ponen fondo propio al rótulo, y
       en bloque ese fondo se estiraba de lado a lado como una barra negra
       encima del banner. Así ocupa lo que mide la palabra. */
    display: inline-block;
    background: transparent;
    color: inherit;
    opacity: .7;
    padding: 5px 2px 6px;
    border-radius: 0;
}

/* --- También en nuestra red ---------------------------------------------- */

/*
   El cierre de las siete portadas: una nota por sitio hermano.

   Vive acá y no en cada tema porque es la red asomándose y no una sección del
   sitio: se ve igual en los siete, y así un cambio no hay que repetirlo siete
   veces. Cada pieza lleva además la clase de su tema, por si algún día uno
   quiere pintar la suya distinta.

   Se separa del cuerpo con más aire del habitual y con una línea arriba: no es
   más portada, es otra cosa.
*/
.vitrina-red {
    margin: 40px 0 8px;
    padding-top: 24px;
    border-top: 2px solid var(--borde);
}
.vitrina-red-titulo {
    font-size: 1.1rem;
    margin: 0 0 16px;
}
.vitrina-red-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 22px;
}
.vitrina-red-foto { display: block; margin-bottom: 8px; }
.vitrina-red-foto img,
.vitrina-red-emoji {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radio);
}
.vitrina-red-emoji {
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: var(--fondo-alt);
}
.vitrina-red-sitio {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acento);
}
.vitrina-red-nota {
    font-size: .98rem;
    line-height: 1.3;
    margin: 4px 0 0;
}
.vitrina-red-nota a { color: var(--tinta); }
.vitrina-red-nota a:hover { color: var(--acento); text-decoration: none; }

/* --- Aviso de sitio cerrado ---------------------------------------------- */

/*
   Solo la ve quien tiene sesión en el panel: el visitante nunca llega a una
   página del sitio cerrado. Va arriba de todo y en rojo porque su trabajo es
   interrumpir —sin ella, el sitio se ve normal y el cierre parece roto—.
*/
.cinta-cerrado {
    margin: 0;
    padding: 8px 16px;
    background: #7f1d1d;
    color: #fff;
    font-size: .85rem;
    text-align: center;
}
.cinta-cerrado a { color: #fff; text-decoration: underline; }

/* --- Compartir la ficha ---------------------------------------------------
   Los colores de las redes van **oscurecidos hasta pasar contraste con texto
   blanco** (5:1 o más). El verde de WhatsApp o el celeste de Telegram tal como
   los publican dan 2:1 y 3:1 con texto blanco encima: se ven bien en una
   pantalla buena y desaparecen al sol, que es donde se mira un teléfono.

   Va en base.css y no en cada tema porque es la misma fila de botones en los
   siete sitios; lo único del tema sería el color, y acá el color lo pone la
   red, no el sitio. */
.compartir { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); }
.compartir-titulo {
    display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-suave); margin-bottom: 10px;
}
.compartir-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* La segunda fila va pegada a la primera, no separada como un bloque aparte:
   son lo mismo —formas de compartir— sólo que las de abajo no van a una red. */
.compartir-otros { margin-top: 8px; }

.compartir-boton {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 999px; border: 0;
    background: var(--marca); color: #fff; cursor: pointer;
    font: inherit; font-size: .86rem; font-weight: 600; text-decoration: none;
    transition: filter .15s ease, transform .15s ease;
}
.compartir-boton:hover, .compartir-boton:focus-visible { color: #fff; }
.compartir-boton svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.compartir-boton.copiar svg, .compartir-boton.nativo svg { fill: none; }

.compartir-boton.whatsapp { --marca: #157f3c; }
.compartir-boton.facebook { --marca: #1461c9; }
.compartir-boton.telegram { --marca: #176e99; }
.compartir-boton.equis    { --marca: #111827; }
/* Copiar y la hoja del sistema no son de nadie: gris de tinta, para que los
   colores de arriba sigan significando algo. */
.compartir-boton.copiar   { --marca: #374151; }
.compartir-boton.nativo   { --marca: #374151; }

/* El hover oscurece en vez de aclarar: aclarando, el texto blanco pierde el
   contraste justo mientras el cursor está encima. */
.compartir-boton:hover { filter: brightness(.9); transform: translateY(-1px); }
.compartir-boton:active { transform: none; }
.compartir-boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* El acuse de «copiado» va en el propio botón, que es donde está mirando quien
   acaba de pulsarlo. */
.compartir-boton.copiado { --marca: #0f7a56; }

@media (max-width: 560px) {
    /* En el teléfono el nombre de la red sobra: el icono y el color alcanzan, y
       así los botones caben en una fila que no se parte. */
    .compartir-boton span { display: none; }
    .compartir-boton { padding: 11px; }
    .compartir-boton svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .compartir-boton { transition: none; }
    .compartir-boton:hover { transform: none; }
}

/* =====================================================================
   Aviso de consentimiento (Ley 21.719) y páginas legales
   =====================================================================
   Va en base.css y no en cada tema: el aviso es el mismo compromiso en los
   siete sitios, y se pinta con las variables del tema activo, así que cada
   uno lo muestra con su color sin una línea propia. */
.consentimiento {
    position: fixed; inset: auto 0 0 0; z-index: 9999; padding: 16px;
    display: flex; justify-content: center;
    background: linear-gradient(to top, rgba(15, 23, 42, .18), transparent);
}
.consentimiento[hidden] { display: none; }
.consentimiento-caja {
    width: 100%; max-width: var(--ancho); background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-alta); padding: 22px 24px;
}
.consentimiento-titulo { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; }
.consentimiento-texto { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tinta-suave); }
.consentimiento-texto a { color: var(--acento); text-decoration: underline; }

/* Las categorías solo aparecen al pulsar «Configurar»: el aviso normal es una
   decisión de dos botones, y una lista de casillas delante convierte algo de
   un segundo en un formulario. */
.consentimiento-categorias, .consentimiento-btn--guardar { display: none; }
.consentimiento--panel .consentimiento-categorias { display: grid; gap: 10px; margin: 16px 0 4px; }
.consentimiento--panel .consentimiento-btn--guardar { display: inline-block; }
.consentimiento--panel .consentimiento-btn--configurar { display: none; }
.consentimiento-categoria {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 11px 13px; background: var(--lienzo);
}
.consentimiento-check {
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    font-size: .85rem; line-height: 1.5; color: var(--tinta-suave);
}
.consentimiento-check input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--acento); }
.consentimiento-check input:disabled { cursor: not-allowed; }
.consentimiento-check strong { display: block; color: var(--tinta); }
.consentimiento-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Rechazar se ve igual de fácil que aceptar: la ley pide que retirar el
   consentimiento no cueste más que darlo, y un botón apagado al lado de uno de
   color es exactamente eso. */
.consentimiento-btn {
    flex: 1 1 170px; padding: 11px 18px; border: 1px solid var(--borde);
    border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}
.consentimiento-btn:hover { background: var(--acento-tenue); }
.consentimiento-btn--principal { background: var(--acento); border-color: transparent; color: #fff; }
.consentimiento-btn--principal:hover { background: var(--acento-oscuro); color: #fff; }
.consentimiento-enlace {
    background: none; border: 0; padding: 0; font: inherit;
    color: inherit; cursor: pointer; text-decoration: underline;
}
@media (max-width: 640px) {
    .consentimiento { padding: 10px; }
    .consentimiento-caja { padding: 16px; }
    .consentimiento-btn { flex: 1 1 100%; }
}

/* --- Páginas legales ------------------------------------------------- */
.pagina-legal { max-width: 780px; margin: 24px auto 60px; }
.pagina-legal .entradilla { font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: 28px; }
.pagina-legal h2 { margin-top: 32px; font-size: 1.2rem; }
.pagina-legal ul { padding-left: 20px; line-height: 1.7; }
.pagina-legal li { margin-bottom: 4px; }
.pagina-legal code { background: var(--acento-tenue); border-radius: 4px; padding: 1px 5px; font-size: .9em; }
.pagina-legal-fecha { margin-top: 32px; font-size: .85rem; color: var(--tinta-suave); }

/* La línea legal del pie, bajo los sitios de la red. */
.pie-legal { margin-top: 10px; font-size: .82rem; color: var(--pie-tinta); }
.pie-legal a, .pie-legal .consentimiento-enlace { color: var(--pie-enlace); }