/*
CONTRATO DE DIRECCIÓN — tallerdelmac.com (2026-07-28)
THESIS: El canon de la revista tech moderna llevado al «taller» del Mac:
  oficio, banco de trabajo e instrumentos de precisión. Se niega el cliché
  Apple Store (vacío blanco, gris gigante, render de producto): esto es un
  taller, no un escaparate.
OWN-WORLD: neutro cálido de taller #faf9f7, tinta cálida #1c1917, cobre de
  herramienta #b45309 (hover #92400e) como acento de marca, un color por
  categoría (azul sistema, violeta, cobre, teal, titanio, verde), sans del
  sistema con display 800, código y pie en negro cálido. La marca es
  «taller⌘mac» con el ⌘ cobre: el símbolo del Mac, no el logo de Apple.
STORY: el lector de Mac llega a un taller bien ordenado (héroe + parrilla +
  índice), reconoce cada categoría por su color, lee en columna cómoda con
  código oscuro y comenta; el autor firma y enlaza su app, SideList.
FIRST VIEWPORT: cabecera con marca ⌘ y buscador; tarjeta héroe del último
  artículo con tesela de categoría; arranque de la parrilla de recientes.
FORM: canon del género a fidelidad completa, mismo esqueleto que el sitio
  hermano (paraprogramadores.es) con identidad propia por tokens; las teselas
  de degradado son marcadores de posición hasta que existan imágenes reales.
*/

:root {
    --fondo: #faf9f7;
    --superficie: #ffffff;
    --borde: #e7e5e4;
    --texto: #1c1917;
    --texto-2: #57534e;
    --marca: #b45309;
    --marca-2: #92400e;
    --oscuro: #1c1917;
    --claro: #e7e5e4;
    --peligro: #b91c1c;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --radio: 14px;
    --sombra: 0 10px 24px -12px rgba(28, 25, 23, 0.25);
}

/* colores por categoría: --cat texto AA sobre claro; --cat-a/--cat-b gradiente de tesela */
.cat-macos-a-fondo { --cat: #1d4ed8; --cat-a: #2563eb; --cat-b: #1e40af; }
.cat-apps { --cat: #6d28d9; --cat-a: #8b5cf6; --cat-b: #5b21b6; }
.cat-automatizacion { --cat: #b45309; --cat-a: #d97706; --cat-b: #92400e; }
.cat-terminal { --cat: #0f766e; --cat-a: #0d9488; --cat-b: #115e59; }
.cat-hardware { --cat: #57534e; --cat-a: #78716c; --cat-b: #44403c; }
.cat-productividad { --cat: #166534; --cat-a: #16a34a; --cat-b: #14532d; }
.cat-iphone { --cat: #be185d; --cat-a: #ec4899; --cat-b: #9d174d; }
.cat-ipad { --cat: #0e7490; --cat-a: #06b6d4; --cat-b: #155e75; }
.cat-general { --cat: #334155; --cat-a: #64748b; --cat-b: #334155; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
}

.pagina {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 720px) {
    .pagina { padding: 0 1rem; }
}

/* ==== Cabecera ==== */
.mastil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    padding: 1.4rem 0 1.2rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 2.2rem;
}

.mastil .titulo-sitio {
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.mastil .titulo-sitio a { color: var(--texto); text-decoration: none; }
.mastil .titulo-sitio .dos-puntos { color: var(--marca); }

.mastil .lema {
    flex-basis: 100%;
    order: 3;
    font-size: 0.85rem;
    color: var(--texto-2);
    margin-top: -0.4rem;
}
@media (min-width: 900px) {
    .mastil .lema { flex-basis: auto; order: 0; margin-top: 0; }
}

.nav-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.nav-principal a { color: var(--texto-2); text-decoration: none; }
.nav-principal a:hover { color: var(--marca); }

/* menú «Categorías» desplegable sin JS (details/summary) */
.menu-categorias { position: relative; font-size: 0.9rem; font-weight: 600; }
.menu-categorias summary {
    list-style: none;
    cursor: pointer;
    color: var(--texto-2);
    user-select: none;
    padding: 0.2rem 0.1rem;
}
.menu-categorias summary::-webkit-details-marker { display: none; }
.menu-categorias summary::after { content: " ▾"; color: var(--marca); }
.menu-categorias summary:hover { color: var(--marca); }
.menu-categorias[open] summary { color: var(--marca); }
.menu-categorias ul {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.45rem;
    min-width: 13rem;
    margin: 0;
    padding: 0.8rem;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra);
}
.menu-categorias ul a { display: inline-block; }

/* ==== Enlaces y foco ==== */
a { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--marca-2); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==== Botones ==== */
.sello,
button.sello {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    text-decoration: none;
}
.sello:hover { border-color: var(--texto-2); color: var(--texto); }
.sello.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.sello.primario:hover { background: var(--marca-2); border-color: var(--marca-2); color: #fff; }
.sello.peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, var(--borde)); }
.sello.peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }

/* ==== Rótulos de sección ==== */
.rotulo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 2.8rem 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.rotulo::before {
    content: "";
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(120deg, var(--marca), var(--marca-2));
}

/* ==== Introducción ==== */
.intro { max-width: 70ch; }
.intro p + p { margin-top: 0.8rem; }

/* ==== Buscador ==== */
.buscador {
    display: flex;
    gap: 0.6rem;
    margin: 1.5rem 0 0.5rem;
    max-width: 40rem;
}
.etiqueta-buscar {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.buscador input[type="search"] {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
}
.buscador input[type="search"]::placeholder { color: var(--texto-2); }

/* ==== Pills de categoría ==== */
.pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cat, #334155);
    background: color-mix(in srgb, var(--cat, #334155) 12%, transparent);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    text-decoration: none;
}

.categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 1.5rem;
}
.categorias a { text-decoration: none; }
.categorias a.pill:hover { background: color-mix(in srgb, var(--cat, #334155) 22%, transparent); }
.categorias a.activa { color: #fff; background: var(--cat, #334155); }

/* ==== Teselas (marcador de la imagen destacada) ==== */
.miniatura {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cat-a, #64748b), var(--cat-b, #334155));
    border-radius: calc(var(--radio) - 4px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.miniatura .inicial {
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 5rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    user-select: none;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* ==== Tarjetas ==== */
.tarjeta {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.9rem;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease-out;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) {
    .tarjeta, .tarjeta:hover { transform: none; transition: none; }
}

.tarjeta .contenido { padding: 0.9rem 0.4rem 0.4rem; }
.tarjeta .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    font-size: 0.8rem;
    color: var(--texto-2);
    margin-bottom: 0.55rem;
}
.tarjeta h2, .tarjeta h3 {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.tarjeta h2 a, .tarjeta h3 a { color: var(--texto); text-decoration: none; }
.tarjeta h2 a::after, .tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.tarjeta:hover h2 a, .tarjeta:hover h3 a { color: var(--marca); }
.tarjeta .resumen {
    font-size: 0.93rem;
    color: var(--texto-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* los enlaces internos de la tarjeta (pill) quedan por encima del enlace extendido */
.tarjeta .meta a { position: relative; z-index: 1; }

/* héroe */
.tarjeta.heroe { display: grid; gap: 0; padding: 0.9rem; margin-top: 1.2rem; }
@media (min-width: 760px) {
    .tarjeta.heroe { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 1.6rem; }
}
.tarjeta.heroe h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.02em; }
.tarjeta.heroe .resumen { -webkit-line-clamp: 4; font-size: 1rem; }

/* parrilla */
.parrilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    list-style: none;
}
@media (min-width: 640px) { .parrilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .parrilla { grid-template-columns: repeat(4, 1fr); } }

/* ==== Índice completo (lista compacta) ==== */
.grupo-categoria { margin-bottom: 1.8rem; }
.titulo-categoria {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.4rem 0 0.4rem;
}
.titulo-categoria .n { color: var(--texto-2); font-weight: 500; font-size: 0.85rem; }

.indice { list-style: none; }
.indice li { border-bottom: 1px solid var(--borde); }
.indice li:last-child { border-bottom: none; }
.indice a {
    display: grid;
    grid-template-columns: 6.2rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.6rem 0.4rem;
    color: var(--texto);
    text-decoration: none;
    border-radius: 8px;
}
.indice .f { font-size: 0.8rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.indice .t { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.indice a:hover { background: color-mix(in srgb, var(--marca) 6%, transparent); }
.indice a:hover .t { color: var(--marca); }

@media (max-width: 540px) {
    .indice a { grid-template-columns: 1fr; gap: 0.05rem; }
}

.nota-indice { margin-top: 1.2rem; font-size: 0.9rem; }
.sin-comentarios { color: var(--texto-2); padding: 0.6rem 0; }

/* ==== Artículo ==== */
.articulo-cabecera { margin: 1.4rem 0 1.8rem; max-width: 76ch; }
.articulo-cabecera .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--texto-2);
    margin-bottom: 0.9rem;
}
.articulo-cabecera h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.articulo-cabecera .resumen {
    margin-top: 0.9rem;
    font-size: 1.12rem;
    color: var(--texto-2);
    max-width: 70ch;
}

.cuerpo { max-width: 70ch; }
.cuerpo p { margin: 0 0 1.1rem; }
.cuerpo h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2.2rem 0 0.8rem;
}
.cuerpo h3 { font-size: 1.15rem; font-weight: 700; margin: 1.7rem 0 0.6rem; }
.cuerpo ul, .cuerpo ol { margin: 0 0 1.1rem 1.4rem; }
.cuerpo li { margin-bottom: 0.35rem; }
.cuerpo blockquote {
    margin: 1.5rem 0;
    padding: 0.9rem 1.2rem;
    background: color-mix(in srgb, var(--marca) 6%, transparent);
    border-radius: 10px;
    color: var(--texto-2);
}
.cuerpo code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: color-mix(in srgb, var(--marca) 8%, transparent);
    border-radius: 5px;
    padding: 0.12em 0.38em;
}
.cuerpo pre {
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem;
    background: var(--oscuro);
    color: var(--claro);
    border-radius: 12px;
    overflow-x: auto;
    line-height: 1.55;
}
.cuerpo pre code { background: none; padding: 0; font-size: 0.83rem; color: inherit; }

/* tablas comparativas dentro del artículo */
.cuerpo table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.93rem;
}
.cuerpo table th,
.cuerpo table td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}
.cuerpo table th {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--texto-2);
    background: var(--fondo);
    border-bottom: 2px solid var(--borde);
}
.cuerpo table tbody tr:last-child td { border-bottom: none; }
.tabla-envoltorio, .cuerpo table { display: table; }
@media (max-width: 640px) {
    .cuerpo table { display: block; overflow-x: auto; white-space: nowrap; }
}

.cuerpo figure, .figura {
    margin: 1.6rem 0;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.6rem;
}
.cuerpo figure img, .figura img { max-width: 100%; display: block; border-radius: calc(var(--radio) - 6px); }
.cuerpo figcaption, .figura figcaption {
    font-size: 0.82rem;
    color: var(--texto-2);
    padding: 0.55rem 0.4rem 0.1rem;
}

/* ==== Comentarios ==== */
.comentarios { margin-top: 3rem; max-width: 76ch; }
.lista-notas { display: grid; gap: 0.9rem; }
.comentario {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.2rem;
}
.comentario .firma {
    font-size: 0.85rem;
    color: var(--texto-2);
    margin-bottom: 0.35rem;
}
.comentario .firma strong { color: var(--texto); font-weight: 700; }
.comentario p { font-size: 0.96rem; }

/* ==== Formularios ==== */
form.impreso { max-width: 46rem; margin-top: 1.4rem; }
form.impreso .campo { margin-bottom: 1.05rem; }
form.impreso label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
form.impreso input[type="text"],
form.impreso input[type="password"],
form.impreso input[type="date"],
form.impreso select,
form.impreso textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}
form.impreso textarea { line-height: 1.6; resize: vertical; }
form.impreso #contenido { font-family: var(--mono); font-size: 0.85rem; }
form.impreso .nota { font-size: 0.82rem; color: var(--texto-2); margin-top: 0.6rem; }
.campo-web { position: absolute; left: -9999px; }

/* ==== Avisos ==== */
.aviso {
    font-size: 0.92rem;
    padding: 0.85rem 1.1rem;
    background: color-mix(in srgb, var(--marca) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
    border-radius: 10px;
    color: var(--texto);
    margin: 1.3rem 0;
}
.aviso.error {
    background: color-mix(in srgb, var(--peligro) 7%, transparent);
    border-color: color-mix(in srgb, var(--peligro) 35%, transparent);
    color: var(--peligro);
}

/* ==== Tablas de administración ==== */
table.registro {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}
table.registro th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--texto-2);
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    padding: 0.6rem 0.7rem;
}
table.registro td {
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}
table.registro tbody tr:last-child td { border-bottom: none; }
table.registro .mono { font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }
table.registro form { display: inline; }

.acciones-linea { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.acciones-linea .sello { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.aviso .acciones-linea { margin-top: 0.6rem; }

.estado-pendiente { color: #b45309; font-weight: 700; }
.estado-aprobado { color: #15803d; font-weight: 700; }
.estado-borrador { color: var(--texto-2); font-weight: 700; }

@media (max-width: 720px) {
    .tabla-scroll { overflow-x: auto; border-radius: var(--radio); }
    table.registro { min-width: 640px; }
}

/* ==== Artículo con índice lateral ==== */
.articulo-layout { display: block; }

.indice-lateral { display: none; }

@media (min-width: 1040px) {
    .articulo-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 3rem;
        align-items: start;
    }
    .indice-lateral { display: block; }
}

.indice-pegajoso {
    position: sticky;
    top: 1.8rem;
    max-height: calc(100vh - 3.6rem);
    overflow-y: auto;
    padding-left: 1.3rem;
    border-left: 1px solid var(--borde);
    font-size: 0.88rem;
}
.indice-pegajoso .titulo-indice {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-2);
    margin-bottom: 0.7rem;
}
.indice-pegajoso ol { list-style: none; margin: 0; padding: 0; }
.indice-pegajoso li { margin-bottom: 0.15rem; }
.indice-pegajoso li.nivel-3 { padding-left: 0.9rem; font-size: 0.84rem; }
.indice-pegajoso a {
    display: block;
    padding: 0.28rem 0.5rem;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.4;
}
.indice-pegajoso a:hover { color: var(--marca); background: color-mix(in srgb, var(--marca) 7%, transparent); }
.indice-pegajoso a.activo {
    color: var(--marca);
    font-weight: 600;
    background: color-mix(in srgb, var(--marca) 9%, transparent);
}
.indice-pegajoso .volver-arriba {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--borde);
    font-size: 0.82rem;
}
.indice-pegajoso .volver-arriba a { padding: 0; color: var(--texto-2); }

.cuerpo h2, .cuerpo h3 { scroll-margin-top: 1.5rem; }

/* ==== Migas de pan ==== */
.migas {
    font-size: 0.85rem;
    color: var(--texto-2);
    margin: 0.4rem 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--marca); text-decoration: underline; }
.migas [aria-current] {
    color: var(--texto);
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==== Imagen destacada ==== */
figure.destacada {
    margin: 0 0 1.8rem;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--borde);
}
figure.destacada img { width: 100%; height: auto; display: block; }

/* ==== Relacionados ==== */
.relacionados { margin-top: 3rem; }
.relacionados .tarjeta .contenido { padding-bottom: 0.2rem; }
.relacionados .tarjeta h3 { font-size: 1.02rem; }
@media (min-width: 640px) { .relacionados .parrilla { grid-template-columns: repeat(3, 1fr); } }

/* ==== Páginas estáticas ==== */
.pagina-estatica { max-width: 76ch; }
.pagina-estatica .cuerpo ul { margin-bottom: 1.2rem; }
.pendiente {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
    padding: 0.05em 0.35em;
    border-radius: 4px;
}

/* ==== Afiliados dentro del artículo ==== */
.aviso-afiliados {
    max-width: 70ch;
    background: color-mix(in srgb, var(--marca) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent);
    border-radius: var(--radio);
    padding: 0.9rem 1.15rem;
    margin-bottom: 1.8rem;
    font-size: 0.9rem;
    color: var(--texto-2);
}

.ficha-producto {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
    margin: 1.6rem 0;
}
.ficha-producto .imagen-producto { margin: 0 0 0.9rem; }
.ficha-producto .imagen-producto img {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) - 6px);
}
.ficha-producto .nombre-producto { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.3rem; }
.ficha-producto .nota-producto { margin-bottom: 0.9rem; }
.ficha-producto .cta-producto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
}
.ficha-producto .cta-producto .etiqueta-afiliado { margin-left: 0; }

/* ==== Paginación de categorías ==== */
.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 2.2rem 0 0.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--borde);
}
.paginacion-info { font-size: 0.9rem; color: var(--texto-2); }
.paginacion:has(.paginacion-info:only-child) { justify-content: center; }

/* ==== Utilidades ==== */
.accion-cabecera { margin: 1rem 0 1.4rem; }
.ancho-lectura { max-width: 70ch; }
.etiqueta-inline { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ==== Autor y equipo recomendado ==== */
.caja-autor, .caja-afiliados { max-width: 76ch; }
.caja-autor p { max-width: 70ch; }
.caja-afiliados ul { list-style: none; }
.caja-afiliados li {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.7rem;
}
.etiqueta-afiliado { font-size: 0.78rem; color: var(--texto-2); margin-left: 0.4rem; white-space: nowrap; }
.nota-producto { font-size: 0.92rem; color: var(--texto-2); margin-top: 0.25rem; }
.transparencia { max-width: 70ch; font-size: 0.88rem; color: var(--texto-2); margin-top: 0.8rem; }

/* ==== Pie ==== */
.pie {
    margin-top: 4rem;
    background: var(--oscuro);
    color: #94a3b8;
}
.pie .pie-interior {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.5rem 2.4rem;
    font-size: 0.88rem;
}
.pie .marca-pie { color: #f1f5f9; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.pie p + p { margin-top: 0.35rem; }
.nav-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.3rem;
    margin: 1rem 0 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-pie a { color: #cbd5e1; text-decoration: none; }
.nav-pie a:hover { color: #fff; text-decoration: underline; }