/* ---------------------------------------------------------------------------
   iMascotas — cuidado animal sin vueltas

   Cercano: redondeado, cálido y con harto aire. El tono es de consejo amable,
   no de manual veterinario, y es lo contrario a iMotores a propósito —donde
   ese corta la chapa en chaflán, este redondea todo—.

   Como iNoticias e iMotores, el tema trae maquetación propia además de los
   colores. Todo cuelga de `.sitio-imascotas` y no puede alcanzar a ningún otro
   sitio de la red.

   La huella es CSS: cuatro dedos y una almohadilla hechos con `radial-gradient`
   sobre un pseudo-elemento. Un PNG pesaría más que este archivo completo y
   habría que mantener una versión por color.
--------------------------------------------------------------------------- */

:root {
    --tinta:      #2d2a26;
    --tinta-suave:#7a736b;
    --fondo:      #fffdf9;
    --fondo-alt:  #fdf3e7;
    --acento:     #e08b2e;
    --acento-oscuro: #c0731f;
    --borde:      #ecdfcd;
    --radio:      18px;
    --fuente:     "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --fuente-titulo: "Trebuchet MS", "Segoe UI", sans-serif;
    --ancho:      1060px;

    /* El ámbar de la marca sobre el crema del fondo queda en 2,8:1: sirve para
       una franja o un icono, no para leer. Este tono más quemado llega a 4,6:1
       y es el que se usa en cualquier texto chico —etiquetas, enlaces del pie—,
       de modo que el sitio se vea igual de cálido y siga siendo legible. */
    --acento-texto: #96560f;

    /* Verde de hoja para lo que habla de salud y alimentación. Segundo color y
       no tercero: con dos, cada uno significa algo; con cuatro, ninguno. */
    --verde:      #4a7c59;
    --verde-suave:#eaf2ec;

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

    /* Crema de fondo y fichas blancas: el sitio ya era cálido, pero con todo
       del mismo tono las tarjetas flotaban sin apoyarse en nada. */
    --lienzo:     #fffaf1;
    --superficie: #ffffff;
    --acento-tenue: #fdefdc;

    /* Sombra tostada y no gris: sobre papel cálido, una sombra neutra se ve
       sucia. */
    --sombra:      0 1px 2px rgba(94, 66, 30, .05), 0 6px 16px rgba(94, 66, 30, .09);
    --sombra-alta: 0 3px 8px rgba(94, 66, 30, .08), 0 16px 34px rgba(94, 66, 30, .16);

    /* El pie no cierra en oscuro como en los otros: este sitio no tiene una
       sola pantalla dura, y terminar en negro rompería el tono de la visita. */
    --pie-fondo:  #f7e8d4;
    --pie-tinta:  #6b6259;
    --pie-titulo: #2d2a26;
    --pie-enlace: #96560f;
    --pie-borde:  #e8d6bd;

}

/* Sombra blanda, nunca borde duro: es lo que da el aire de fichas sobre una
   mesa clara en vez de recuadros pegados. */
.sitio-imascotas .tarjeta,
.sitio-imascotas .capsula {
    box-shadow: 0 2px 10px rgba(93, 71, 40, .06);
}

/* --- La huella ------------------------------------------------------------ */

/*
   Cuatro dedos arriba y la almohadilla abajo. Los dedos van en un gradiente de
   cuatro puntos y la almohadilla en otro, más ancha y aplastada, con `ellipse`.
   `background-repeat: no-repeat` es obligatorio: sin él cada gradiente se
   repite y la huella se convierte en un sarpullido.
*/
.sitio-imascotas .huella,
.sitio-imascotas .titulo-seccion::before,
.sitio-imascotas .relacionados > h2::before,
.sitio-imascotas .resumen h1::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: -3px;
    margin-right: 9px;
    background-image:
        /* dedos: dos centrales altos y dos laterales algo más bajos */
        radial-gradient(circle 3px at 5px 6px,  var(--acento) 98%, transparent 100%),
        radial-gradient(circle 3px at 11px 4px, var(--acento) 98%, transparent 100%),
        radial-gradient(circle 3px at 17px 6px, var(--acento) 98%, transparent 100%),
        radial-gradient(ellipse 7px 5px at 11px 15px, var(--acento) 98%, transparent 100%);
    background-repeat: no-repeat;
}

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

/* Arena con las esquinas de abajo redondeadas: la cabecera se apoya en la
   página como una almohadilla, sin la línea recta de siempre. */
.sitio-imascotas .cabecera {
    background: var(--fondo-alt);
    border-bottom: 0;
    border-radius: 0 0 28px 28px;
    margin-bottom: 8px;
}

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

.sitio-imascotas .marca-nombre {
    font-size: 1.85rem;
    letter-spacing: -.015em;
    color: var(--tinta);
}

/* La huella acompaña al nombre, del tamaño de una letra y con el mismo color
   quemado del texto chico para que no compita con el título. */
.sitio-imascotas .marca-nombre::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: -2px;
    background-image:
        radial-gradient(circle 2.6px at 4px 6px,  var(--acento) 98%, transparent 100%),
        radial-gradient(circle 2.6px at 10px 4px, var(--acento) 98%, transparent 100%),
        radial-gradient(circle 2.6px at 16px 6px, var(--acento) 98%, transparent 100%),
        radial-gradient(ellipse 6px 4.5px at 10px 14px, var(--acento) 98%, transparent 100%);
    background-repeat: no-repeat;
}

.sitio-imascotas .marca-lema { color: var(--acento-texto); font-size: .84rem; }

/* Menú en píldoras: mismas formas blandas del resto, y el activo se rellena. */
.sitio-imascotas .menu { gap: 6px; }

.sitio-imascotas .menu a {
    padding: 7px 15px;
    border-radius: 999px;
    color: var(--tinta);
    font-size: .92rem;
}
.sitio-imascotas .menu a:hover {
    background: #fff;
    color: var(--acento-texto);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(93,71,40,.08);
}

.sitio-imascotas .buscador input {
    border-radius: 999px;
    padding: 8px 16px;
    background: #fff;
}
.sitio-imascotas .buscador button { border-radius: 999px; padding: 8px 18px; }

/* --- Apertura ------------------------------------------------------------- */

/*
   La nota de tapa como ficha: foto a la izquierda y texto a la derecha, las dos
   del mismo alto. En una pantalla angosta se apila, y ahí la foto va primero
   porque es lo que hace entrar a leer.
*/
.sitio-imascotas .ficha-tapa {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    background: var(--fondo-alt);
    border-radius: 26px;
    padding: 22px;
    margin-bottom: 34px;
}

.sitio-imascotas .ficha-tapa img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
}

.sitio-imascotas .ficha-tapa h1 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    line-height: 1.15;
    margin: 10px 0 10px;
}
.sitio-imascotas .ficha-tapa h1 a { color: var(--tinta); }
.sitio-imascotas .ficha-tapa h1 a:hover { color: var(--acento-texto); text-decoration: none; }

.sitio-imascotas .ficha-tapa p {
    margin: 0;
    color: var(--tinta-suave);
    font-size: 1rem;
}

/* Sin foto la ficha no tiene dos columnas que repartir. */
.sitio-imascotas .ficha-tapa--sinfoto { grid-template-columns: 1fr; }

/* --- Placa de collar ------------------------------------------------------ */

/*
   La categoría va como la chapita del collar: píldora clara con el anillo
   dibujado a la izquierda. Reemplaza a la etiqueta subrayada de `base.css`, que
   en este sitio se veía como un enlace más.
*/
.sitio-imascotas .etiqueta {
    display: inline-flex;
    align-items: center;
    /* El cuerpo de la tarjeta es una columna flex, que estira a sus hijos a
       todo el ancho: sin esto la placa deja de ser una placa y se convierte en
       una franja verde de borde a borde. */
    align-self: flex-start;
    gap: 6px;
    background: var(--verde-suave);
    color: var(--verde);
    border-radius: 999px;
    padding: 3px 12px 3px 9px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.sitio-imascotas .etiqueta::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.sitio-imascotas .etiqueta:hover { text-decoration: none; filter: brightness(.96); }

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

.sitio-imascotas .rejilla { gap: 26px; align-items: start; }

.sitio-imascotas .tarjeta {
    border: 0;
    border-radius: 22px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Se levanta apenas, con la sombra creciendo: el gesto es de algo blando que se
   acerca, no del destello de un tablero. */
.sitio-imascotas .tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(93, 71, 40, .12);
}

/* La foto lleva su propio radio y un margen: queda como una foto pegada en la
   ficha en vez de sangrar hasta el borde. */
.sitio-imascotas .tarjeta-foto { padding: 10px 10px 0; }
.sitio-imascotas .tarjeta-foto img { border-radius: 16px; aspect-ratio: 4 / 3; }

/* La portada de color de la nota sin foto va a sangre y con la proporción de
   las fotos del sitio: con el relleno de arriba, el color se metía por debajo
   del margen de la ficha en vez de coronarla. */
.sitio-imascotas .tarjeta-foto--vacia { padding: 0; aspect-ratio: 4 / 3; }

.sitio-imascotas .tarjeta-cuerpo { padding: 14px 18px 20px; gap: 9px; }

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

.sitio-imascotas .tarjeta-extracto { font-size: .93rem; line-height: 1.55; }
.sitio-imascotas .tarjeta-pie { font-size: .78rem; }

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

.sitio-imascotas .titulo-seccion,
.sitio-imascotas .relacionados > h2,
.sitio-imascotas .resumen h1 {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

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

.sitio-imascotas .nota { max-width: 700px; }

.sitio-imascotas .nota h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    line-height: 1.18;
    margin-top: 10px;
}

.sitio-imascotas .nota-datos { font-size: .85rem; }

/* El recorte a lo ancho vive en base.css, que le aplica a los siete; acá solo
   el radio propio del tema. */
.sitio-imascotas .nota-foto { border-radius: 22px; }

/* La bajada como el consejo de entrada: caja de arena, sin barra lateral, con
   el texto en tinta normal porque es lo primero que se lee de verdad. */
.sitio-imascotas .nota-bajada {
    background: var(--fondo-alt);
    border-radius: 18px;
    padding: 16px 20px;
    color: var(--tinta);
    font-size: 1.06rem;
    line-height: 1.6;
}

/* Texto largo con aire: son guías que se leen enteras, no titulares. */
.sitio-imascotas .nota-cuerpo { line-height: 1.75; }
.sitio-imascotas .nota-cuerpo h2 { font-family: var(--fuente-titulo); margin-top: 32px; }
.sitio-imascotas .nota-cuerpo img { border-radius: 18px; }

/* Recuadro para lo que hay que tener a mano: el "ojo con esto" de una guía de
   cuidado. Se escribe en el cuerpo desde el panel con
   <p class="ojo">…</p> o <div class="ojo">…</div>. */
.sitio-imascotas .nota-cuerpo .ojo {
    background: var(--verde-suave);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: .97rem;
}
.sitio-imascotas .nota-cuerpo .ojo strong { color: var(--verde); }

.sitio-imascotas .nota-origen { background: var(--fondo-alt); border-radius: 16px; }

/* --- Vacío --------------------------------------------------------------- */

/* Un sitio recién abierto pasa por acá y merece verse cuidado. La huella
   grande arriba hace de dibujo sin necesitar una ilustración. */
.sitio-imascotas .vacio {
    text-align: center;
    padding: 44px 24px;
    background: var(--fondo-alt);
    border-radius: 22px;
    color: var(--tinta-suave);
}
.sitio-imascotas .vacio::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    opacity: .5;
    background-image:
        radial-gradient(circle 7px at 12px 15px, var(--acento) 98%, transparent 100%),
        radial-gradient(circle 7px at 27px 10px, var(--acento) 98%, transparent 100%),
        radial-gradient(circle 7px at 42px 15px, var(--acento) 98%, transparent 100%),
        radial-gradient(ellipse 17px 12px at 27px 38px, var(--acento) 98%, transparent 100%);
    background-repeat: no-repeat;
}

/* --- Paginación y pie ----------------------------------------------------- */

.sitio-imascotas .paginacion a {
    background: #fff;
    border-radius: 999px;
    padding: 9px 18px;
    color: var(--acento-texto);
    font-size: .92rem;
    box-shadow: 0 1px 5px rgba(93,71,40,.08);
}
.sitio-imascotas .paginacion a:hover { text-decoration: none; background: var(--fondo-alt); }

.sitio-imascotas .pie {
    background: var(--pie-fondo);
    border-top: 0;
    border-radius: 28px 28px 0 0;
}

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

/* Sigue las formas del sitio, pero la marca "Publicidad" se mantiene bien
   legible: el tema no puede servir para disimular que es un anuncio. */
.sitio-imascotas .anuncio {
    background: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(93,71,40,.06);
}
.sitio-imascotas .anuncio-marca {
    background: var(--tinta);
    color: #fff;
    border-radius: 0 0 10px 0;
}

/* Con pieza gráfica, la ficha blanca de alrededor sobra: el banner ya trae su
   propio fondo y su sombra, y el marco solo agregaba un borde blanco. */
.sitio-imascotas .anuncio--imagen { background: transparent; box-shadow: none; }

.sitio-imascotas .anuncio em { color: var(--acento-texto); }

@media (max-width: 760px) {
    /* La foto primero: es lo que hace entrar a leer. */
    .sitio-imascotas .ficha-tapa { grid-template-columns: 1fr; gap: 18px; }
    .sitio-imascotas .marca-nombre { font-size: 1.5rem; }
}

/* La chapita del collar se queda como está —verde sobre verde claro, que es la
   identidad del sitio— pero con el verde un punto más oscuro: el de la marca
   sobre ese fondo llegaba a 4,2:1 y el texto del chip es chico y en negrita.
   Con este pasa de 5:1. */
.sitio-imascotas .etiqueta { color: #3d6b4a; }
.sitio-imascotas a.etiqueta:hover { background: #dcebe0; }