/*
Theme Name: Clutterless Nest
Theme URI: https://clutterlessnest.com/
Author: Alfredo Ramses
Description: El tema de clutterlessnest.com: todo tiene su sitio (knolling). ESTA HOJA NO SE EDITA A MANO: la escribe exportar_tema.py desde la maqueta (blogs/clutterless/theme/maqueta-desde-cero/assets/site.css).
Version: 1.0.3
Requires PHP: 8.1
Text Domain: clutterless
*/

/* === fuentes (bajar_fuentes.py) === */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/gabarito-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/gabarito-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/gabarito-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/gabarito-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/red-hat-text-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Red Hat Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/red-hat-text-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/red-hat-text-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/red-hat-text-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/red-hat-text-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/red-hat-text-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/red-hat-text-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/red-hat-text-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* === la maqueta: assets/site.css === */
/* Clutterless Nest · la hoja de la maqueta desde cero (29 sep 2026).
   La identidad, en blogs/clutterless/DISENO.md: Gabarito + Red Hat Text, tinta berenjena, tomate que
   escribe y dibuja, lila pálido de campo. Sin sombras, sin versalitas espaciadas, sin zona oscura. */

/* ------------------------------------------------------------------ fichas */
:root {
  --papel: #FFFFFF;
  --lila: #EFEAFB;
  --lila-2: #E3DAF7;
  --cajon: #E1D8F8;
  --tomate: #D23F25;
  --tomate-h: #B8331D;
  --boton: #C63B22;
  --tinta: #231B2E;
  --tinta-2: #5E5468;
  --f-d: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --f-t: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
  --r-s: 8px;
  --ancho: 1240px;
  --lado: 24px;
  --entre: 88px;
  --curva: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.6 var(--f-t);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--f-d); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tomate); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
/* lo que se coloca al llegar va girado y corrido unos px antes de llegar: que eso no abra un scroll de lado */
main { overflow-x: clip; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 999px; z-index: 200; }
.salta:focus { left: 8px; }
.sin-foto {
  display: block; aspect-ratio: 4 / 3; width: 100%; border-radius: inherit;
  background: var(--lila) url(img/textura.svg) repeat 0 0 / auto 88px;
}

/* botones y flechas: pastillas y flechas, que se vea que es un botón antes de leerlo */
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--boton); color: #fff;
  font: 700 16px/1.2 var(--f-d); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.boton:hover { background: var(--tomate-h); }
.boton .ic { font-size: 18px; transition: transform .2s ease; }
.boton:hover .ic { transform: translateX(3px); }
.flecha {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 15px/1.3 var(--f-d); color: var(--tomate-h); text-decoration: none;
}
.flecha .ic { font-size: 16px; transition: transform .2s ease; }
.flecha:hover .ic { transform: translateX(3px); }
.flecha:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ cabecera */
.mast { background: var(--papel); border-bottom: 1px solid var(--lila-2); position: relative; z-index: 40; }
.mast-g { display: flex; align-items: center; gap: 20px; height: 84px; }
.marca { display: flex; align-items: center; height: 46px; flex: none; text-decoration: none; }
.logo { display: block; }
.logo svg { display: block; height: 40px; width: auto; }

.menu { margin-left: auto; }
.menu-l { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mi { position: relative; }
.mi-a {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 12px; border: 0; border-radius: 999px; background: none;
  font: 700 16px/1.2 var(--f-d); color: var(--tinta); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.mi-a .ic { font-size: 16px; }
.mi:hover > .mi-a, .mi:focus-within > .mi-a { background: var(--lila); }
.desp {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 250px; padding: 16px 18px 18px;
  background: var(--papel); border: 1px solid var(--lila-2); border-radius: var(--r);
  display: none;
}
.desp::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.mi:hover > .desp, .mi:focus-within > .desp { display: block; }
.mi-mas .desp { left: auto; right: 0; }
.desp-t { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--f-d); color: var(--tinta-2); margin-bottom: 8px; }
.desp-t .ic { font-size: 20px; color: var(--tomate); }
.desp ul { list-style: none; margin: 0 0 12px; padding: 0; }
.desp-mas ul { margin: 0; }
.desp li a { display: block; padding: 6px 0; font: 500 15px/1.3 var(--f-t); text-decoration: none; }
.desp li a:hover { color: var(--tomate-h); }
.desp-todo { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--f-d); color: var(--tomate-h); text-decoration: none; }
.desp-todo .ic { font-size: 16px; }

.buscar-b {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 16px; border: 1.5px solid var(--lila-2); border-radius: 999px; background: var(--papel);
  font: 700 15px/1.2 var(--f-d); cursor: pointer; transition: background-color .2s ease;
}
.buscar-b .ic { font-size: 18px; }
.buscar-b:hover { background: var(--lila); }
.hoja-b { display: none; border: 0; background: none; padding: 8px; cursor: pointer; }
.hoja-b .ic { font-size: 26px; }

.hoja { position: fixed; inset: 0; z-index: 120; background: var(--papel); padding: 16px var(--lado) 32px; overflow-y: auto; }
.hoja[hidden] { display: none; }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hoja-t { font: 700 14px/1.2 var(--f-d); color: var(--tinta-2); margin: 20px 0 8px; }
.hoja-cab .hoja-t { margin: 0; }
.hoja-x { border: 0; background: none; padding: 8px; cursor: pointer; }
.hoja-x .ic { font-size: 26px; }
.hoja-l { list-style: none; margin: 0; padding: 0; }
.hoja-l a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lila); font: 800 20px/1.2 var(--f-d); text-decoration: none; }
.hoja-l a .ic { font-size: 24px; color: var(--tomate); }
.hoja-l--mas a { font-size: 18px; font-weight: 700; }

.busca { position: fixed; left: 0; right: 0; top: 0; z-index: 110; background: var(--papel); border-bottom: 1px solid var(--lila-2); padding: 24px 0 28px; }
.busca[hidden] { display: none; }
.busca-l { display: block; font: 800 20px/1.2 var(--f-d); margin-bottom: 12px; }
.busca-fila { display: flex; gap: 10px; align-items: center; }
.busca-fila input {
  flex: 1; min-width: 0; padding: 12px 18px; border: 1.5px solid var(--lila-2); border-radius: 999px;
  font: 500 18px/1.2 var(--f-t); color: var(--tinta); background: var(--papel);
}
.busca-fila input:focus { outline: none; border-color: var(--tomate); }
.busca-x { border: 0; background: none; padding: 8px; cursor: pointer; }
.busca-x .ic { font-size: 24px; }

/* ------------------------------------------------------------------ secciones */
.sec-cab { margin-bottom: 24px; }
.sec-cab h2 { font-size: 30px; }
.sec-cab p { margin-top: 6px; font-size: 18px; color: var(--tinta-2); }
.salas, .comprar, .despejar { margin-top: var(--entre); }
.rotulo { display: block; font: 700 13px/1.2 var(--f-d); color: var(--tomate-h); }

/* 1 · la tapa */
.tapa { padding-top: 48px; }
.tapa-cab { max-width: 940px; margin-bottom: 32px; }
.tapa h1 { font-size: 50px; line-height: 1.04; }
.entradilla { margin-top: 14px; font-size: 20px; line-height: 1.5; color: var(--tinta-2); max-width: 54ch; }
.tapa-g { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }

.cajon { margin: 0; }
.cajon-marco {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden;
  background: var(--cajon); container-type: inline-size;
}
.cajon-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* el cajón revuelto: el trozo va al montón y vuelve DESPLAZÁNDOSE (con su sombra) y GIRANDO dentro (sin ella) */
html.cajon-revuelto .cajon-tapa, html.cajon-revuelto .cajon-piezas { display: block; opacity: 1; transition: none; }
html.cajon-revuelto .pz { translate: calc(var(--dx) * 1cqw) calc(var(--dy) * 1cqw); will-change: translate; }
html.cajon-revuelto .pz > i { rotate: var(--r); will-change: rotate; }
html.cajon-orden .pz { translate: none; transition: translate .7s var(--curva) var(--d); }
html.cajon-orden .pz > i { rotate: none; transition: rotate .7s var(--curva) var(--d); }
html.cajon-tira .pz { transition: translate .45s cubic-bezier(.55, 0, .75, .2) calc(var(--d) * .12); }
html.cajon-tira .pz > i { transition: rotate .45s cubic-bezier(.55, 0, .75, .2) calc(var(--d) * .12); }
.cajon-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.otra-vez {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 14px/1.3 var(--f-t); color: var(--tinta-2);
}
.otra-vez .ic { font-size: 16px; }
.otra-vez:hover { color: var(--tomate-h); }
.otra-vez[hidden] { display: none; }

.nuevos { background: var(--lila); border-radius: var(--r); padding: 20px 20px 22px; }
.nuevos-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nuevos-cab h2 { font-size: 24px; }
.nuevos-fecha { font: 500 14px/1.2 var(--f-t); color: var(--tinta-2); }
.nuevos-sala { margin: 12px 0 10px; }
.nuevos-sala a {
  display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--papel);
  font: 700 14px/1.2 var(--f-d); color: var(--tomate-h); text-decoration: none;
}
.nuevos-l { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.nv { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; }
.nv-img { width: 76px; height: 57px; object-fit: cover; border-radius: var(--r-s); display: block; }
.nv .sin-foto { width: 76px; height: 57px; border-radius: var(--r-s); }
.nv-t { font: 700 15px/1.3 var(--f-d); }
.nv:hover .nv-t { color: var(--tomate-h); }

/* 2 · las habitaciones */
.salas-g { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 32px 24px; }
.sala { grid-column: span 2; min-width: 0; }
.sala--grande { grid-column: span 5; }
.sala-foto { display: block; border-radius: var(--r); overflow: hidden; background: var(--lila); aspect-ratio: 4 / 3; }
.sala-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.sala:hover .sala-img { transform: scale(1.03); }
.sala-txt h3 { font-size: 20px; margin: 14px 0 6px; }
.sala--grande .sala-txt h3 { font-size: 30px; margin-top: 16px; }
.sala-txt h3 a { text-decoration: none; }
.sala-txt h3 a:hover { color: var(--tomate-h); }
.sala-txt p { font-size: 15px; color: var(--tinta-2); margin-bottom: 12px; }
.sala--grande .sala-txt p { font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips a {
  display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--lila);
  font: 500 14px/1.2 var(--f-t); text-decoration: none; transition: background-color .2s ease;
}
.chips a:hover { background: var(--lila-2); }

/* 3 · lo que no se puede cambiar */
.limites { margin-top: var(--entre); background: var(--lila); padding: 64px 0 72px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pestana {
  padding: 10px 20px; border: 0; border-radius: 999px; background: var(--papel); cursor: pointer;
  font: 700 16px/1.2 var(--f-d); color: var(--tinta); transition: background-color .2s ease, color .2s ease;
}
.pestana:hover { background: var(--lila-2); }
.pestana[aria-selected="true"] { background: var(--boton); color: #fff; }
.panel + .panel { margin-top: 32px; }
.js .panel + .panel { margin-top: 0; }
.panel[hidden] { display: none; }
.panel-t { font-size: 24px; margin-bottom: 4px; }
.js .panel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel-frase { font: 500 18px/1.4 var(--f-t); margin-bottom: 18px; }
.panel-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.fila { display: flex; flex-direction: column; height: 100%; background: var(--papel); border-radius: var(--r); overflow: hidden; text-decoration: none; }
.fila-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fila .sin-foto { border-radius: 0; }
.fila-txt { display: block; padding: 14px 16px 18px; }
.fila-t { display: block; margin-top: 4px; font: 700 18px/1.3 var(--f-d); }
.fila:hover .fila-t { color: var(--tomate-h); }

/* 4 · antes de comprar */
.comprar-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.compra { min-width: 0; }
.compra-a { display: block; text-decoration: none; }
.compra--grande { grid-column: span 2; grid-row: span 2; }
.compra-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.compra-txt { display: block; margin-top: 14px; }
.compra-tipo { display: block; font: 800 20px/1.2 var(--f-d); }
.compra--grande .compra-tipo { font-size: 30px; }
.compra-frase { display: block; margin-top: 4px; font-size: 15px; color: var(--tinta-2); }
.compra--grande .compra-frase { font-size: 18px; }
.compra-art { display: block; margin-top: 8px; font: 700 14px/1.35 var(--f-d); color: var(--tomate-h); }
.compra-a:hover .compra-tipo { color: var(--tomate-h); }
.compra-mas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.compra-mas li { border-top: 1px solid var(--lila-2); }
.compra-mas a { display: block; padding: 10px 0; font: 700 15px/1.35 var(--f-d); text-decoration: none; }
.compra-mas a:hover { color: var(--tomate-h); }

/* 5 · despejar primero */
.despejar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.despejar-foto { display: block; border-radius: var(--r); overflow: hidden; }
.despejar-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.despejar-txt h2 { font-size: 30px; }
.despejar-txt > p { margin: 8px 0 20px; font-size: 18px; color: var(--tinta-2); max-width: 58ch; }
.despejar-l { columns: 2; column-gap: 32px; list-style: none; margin: 28px 0 0; padding: 0; }
.despejar-l li { break-inside: avoid; border-top: 1px solid var(--lila-2); }
.despejar-l a { display: block; padding: 11px 0 12px; font: 700 16px/1.35 var(--f-d); text-decoration: none; }
.despejar-l a:hover { color: var(--tomate-h); }

/* 6 · la confianza */
.confianza { margin-top: var(--entre); }
.confianza-g {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: start;
  background: var(--lila); border-radius: var(--r); padding: 40px 40px 44px;
}
.confianza-txt { grid-column: 1; grid-row: 1; }
.confianza-l { grid-column: 2; grid-row: 1 / span 2; }
.confianza-txt h2 { font-size: 30px; }
.confianza-txt p { margin-top: 10px; font-size: 18px; }
.confianza-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.confianza-l strong { display: block; font: 800 18px/1.25 var(--f-d); }
.confianza-l span { display: block; margin-top: 2px; font-size: 15px; color: var(--tinta-2); }
.autor { grid-column: 1; grid-row: 2; display: flex; gap: 14px; align-items: center; text-decoration: none; align-self: end; }
.autor img { width: 80px; height: 80px; border-radius: 999px; display: block; flex: none; }
.autor strong { display: block; font: 800 18px/1.2 var(--f-d); }
.autor > span > span { display: block; font-size: 14px; color: var(--tinta-2); }
.autor .flecha { margin-top: 6px; color: var(--tomate-h); white-space: nowrap; }

/* ------------------------------------------------------------------ pie */
.pie { margin-top: 96px; background: var(--lila); padding-bottom: var(--pie-anuncio, 0px); }
.pie-banda { border-bottom: 1px solid var(--lila-2); }
.pie-textura { height: 88px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, 44px); grid-auto-rows: 44px; justify-content: center; }
.ti { width: 22px; height: 22px; margin: 11px; fill: none; stroke: #D6C9F3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s var(--curva); }
.pie-textura.iman-suelta .ti { transition: transform .75s var(--curva); }
.pie-g { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 36px; }
.pie-marca p { margin-top: 6px; font-size: 15px; color: var(--tinta-2); max-width: 34ch; }
.pie-marca .pie-lema { margin-top: 16px; font: 800 20px/1.2 var(--f-d); color: var(--tinta); }
.pie h2 { font-size: 16px; margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie ul a { font-size: 15px; text-decoration: none; }
.pie ul a:hover { color: var(--tomate-h); text-decoration: underline; text-underline-offset: 3px; }
.pie-bajo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--lila-2); font-size: 14px; color: var(--tinta-2); }

/* ------------------------------------------------------------------ lo que se mueve
   Todo dice lo mismo: cada cosa tiene su sitio y vuelve a él. Solo transform y opacity. */

/* el logo: al pasar el ratón, las ramitas se salen un poco de su sitio y vuelven; el huevo se inclina */
.lg-r, .lg-h { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lg-ramita { 0% { transform: none; } 38% { transform: translateX(var(--sx)) rotate(var(--sr)); } 100% { transform: none; } }
@keyframes lg-huevo { 0% { transform: none; } 45% { transform: rotate(-10deg); } 100% { transform: none; } }
.marca:hover .lg-r { animation: lg-ramita .85s var(--curva) var(--sd, 0ms); }
.marca:hover .lg-h { animation: lg-huevo .75s ease-in-out var(--hd, 0ms); }

/* el imán: las cosas de una foto de knolling se apartan del puntero y vuelven a su sitio.
   Quieta se ve la FOTO. Con el ratón encima entran, fundiéndose, el papel limpio (--tapa, sin cosas ni
   sombras) y cada cosa SIN su sombra (la máscara, --masc); la sombra la pone el navegador (--sombra,
   ajustada a la de la foto por sombras.py). El trozo se DESPLAZA con su sombra y GIRA dentro de ella,
   así la luz no gira con él (29 sep 2026: la sombra pegada que marcó Alfre). */
.kit-marco { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--papel-foto, var(--cajon)); container-type: inline-size; }
.kit-marco .compra-img { border-radius: 0; }
.iman-tapa, .iman-piezas {
  position: absolute; inset: 0; display: none; opacity: 0;
  transition: opacity .18s ease, display .18s allow-discrete;
}
.iman-tapa { background: var(--tapa, none) center / 100% 100% no-repeat var(--papel-foto, var(--cajon)); }
.iman-on > .iman-tapa, .iman-on > .iman-piezas { display: block; opacity: 1; }
@starting-style { .iman-on > .iman-tapa, .iman-on > .iman-piezas { opacity: 0; } }
.pz { position: absolute; filter: var(--sombra, none); }
.pz > i {
  position: absolute; inset: 0; display: block;
  background: var(--img) var(--bp) / var(--bs) no-repeat;
  -webkit-mask: var(--masc, none) var(--bp) / var(--bs) no-repeat;
  mask: var(--masc, none) var(--bp) / var(--bs) no-repeat;
}
.iman-on .pz { transition: translate .32s var(--curva); }
.iman-on .pz > i { transition: rotate .32s var(--curva); }
.iman-suelta .pz { transition: translate .75s var(--curva); }
.iman-suelta .pz > i { transition: rotate .75s var(--curva); }

/* las habitaciones: al pasar el ratón, la escena deja ver sus cosas, en orden */
.sala-foto { position: relative; }
.sala-kit { display: none; }
@media (hover: hover) {
  .sala-kit {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.05); transition: opacity .45s ease, transform .7s var(--curva); pointer-events: none;
  }
  .sala:hover .sala-kit { opacity: 1; transform: none; }
}

/* al llegar a una sección, cada cosa se coloca en su hueco (una vez) */
.por-colocar { opacity: 0; transform: translate(var(--cx, 0px), 22px) rotate(var(--cr, 0deg)); }
.por-colocar[data-coloca="texto"] { transform: translateY(14px); }
.por-colocar.colocado { opacity: 1; transform: none; transition: transform .75s var(--curva) var(--cd, 0ms), opacity .45s ease var(--cd, 0ms); }

/* las pestañas: al cambiar, las tarjetas se reparten en su sitio */
@keyframes reparte { from { opacity: 0; transform: translateY(16px) rotate(var(--rr, 1.5deg)); } to { opacity: 1; transform: none; } }
.reparte { animation: reparte .55s var(--curva) both; animation-delay: calc(var(--i, 0) * 65ms); }

@media print { .por-colocar { opacity: 1 !important; transform: none !important; } }

/* ------------------------------------------------------------------ anchos */
@media (max-width: 1179px) {
  .menu { display: none; }
  .hoja-b { display: inline-flex; }
  .buscar-b { margin-left: auto; }
}
@media (max-width: 1023px) {
  :root { --entre: 72px; }
  .tapa h1 { font-size: 38px; }
  .tapa-g { grid-template-columns: 1fr; gap: 28px; }
  .salas-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sala, .sala--grande { grid-column: span 1; }
  .sala--grande .sala-txt h3 { font-size: 24px; }
  .sala--grande .sala-txt p { font-size: 16px; }
  .panel-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comprar-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compra--grande { grid-column: span 2; grid-row: auto; }
  .despejar { grid-template-columns: 1fr; gap: 28px; }
  .pie-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-marca { grid-column: span 3; }
}
@media (max-width: 767px) {
  :root { --lado: 16px; --entre: 56px; }
  body { font-size: 16px; }
  .mast-g { height: 68px; gap: 12px; }
  .logo svg { height: 32px; }
  .buscar-b { padding: 8px; border: 0; }
  .buscar-b span { display: none; }
  .buscar-b .ic { font-size: 24px; }
  .tapa { padding-top: 28px; }
  .tapa h1 { font-size: 30px; }
  .entradilla { font-size: 16px; }
  .tapa-cab { margin-bottom: 22px; }
  .cajon-pie { font-size: 14px; }
  .otra-vez { margin-left: 0; }
  .sec-cab h2, .despejar-txt h2, .confianza-txt h2 { font-size: 24px; }
  .sec-cab p, .despejar-txt > p { font-size: 16px; }
  .salas-g { gap: 24px 14px; }
  .sala--grande { grid-column: span 2; }
  .sala-txt h3, .sala--grande .sala-txt h3 { font-size: 20px; margin-top: 10px; }
  .sala-txt p, .sala--grande .sala-txt p { font-size: 14px; margin-bottom: 0; }
  .sala .chips { display: none; }
  .limites { padding: 44px 0 52px; }
  .pestana { font-size: 16px; padding: 9px 16px; }
  .panel-frase { font-size: 16px; }
  .panel-g { grid-template-columns: 1fr; gap: 10px; }
  .fila { flex-direction: row; align-items: center; }
  .fila-img, .fila .sin-foto { width: 112px; flex: none; aspect-ratio: 4 / 3; }
  .fila-txt { padding: 10px 14px; }
  .fila-t { font-size: 15px; }
  .comprar-g { gap: 24px 14px; }
  .compra-tipo { font-size: 18px; }
  .compra--grande .compra-tipo { font-size: 24px; }
  .compra-frase, .compra--grande .compra-frase { font-size: 14px; }
  .compra-art { display: none; }
  .compra-mas { grid-template-columns: 1fr; }
  .despejar-l { columns: 1; }
  .confianza-g { grid-template-columns: 1fr; padding: 28px 20px 30px; gap: 24px; }
  .confianza-txt, .confianza-l, .autor { grid-column: auto; grid-row: auto; }
  .pie-g { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ======================================================================== EL ARTÍCULO (29 sep 2026)
   La anatomía, en procedimientos/plantilla-de-articulo.md. Las piezas del pipeline traen su color y
   su letra EN LÍNEA (vestir.py los cambia): aquí solo va lo que el tema añade, y las reglas del texto
   llevan :not([style]) para no colarse en las piezas (lección del café). */
html { scroll-padding-top: 24px; }

/* la bandeja: la barra de lectura, un hueco por cada parte del artículo; se llena al leerla */
.bandeja {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; gap: 3px; height: 6px; padding: 0 3px; background: var(--papel);
  opacity: 0; transform: translateY(-100%); transition: opacity .3s ease, transform .3s var(--curva); pointer-events: none;
}
.bandeja.ve { opacity: 1; transform: none; }
.bandeja-c { flex: var(--w, 1) 1 0; background: var(--lila-2); overflow: hidden; }
.bandeja-c i { display: block; height: 100%; background: var(--tomate); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@keyframes bandeja-llena { 0% { transform: none; } 40% { transform: scaleY(1.7); } 100% { transform: none; } }
.bandeja-c.llena { transform-origin: 50% 0; animation: bandeja-llena .45s var(--curva); }

.art-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-top: 36px; }
.art { min-width: 0; }
.art-cab { max-width: 720px; }
/* el texto, la foto, el índice, el autor y los comentarios: todos a la anchura del texto (720) */
.art-foto { max-width: 720px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 14px/1.3 var(--f-t); color: var(--tinta-2); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--tomate-h); text-decoration: underline; text-underline-offset: 3px; }
.migas .ic { font-size: 14px; }
.art-cab h1 { margin-top: 14px; font-size: 38px; line-height: 1.1; }
.art-extracto { margin-top: 14px; font-size: 20px; line-height: 1.5; color: var(--tinta-2); max-width: 62ch; }
.firma { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.firma-foto { width: 44px; height: 44px; border-radius: 999px; flex: none; }
.firma-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; }
.firma-n { font: 800 16px/1.2 var(--f-d); text-decoration: none; }
.firma-n:hover { color: var(--tomate-h); }
.firma-p { color: var(--tinta-2); }
.firma-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.art-foto { margin: 28px 0 0; }
.art-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* el índice, plegado: el mismo gesto que las preguntas (el + que gira) */
.indice { margin-top: 24px; border: 1.5px solid var(--lila-2); border-radius: var(--r); max-width: 720px; }
.indice summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; cursor: pointer; list-style: none; }
.indice summary::-webkit-details-marker { display: none; }
.indice-t { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--f-d); }
.indice-t .ic { font-size: 20px; color: var(--tomate); }
.indice-n { font: 500 14px/1.2 var(--f-t); color: var(--tinta-2); }
.indice-mas { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--lila); transition: transform .3s var(--curva), background-color .2s ease; }
.indice-mas .ic { font-size: 18px; }
.indice summary:hover .indice-mas { background: var(--lila-2); }
.indice[open] .indice-mas { transform: rotate(45deg); }
.indice-l { list-style: none; margin: 0; padding: 2px 18px 16px; columns: 2; column-gap: 28px; }
.indice-l li { break-inside: avoid; }
.indice-l a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font: 500 15px/1.35 var(--f-t); text-decoration: none; }
.indice-l a::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--lila-2); transition: background-color .2s ease; }
.indice-l a:hover { color: var(--tomate-h); }
.indice-l a:hover::before { background: var(--tomate); }

/* el cuerpo: Red Hat Text a 18 (16 en el teléfono y en su plegable abierto) */
.cuerpo { margin-top: 36px; max-width: 720px; font-size: 18px; line-height: 1.65; }
.cuerpo > p { margin: 0 0 1.15em; }
.cuerpo h2 { font-size: 30px; margin: 64px 0 18px; }
.cuerpo h2 strong, .cuerpo h3 strong, .cuerpo h4 strong { font-weight: inherit; }
.cuerpo h3:not([style]) { font-size: 24px; margin: 40px 0 12px; }
.cuerpo h4:not([style]) { font-size: 20px; line-height: 1.25; margin: 32px 0 10px; }
.cuerpo a:not([style]) { color: var(--tomate-h); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cuerpo a:not([style]):hover { text-decoration-thickness: 3px; }
/* las listas del TEXTO (hijas directas del cuerpo): las de dentro de las piezas no se tocan */
.cuerpo > ul:not([style]), .cuerpo > ol:not([style]) { margin: 0 0 1.2em; padding-left: 1.5em; }
.cuerpo > ul:not([style]) li, .cuerpo > ol:not([style]) li { margin: .4em 0; padding-left: .2em; }
.cuerpo > ol:not([style]) > li::marker { font: 800 16px var(--f-d); color: var(--tomate-h); }
/* las viñetas son el huevo del logo (una máscara: el huevo es una forma, no un radio) */
.cuerpo > ul:not([style]) { list-style: none; padding-left: 1.6em; }
.cuerpo > ul:not([style]) > li { position: relative; }
.cuerpo > ul:not([style]) > li::before {
  content: ""; position: absolute; left: -1.3em; top: .5em; width: 8px; height: 10px;
  /* la máscara con la forma del huevo va en etiquetas.css (la genera build.py) */
}
.cuerpo .wp-block-image, .cuerpo > figure { margin: 32px 0; }
.cuerpo .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.cuerpo figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
/* las citas: en los 84 artículos de la generación vieja son la respuesta corta y los Pro Tips
   (una caja de color con su rótulo en negrita), no citas; se visten como la respuesta corta nueva */
.cuerpo blockquote { margin: 1.8em 0; padding: 22px 26px; background: var(--lila); border-radius: var(--r); font-size: 16px; line-height: 1.65; }
.cuerpo blockquote p { margin: 0 0 .7em; }
.cuerpo blockquote p:last-child { margin-bottom: 0; }
.cuerpo blockquote strong { color: var(--tomate-h); }
.cuerpo blockquote ul, .cuerpo blockquote ol { margin: .4em 0 0; padding-left: 1.3em; }
.cuerpo hr { height: 1px; border: 0; background: var(--lila-2); margin: 40px 0; }
.cuerpo code { font-size: .9em; background: var(--lila); padding: 2px 6px; border-radius: var(--r-s); }
/* las tablas SUELTAS (hoy no hay ninguna: las 35 son de pieza, cn-compare y compact-brand-table, con
   su propia hoja); la del bloque de Gutenberg va dentro de <figure class="wp-block-table"> */
.tabla-suelta { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tabla-suelta th { padding: 12px 14px; background: var(--lila); font: 700 14px/1.3 var(--f-d); text-align: left; }
.tabla-suelta td { padding: 12px 14px; border-bottom: 1px solid var(--lila-2); vertical-align: top; }
.cuerpo .wp-block-embed { margin: 32px 0; }
.cuerpo .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.cuerpo .wp-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r); }

/* las piezas del pipeline: solo lo que el tema añade (su color y su letra ya vienen en línea) */
.cuerpo .cn-card-name { font-family: var(--f-d); }
/* las etiquetas de las tarjetas traen <i class="ti-…"> de una letra de iconos que nunca se cargó:
   se pintan con una máscara. Van en assets/etiquetas.css (la genera build.py, solo en los artículos) */

/* las tablas que no caben: se deslizan Y LO DICEN (la regla de Alfre del café): site.js las envuelve
   y SOLO si no caben enciende el rótulo, el riel, la sombra y el amago */
.desliza { margin: 28px 0 30px; }
.cuerpo .desliza .cn-compare, .cuerpo .desliza .table-responsive-wrapper { margin: 0 auto; }
.tabla-caja { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--tomate) transparent; }
.cuerpo .tabla-caja > table { min-width: calc(var(--cols, 1) * 8.5rem); }
.desliza-aviso { display: none; }
.desliza.puede .desliza-aviso { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.desliza-dice { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1.2 var(--f-d); color: var(--tomate-h); }
.desliza-dice .ic { font-size: 16px; }
@keyframes desliza-amaga { 0%, 100% { transform: none; } 45% { transform: translateX(5px); } }
.desliza.puede:not(.tocada) .desliza-dice .ic { animation: desliza-amaga 1.4s var(--curva) infinite; }
.desliza.al-final .desliza-dice .ic { transform: scaleX(-1); }
.desliza-riel { margin-left: auto; flex: none; width: 58px; height: 4px; background: var(--lila-2); overflow: hidden; }
.desliza-riel i { display: block; height: 100%; width: var(--tw, 50%); background: var(--tomate); transform: translateX(var(--tx, 0%)); }
.desliza-vista { position: relative; }
.desliza-vista::before, .desliza-vista::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 34px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.desliza-vista::before { left: 0; background: linear-gradient(to right, rgba(35, 27, 46, .16), rgba(35, 27, 46, 0)); }
.desliza-vista::after { right: 0; background: linear-gradient(to left, rgba(35, 27, 46, .16), rgba(35, 27, 46, 0)); }
.desliza.puede:not(.al-final) .desliza-vista::after, .desliza.puede.movida .desliza-vista::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .desliza-riel { display: none; } }
/* la tabla comparativa del pipeline se desliza en vez de aplastarse, desde el mismo corte de 600 px
   en que la pieza encoge su letra (como en crispside y el café) */
@media (max-width: 600px) {
  .cuerpo .cn-compare table { min-width: max(520px, calc(var(--cols, 3) * 8.5rem)); }
}

/* el banner de Audible, antes de las preguntas */
.audible { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 20px; align-items: center; margin: 44px 0 8px; padding: 22px 24px; background: var(--lila); border-radius: var(--r); }
.audible-ic { font-size: 40px; color: var(--tomate); stroke-width: 1.7; }
.cuerpo .audible p { margin: 0; }
.audible-rot { font: 500 14px/1.3 var(--f-t); color: var(--tinta-2); }
.audible-t { margin: 2px 0 4px !important; font: 800 20px/1.25 var(--f-d); }
.audible-p { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.cuerpo a.audible-b { color: #fff; text-decoration: none; white-space: nowrap; }

/* el aviso de afiliación, al final */
.cuerpo .aviso { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--lila-2); font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.aviso strong { color: var(--tinta); }

/* la columna: su habitación, ordenada (con el imán); los hermanos; el anuncio fijo */
.lado { display: flex; flex-direction: column; gap: 36px; min-width: 300px; }
.lado-kit { margin: 0; }
.lado-kit-a { display: block; }
.lado-kit-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lado-kit figcaption { display: grid; gap: 6px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.lado-kit .flecha { font-size: 14px; }
.lado-mas h2 { font-size: 20px; margin-bottom: 14px; }
.lado-mas .nuevos-l { margin: 0; }
.lado-ad { position: sticky; top: 24px; }
.ad:empty { display: none; }
.ad-maqueta {
  display: grid; place-items: center; width: 300px; height: 600px; padding: 24px; text-align: center;
  border: 1.5px dashed var(--lila-2); border-radius: var(--r); font-size: 14px; color: var(--tinta-2);
}

/* «Keep sorting»: los que este artículo enlaza */
.sigue { margin-top: 80px; background: var(--lila); padding: 56px 0 64px; }
.sigue-g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sigue .fila .rotulo { margin-bottom: 2px; }

/* el autor y los comentarios, a la anchura del texto */
.art-pie { margin-top: 64px; }
.autor-caja { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; max-width: 720px; padding: 28px; border: 1.5px solid var(--lila-2); border-radius: var(--r); }
.autor-caja img { width: 96px; height: 96px; border-radius: 999px; display: block; }
.autor-n { font: 800 20px/1.2 var(--f-d); }
.autor-n a { text-decoration: none; }
.autor-n a:hover { color: var(--tomate-h); }
.autor-p { margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.autor-bio { margin: 12px 0 14px; font-size: 16px; line-height: 1.6; }
.comentarios { max-width: 720px; margin-top: 56px; }
.comentarios h2 { font-size: 24px; }
.comentarios > p { margin: 6px 0 20px; color: var(--tinta-2); }
.com-f label { display: block; margin-bottom: 6px; font: 700 14px/1.2 var(--f-d); }
.com-f textarea, .com-f input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--lila-2); border-radius: var(--r-s);
  background: var(--papel); color: var(--tinta); font: 400 16px/1.5 var(--f-t);
}
.com-f textarea { resize: vertical; }
.com-f textarea:focus, .com-f input:focus { outline: none; border-color: var(--tomate); }
.com-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 20px; }
/* la lista de comentarios (29 sep 2026, al pasar el tema a WordPress: la maqueta solo enseñaba el estado
   vacío, porque la web no tiene ninguno). Sencilla: nombre, fecha y texto, entre filetes lilas */
.com-lista { list-style: none; margin: 0 0 32px; padding: 0; border-bottom: 1px solid var(--lila-2); }
.com-item { padding: 18px 0; border-top: 1px solid var(--lila-2); }
.com-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.com-meta strong { font: 700 16px/1.3 var(--f-d); }
.com-meta span { font-size: 14px; color: var(--tinta-2); }
.com-espera { margin-bottom: 6px; font-size: 14px; color: var(--tomate-h); }
.com-texto p { margin: 0 0 10px; }
.com-texto p:last-child { margin-bottom: 0; }

/* volver arriba: el nido en pequeño; al pasar el ratón, el huevo sube */
.subir {
  position: fixed; right: 20px; bottom: calc(20px + var(--pie-anuncio, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: block; width: 52px; height: 52px; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--curva);
}
.subir svg { display: block; width: 100%; height: 100%; }
.subir.ve { opacity: 1; transform: none; pointer-events: auto; }
@keyframes huevo-sube { 0% { transform: none; } 40% { transform: translateY(-24%); } 100% { transform: none; } }
.subir:hover .lg-h, .subir:focus-visible .lg-h { animation: huevo-sube .7s var(--curva); }

@media (max-width: 1060px) {
  .cuerpo { font-size: 16px; }
}
@media (max-width: 1023px) {
  .art-g { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .art-cab, .art-foto, .cuerpo, .indice { max-width: none; }
  .lado { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .lado-ad { display: none; }
  .sigue-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .art-g { padding-top: 20px; gap: 48px; }
  .art-cab h1 { font-size: 30px; }
  .art-extracto { font-size: 16px; }
  .art-foto { margin-top: 22px; }
  .indice-l { columns: 1; }
  .cuerpo { margin-top: 28px; }
  .cuerpo h2 { font-size: 24px; margin-top: 48px; }
  .cuerpo h3:not([style]) { font-size: 20px; margin-top: 32px; }
  .cuerpo h4:not([style]) { font-size: 18px; }
  .audible { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .audible-ic { font-size: 32px; }
  .audible-b { grid-column: 1 / -1; justify-self: start; }
  .lado { grid-template-columns: minmax(0, 1fr); }
  .sigue { margin-top: 56px; padding: 40px 0 48px; }
  .sigue-g { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .art-pie { margin-top: 48px; }
  .autor-caja { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .autor-caja img { width: 64px; height: 64px; }
  .com-fila { grid-template-columns: minmax(0, 1fr); }
  .subir { right: 14px; width: 48px; height: 48px; }
}


/* ======================================================================== LA CATEGORÍA (29 sep 2026)
   Cada subcategoría es un CAJÓN con su etiqueta (la de una etiquetadora): el pilar como tarjeta y los
   nodos en el orden del mapa. La rama vacía es un TABLERO DE SILUETAS: cada cosa tiene su sitio marcado. */
.cat-cab { background: var(--lila); padding: 36px 0 44px; }
.cat-cab-g { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.cat-cab--vacia .cat-cab-g { grid-template-columns: minmax(0, 1fr); }
.cat-cab h1 { margin-top: 14px; font-size: 50px; line-height: 1.04; }
.cat-frase { margin-top: 14px; font: 500 20px/1.45 var(--f-t); max-width: 52ch; }
.cat-desc { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); max-width: 64ch; }
.cat-indice ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.cat-indice a {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: var(--papel);
  font: 700 15px/1.2 var(--f-d); text-decoration: none; transition: background-color .2s ease;
}
.cat-indice a::before { content: ""; width: 8px; height: 8px; background: var(--lila-2); transition: background-color .2s ease; }
.cat-indice a:hover { background: var(--lila-2); }
.cat-indice a:hover::before { background: var(--tomate); }
.cat-kit { margin: 0; }
.cat-kit-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cat-kit figcaption { margin-top: 10px; font-size: 14px; color: var(--tinta-2); }

.cat-cuerpo { padding-top: 56px; }
.cajonera { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px 56px; padding: 48px 0; border-top: 1px solid var(--lila-2); scroll-margin-top: 24px; }
.cat-cuerpo > .cajonera:first-child { border-top: 0; padding-top: 8px; }
.cajonera-cab { align-self: start; position: sticky; top: 24px; }
.etiqueta-h { font-size: 24px; line-height: 1; }
/* la etiqueta: cinta de etiquetadora, cortada en punta a los dos lados y pegada un poco torcida */
.etiqueta {
  display: inline-block; padding: 8px 20px 9px; background: var(--boton); color: #fff;
  font: 800 24px/1.1 var(--f-d); transform: rotate(-1.5deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
.cajonera-cab p { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.pilar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--lila); border-radius: var(--r); overflow: hidden; text-decoration: none; }
/* la foto de la tarjeta, a todo su alto (regla 8.5: una caja con proporción fija no se estira) */
.pilar-foto { position: relative; display: block; }
.pilar-foto::before { content: ""; display: block; padding-top: 75%; }
.pilar-img, .pilar-foto .sin-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.pilar-txt { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 26px; }
.pilar-t { font: 800 24px/1.2 var(--f-d); }
.pilar-p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.pilar .flecha { margin-top: auto; padding-top: 6px; }
.pilar:hover .pilar-t { color: var(--tomate-h); }
.nodos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ad-banda {
  display: grid; place-items: center; min-height: 250px; margin: 8px 0; padding: 24px; text-align: center;
  border: 1.5px dashed var(--lila-2); border-radius: var(--r); font-size: 14px; color: var(--tinta-2);
}
.por-ordenar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 22px 0 0; border-top: 1px solid var(--lila-2); font-size: 15px; color: var(--tinta-2); }
.por-ordenar .ic { font-size: 18px; color: var(--tomate); }
.por-ordenar strong { font: 700 15px/1.3 var(--f-d); color: var(--tinta); }
.cat-hermanas { padding-top: 32px; border-top: 1px solid var(--lila-2); }
.cat-hermanas h2 { font-size: 20px; margin-bottom: 12px; }

/* la rama vacía: el tablero de siluetas (lo de las herramientas de un garaje: cada cosa, su contorno) */
.vacia { padding-top: 48px; }
.tablero { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; padding: 28px 40px; background: var(--lila); border-radius: var(--r); }
.silueta { display: grid; place-items: center; aspect-ratio: 1; }
.silueta svg { width: 96px; height: 96px; fill: none; stroke: var(--apagado, #A094B3); stroke-width: .75; stroke-dasharray: 1.1 1.2; stroke-linecap: round; stroke-linejoin: round; }
.vacia-txt h2 { margin-top: 32px; font-size: 30px; }
.vacia-txt p { margin-top: 8px; font-size: 18px; color: var(--tinta-2); max-width: 60ch; }
.listas { margin-top: 56px; }
.listas .fila { background: var(--lila); }
.vacia-busca { margin-top: 56px; max-width: 720px; }

/* todas las habitaciones, al final: la de esta página, marcada */
.salas-banda { margin-top: 80px; padding: 44px 0 52px; background: var(--lila); }
.salas-banda h2 { font-size: 24px; margin-bottom: 16px; }
.salas-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.salas-chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--papel);
  font: 700 15px/1.2 var(--f-d); text-decoration: none; transition: background-color .2s ease;
}
.salas-chips a .ic { font-size: 18px; color: var(--tomate); }
.salas-chips a:hover { background: var(--lila-2); }
.salas-chips a[aria-current] { background: var(--boton); color: #fff; }
.salas-chips a[aria-current] .ic { color: #fff; }
.pag-cat .pie { margin-top: 0; }

@media (max-width: 1023px) {
  .cat-cab-g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cat-kit { max-width: 520px; }
  .cajonera { grid-template-columns: minmax(0, 1fr); }
  .cajonera-cab { position: static; }
  .tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 32px; }
}
@media (max-width: 767px) {
  .cat-cab { padding: 24px 0 32px; }
  .cat-cab h1 { font-size: 30px; }
  .cat-frase { font-size: 16px; }
  .cat-desc { font-size: 15px; }
  .cat-cuerpo { padding-top: 36px; }
  .cajonera { padding: 36px 0; }
  .etiqueta { font-size: 20px; }
  .pilar { grid-template-columns: minmax(0, 1fr); }
  .pilar-txt { padding: 18px 18px 20px; }
  .pilar-t { font-size: 20px; }
  .nodos { grid-template-columns: minmax(0, 1fr); }
  .tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; padding: 24px 16px; }
  .silueta svg { width: 64px; height: 64px; }
  .vacia-txt h2 { font-size: 24px; }
  .vacia-txt p { font-size: 16px; }
  .salas-banda { margin-top: 56px; padding: 32px 0 40px; }
}

/* ------------------------------------------------------------------ las PÁGINAS DE SITIO (29 sep 2026)
   About, Contact, los cuatro legales, el autor, el 404 y la búsqueda. Sus textos son los publicados; la banda
   lila lleva un objeto de la casa: el kit de medir (About), el correo en cinta de etiquetadora (Contact), la
   carpeta de cuatro pestañas (los legales, el mismo documento), el retrato (el autor) y el tablero con todo en
   su sitio menos la página (el 404). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pcab { background: var(--lila); padding: 36px 0 44px; }
.pcab-g { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.pcab--legal .pcab-g, .pcab--404 .pcab-g, .pcab--busca .pcab-g { grid-template-columns: minmax(0, 1fr); }
.pcab--autor .pcab-g { grid-template-columns: minmax(0, 1fr) 240px; }
.pcab-r { margin-top: 18px; }
.pcab h1 { margin-top: 14px; font-size: 50px; line-height: 1.04; }
.pcab-r + h1 { margin-top: 6px; }
.pcab-p { margin-top: 14px; font-size: 20px; line-height: 1.5; color: var(--tinta-2); max-width: 56ch; }
.pcab--autor .pcab-p { font-size: 16px; line-height: 1.65; max-width: 62ch; }
.pcab-papel { margin-top: 8px; font: 700 18px/1.3 var(--f-d); color: var(--tomate-h); }
.pcab-kit { margin: 0; }

/* Contact: el correo, impreso en cinta de etiquetadora. En UNA línea: partido, la cinta no se lee como cinta.
   La columna toma lo que mide el correo; en el teléfono, letra más chica (a 320 px, la de 16) */
.pcab--contacto .pcab-g { grid-template-columns: minmax(0, 1fr) auto; }
.correo { display: grid; justify-items: start; gap: 12px; margin: 0; }
.correo-e.etiqueta { font-size: 30px; padding: 12px 28px 13px; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.correo-e.etiqueta:hover { background: var(--tomate-h); }

/* el autor: su retrato, con el mismo radio que las fotos */
.retrato { margin: 0; }
.retrato img { display: block; width: 240px; height: 240px; object-fit: cover; border-radius: var(--r); }

/* los legales: la carpeta. Las pestañas asoman por encima de la banda; la de esta página es del color de la
   banda (está delante) y lleva su etiqueta; las otras, detrás, un tono más oscuras */
.carpeta { padding-top: 28px; }
.carpeta-l { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 auto; }
.pestana-c {
  display: block; padding: 10px 18px 11px; border-radius: var(--r) var(--r) 0 0; background: var(--lila-2);
  font: 700 15px/1.2 var(--f-d); color: var(--tinta-2); text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.pestana-c:hover { background: var(--lila); color: var(--tinta); }
.pestana-c[aria-current] { background: var(--lila); color: #fff; padding-bottom: 14px; margin-top: -3px; }
.pestana-c[aria-current] span {
  display: inline-block; padding: 3px 12px 4px; background: var(--boton); transform: rotate(-1.5deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
}
.pcab--legal { padding-top: 24px; }
.pleg { display: grid; grid-template-columns: minmax(0, 720px) 280px; justify-content: space-between; gap: 64px; }
.pleg--sola { grid-template-columns: minmax(0, 720px); }
.pleg-lado { position: sticky; top: 24px; align-self: start; margin-top: 36px; }
.pleg-indice { padding: 18px 20px 14px; border: 1.5px solid var(--lila-2); border-radius: var(--r); }
.pleg-t { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--f-d); }
.pleg-t .ic { font-size: 20px; color: var(--tomate); }
.pleg-indice ol { list-style: none; margin: 10px 0 0; padding: 0; }
.pleg-indice a { display: block; padding: 6px 0; font: 500 14px/1.4 var(--f-t); color: var(--tinta-2); text-decoration: none; }
.pleg-indice a:hover { color: var(--tomate-h); }
.pag-cuerpo h2 { scroll-margin-top: 24px; }

/* el 404: el tablero con todo en su sitio… menos la página, de la que solo queda el contorno y su etiqueta */
.tablero--404 { margin-top: 32px; background: var(--papel); }
.silueta--llena svg { stroke: var(--tinta-2); stroke-width: 1; stroke-dasharray: none; }
.silueta--falta { position: relative; }
.silueta--falta svg { stroke: var(--tomate); }
.silueta--falta .etiqueta { position: absolute; bottom: 2%; font-size: 16px; padding: 4px 13px 5px; }

/* la búsqueda */
.pbusca { margin-top: 24px; max-width: 640px; }
.busca-res { padding-top: 48px; }

.autor-guias { padding-top: 56px; }
.autor-mas { margin-top: 28px; }
.pag-autor { margin-top: 72px; }
.pag-sitio .pie { margin-top: 88px; }
.pag-404 .pie, .pag-busca .pie { margin-top: 0; }
.pag-404 .pag-autor, .pag-busca .pag-autor { margin: 64px auto 88px; }

@media (max-width: 1023px) {
  .pcab-g, .pcab--autor .pcab-g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pcab-kit { max-width: 520px; }
  .pleg { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pleg-lado { position: static; order: -1; margin-top: 28px; }
  .tablero--404 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pcab { padding: 24px 0 32px; }
  .pcab h1 { font-size: 30px; }
  .pcab-p { font-size: 16px; }
  .pcab--autor .pcab-p { font-size: 16px; }
  .correo-e.etiqueta { font-size: 19px; padding: 10px 20px 11px; }
  .pcab--contacto .pcab-g { grid-template-columns: minmax(0, 1fr); }
  .retrato img { width: 140px; height: 140px; }
  .carpeta { padding-top: 16px; }
  .carpeta-l { gap: 4px; }
  .pestana-c { padding: 8px 10px 9px; font-size: 13px; }
  .pestana-c[aria-current] { padding-bottom: 12px; }
  .pestana-c[aria-current] span { padding: 2px 8px 3px; }
  .tablero--404 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .silueta--falta .etiqueta { font-size: 14px; }
  .pag-autor { margin-top: 48px; }
}
@media (max-width: 360px) {
  .correo-e.etiqueta { font-size: 16px; padding: 9px 16px 10px; }
  /* la cabecera a 320 px (el ancho más chico que se prueba): el logo, la lupa y el menú no cabían y el menú se
     salía 19 px de la pantalla en TODAS las páginas (29 sep 2026) */
  .mast-g { gap: 6px; }
  .logo svg { height: 27px; }
  .buscar-b, .hoja-b { padding: 6px; }
}