/* iOfertas — comparador. Verde de "bajó de precio", números grandes y fichas
   limpias: lo que se mira es el precio, no la prosa. */
:root {
    --tinta:      #101418;
    --tinta-suave:#5f6b76;
    --fondo:      #ffffff;
    --fondo-alt:  #f0f7f2;
    --acento:     #0f9d58;
    --acento-oscuro: #0b7a44;
    --borde:      #dde5e0;
    --radio:      12px;
    --fuente:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-titulo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ancho:      1180px;

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

    /* Verde lavadísimo de fondo: las fichas de producto son blancas y contra
       el blanco puro no se distinguía dónde terminaba una y empezaba otra. */
    --lienzo:     #f3f8f4;
    --superficie: #ffffff;
    --acento-tenue: #dff3e7;

    --pie-fondo:  #0b3b26;
    --pie-tinta:  #9dc7b0;
    --pie-titulo: #ffffff;
    --pie-enlace: #ffffff;
    --pie-borde:  rgba(255, 255, 255, .16);

}
.producto-precio { letter-spacing: -.02em; }
.ficha-precio { color: var(--acento-oscuro); }

/* --- Identidad ------------------------------------------------------------ */

/*
   Este tema era el más corto de los siete: tres reglas y el resto heredado.
   Se veía correcto y anónimo, que en un comparador es lo peor que puede pasar
   —lo que vende acá es la sensación de que alguien está mirando los precios
   todo el día—.

   Lo que se agrega es solo color y jerarquía sobre la misma maqueta: filo
   verde arriba, precios más grandes y la baja como un sello, no como un texto
   chico al costado.
*/
.sitio-iofertas .cabecera {
    border-top: 4px solid var(--acento);
    box-shadow: var(--sombra);
}

.sitio-iofertas .marca-nombre { color: var(--acento-oscuro); letter-spacing: -.02em; }
.sitio-iofertas .buscador input { border-radius: 999px; padding-left: 14px; }
.sitio-iofertas .buscador button { border-radius: 999px; }

/* El precio es el titular de la ficha: si no es lo más grande que hay dentro,
   la ficha no está haciendo su trabajo. */
.sitio-iofertas .producto-precio { font-size: 1.45rem; color: var(--tinta); }

/* La variación deja de ser texto suelto y pasa a ser un sello: verde cuando
   bajó, rojo cuando subió, y siempre con la flecha además del color —quien no
   distingue los dos tonos lee igual el signo—. */
.sitio-iofertas .variacion {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .82rem;
}
.sitio-iofertas .variacion--baja { background: #dcfce7; color: #14532d; }
.sitio-iofertas .variacion--alza { background: #fee2e2; color: #7f1d1d; }

/* El que está en su precio más bajo lleva una cinta arriba: es la ficha que se
   viene a buscar y tiene que distinguirse de una fila de fichas iguales. */
.sitio-iofertas .producto--baja { border-color: var(--acento); }
.sitio-iofertas .producto--baja::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--acento), #86efac);
}

/* El sello del mínimo no va en píldora: la frase ocupa dos líneas en una ficha
   angosta y una píldora de dos líneas se ve como un globo. Rectángulo con la
   esquina blanda y el verde de fondo. */
.sitio-iofertas .minimo {
    background: #dcfce7;
    color: #14532d;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 8px;
    line-height: 1.35;
}

/* El recorrido desde el primer registro va bajo la variación del último salto:
   texto corrido y no otra insignia, porque la insignia de al lado se leería
   como una segunda etiqueta del mismo precio. */
.sitio-iofertas .ficha-recorrido {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: #475569;
}
.sitio-iofertas .ficha-recorrido strong { color: inherit; }
.sitio-iofertas .ficha-recorrido .variacion--alza,
.sitio-iofertas .ficha-recorrido .variacion--baja {
    background: none;
    padding: 0;
}

/* El «pero +X%» de la tarjeta va en texto chico y apagado, no en otra insignia:
   dos insignias de porcentaje en la misma tarjeta se leen como dos ofertas. */
.sitio-iofertas .producto-recorrido {
    margin: .2rem 0 0;
    font-size: .78rem;
    color: #7f1d1d;
}