/*
Theme Name: The Crisp Side
Theme URI: https://thecrispside.com/
Author: Alfredo Ramses
Description: Tema propio de thecrispside.com. Sin jQuery, sin librerias, una
  sola hoja de estilos y las fuentes alojadas. La identidad -paleta, tipografias
  y las tres tramas- esta medida en blogs/crispside/DISENO.md del vault.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: crispside
*/

/* ==========================================================================
   ⚠️ ESTE FICHERO LO GENERA export-a-tema.py. NO SE EDITA A MANO.
   La fuente de la verdad son los generadores del vault:
     blogs/crispside/theme/inc/diseno.py      la base, el menu, el pie
     blogs/crispside/theme/build-homepage.py  la portada
     blogs/crispside/theme/build-article.py   el articulo
     blogs/crispside/theme/build-page.py      las paginas de sitio
   Se cambia alli, se relanza el exportador, y el tema queda como la maqueta.
   ========================================================================== */

/* --- las fuentes, ALOJADAS: ni un DNS a Google --- */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bodoni-moda-700-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:'Bodoni Moda';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bodoni-moda-700-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:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/karla-400-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:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/karla-400-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:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karla-700-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:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/karla-700-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 base: paleta, cabecera, mega menu, menu movil, pie --- */

:root{--fondo:#F3F5EC;--bloque:#E4E5DD;--salvia:#4F604B;--arena:#8F5A2B;
  --tinta:#33372E;--suave:#6B7164;--arenac:#C08552;--arenap:#EBD0AE;
  --filete:#D5D9CB;--papel:#FAFBF5;--t-salvia:#E3E9DB;
  --t-arena:#F3E4D0;--t-lino:#EDE9DE}
*{box-sizing:border-box}
/* La cabecera es pegajosa: sin esto, un enlace a un ancla (#clausula, el
   indice del articulo, el de los legales) deja el titular DEBAJO de ella,
   tapado. Mide 87 px en escritorio y 65 en movil; se deja aire de sobra.
   Lo cazo Alfre el 2 sep 2026 en la Privacy Policy (fallo 6 de la lista
   del movil, el de catlandlord). */
html{scroll-padding-top:104px}
@media (max-width:760px){html{scroll-padding-top:82px}}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:400 16px/1.65 Karla,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;margin:0;
  line-height:1.14;text-wrap:balance}
ul,ol{list-style:none;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
.defs{position:absolute;width:0;height:0}
.tela{position:absolute;inset:0;width:100%;height:100%}
/* 1.440 y no 1.200. Medido a 2560 px (la pantalla de Alfre, 31 ago 2026):
   la entradilla NO se estira a ningun ancho porque tiene tope propio, asi que
   ensanchar no toca el texto principal -- lo que gana es LA FOTO, casi un quinto mas. El
   limite lo pone la lista de novedades: a 1.700 se va a 80 caracteres por
   linea y ahi ya se lee peor. */
.env{max-width:1440px;margin:0 auto;padding:0 28px}
.ojo{display:inline-block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--arena);font-weight:700}
:focus-visible{outline:2.5px solid var(--arena);outline-offset:3px}

/* El enlace de saltar al contenido. Estaba SIN CSS: salia escrito arriba del
   todo en todas las paginas. Y no se esconde con `left:-9999px` -el truco
   viejo- porque eso desborda la pagina 19 px a lo ancho (leccion 27 ago 2026);
   se sube fuera de vista con `transform`, que no ocupa sitio. */
.saltar{position:absolute;top:0;left:0;z-index:60;background:var(--salvia);
  color:var(--fondo);padding:10px 20px;font-weight:700;font-size:14px;
  border-radius:0 0 3px 0;transform:translateY(-115%);
  transition:transform .16s ease}
.saltar:focus{transform:none}

.cab{position:sticky;top:0;z-index:30;background:var(--fondo);
  border-bottom:1px solid #DDE0D4}
/* `relative`: el panel del mega menu cuelga de ESTA caja de 1.440, no de la
   cabecera entera. Alfre, 1 sep 2026: *«abarca todo el ancho de la pantalla
   y se ve raro»* -- en su pantalla de 2.000 px la banda cruzaba de lado a
   lado y el contenido flotaba en medio. */
.cab-in{position:relative;max-width:1440px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:26px}
.marca{display:flex;align-items:center;gap:14px}
.marca svg{width:58px;height:58px}
.marca-t{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:31px;
  letter-spacing:-.3px}
/* 16 px, no 14: con la caja a 1.440 y el logo a 58 px, el menu se
   quedaba pequenisimo al lado de todo lo demas. Es el siguiente escalon
   de la escala de DISENO.md. */
.nav{display:flex;gap:24px;margin-left:auto;font-size:16px;color:var(--salvia)}
.nav a{position:relative;padding:3px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--arena);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.nav a:hover::after{transform:scaleX(1)}
.nav-mas{color:var(--tinta)}
.lupa{background:none;border:0;color:var(--salvia);cursor:pointer;padding:4px;display:flex}

/* ═══ EL MEGA MENU ══════════════════════════════════════════════════════
   La mecanica es la de catlandlord, probada. El COLOR no: alli el panel es
   oscuro con filete ambar, y aqui eso romperia nuestra regla de que la unica
   zona oscura de la pagina es el pie. Aqui va en papel, con filete salvia y
   una sombra que lo levanta del fondo. */
.men{position:static;display:inline-block}
.mtit{display:inline-block;padding:6px 0;position:relative}
.mtit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--arena);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.men:hover .mtit::after,.men:focus-within .mtit::after{transform:scaleX(1)}

/* El panel mide lo que la caja de 1.440 (cuelga de `.cab-in`), y va en
   VERDE PALIDO, no en papel: el papel se fundia con la portada -Alfre, 1 sep
   2026- y el tinte lo separa sin oscurecer la pagina. */
.panel{position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--t-salvia);color:var(--tinta);
  border-top:3px solid var(--salvia);border-radius:0 0 3px 3px;
  box-shadow:0 30px 60px -18px rgba(51,55,46,.45);
  /* `visibility` con retraso: sin eso el panel se apaga en cuanto el raton
     cruza el hueco entre el titulo y el panel, y no da tiempo a llegar. */
  visibility:hidden;opacity:0;transform:translateY(-9px);
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.3,1),
             visibility 0s linear .2s;
  overflow:hidden}
.panel-in{display:grid;grid-template-columns:210px minmax(0,1fr);
  max-width:1440px;margin:0 auto;padding:0 28px;align-items:stretch}
.men:hover .panel,.men:focus-within .panel{visibility:visible;opacity:1;
  transform:translateY(0);transition-delay:0s,0s,0s}

/* LA ILUSTRACION ENTRA 100 ms DESPUES QUE EL PANEL, y con su propio
   desplazamiento. Es lo que hace que parezca que el dibujo LLEGA en vez de
   aparecer -- el detalle que ya funcionaba en catlandlord. */
/* `pdib`, no `pil`: `.pil` ya existia -- es LA PASTILLA del boton, con
   `border-radius:999px`, y la ilustracion salia dentro de un circulo. Mismo
   fallo que el `.tb` del 27 ago 2026. Antes de bautizar una clase, buscarla. */
.pdib{display:block;align-self:stretch;min-height:210px;
  background:transparent no-repeat center bottom/contain;
  transform:translateX(-14px);opacity:0;
  transition:opacity .3s ease .1s,transform .44s cubic-bezier(.2,.8,.3,1) .1s}
.men:hover .pdib,.men:focus-within .pdib{opacity:1;transform:translateX(0)}

.pcuerpo{padding:22px 26px 24px;min-width:0}
.pcab{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:21px;line-height:1.2;padding:0 0 13px;margin:0 0 14px;
  border-bottom:1px solid var(--filete)}
.psubs{display:grid;gap:2px 26px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pcols{display:grid;gap:0 34px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pcol{display:block}
.prama{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:18px;padding:4px 11px 8px;color:var(--salvia)}
.pcol .psub{padding-top:7px;padding-bottom:8px}
.psub{display:block;padding:9px 11px 10px;border-radius:var(--radio);
  transition:background .16s ease,transform .16s ease}
.psub:hover{background:var(--papel);transform:translateX(3px)}
.psub b{display:block;font-family:Karla,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--arena)}
/* `#5F6558` y no `--suave`: sobre el tinte, --suave no llega a 4,5:1 */
.psub span{display:block;font-size:14px;line-height:1.3;color:#5F6558;
  margin:4px 0 0}

/* ═══ EL MENÚ DE MÓVIL ══════════════════════════════════════════════════
   Escondido en escritorio. Ojo a la especificidad: `.menumovil` a secas
   (0,1,0) perdería contra cualquier `.cab nav` (0,1,1) -- lección de
   catlandlord, 27 ago 2026. Aquí no hay `.cab nav`, pero se escribe con
   la cabecera delante igual, por si un día lo hay. */
.menu-check,.hamb,.cab .menumovil{display:none}

/* `margin-top:0`. La ultima seccion de la portada es una BANDA DE COLOR, y
   ese margen dejaba una raya de fondo crema entre la banda y el pie: parecia
   un fallo de maquetacion. Las secciones que NO son banda se separan ellas
   con la regla de abajo. */
.pie{position:relative;z-index:2;background:var(--tinta);color:var(--fondo);
  padding:52px 28px 30px;margin-top:0}
main>section.env:last-child{margin-bottom:72px}
.pie-in{max-width:1440px;margin:0 auto}
/* siete columnas de enlaces (Duvets ocupa dos: una por rama) */
.pie-g{display:grid;grid-template-columns:minmax(250px,1.6fr) repeat(7,minmax(0,1fr));
  gap:30px 22px;padding-bottom:30px;
  border-bottom:1px solid rgba(243,245,236,.16)}
/* La marca como en la cabecera: icono y nombre EN FILA, no el icono solo
   encima, que a 46 px parecia un sello perdido (Alfre, 1 sep 2026). */
.pie-marca{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pie-m svg{width:52px;height:52px;flex:0 0 52px}
.pie-mt{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:25px;
  letter-spacing:-.3px;color:var(--fondo);white-space:nowrap}
.pie-m p{margin:0;font-size:13px;line-height:1.55;color:rgba(243,245,236,.62);
  max-width:34ch}
.pie-c h3{font-family:Karla,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--arenac);
  margin:0 0 11px}
.pie-c nav{display:flex;flex-direction:column;gap:8px;font-size:13px;
  color:rgba(243,245,236,.88)}
.pie-c a{transition:color .18s ease}
.pie-r{font-weight:700;color:var(--fondo)}
.pie-c a:hover,.pie-l a:hover{color:var(--arenac)}
/* El aviso de afiliado va ENTERO y a la vista: lo exigen Amazon Associates
   y la FTC, y un blog de afiliados sin el se juega la cuenta. */
.pie-af{margin:22px 0 0;font-size:13px;line-height:1.55;color:rgba(243,245,236,.55);
  max-width:78ch}
.pie-b{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  padding-top:20px}
.pie-l{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;
  color:rgba(243,245,236,.72)}
.pie-p{margin:0 0 0 auto;font-size:13px;color:rgba(243,245,236,.5)}

@media (max-width:1100px){
  .pie-g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pie-m{grid-column:1/-1}
}
/* 900 y no 760: al subir el menu a 16 px dejo de caber a 768 y desbordaba
   7 px. Se sube el corte de las DOS reglas a la vez -- el menu se esconde y
   la tira de temas aparece en el mismo punto, para que no quede una franja
   de anchos sin ninguno de los dos. */
@media (max-width:900px){
  .pie{padding:40px 18px 26px}
  .pie-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .pie-p{margin-left:0}
  /* en movil no hay mega menu: manda la hamburguesa */
  .nav,.panel{display:none}
  .cab-in{padding:10px 14px 10px 18px;gap:8px}
  .env{padding-left:18px;padding-right:18px}
  .marca{gap:10px;margin-right:auto}
  .marca svg{width:40px;height:40px}
  .marca-t{font-size:21px}
  /* la lupa y la hamburguesa, a 44 px de zona de toque: no se esconde el
     buscador dentro del menu (decision de catlandlord) */
  .lupa{padding:12px;margin:0}
  .hamb{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:11px;cursor:pointer;color:var(--salvia)}
  .hamb i{display:block;height:2px;background:currentColor;border-radius:2px;
    transition:transform .25s ease,opacity .2s ease}
  .menu-check:checked ~ .hamb i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-check:checked ~ .hamb i:nth-child(2){opacity:0}
  .menu-check:checked ~ .hamb i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* EL POPUP. `fixed` a pantalla completa, por DEBAJO de la cabecera pegajosa
     (z 29 < 30): asi la cabecera con la X sigue a la vista y no hay que
     acertar su alto al pixel -- el relleno de arriba solo tiene que ser
     mayor que ella. La barra de admin de WordPress (46 px) se descuenta
     con `.admin-bar` cuando el tema se suba. */
  /* 🚨 Y `.cab-in` NECESITA su propio z-index: el popup vive DENTRO de .cab,
     asi que el 29 no compite con el 30 de la cabecera sino con el `auto` de
     .cab-in -- y ganaba: la barra con la X quedaba TAPADA y el menu no se
     podia cerrar (ni hacer scroll: body overflow hidden). Se cazo el 2 sep
     2026 en la pasada de movil, con Playwright: "nav.menumovil intercepts
     pointer events". En el escritorio no se ve nunca. */
  .cab-in{z-index:31}
  .cab .menumovil{display:block;position:fixed;inset:0;z-index:29;
    background:var(--papel);overflow-y:auto;padding:76px 0 40px;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.3,1),
               visibility 0s linear .22s}
  .cab-in:has(.menu-check:checked) + .menumovil{visibility:visible;opacity:1;
    transform:none;transition-delay:0s}
  body:has(.menu-check:checked){overflow:hidden}
  .mm-in{padding:0 18px}
  .mm{border-bottom:1px solid var(--filete)}
  .mm summary{display:grid;grid-template-columns:56px minmax(0,1fr) 24px;
    gap:14px;align-items:center;padding:12px 0;list-style:none;cursor:pointer}
  .mm summary::-webkit-details-marker{display:none}
  .mm-i{display:block;height:56px;background:transparent no-repeat center/contain}
  .mm-t b{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
    font-size:25px;line-height:1.1}
  .mm-t small{display:block;font-size:14px;color:var(--suave);margin-top:3px}
  .mm-v{width:10px;height:10px;border-right:2px solid var(--salvia);
    border-bottom:2px solid var(--salvia);transform:rotate(45deg);
    justify-self:center;transition:transform .2s ease}
  .mm[open] .mm-v{transform:rotate(-135deg)}
  .mm ul{padding:0 0 10px 70px}
  .mm li a{display:block;padding:10px 0;min-height:44px}
  .mm li a b{display:block;font-weight:700;font-size:16px;color:var(--tinta)}
  .mm-r a{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:18px;
    color:var(--salvia);padding:14px 0 4px;min-height:0}
  .mm li a span{display:block;font-size:14px;line-height:1.4;color:var(--suave);margin-top:2px}
  /* los enlaces del pie a 21 px de alto no dan donde poner el dedo; vale
     para TODAS las paginas, por eso vive aqui y no en la portada */
  .pie-c nav{gap:0}
  .pie-c a{padding:7px 0}
  .mm-todo{display:flex;align-items:center;justify-content:center;margin:24px 0 0;
    padding:14px;border:1.5px solid var(--salvia);border-radius:999px;
    color:var(--salvia);font-weight:700;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{transition:none!important;animation:none!important}
  .panel,.pdib{transform:none}}

/* --- las tarjetas de producto y el FAQ (los de clutterless) --- */

.cn-faq{font-family:Karla, system-ui, sans-serif;max-width:760px;margin:2.5em auto;
  border-top:1px solid #D5D9CB}
.cn-faq .cn-faq-item{border-bottom:1px solid #D5D9CB}
.cn-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:18px;padding:20px 4px}
.cn-faq summary::-webkit-details-marker{display:none}
.cn-faq .cn-faq-num{font-family:'Bodoni Moda', Georgia, serif;font-size:28px;font-weight:700;
  color:#C7AC86;min-width:46px;line-height:1;transition:color .2s}
.cn-faq .cn-faq-item[open] .cn-faq-num{color:#8F5A2B}
.cn-faq .cn-faq-q{flex:1;font-family:'Bodoni Moda', Georgia, serif;font-size:16px;font-weight:700;
  letter-spacing:-.014em;color:#33372E;line-height:1.4}
.cn-faq .cn-faq-ico{flex-shrink:0;width:20px;height:20px;color:#8A9082;
  transition:transform .3s,color .2s}
.cn-faq .cn-faq-item[open] .cn-faq-ico{transform:rotate(45deg);color:#8F5A2B}
.cn-faq .cn-faq-ans{padding:0 4px 22px 64px;color:#4A5044;line-height:1.7;
  font-size:15.5px}
.cn-faq .cn-faq-ans p{margin:0 0 1em}
.cn-faq .cn-faq-ans p:last-child{margin:0}
.cn-faq .cn-faq-ans a{color:#8F5A2B;text-decoration:underline}
@media (max-width:600px){
  .cn-faq .cn-faq-num{font-size:21px;min-width:38px}
  .cn-faq summary{gap:12px;padding:18px 2px}
  .cn-faq .cn-faq-q{font-size:15.5px}
  .cn-faq .cn-faq-ans{padding:0 2px 20px 50px;font-size:14px}
}
@media (max-width:500px){
  .cn-card-inner{padding:20px!important}
  .cn-card-name{font-size:18px!important}
  .cn-compact-wrap{flex-direction:column!important}
  .cn-compact-wrap>div:first-child{width:100%!important;min-height:140px!important;
    max-height:180px!important}
}

/* --- la portada --- */

/* ═══════════════════════════════════════════════════════════════════════
   LA PORTADA.  Fondo claro siempre; el color vive en tintes palidos.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--suave-f:#5F6558;--radio:3px;
  --sombra:0 1px 2px rgba(51,55,46,.05),0 8px 22px -12px rgba(51,55,46,.18);
  --sombra-alta:0 2px 4px rgba(51,55,46,.06),0 18px 40px -16px rgba(51,55,46,.28)}
body{background:var(--fondo)}
.env{max-width:1440px}
section{position:relative}
/* ⚠️ Las secciones que son `.env` NO declaran `padding` a secas: pisarian el
   `0 28px` lateral de la caja. Solo `padding-top` / `padding-bottom`. */

/* --- la flecha en circulo -------------------------------------------------
   El detalle que mas se repite en toda la pagina, y por eso el que mas
   trabaja: dice "esto se pulsa" antes de que nadie lea la etiqueta. */
.aro{display:inline-grid;place-items:center;width:28px;height:28px;flex:0 0 28px;
  border:1.5px solid currentColor;border-radius:50%;font-style:normal;
  transition:background .2s ease,color .2s ease,transform .2s ease}
/* El trazo va un pelin MAS gordo que el borde del circulo (1,7 px frente a
   1,5): con la flecha mas fina que el aro, el ojo ve un aro vacio. */
.aro svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
a:hover .aro{background:var(--salvia);border-color:var(--salvia);
  color:var(--fondo);transform:translateX(3px)}

/* --- la pastilla --------------------------------------------------------- */
.pil{display:inline-flex;align-items:center;gap:11px;padding:9px 11px 9px 22px;
  border:1.5px solid var(--salvia);border-radius:999px;color:var(--salvia);
  font-weight:700;font-size:14px;letter-spacing:.2px;
  transition:background .2s ease,color .2s ease}
.pil:hover{background:var(--salvia);color:var(--fondo)}
.pil:hover .aro{background:var(--fondo);border-color:var(--fondo);
  color:var(--salvia)}

/* --- el rotulo de seccion ------------------------------------------------
   Un filete que arranca del titulo y cruza hasta el enlace de la derecha.
   Es lo que hace que una seccion parezca una seccion de revista y no un
   <h2> suelto. */
.rot{display:flex;align-items:center;gap:20px;margin:0 0 26px;
  font-size:clamp(25px,3vw,31px)}
.rot::after{content:"";flex:1;height:1px;background:var(--filete)}
.rot-v{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  font-family:Karla,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.3px;color:var(--salvia)}
.ojo{display:inline-flex;align-items:center;gap:8px}
/* El hilo del rotulo. Antes era un trocito de trama de 16x8 px, y a ese
   tamano no se leia como tela: se leia como una mancha naranja. Un hilo
   recto dice lo mismo y no se ensucia. */
.ojo::before{content:"";width:17px;height:2px;background:currentColor;
  opacity:.55;flex:0 0 17px}

/* --- el encabezado grande -----------------------------------------------
   La segunda forma de abrir una sección: titular a 45 px a la izquierda y un
   párrafo a la derecha, SIN filete. Se alterna con `.rot` -- si las seis
   secciones abren igual, la página no tiene ritmo, y eso era exactamente lo
   que la hacía parecer «sencilla» (1 sep 2026). */
.enc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:18px 64px;align-items:end;margin:0 0 44px}
.enc h2{font-size:clamp(29px,3.8vw,45px);letter-spacing:-.5px;line-height:1.06}
.enc p{margin:0 0 6px;font-size:18px;line-height:1.55;color:var(--suave);
  max-width:44ch;justify-self:end}

/* ═══ LA TAPA ════════════════════════════════════════════════════════════
   La foto manda sola y el titular va DEBAJO, en tinta oscura. Es la
   diferencia entera entre esto y la version anterior.

   ⚠️ Y OCUPA DOS TERCIOS, NO EL ANCHO ENTERO. La primera version la ponia a
   sangre de columna a columna -1.220 px- y quedaba un cartel, no una portada
   de revista. Alfre lo corto el 31 ago 2026: *"no tiene que salir gigante la
   imagen pero si quiero que se vea"*. Metida en la columna del titular mide
   unos 690 px: sigue mandando en la pagina y ya no la aplasta. */
.tapa{padding-top:36px}
/* Doce columnas: la foto ocupa ocho y LA TARJETA DEL TITULAR SOLAPA LA FOTO
   por la esquina de abajo a la derecha, colgando 64 px por debajo de ella.
   Es el gesto de revista de presupuesto: dos capas, no dos cajas. Y el texto
   sigue yendo sobre papel, no sobre la foto con velo (lección del 30 ago). */
.tapa-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:end}
.tapa-f{grid-column:1/9;grid-row:1;display:block;position:relative;
  overflow:hidden;border-radius:var(--radio);background:var(--bloque)}
.tapa-f img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.tapa-f:hover img{transform:scale(1.025)}
.tapa-c{grid-column:7/13;grid-row:1;position:relative;z-index:2;
  align-self:end;margin:0 0 -64px;background:var(--papel);
  padding:44px 46px 42px;border-radius:var(--radio);box-shadow:var(--sombra-alta)}
.tapa-c .rot-s{display:block;color:var(--arena);margin-bottom:16px}
.tapa h1{font-size:clamp(31px,4.2vw,56px);margin:0;letter-spacing:-.7px;
  line-height:1.05}
.tapa h1 a{background-image:linear-gradient(var(--arena),var(--arena));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s ease}
.tapa h1 a:hover{background-size:100% 2px}
.deck{font-size:18px;line-height:1.6;color:var(--suave);margin:18px 0 26px;
  max-width:40ch}

/* LA TIRA DE NOVEDADES. Cuatro, en columnas separadas por un hilo vertical,
   debajo de la tapa. Antes eran siete en una lista al lado de la foto y
   peleaban con ella en igualdad: ahora la tapa manda sola y esto la sigue. */
.ult{margin-top:118px;border-top:2px solid var(--tinta);padding-top:16px}
.ult-h{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.ult-h::after{content:"";flex:1;height:1px;background:var(--filete)}
.ult-h .rot-v{order:2}
.ult ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 34px}
.ult li{transition:opacity .3s ease}
.ult li+li{border-left:1px solid var(--filete);padding-left:30px}
.ult:hover li{opacity:.42}
.ult li:hover{opacity:1}
.rot-s{font-family:Karla,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--tinta);margin:0}
.ult a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:4px 12px;
  align-items:start;padding:4px 0 10px}
.ult-t{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px;
  line-height:1.2;grid-column:1;letter-spacing:-.2px}
.ult-d{grid-column:1;display:block;font-size:14px;line-height:1.5;
  color:var(--suave);margin-top:7px;max-width:36ch}
.ult .aro{grid-row:1;grid-column:2;width:24px;height:24px;flex-basis:24px;
  opacity:0;margin-top:2px;color:var(--salvia);
  transition:opacity .2s ease,transform .2s ease}
.ult .aro svg{width:13px;height:13px}
.ult li:hover .aro{opacity:1}

/* ═══ EL ENRUTADOR ═══════════════════════════════════════════════════════
   Se entra por el PROBLEMA, no por la categoria. Y aqui el texto va DENTRO
   de la foto: estas seis no son tarjetas de articulo, son PUERTAS. Un boton
   lleva su etiqueta encima, no al lado -- y de paso se distinguen de un
   vistazo de las tarjetas de articulo de arriba y de abajo. */
.rut{padding-top:112px}
.rut-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rt{display:block;transition:transform .25s ease}
/* UNA MANDA. La primera ocupa 2x2 y las otras cinco la rodean: con seis
   iguales no había jerarquía, y donde no hay jerarquía no hay emoción. La
   grande no lleva aspect-ratio: se estira al alto de las dos filas de al
   lado, que dan casi exactamente 3:4 (la diferencia es un tercio del hueco). */
.rt-big{grid-column:span 2;grid-row:span 2}
.rt-big .rt-m{aspect-ratio:auto;height:100%}
.rt-big .rt-c{padding:34px 32px 28px;gap:12px}
.rt-big.rt-foto .rt-c{padding-top:120px}
.rt-big .rt-t{font-size:clamp(25px,3vw,38px);letter-spacing:-.4px;max-width:18ch}
.rt:hover{transform:translateY(-3px)}
.rt-m{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--radio);background:var(--bloque);box-shadow:var(--sombra);
  transition:box-shadow .25s ease}
.rt:hover .rt-m{box-shadow:var(--sombra-alta)}
.rt-m img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.rt:hover .rt-m img{transform:scale(1.05)}
.rt-m>svg{position:absolute;left:50%;top:38%;width:80px;height:80px;
  transform:translate(-50%,-50%);color:var(--salvia);fill:none;
  stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.rt:hover .rt-m>svg{transform:translate(-50%,-50%) scale(1.09)}

/* El texto, dentro. Sobre foto lleva un degradado por debajo -- sin el, un
   titular claro sobre una foto clara desaparece, que es EL fallo tipico de
   este nicho: todo es palido. */
.rt-c{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 18px;
  display:flex;flex-direction:column;gap:9px}
.rt-foto .rt-c{padding-top:64px;
  background:linear-gradient(180deg,rgba(37,40,33,0) 0%,rgba(37,40,33,.52) 42%,
    rgba(37,40,33,.88) 100%)}
.rt-t{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:21px;line-height:1.2;color:var(--tinta)}
.rt-foto .rt-t{color:var(--fondo);text-shadow:0 1px 12px rgba(24,26,21,.35)}
.rt-r{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--arena)}
.rt-foto .rt-r{color:var(--arenap)}
.rt-r span{flex:1;min-width:0}
.rt .aro{color:var(--salvia)}
.rt-foto .aro{color:var(--fondo)}
.rt-foto a:hover .aro,.rt-foto:hover .aro{background:var(--fondo);
  border-color:var(--fondo);color:var(--tinta)}

/* ═══ LAS TRES TRAMAS ════════════════════════════════════════════════════
   La personalidad del blog, hecha materia. Es lo unico que se mueve solo:
   el tejido derivando, lentisimo. */
.tra{margin-top:112px;padding:88px 0 96px;background:var(--t-salvia)}
.tra .enc p{color:var(--suave-f)}
.tra-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.tw{display:flex;flex-direction:column}
/* 4:5, alto. Las macros llegan en 16:9 y aquí se recortan: son TEXTURA, no
   escena, y a una textura le da igual por dónde la cortes. Sin tarjeta, sin
   marco: la foto, y debajo el nombre grande. Así es como una revista enseña
   un material. */
.tw-m{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--radio);background:var(--bloque);box-shadow:var(--sombra);
  transition:box-shadow .3s ease}
.tw:hover .tw-m{box-shadow:var(--sombra-alta)}
.tw-m img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.tw:hover .tw-m img{transform:scale(1.045)}
.tw-dib{background-repeat:repeat;animation:deriva 44s linear infinite}
.tw:hover .tw-dib{animation-duration:9s}
@keyframes deriva{to{background-position:120px 120px}}
.tw-b{padding:24px 2px 0;display:flex;flex-direction:column;flex:1}
/* El nombre, y a su lado LA MUESTRA: el tejido dibujado, a escala de
   muestra, en un círculo de 40 px. Es el material de la casa firmando cada
   columna -- y es lo único que ningún competidor puede copiar. */
.tw-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--filete)}
.tw-n{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:31px;
  letter-spacing:-.3px}
.tw-sw{width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background-repeat:repeat;box-shadow:inset 0 0 0 1px rgba(51,55,46,.14)}
.tw-c{display:block;font-size:13px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--arena);margin:0 0 9px}
.tw-d{font-size:16px;line-height:1.55;color:var(--suave-f);margin:0 0 18px;flex:1}
.tw-r{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;
  color:var(--salvia)}

/* ═══ LAS GUIAS ══════════════════════════════════════════════════════════
   Una LISTA, no una parrilla. Ver la cabecera de guias(). */
.gui{padding:88px 0 84px;background:var(--papel)}
.gui-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 46px}
.gui li{border-bottom:1px solid var(--filete)}
.gui a{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:4px 14px;
  align-items:start;padding:18px 0;transition:transform .22s ease}
.gui a:hover{transform:translateX(6px)}
.gl-c{grid-column:1;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--arena);margin-bottom:2px}
.gl-t{grid-column:1;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:21px;line-height:1.24}
.gl-d{grid-column:1;font-size:14px;line-height:1.55;color:var(--suave);
  margin-top:6px;max-width:52ch}
.gui .aro{grid-row:1;grid-column:2;margin-top:2px;color:var(--salvia);
  opacity:0;transition:opacity .2s ease,transform .2s ease}
.gui li:hover .aro{opacity:1}

/* ═══ LAS 18 RAMAS ═══════════════════════════════════════════════════════
   Aqui trabajan los 18 iconos. Y aqui es donde la primera version se
   equivocaba: eran celdas de tabla separadas por una raya de 1 px, con el
   icono, el titulo y la frase EN LA MISMA LINEA. Ahora cada una es una
   tarjeta con la trama del blog de fondo, el icono arriba y el texto abajo. */
.zon{padding-top:108px;padding-bottom:96px}
/* DOS columnas, no tres. Los grupos van de 3 a 10 filas: a tres columnas
   Duvets (10) dejaba a Sheets y Pillows con medio bloque vacio debajo. A dos,
   y con los grupos de mas de cinco filas listando en dos columnas, las filas
   quedan 3/3 - 5/5 - 4/5 y no sobra nada. */
.zon-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.zg-2c ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.zg-2c li:last-child{border-bottom:1px solid var(--filete)}
/* Cada grupo es un BLOQUE con la ilustración de línea del menú arriba a la
   derecha, el nombre grande y, debajo, sus ramas en lista. Antes eran 18
   baldosas iguales -una hoja de cálculo-, y las ilustraciones, que son lo
   mejor de la marca, solo se veían pasando el ratón por el menú. */
.zg{position:relative;display:flex;flex-direction:column;
  border-radius:var(--radio);box-shadow:var(--sombra);padding:34px 34px 22px;
  overflow:hidden;background-repeat:repeat;
  transition:transform .3s ease,box-shadow .3s ease}
.zg:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.zg-top{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;
  align-items:end;min-height:230px;margin-bottom:6px;padding-bottom:18px;
  border-bottom:2px solid var(--tinta)}
.zg-n{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:31px;
  letter-spacing:-.3px;line-height:1.08;margin:0 0 9px}
.zg-l{font-size:18px;line-height:1.5;color:var(--suave-f);margin:0;max-width:30ch}
.zg-i{display:block;height:230px;background:transparent no-repeat center bottom/contain;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.zg:hover .zg-i{transform:translateY(-6px)}
.zg li{border-bottom:1px solid var(--filete)}
.zg li:last-child{border-bottom:0}
.zg li a{display:grid;grid-template-columns:18px minmax(0,1fr) 24px;
  gap:2px 12px;align-items:start;padding:13px 0;transition:transform .2s ease}
.zg li a:hover{transform:translateX(5px)}
/* el icono de la rama, a 16 px y callado: sale 18 veces, así que susurra */
.zg-ic{grid-row:1/3;margin-top:3px;opacity:.55}
.zg-ic svg{width:16px;height:16px;color:var(--salvia);fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zg-r{grid-column:2;font-weight:700;font-size:16px;line-height:1.3;color:var(--tinta)}
.zg-f{grid-column:2;font-size:14px;line-height:1.45;color:var(--suave-f)}
.zg .aro{grid-row:1;grid-column:3;width:24px;height:24px;flex-basis:24px;
  color:var(--salvia);opacity:0;transition:opacity .2s ease,transform .2s ease}
.zg .aro svg{width:13px;height:13px}
.zg li:hover .aro{opacity:1}

/* ═══ TESTED ON ONE BED ══════════════════════════════════════════════════
   El bloque de confianza: quien firma y como se prueba. Sustituye al
   digesto (otra lista de diez titulos con la misma forma que la de arriba).
   Va en la banda arena para que el ritmo de fondos no cambie.
   SIN margen arriba: la seccion de antes (.gui) es papel de borde a borde, y
   un margen entre dos fondos solidos deja una franja del color de la pagina
   que parece un error. Lo cazo Alfre el 2 sep 2026 en el tema. El aire lo
   pone el padding de abajo de .gui. (.tra si lleva margen: viene de .rut, que
   no tiene fondo, y ahi la franja ensena el tejido y se ve natural.) */
.fe{padding:88px 0 92px;background:var(--t-arena)}
.fe-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:44px 88px;align-items:center}
.fe .rot-s{display:block;color:var(--arena);margin-bottom:16px}
.fe h2{font-size:clamp(29px,3.8vw,45px);letter-spacing:-.5px;line-height:1.06;
  max-width:16ch}
.fe-p{font-size:18px;line-height:1.6;color:var(--suave-f);margin:20px 0 30px;
  max-width:46ch}
/* la firma: foto redonda, nombre y que hace */
.fe-a{display:flex;align-items:center;gap:16px}
.fe-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 72px;
  box-shadow:0 0 0 3px var(--papel)}
.fe-n{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:25px;line-height:1.1}
.fe-q{display:block;font-size:14px;color:var(--suave-f);margin-top:3px}
.fe-l{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
  color:var(--salvia);margin-top:8px}
/* los tres hechos, uno debajo de otro con su filete: no son cifras
   inventadas, son lo que Alfre puede sostener */
.fe-k{display:grid;grid-template-columns:minmax(0,1fr)}
.fe-k li{border-top:2px solid var(--tinta);padding:18px 0 22px}
.fe-k li:last-child{border-bottom:2px solid var(--tinta)}
.fe-kb{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:31px;letter-spacing:-.3px;line-height:1.1;margin-bottom:6px}
.fe-kd{display:block;font-size:16px;line-height:1.5;color:var(--suave-f);max-width:38ch}

/* --- EL TEJIDO EN LOS MARGENES ---------------------------------------------
   Donde sobra sitio a los lados de la caja de 1.440, la pagina «esta hecha
   de tela»: el percal dibujado a escala de textura, en los tonos del propio
   fondo, QUIETO. Sustituye a la luz de la manana que se movia (1 sep 2026,
   Alfre: «no se si sea la mejor idea»). No lo era: una web de presupuesto no
   mueve el fondo -- el movimiento va en lo que se toca y el fondo da la
   calma. Y se desvanece hacia el contenido, como si la tela estuviera
   debajo del papel. `fixed`, fuera del flujo, no se puede pulsar. */
.alas{display:none}
@media (min-width:1680px){
  .alas{display:block;position:fixed;top:0;bottom:0;
    width:calc((100vw - 1440px)/2);pointer-events:none;z-index:1;
    background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Crect%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23F3F5EC%22%2F%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23FAFBF5%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23E7EBDD%22%2F%3E%3C%2Fsvg%3E');background-size:8px 8px}
  .alas-i{left:0;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);
    mask-image:linear-gradient(90deg,#000 55%,transparent)}
  .alas-d{right:0;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent);
    mask-image:linear-gradient(270deg,#000 55%,transparent)}
}

/* --- aparecer al hacer scroll (no mueve nada: solo opacidad) ------------- */
.ap{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.ap.on{opacity:1;transform:none}

/* --- tablet ------------------------------------------------------------- */
@media (max-width:1000px){
  .tapa-f{grid-column:1/-1}
  /* la tarjeta baja a su propia fila y SUBE 88 px sobre la foto */
  .tapa-c{grid-column:2/12;grid-row:2;margin:-88px 0 0;padding:32px 34px 30px}
  .ult{margin-top:64px}
  .ult ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
  .ult li:nth-child(odd){border-left:0;padding-left:0}
  .ult li:nth-child(n+3){border-top:1px solid var(--filete);padding-top:14px}
  .rut-g,.gui-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zg-2c ul{grid-template-columns:minmax(0,1fr)}
  .rt-big{grid-column:span 2;grid-row:span 1}
  .rt-big .rt-m{aspect-ratio:3/2;height:auto}
  .enc{grid-template-columns:minmax(0,1fr);gap:10px}
  .enc p{justify-self:start}
}
/* --- movil -------------------------------------------------------------- */
@media (max-width:680px){
  .tapa{padding-top:20px}
  /* sin solape: foto, y el titular debajo, a pelo sobre el fondo */
  .tapa-c{grid-column:1/-1;margin:0;padding:22px 0 0;background:transparent;
    box-shadow:none}
  .tapa h1{font-size:clamp(29px,8vw,38px)}
  .deck{font-size:16px}
  .ult{margin-top:52px}
  .ult ul{grid-template-columns:minmax(0,1fr)}
  .ult li,.ult li+li,.ult li:nth-child(odd){border-left:0;padding-left:0;
    border-top:1px solid var(--filete);padding-top:12px}
  .ult li:first-child{border-top:0;padding-top:0}
  .ult-t{font-size:18px}
  .rut,.zon{padding-top:56px}
  .gui{padding:52px 0 48px}
  .tra{margin-top:56px}
  .tra,.fe{padding:48px 0 52px}
  .fe-g{grid-template-columns:minmax(0,1fr);gap:34px}
  .fe h2{max-width:none}
  .fe-kb{font-size:25px}
  .rut-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .rt-big .rt-m{aspect-ratio:4/3}
  /* 1 grande + 4 en pareja + la sexta a todo lo ancho: sin esto la quinta
     pequena se quedaba HUERFANA abajo a la izquierda */
  .rt:last-child{grid-column:span 2}
  .rt:last-child .rt-m{aspect-ratio:16/9}
  .rt-big .rt-c{padding:20px 18px 16px}
  .rt-big .rt-t{font-size:25px}
  .rt-c{padding:16px 14px 14px;gap:7px}
  .rt-foto .rt-c{padding-top:52px}
  .rt-t{font-size:18px}
  .rt-r{font-size:11px;letter-spacing:1px;gap:8px}
  .rt .aro{width:24px;height:24px;flex-basis:24px}
  .rt .aro svg{width:12px;height:12px}
  .gui-g{grid-template-columns:minmax(0,1fr)}
  /* LAS TARJETAS CON IMAGEN SE DESLIZAN -- tejidos y grupos. Es la decision
     de Alfre en catlandlord: funciona porque SE VE MEDIA TARJETA ASOMANDO
     por el borde, y la mano lo entiende sola. (Una fila de texto, no.)
     Medido: con tarjetas al 82 % y hueco de 14, asoman 44 px de la
     siguiente. Antes: tejidos 2.361 px y grupos 4.517 px, apilados. */
  .tra-g,.zon-g{display:flex;align-items:flex-start;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:4px 18px 14px;
    scrollbar-width:none}
  .tra-g::-webkit-scrollbar,.zon-g::-webkit-scrollbar{display:none}
  .tw,.zg{flex:0 0 82%;scroll-snap-align:start}
  .tw-m{aspect-ratio:4/3}
  .tw-n{font-size:25px}
  .gl-t{font-size:18px}
  .zg{padding:22px 18px 8px}
  .zg-top{grid-template-columns:minmax(0,1fr) 96px;min-height:0;gap:12px;
    padding-bottom:14px;margin-bottom:0}
  .zg-i{height:110px}
  .zg-n{font-size:25px}
  .zg-l{font-size:14px}
  .zg li a{padding:10px 0}
  /* los enlaces del pie median 21 px de alto: a 13 px y 8 de hueco no hay
     donde poner el dedo */
  .pie-c nav{gap:0}
  .pie-c a{padding:7px 0}
  .enc{margin-bottom:26px}
  .enc h2{font-size:clamp(25px,7vw,31px)}
  .enc p{font-size:16px}
  .rot{font-size:21px;gap:14px;margin-bottom:20px}
  .rot-v{font-size:13px}
}

/* --- el articulo --- */
/* ---- la reja del articulo ---- */
:root{--radio:3px;--sombra:0 1px 2px rgba(51,55,46,.05),0 8px 22px -12px rgba(51,55,46,.18)}
.art{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:64px;
  padding-top:38px;align-items:start;max-width:1180px;margin:0 auto}
/* la flecha en circulo, la misma de la portada */
.aro{display:inline-grid;place-items:center;width:28px;height:28px;flex:0 0 28px;
  border:1.5px solid currentColor;border-radius:50%;font-style:normal;
  transition:background .2s ease,color .2s ease,transform .2s ease}
.aro svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
a:hover .aro{background:var(--salvia);border-color:var(--salvia);
  color:var(--fondo);transform:translateX(3px)}
article{min-width:0}
.migas{font-size:13px;color:var(--suave);margin-bottom:16px}
.migas a:hover{color:var(--salvia)}
.migas span{margin:0 7px;opacity:.5}
/* el rotulo de la rama, encima del titular: dice donde estas */
.artcab .ojo{display:block;margin-bottom:12px}
.artcab h1{font-size:clamp(31px,3.9vw,45px);letter-spacing:-.6px;line-height:1.06}
.extr{margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--suave);
  max-width:58ch}
/* la firma, con la cara: es la primera senal de confianza de la pagina */
.firma{display:flex;align-items:center;gap:12px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--filete);font-size:14px;
  color:var(--suave);flex-wrap:wrap}
.firma img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.firma b{color:var(--tinta);font-weight:700}
.firma i{font-style:normal;opacity:.45}

/* ➜ La foto va desnuda, como en catlandlord. Aqui todavia NO hay fotos:
   ocupa su sitio una TRAMA, que es honesta y es el tema del blog. El dia
   que haya foto, se sustituye este bloque y ya. */
/* 4:3, que es el formato en que Alfre produce TODAS sus imagenes. */
.artfoto{position:relative;margin:28px 0 0;aspect-ratio:4/3;border-radius:3px;
  overflow:hidden;box-shadow:var(--sombra);background:var(--bloque)}
.artfoto img{width:100%;height:100%;object-fit:cover}
.artfoto-c{position:absolute;left:0;right:0;bottom:0;padding:9px 15px;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(243,245,236,.85);background:rgba(51,55,46,.35)}

/* ---- el indice, plegado ---- */
.idx{margin:26px 0 0;border:1px solid var(--filete);border-radius:3px;
  background:var(--bloque)}
.idx summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;
  align-items:center;gap:12px;font-size:13px}
.idx summary::-webkit-details-marker{display:none}
.idx summary::after{content:"+";margin-left:auto;color:var(--arena);
  font-weight:700;font-size:18px;line-height:1;transition:transform .22s ease}
.idx[open] summary::after{transform:rotate(45deg)}
.idx-t{font-weight:700}
.idx-n{color:var(--suave)}
.idx-l{padding:0 16px 15px;counter-reset:s}
.idx-l li{counter-increment:s;padding:2px 0;font-size:14px;color:var(--salvia)}
/* el enlace ocupa la fila entera: 24 px de zona de toque, no 17 (movil, 2 sep) */
.idx-l a{display:inline-block;padding:4px 0}
.idx-l li::before{content:counter(s,decimal-leading-zero);color:var(--arena);
  font-size:11px;font-weight:700;margin-right:11px}
.idx-l a:hover{color:var(--tinta)}

/* ---- la respuesta corta: campo ARENA palido, es el momento de mas valor.
   Antes era una caja oscura con velo; la unica zona oscura del articulo
   son las tarjetas de compra, que son decision de Alfre. Se probo en verde
   palido y se fundia con la pagina (Alfre, 1 sep 2026: "no hay contraste
   suficiente"): el arena es el otro tinte de la casa y se separa solo. ---- */
.resp{position:relative;margin:28px 0 0;border-radius:3px;overflow:hidden;
  border-top:3px solid var(--salvia)}
.resp-v{display:none}
.resp-in{position:relative;padding:24px 28px 26px}
.resp-in .ojo{display:block;margin-bottom:10px}
.resp-in p{margin:0;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:25px;line-height:1.3;letter-spacing:-.2px;max-width:30ch}
.resp-in em{font-style:italic;color:var(--salvia)}

/* ---- el cuerpo ---- */
.cuerpo{margin-top:38px;font-size:18px;line-height:1.7}
/* Sin tope de anchura en los parrafos. Llevaban max-width:66ch (medida de
   lectura) y Alfre, con el primer articulo real subido (2 sep 2026), vio el
   hueco a la derecha y los H2 sobresaliendo: "los parrafos dejan mucho
   espacio del lado derecho". El texto llena la columna, como los titulos. */
.cuerpo p{margin:0 0 20px}
/* Las fotos de los H2 llegan de Gutenberg como <figure class="wp-block-image">.
   Sin regla, el navegador les pone su margen por defecto (1em 40px) y salen
   mas estrechas que la foto del H1 -- lo que cazo Alfre el 2 sep 2026. Misma
   anchura, mismo radio y misma sombra que .artfoto. */
.cuerpo figure{margin:0 0 24px}
.cuerpo figure img{display:block;width:100%;height:auto;border-radius:3px;
  box-shadow:var(--sombra)}
.cuerpo figure figcaption{margin-top:8px;font-size:13px;color:var(--suave)}
.cuerpo h2{font-size:clamp(24px,2.7vw,31px);margin:44px 0 14px;
  padding-top:20px;border-top:1px solid var(--filete)}
.cuerpo h2:first-child{margin-top:0;border-top:0;padding-top:0}
/* Solo los enlaces DENTRO del texto corrido. `.cuerpo a` a secas tiene mas
   especificidad que `.prod-b` y le robaba el color al boton de compra: salia
   verde sobre arena en vez de crema, y con un filete debajo. */
.cuerpo p a,.cuerpo li a,.cuerpo td a{color:var(--salvia);
  border-bottom:1.5px solid var(--arena)}

/* ⚠️ `.tb` es la TABLA COMPARATIVA y lleva min-width:520px para poder
   desplazarse en movil. La banda de tramas de la portada se llamaba tambien
   .tb y heredaba ese min-width: la portada desbordaba 130 px a 390. Ahora
   aquella es .bt. NO reutilizar `.tb` para nada mas. */
.tabw{overflow-x:auto;margin:0 0 24px}
.tb{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.tb th,.tb td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--filete);
  vertical-align:top}
.tb thead th{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--arena);background:var(--bloque);border-bottom:0}
.tb tbody th{font-weight:700;width:118px}
.tb tbody tr:nth-child(2n){background:#EFF1E8}

/* La tarjeta de compra y el FAQ NO llevan CSS aqui: son los de
   clutterless/catlandlord y viven en inc/componentes.py, con sus estilos en
   linea tal cual estan en el original. */
/* ---- el aviso de afiliacion, despues de las preguntas: la etiqueta de precio del
   sprite, el rotulo de la casa, y letra pequena. Filete salvia a la izquierda
   para que se lea como nota, no como otra tarjeta. ---- */
.avi{display:flex;gap:16px;align-items:flex-start;margin:36px 0 0;padding:18px 20px 18px 18px;
  border:1px solid var(--filete);border-left:3px solid var(--salvia);border-radius:3px;
  background:var(--bloque)}
.avi-i{flex:0 0 22px;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--salvia);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.avi .ojo{display:block;margin-bottom:6px}
.avi p{margin:0;font-size:14px;line-height:1.6;color:var(--suave);max-width:none}
.faq{margin-top:46px;padding-top:20px;border-top:1px solid var(--filete)}
.faq h2{font-size:clamp(24px,2.7vw,31px);margin-bottom:4px}

/* ---- la columna de al lado ---- */
.lado{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px}
.ad:empty{display:none}
.lado-c{position:relative;background:var(--t-salvia);border-radius:3px;
  padding:22px 22px 20px}
/* la ilustracion de linea del grupo, arriba: la marca en cada articulo */
.lado-i{display:block;height:118px;margin:-6px 0 6px;
  background:transparent no-repeat left bottom/contain}
.lado-h{font-size:21px;margin-bottom:10px;padding-bottom:10px;
  border-bottom:2px solid var(--tinta)}
.lado-m .aro{width:24px;height:24px;flex-basis:24px}
.lado-m .aro svg{width:13px;height:13px}
.lado-l li{padding:3px 0;border-bottom:1px solid #D8DCCE;font-size:14px;
  line-height:1.45}
/* el enlace llena la fila: la zona de toque es la fila, no el texto (movil, 2 sep) */
.lado-l a{position:relative;display:inline-block;padding:5px 0}
.lado-l a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--arena);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}
.lado-l a:hover::after{transform:scaleX(1)}
.lado-m{display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-size:14px;font-weight:700;color:var(--salvia)}

/* ---- keep going + la banda ---- */
.rotk{font:700 12px/1 Karla,sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--salvia);display:flex;align-items:center;gap:16px;margin:56px 0 20px}
.rotk::after{content:"";flex:1;height:1px;background:var(--filete)}
.relb{background:var(--papel);padding:34px 0 40px;border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete)}
.relg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* baldosa palida con el tejido, texto en TINTA, la flecha abajo */
.rel{position:relative;min-height:186px;border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;padding:18px 18px 16px;
  background-repeat:repeat;box-shadow:var(--sombra);
  transition:transform .25s ease,box-shadow .25s ease}
.rel:hover{transform:translateY(-3px)}
.rel-r{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;color:var(--arena);margin-bottom:8px}
.rel-t{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:18px;
  line-height:1.2;flex:1}
.rel .aro{margin-top:14px;color:var(--salvia)}

/* ---- el autor ---- */
.au{display:flex;gap:26px;align-items:flex-start;margin:56px 0 76px;
  padding-top:30px;border-top:1px solid var(--filete)}
.au-f{flex:0 0 88px;width:88px;height:88px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--papel)}
.au h2{font-size:25px;margin:6px 0 8px}
.au p{margin:0;font-size:16px;line-height:1.6;color:var(--suave);max-width:62ch}
.au-e{display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-size:14px;font-weight:700;color:var(--salvia)}

/* ---- volver arriba: es el logo en pequeno, sin una linea de JavaScript ---- */
.arriba{position:fixed;right:22px;bottom:22px;width:46px;height:46px;
  border-radius:50%;background:var(--salvia);color:var(--fondo);display:flex;
  align-items:center;justify-content:center;z-index:20;
  animation:aparece linear both;animation-timeline:scroll();animation-range:0 620px}
@keyframes aparece{0%{opacity:0;transform:translateY(12px);visibility:hidden}
  100%{opacity:1;transform:none;visibility:visible}}

@media (max-width:1020px){
  /* `minmax(0,1fr)` y no `1fr`: con `1fr` la tabla de 520 px estira el
     articulo entero (fallo 12 del movil, catlandlord) */
  .art{grid-template-columns:minmax(0,1fr);gap:38px}
  .lado{position:static}
  .relg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .art{padding-top:22px}
  .artcab h1{font-size:clamp(27px,7.4vw,31px)}
  .extr{font-size:16px}
  .resp-in{padding:18px 18px 20px}
  .resp-in p{font-size:21px}
  .cuerpo{font-size:17px}
  .relg{grid-template-columns:minmax(0,1fr)}
  .rel{min-height:0}
  .au{flex-direction:column;gap:16px}
}

/* --- las paginas de sitio --- */

/* ══ LA BANDA DE CABECERA ══════════════════════════════════════════════ */
.pbanda{background:var(--pbg);color:var(--tinta);position:relative;overflow:hidden;
  margin-top:22px}
.pbanda-in{max-width:1440px;margin:0 auto;padding:52px 28px 56px;position:relative}
.pbanda .ojo{display:block;margin-bottom:12px}
.ptit{font-size:clamp(31px,4.2vw,56px);letter-spacing:-.7px;line-height:1.05;
  margin:0;max-width:18ch}
.pbsub{margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--suave-f);max-width:50ch}
.pfecha{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  margin:22px 0 0;color:var(--suave-f)}

/* el sello: la muestra de tejido, girada como se estampan los de verdad */
.sello{position:absolute;right:8%;top:50%;width:150px;height:150px;
  transform:translateY(-50%) rotate(-11deg);border-radius:50%;
  box-shadow:0 0 0 3px var(--salvia),0 0 0 9px var(--pbg),0 0 0 10.5px var(--salvia);
  overflow:hidden;opacity:.9;pointer-events:none}
.sello-t{position:absolute;inset:0;background-repeat:repeat}
@media (max-width:899px){.sello{display:none}}

/* la pagina de autor: el retrato manda */
.pbanda.persona .pbanda-in{display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:40px;align-items:end;padding-bottom:0}
.pbanda.persona .retrato img{display:block;width:260px;height:260px;object-fit:cover;
  border-radius:3px 3px 0 0}
@media (max-width:759px){.pbanda.persona .pbanda-in{grid-template-columns:1fr}
  .pbanda.persona .retrato{order:-1}.pbanda.persona .retrato img{width:170px;height:170px}}

/* ══ EL CUERPO: texto + columna de clausulas ═══════════════════════════ */
.pag{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;
  align-items:start;padding:40px 0 0;max-width:1180px;margin:0 auto}
.pag .plado{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px}
.pag.sola{grid-template-columns:minmax(0,1fr);max-width:760px}
@media (max-width:1020px){.pag{grid-template-columns:minmax(0,1fr);gap:34px}
  .pag .plado{position:static}}
.pag .cuerpo{margin-top:0}
.pag .cuerpo h2:first-child{margin-top:0}

.clausulas,.otrosdoc{background:var(--t-salvia);border-radius:3px;padding:20px 22px 18px}
.clausulas .ojo,.otrosdoc .ojo{display:block;margin:0 0 10px}
.clausulas ol{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.35;font-weight:700}
.clausulas li{padding:2px 0;border-top:1px solid var(--filete)}
.clausulas li:first-child{border-top:0}
/* el enlace llena la fila: 24 px de zona de toque, no 17 (movil, 2 sep) */
.clausulas a{display:block;padding:5px 0}
.otrosdoc ul{margin:0;padding:0;font-size:14px;font-weight:700}
.otrosdoc li{border-top:1px solid var(--filete)}
.otrosdoc li:first-child{border-top:0}
.otrosdoc a{display:block;padding:9px 0}
.clausulas a:hover,.otrosdoc a:hover{color:var(--salvia)}

/* la prosa legal: un punto mas pequena y con mas aire, se recorre, no se lee */
.legalp .cuerpo{font-size:16px;line-height:1.7}
.legalp .cuerpo p{max-width:70ch}
.legalp .cuerpo h2{font-size:25px;margin:40px 0 12px}
/* ⚠️ ACOTADO A .pag: en el tema esta hoja va junta con la del articulo, que
   tambien usa .cuerpo, y `.cuerpo h4` a secas ponia EN MAYUSCULAS el nombre de
   las tarjetas de compra (<h4 class="cn-card-name">). Cazado el 2 sep 2026 al
   comparar el articulo del tema con la maqueta. Misma leccion que .tb y .pil. */
.pag .cuerpo h3{font-size:21px;margin:26px 0 8px}
.pag .cuerpo h4{font-family:Karla,sans-serif;font-size:13px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--arena);margin:22px 0 6px}
/* el boton de la casa dentro de la prosa: sin el filete arena de los enlaces */
.pag .cuerpo p a.pil{border-bottom:0;vertical-align:top;line-height:1.3;margin:4px 0}
.pag .cuerpo ul.puntos{margin:0 0 22px;padding:0 0 0 22px;list-style:disc}
.pag .cuerpo ul.puntos li{margin:0 0 8px}
.numeros{margin:0 0 22px;padding:0 0 0 24px}
.numeros li{margin:0 0 8px;padding-left:6px}
.numeros li::marker{font-weight:700;color:var(--arena)}

.aviso{background:var(--bloque);border-radius:3px;padding:16px 20px;margin:22px 0;
  font-size:14px;font-weight:700;line-height:1.55;letter-spacing:.2px;max-width:none}
.dato{background:var(--t-arena);border-radius:3px;padding:20px 24px;margin:22px 0}
.dato .ojo{display:block;margin-bottom:8px}
.dato p{margin:0;max-width:none}

/* EL TESORO del final de cada legal */
.cierre{margin:44px 0 0;padding:20px 0 0;border-top:2px solid var(--tinta);
  font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px;line-height:1.3;
  color:var(--salvia);max-width:44ch}

/* ══ LOS BLOQUES DE PERSONA ═══════════════════════════════════════════ */
.hechos{margin:18px 0 22px}
.pasos{list-style:none;margin:18px 0 26px;padding:0;counter-reset:paso}
.pasos li{position:relative;counter-increment:paso;padding:0 0 18px 64px;margin:0 0 16px;
  border-bottom:1px solid var(--filete);font-size:16px;line-height:1.55}
.pasos li:last-child{border-bottom:0}
.pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:-4px;
  font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:31px;line-height:1;
  color:var(--arena)}
.pasos b{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px;
  margin:0 0 4px}

.puede{list-style:none;margin:16px 0 24px;padding:0;display:grid;gap:8px}
.puede li{position:relative;background:var(--papel);border-radius:3px;box-shadow:var(--sombra);
  padding:16px 20px 16px 52px;font-size:16px;line-height:1.5}
.puede b{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px;
  margin:0 0 3px}
.puede li::before{position:absolute;left:18px;top:16px;font-weight:700;font-size:20px;line-height:1.1;
  content:"\2713";color:var(--salvia)}
.puede.nopuede li::before{content:"\00d7";color:var(--arena);font-size:24px;top:13px}

.tipos{list-style:none;margin:16px 0 24px;padding:0}
.tipos li{padding:12px 0;border-bottom:1px solid var(--filete);font-size:16px;line-height:1.5}
.tipos b{display:block;font-size:13px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--arena);margin:0 0 3px}

/* el correo, cuando ES la respuesta de la pagina */
.correazo{background:var(--t-arena);border-radius:3px;padding:24px 28px 26px;margin:0 0 26px}
.correazo .ojo{display:block;margin:0 0 8px}
.correazo p{margin:0;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:clamp(21px,3.2vw,31px);line-height:1.15;letter-spacing:-.3px;max-width:none}
.correazo a{color:var(--salvia)}

/* ══ EL FORMULARIO DE CONTACTO (Fluent Forms) ═════════════════════════
   Fluent Forms pinta su propio aspecto y carga dos hojas que no se pueden
   quitar; esto no las pelea, las tapa: se cargan antes, y con `.pag .tcsform`
   delante gana esta sin un solo !important. NO se inventa un idioma nuevo:
   todo esta copiado de .comform, el formulario de comentarios (rotulo en
   versalitas arena, campo con filete y foco salvia, boton pastilla). Un sitio
   con dos formularios que no se parecen es un sitio con dos disenadores.
   (Alfre, 2 sep 2026: "no tiene creado un formulario de contacto") */
.pag .tcsform{margin:0 0 30px}
.pag .tcsform>.ojo{display:block;margin:0 0 14px}
.pag .tcsform .fluentform,.pag .tcsform form{margin:0}
.pag .tcsform .ff-el-group{margin:0 0 16px}
.pag .tcsform .ff_submit_btn_wrapper{margin:20px 0 0}
.pag .tcsform .ff-el-input--label{margin:0}
.pag .tcsform .ff-el-input--label label{display:block;font:700 11px Karla,sans-serif;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--arena);margin:0 0 7px;padding:0;
  line-height:1.3}
.pag .tcsform .ff-el-is-required.asterisk-right label::after{color:var(--salvia);font-weight:700}
.pag .tcsform .ff-el-form-control{display:block;width:100%;box-sizing:border-box;margin:0;
  font:400 16px Karla,sans-serif;line-height:1.45;padding:12px 15px;
  border:1.5px solid var(--filete);border-radius:3px;background:var(--papel);
  color:var(--tinta);box-shadow:none;height:auto;
  transition:border-color .2s ease,box-shadow .2s ease}
.pag .tcsform textarea.ff-el-form-control{resize:vertical;min-height:150px}
/* en el foco va background-color, no background: el atajo borraria la flecha
   del desplegable, que es una imagen de fondo */
.pag .tcsform .ff-el-form-control:focus{outline:0;border-color:var(--salvia);
  box-shadow:0 0 0 3px rgba(79,96,75,.18);background-color:var(--papel)}
.pag .tcsform .ff-el-form-control::placeholder{color:var(--suave);opacity:.7}
.pag .tcsform select.ff-el-form-control{-webkit-appearance:none;-moz-appearance:none;
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%209%27%3E%3Cpath%20d%3D%27M1%201.4L7%207.2L13%201.4%27%20fill%3D%27none%27%20stroke%3D%27%234F604B%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:14px 9px}
.pag .tcsform form.frm-fluent-form .ff-btn-submit{display:inline-flex;align-items:center;font:700 15px Karla,sans-serif;
  letter-spacing:.2px;padding:13px 28px;border:0;border-radius:999px;background:var(--salvia);
  color:var(--fondo);cursor:pointer;box-shadow:none;transition:background .2s ease,transform .2s ease}
.pag .tcsform form.frm-fluent-form .ff-btn-submit:hover,.pag .tcsform form.frm-fluent-form .ff-btn-submit:focus{background:var(--tinta);
  color:var(--fondo);transform:translateY(-1px)}
/* 🪤 `form.frm-fluent-form` en el selector (el <form> lleva ESA clase; `.fluentform` es el div de fuera): Fluent Forms inyecta en la pagina
   `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style){background:azul}`
   (0,3,1), que ganaba a `.pag .tcsform .ff-btn-submit` (0,3,0) y el boton
   salia azul. Con el form delante son (0,4,1) y gana esta. 2 sep 2026. */
/* el error y el acierto, con los dos colores de la lista de abajo (el ✓ y la ×) */
.pag .tcsform .ff-el-is-error .ff-el-form-control{border-color:var(--arena)}
.pag .tcsform .error,.pag .tcsform .text-danger{font:400 13px Karla,sans-serif;color:var(--arena);margin:6px 0 0}
.pag .tcsform .ff-message-success{background:var(--t-salvia);border:0;border-radius:3px;
  padding:20px 24px;font:400 16px/1.55 Karla,sans-serif;color:var(--tinta);box-shadow:none}
.pag .tcsform .ff-message-success p{margin:0}

.firmapag{margin:32px 0 0;padding:18px 0 0;border-top:2px solid var(--tinta);
  font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px}

/* ══ LAS DE RESCATE ═══════════════════════════════════════════════════ */
.buscagrande{max-width:760px;margin:0 auto;padding:40px 0 8px}
.buscagrande .ojo{display:block;margin:0 0 12px}
.buscafila{display:flex;gap:0}
.buscafila input{flex:1;min-width:0;font:400 18px Karla,sans-serif;padding:14px 18px;
  border:2px solid var(--tinta);border-right:0;border-radius:3px 0 0 3px;background:var(--papel);
  color:var(--tinta)}
.buscafila button{font:700 16px Karla,sans-serif;padding:0 26px;border:0;border-radius:0 3px 3px 0;
  background:var(--salvia);color:var(--fondo);cursor:pointer}
.resultados{list-style:none;margin:28px auto 0;padding:0;max-width:760px}
.resultados li{border-bottom:1px solid var(--filete)}
.resultados li:first-child{border-top:2px solid var(--tinta)}
.resultados a{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:2px 14px;
  align-items:start;padding:16px 0}
.rrot{grid-column:1;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--arena)}
.rtit{grid-column:1;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:21px;
  line-height:1.2}
.resultados .aro{grid-row:1;grid-column:2;color:var(--salvia)}
.rescate-z{padding-top:64px}

/* --- la categoria --- */

/* ═══ LA CATEGORIA ══════════════════════════════════════════════════════════
   Una rama: la banda con la trama de su grupo (la misma que tiene en «Every
   corner» de la portada), y debajo el mapa: cada subcategoria con su pilar
   como titular y los nodos colgando. Solo en esta pagina; las clases van
   con prefijo cat-/csub- para no chocar con las otras hojas (.tb, .pil,
   .cuerpo h4: tres colisiones ya pagadas). ═══ */
.catcab{margin-top:14px;padding-top:44px;padding-bottom:0;background-repeat:repeat;
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.catcab-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
  align-items:end}
.catcab-t{padding-bottom:44px}
.catcab-t .ojo{display:block;margin-bottom:14px}
.catcab-t .ojo i{font-style:normal;opacity:.45;margin:0 6px}
/* en la subcategoria el rotulo es un enlace a la rama: 24 px de toque */
.catcab-t .ojo a{display:inline-block;padding:6px 0;margin:-6px 0}
.catcab h1{font-size:clamp(29px,3.8vw,45px);letter-spacing:-.5px;line-height:1.06;
  max-width:16ch;text-wrap:balance}
.catcab-d{margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--suave-f);
  max-width:52ch}
/* la ilustracion de linea del grupo, apoyada en el filete de abajo */
.catcab-i{display:block;height:250px;background:transparent no-repeat center bottom/contain}

/* ---- el mapa ---- */
.catmapa{padding-top:16px}
.csub{padding:30px 0 28px;border-bottom:1px solid var(--filete)}
.csub:last-child{border-bottom:0}
.csub-cab{display:flex;gap:20px;align-items:flex-start}
/* el numero en Bodoni, palido: es orden, no jerarquia (regla: los numeros
   solo cuando la secuencia significa algo, y aqui es el orden del mapa) */
.csub-n{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:31px;
  line-height:1;color:var(--filete);flex:0 0 58px;margin-top:2px}
.csub-cab .ojo{display:block;margin-bottom:8px}
.csub h2{font-size:clamp(21px,2.4vw,25px);line-height:1.2;max-width:34ch;
  text-wrap:balance}
.csub h2 a{position:relative}
.csub h2 a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--arena);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}
.csub h2 a:hover::after{transform:scaleX(1)}
.csub-sin{color:var(--suave)}
.csub-f{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--suave);max-width:60ch}
/* los nodos, a dos columnas, sangrados bajo el titular; el pilar NO se repite */
.csub-l{list-style:none;margin:16px 0 0 78px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.csub-l li{border-bottom:1px solid var(--filete)}
.csub-l a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:12px;
  align-items:center;padding:10px 0;font-size:15px;line-height:1.35;
  transition:transform .2s ease}
.csub-l a:hover{transform:translateX(5px)}
.csub-l .aro{width:24px;height:24px;flex-basis:24px;color:var(--salvia);opacity:0;
  transition:opacity .2s ease}
.csub-l .aro svg{width:13px;height:13px}
.csub-l li:hover .aro{opacity:1}
.csub-vacia{margin:14px 0 0 78px;font-size:14px;color:var(--suave);
  padding:10px 14px;border:1px dashed var(--filete);border-radius:3px;display:inline-block}

@media (max-width:1020px){
  .catcab-g{grid-template-columns:minmax(0,1fr) 220px}
  .catcab-i{height:190px}
}
@media (max-width:760px){
  /* la banda no puede comerse media pantalla: la ilustracion baja a 96 px y
     pegada al texto (con 130 y 26 de aire quedaba un hueco de 80 px por
     encima del dibujo -- fallo 4 de la lista del movil, 2 sep 2026) */
  .catcab{padding-top:26px}
  .catcab-g{grid-template-columns:minmax(0,1fr);gap:0}
  .catcab-t{padding-bottom:6px}
  .catcab-d{font-size:16px;margin-top:10px}
  .catcab-i{height:96px;background-position:right bottom;margin-bottom:-1px}
  .csub{padding:24px 0 22px}
  .csub-cab{gap:14px}
  .csub-n{font-size:25px;flex-basis:40px}
  .csub-l,.csub-vacia{margin-left:0;grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   Lo que una maqueta no tiene y un tema si
   ========================================================================== */

/* --- la tapa sin foto: el tejido a escala de muestra, no un hueco --- */
.tapa-sin{display:block;aspect-ratio:4/3;background-repeat:repeat}

/* --- el listado de una categoria y la paginacion --- */
/* padding-top y no padding: `.arch` va sobre `.env`, y `padding:36px 0 0`
   le borraba los laterales (la lista salia pegada al borde, 2 sep 2026; la
   misma trampa que .tapa el 1 sep) */
.arch{padding-top:36px}
.arch h1{font-size:clamp(29px,3.8vw,45px);letter-spacing:-.5px;line-height:1.06;margin-top:10px}
.arch-l{list-style:none;margin:28px 0 0;padding:0;max-width:760px}
.arch-l li{border-bottom:1px solid var(--filete)}
.arch-l li:first-child{border-top:2px solid var(--tinta)}
.arch-l a{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:4px 14px;
  align-items:start;padding:18px 0;transition:transform .22s ease}
.arch-l a:hover{transform:translateX(6px)}
.arch-c{grid-column:1;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--arena)}
.arch-t{grid-column:1;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;
  font-size:21px;line-height:1.24}
.arch-d{grid-column:1;font-size:14px;line-height:1.55;color:var(--suave);
  margin-top:6px;max-width:52ch}
.arch-l .aro{grid-row:1;grid-column:2;margin-top:2px;color:var(--salvia);
  opacity:0;transition:opacity .2s ease}
.arch-l li:hover .aro{opacity:1}
.pagin{display:flex;gap:8px;margin:34px 0 0;font-weight:700;font-size:14px}
.pagin a,.pagin span{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border-radius:999px;
  border:1.5px solid var(--filete);color:var(--salvia)}
.pagin .current{background:var(--salvia);border-color:var(--salvia);color:var(--fondo)}
.pagin a:hover{border-color:var(--salvia)}

/* --- los comentarios: la misma anatomia que el bloque del autor (rotulo,
   titular Bodoni, una linea de contexto) y los campos como los del formulario
   de contacto. Nombre y correo en dos columnas, el area de texto arriba, el
   boton en pastilla salvia. Alfre, 2 sep 2026: "esta bien basico". --- */
.coment{max-width:760px;margin:0 auto 76px;padding-top:34px;border-top:1px solid var(--filete)}
.coment .ojo{display:block;margin-bottom:8px}
.coment h2{font-size:25px;margin:0 0 6px}
.coment-l{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--suave);max-width:56ch}
.coment ol{list-style:none;margin:0 0 34px;padding:0}
.coment ol ol{margin:12px 0 0 28px}
.coment li{padding:18px 0;border-bottom:1px solid var(--filete)}
.coment .comment-body{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px}
.coment .comment-body::before{content:"";grid-row:1/4;width:36px;height:36px;border-radius:50%;
  background:var(--t-salvia);border:1.5px solid var(--filete)}
.coment .comment-author{font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:17px}
.coment .comment-author .says{display:none}
.coment .comment-meta{font-size:12px;color:var(--suave);letter-spacing:.3px}
.coment .comment-content{font-size:16px;line-height:1.6;margin-top:6px}
.coment .comment-content p{margin:0 0 10px}
.coment .reply{grid-column:2;font-size:13px;font-weight:700}
.coment .reply a{color:var(--salvia)}
.comform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.comform>*{margin:0}
.comform .comment-form-comment,.comform .comment-form-cookies-consent,.comform .form-submit,
.comform .comment-notes,.comform .logged-in-as{grid-column:1/-1}
.comform label{display:block;font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--arena);margin:0 0 7px}
.comform label .required{color:var(--salvia)}
.comform input[type=text],.comform input[type=email],.comform textarea{width:100%;
  font:400 16px Karla,sans-serif;padding:12px 15px;border:1.5px solid var(--filete);
  border-radius:3px;background:var(--papel);color:var(--tinta);box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease}
.comform input:focus,.comform textarea:focus{outline:0;border-color:var(--salvia);
  box-shadow:0 0 0 3px rgba(107,124,94,.18)}
.comform textarea{min-height:150px;resize:vertical}
.comform .comment-form-cookies-consent{display:flex;align-items:center;gap:10px}
.comform .comment-form-cookies-consent label{margin:0;font:400 14px Karla,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--suave)}
.comform .comment-form-cookies-consent input{accent-color:var(--salvia);width:16px;height:16px}
.comform .submit{display:inline-flex;align-items:center;font:700 15px Karla,sans-serif;
  letter-spacing:.2px;padding:13px 28px;border:0;border-radius:999px;background:var(--salvia);
  color:var(--fondo);cursor:pointer;transition:background .2s ease,transform .2s ease}
.comform .submit:hover{background:var(--tinta);transform:translateY(-1px)}
.coment .comment-reply-title small{display:block;margin-top:6px;font-size:13px;font-weight:400}
.coment .comment-reply-title small a{color:var(--salvia)}
@media (max-width:760px){.comform{grid-template-columns:minmax(0,1fr)}.coment{margin-bottom:56px}}

/* --- lo que se apaga si molesta el movimiento --- */
@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{transition:none!important;animation:none!important}
  .panel,.pdib,.ap{transform:none;opacity:1}}