/* Tipografias autoalojadas.
   Antes se pedian al servicio de tipografias de Google, lo que comunicaba la IP de
   cada visitante en cada pagina, antes de cualquier aviso. Lo detecto Tomas al auditar el
   aviso de privacidad el 2026-09-08, y el Plan Maestro de junio ya lo exigia asi.
   Ambas familias son SIL Open Font License 1.1, verificado en el repositorio oficial
   de Google Fonts. Las licencias viajan con los archivos, en /fuentes/.
   Los rangos unicode van copiados de la hoja que servia Google, sin tocarlos. */

@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fuentes/atkinson-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:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/atkinson-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:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/fuentes/bricolage-var-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:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fuentes/atkinson-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:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/atkinson-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:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/fuentes/bricolage-var-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}


/* Planeta Inmobiliario Di Santi. Hoja unica, sin dependencias. */

:root{
  color-scheme: light;
  --papel:#FBF9F5; --papel-2:#F1EDE4; --papel-3:#E5DFD2;
  --tinta:#17150F; --texto:#3B3830; --suave:#625C51;
  --linea:#DDD6C7; --linea-2:#C4BBA6;
  --olivo:#4E5F12; --olivo-t:#445310; --sobre-olivo:#FFFFFF;
  --noche:#17150F; --noche-2:#221F18;
  --noche-tx:#F4F0E6; --noche-tx2:#B8B1A0; --noche-linea:#343026;
  --lima:#C9DC55; --sobre-lima:#17150F;
  --ambar:#8A4A12; --ambar-l:#D9C09B;
  --alerta:#8A3A1C; --alerta-f:#F5E7E1; --alerta-osc:#E8926B;
  --estrella:#7A5D08;
  --foto-sat:.58; --foto-tinte:#59631F; --foto-op:.26;
  --ancho:1280px; --texto-ancho:38rem; --toque:52px; --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-hora="dia"]){ color-scheme: dark;
    --papel:#16120E; --papel-2:#1E1913; --papel-3:#29221A;
    --tinta:#F6F1E6; --texto:#DCD4C5; --suave:#A79E8C;
    --linea:#2E2820; --linea-2:#47402F;
    --olivo:#B4C74E; --olivo-t:#C2D45C; --sobre-olivo:#16120E;
    --noche:#0F0C09; --noche-2:#1A150F;
    --noche-tx:#F6F1E6; --noche-tx2:#B0A794; --noche-linea:#2A231A;
    --lima:#C9DC55; --sobre-lima:#0F0C09;
    --ambar:#DFA25C; --ambar-l:#54402A;
    --alerta:#DE8A69; --alerta-f:#2B1913; --alerta-osc:#DE8A69;
    --estrella:#D9B45A;
    --foto-sat:.48; --foto-tinte:#1B1A10; --foto-op:.38;
  }
}
:root[data-hora="noche"]{
  color-scheme: dark;
  --papel:#16120E; --papel-2:#1E1913; --papel-3:#29221A;
  --tinta:#F6F1E6; --texto:#DCD4C5; --suave:#A79E8C;
  --linea:#2E2820; --linea-2:#47402F;
  --olivo:#B4C74E; --olivo-t:#C2D45C; --sobre-olivo:#16120E;
  --noche:#0F0C09; --noche-2:#1A150F;
  --noche-tx:#F6F1E6; --noche-tx2:#B0A794; --noche-linea:#2A231A;
  --lima:#C9DC55; --sobre-lima:#0F0C09;
  --ambar:#DFA25C; --ambar-l:#54402A;
  --alerta:#DE8A69; --alerta-f:#2B1913; --alerta-osc:#DE8A69;
  --estrella:#D9B45A;
  --foto-sat:.48; --foto-tinte:#1B1A10; --foto-op:.38;
}
:root[data-hora="dia"]{
  color-scheme: light;
  --papel:#FBF9F5; --papel-2:#F1EDE4; --papel-3:#E5DFD2;
  --tinta:#17150F; --texto:#3B3830; --suave:#625C51;
  --linea:#DDD6C7; --linea-2:#C4BBA6;
  --olivo:#4E5F12; --olivo-t:#445310; --sobre-olivo:#FFFFFF;
  --noche:#17150F; --noche-2:#221F18;
  --noche-tx:#F4F0E6; --noche-tx2:#B8B1A0; --noche-linea:#343026;
  --lima:#C9DC55; --sobre-lima:#17150F;
  --ambar:#8A4A12; --ambar-l:#D9C09B;
  --alerta:#8A3A1C; --alerta-f:#F5E7E1; --alerta-osc:#E8926B;
  --estrella:#7A5D08;
  --foto-sat:.58; --foto-tinte:#59631F; --foto-op:.26;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--papel); color:var(--texto);
  font-family:'Atkinson Hyperlegible','Trebuchet MS',Verdana,-apple-system,sans-serif;
  font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased;
  transition:background-color .5s ease, color .5s ease; overflow-x:hidden;}
h1,h2,h3{font-family:'Bricolage Grotesque','Atkinson Hyperlegible',sans-serif;
  font-weight:800; font-variation-settings:"opsz" 72; line-height:1.02;
  letter-spacing:-.033em; text-wrap:balance; margin:0; color:var(--tinta);}
h4{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.02rem;
  letter-spacing:-.012em; margin:0; color:var(--tinta); line-height:1.3;}
p{margin:0;}
a{color:var(--olivo-t);}
:focus-visible{outline:3px solid var(--olivo); outline-offset:3px;}
.env{width:min(100% - 2.2rem, var(--ancho)); margin-inline:auto;}
.display{font-size:clamp(2.7rem, 1.1rem + 6vw, 5.2rem);}
.titulo{font-size:clamp(2rem, 1.2rem + 3vw, 3.4rem);}
.plomo{font-size:1.18rem; line-height:1.65; max-width:var(--texto-ancho);}
.cuerpo{max-width:var(--texto-ancho);}
.rot{display:inline-block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--olivo-t);
  padding:.3rem .7rem; border:1px solid currentColor; border-radius:100px;}
.rot--claro{color:var(--lima);}
.rot--alerta{color:var(--alerta);}

/* ---------- Lámina: bloque visual con gradiente, trazo y su brief ---------- */
.lam{position:relative; overflow:hidden; border-radius:var(--r); isolation:isolate;
  background:
    radial-gradient(115% 85% at 12% 8%, color-mix(in srgb, var(--olivo) 30%, transparent), transparent 58%),
    radial-gradient(95% 75% at 88% 92%, color-mix(in srgb, var(--tinta) 26%, transparent), transparent 60%),
    linear-gradient(155deg, var(--papel-2), var(--papel-3));}
.lam img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);}
/* Mascara de color: baja la saturacion y tine todas las fotografias con el mismo
   verde del sitio, para que ninguna grite y todas parezcan de la misma serie. */
.lam.con-foto img{filter:saturate(var(--foto-sat)) contrast(1.04);
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .5s ease;}
.lam.con-foto::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--foto-tinte); opacity:var(--foto-op); mix-blend-mode:multiply;
  transition:opacity .5s ease;}
/* Velo: da profundidad y asienta lo que va encima. Va por delante de la mascara. */
.lam.con-foto::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tinta) 9%, transparent) 0%,
    transparent 38%,
    color-mix(in srgb, var(--tinta) 46%, transparent) 100%);
  transition:opacity .5s ease;}
.card:hover .lam.con-foto::after{opacity:.7;}
.card:hover .lam.con-foto::before{opacity:calc(var(--foto-op) * .5);}
.card:hover .lam.con-foto img{filter:saturate(calc(var(--foto-sat) + .3)) contrast(1.04);}
.lam:hover img{transform:scale(1.055);}

/* ---------- Animación ---------- */
@keyframes sube{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes revela{from{opacity:0;} to{opacity:1;}}
@keyframes escala{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:none;}}
@keyframes traza{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
.an{animation:sube .75s cubic-bezier(.19,.72,.28,1) backwards;}
.a1{animation-delay:.05s;} .a2{animation-delay:.14s;} .a3{animation-delay:.23s;}
.a4{animation-delay:.32s;} .a5{animation-delay:.42s;}
.esc{animation:escala .85s cubic-bezier(.19,.72,.28,1) .2s backwards;}
.dib{stroke-dasharray:1; stroke-dashoffset:0; animation:traza 1.6s ease-out .35s backwards;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:var(--toque); padding:.9rem 1.7rem; border-radius:100px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.02rem;
  letter-spacing:-.01em; text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background-color .25s ease, color .25s ease, border-color .25s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--solido{background:var(--olivo); color:var(--sobre-olivo); border-color:var(--olivo);}
.btn--solido:hover{background:var(--tinta); border-color:var(--tinta); color:var(--papel);}
.btn--filete{background:transparent; color:var(--tinta); border-color:var(--linea-2);}
.btn--filete:hover{border-color:var(--tinta);}
.btn--lima{background:var(--lima); color:var(--sobre-lima); border-color:var(--lima);}
.btn--lima:hover{background:transparent; color:var(--lima);}
.btn--ancho{width:100%;}
.wa{width:21px; height:21px; flex:none; fill:currentColor;}

/* ---------- Cinta y cabecera ---------- */
.cab{position:sticky; top:0; z-index:80; background:color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter:saturate(170%) blur(16px); border-bottom:1px solid var(--linea);}
.cab .env{display:flex; align-items:center; gap:2rem; padding:.9rem 0;}
.logo{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; min-width:0; padding-block:.4rem;}
.logo .marca{width:auto; height:38px; display:block; flex:none;}
.logo .plaza{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--suave); white-space:nowrap;
  padding-inline-start:.7rem; border-inline-start:1px solid var(--linea);}
.marca-pie{width:auto; height:44px; display:block; margin-bottom:1rem;}
.menu{display:flex; gap:1.7rem; margin-inline-start:auto;}
.menu a{color:var(--texto); text-decoration:none; font-size:.95rem; font-weight:700;
  font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-.01em; padding-block:.6rem;}
.menu a:hover{color:var(--olivo-t);}
@media (max-width:1100px){ .menu{display:none;} .cab .btn{margin-inline-start:auto;} }

/* ---------- Portada visual ---------- */
.portada{padding:clamp(2rem,4vw,3.4rem) 0 clamp(3rem,6vw,5rem); position:relative;}
.portada .env{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:center;}
@media (max-width:980px){ .portada .env{grid-template-columns:1fr;} }
.portada h1{margin:1.2rem 0 1.4rem;}
.acciones{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem;}
.promesas{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem;}
.promesas span{display:inline-flex; align-items:center; gap:.5rem; background:var(--papel-2);
  border:1px solid var(--linea); border-radius:100px; padding:.5rem 1rem; font-size:.94rem; color:var(--texto);}
.promesas span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--olivo); flex:none;}
.escenario{position:relative;}
.escenario .lam{aspect-ratio:5/6;}
@media (max-width:980px){ .escenario .lam{aspect-ratio:4/5; max-width:26rem; margin-inline:auto;} }
.tarjeta-flota{position:absolute; z-index:3; inset-block-end:-1.4rem; inset-inline-start:-1.4rem;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:1rem 1.2rem; box-shadow:0 18px 44px color-mix(in srgb, var(--tinta) 16%, transparent);
  display:flex; align-items:center; gap:.9rem;}
@media (max-width:980px){ .tarjeta-flota{inset-inline-start:1rem; inset-block-end:-1.2rem;} }
.tarjeta-flota .n{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2.1rem;
  line-height:1; color:var(--tinta); letter-spacing:-.04em;}
.tarjeta-flota .est{color:var(--estrella); font-size:.86rem; letter-spacing:.1em; display:block;}
.tarjeta-flota small{color:var(--suave); font-size:.82rem; display:block; max-width:16ch; line-height:1.35;}

/* ---------- Banda de cifras ---------- */
.banda{background:var(--olivo);}
.banda .env{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; padding:2.6rem 0;}
@media (max-width:820px){ .banda .env{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem;} }
.banda .c b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,1.4rem+2vw,3rem); line-height:1; color:var(--sobre-olivo); letter-spacing:-.04em;}
.banda .c small{display:block; color:color-mix(in srgb, var(--sobre-olivo) 82%, transparent);
  font-size:.92rem; margin-top:.5rem; line-height:1.45;}

/* ---------- Secciones ---------- */
section{padding:clamp(3.2rem,6.5vw,5.4rem) 0;}
.enc{max-width:52rem; margin-bottom:clamp(2rem,4vw,3rem);}
.enc h2{margin:1rem 0 .8rem;}
.enc p{color:var(--texto); font-size:1.1rem; max-width:var(--texto-ancho);}
.centro{text-align:center; margin-inline:auto;}
.centro p{margin-inline:auto;}

/* ---------- Problema ---------- */
.problema{background:var(--papel-2);}
.problema .env{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:center;}
@media (max-width:980px){ .problema .env{grid-template-columns:1fr;} }
.problema .lam{aspect-ratio:4/3;}
.dolores{display:grid; gap:.9rem; margin-top:2rem;}
.dolor{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.1rem 1.2rem; font-size:1.02rem; transition:transform .2s ease, border-color .25s ease;}
.dolor:hover{transform:translateX(5px); border-color:var(--olivo);}
.dolor b{color:var(--tinta);}

/* ---------- Autoridad ---------- */
.autoridad{background:var(--noche); color:var(--noche-tx);}
.autoridad h2,.autoridad h3{color:var(--noche-tx);}
.autoridad .enc p{color:var(--noche-tx2);}
.autoridad .env{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.6rem,4vw,3.2rem); align-items:center;}
@media (max-width:960px){ .autoridad .env{grid-template-columns:1fr;} }
.autoridad .retrato{aspect-ratio:4/5;}
@media (max-width:960px){ .autoridad .retrato{aspect-ratio:4/5; width:100%; max-width:22rem; justify-self:center;} }
.autoridad .enc{margin-bottom:1.6rem;}
.mosaico{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;}
@media (max-width:400px){ .mosaico{grid-template-columns:1fr;} }
.tesela{background:var(--noche-2); border:1px solid var(--noche-linea); border-radius:var(--r);
  padding:1.5rem 1.4rem; transition:transform .22s ease, border-color .25s ease;}
.tesela:hover{transform:translateY(-5px); border-color:var(--lima);}
.tesela b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:2.1rem; line-height:1; color:var(--lima); letter-spacing:-.04em; margin-bottom:.6rem;}
.tesela small{display:block; color:var(--noche-tx2); font-size:.9rem; line-height:1.5;}

/* ---------- Autodiagnóstico ---------- */
.opciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem;}
.op{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.8rem;
  text-align:start; width:100%; background:var(--papel); cursor:pointer; font:inherit; color:var(--texto);
  border:1px solid var(--linea); border-radius:var(--r); padding:1.4rem 1.4rem 1.5rem;
  min-height:var(--toque); overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .25s ease, box-shadow .25s ease;}
.op::after{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--olivo); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
.op:hover{transform:translateY(-5px); border-color:var(--linea-2);
  box-shadow:0 16px 36px color-mix(in srgb, var(--tinta) 12%, transparent);}
.op:hover::after{transform:scaleX(1);}
.op .ico{width:46px; height:46px; flex:none; border-radius:12px; background:var(--papel-2);
  display:grid; place-items:center; transition:background-color .25s ease;}
.op:hover .ico{background:color-mix(in srgb, var(--olivo) 18%, var(--papel-2));}
.op .ico svg{width:26px; height:26px; stroke:var(--olivo-t); fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;}
.op b{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.14rem;
  color:var(--tinta); line-height:1.22; letter-spacing:-.018em;}
.op small{display:block; color:var(--suave); font-size:.95rem; line-height:1.5; margin-top:.2rem;}
.dictamen{margin-top:1.6rem; background:var(--papel-2); border:1px solid var(--olivo);
  border-radius:var(--r); padding:1.8rem; animation:escala .4s ease;}
.dictamen h3{font-size:clamp(1.5rem,1.2rem+1.2vw,2.1rem); margin-bottom:.7rem;}
.dictamen p{color:var(--texto); max-width:var(--texto-ancho); margin-bottom:.8rem;}
.dictamen .clave{color:var(--tinta); font-weight:700;}
.otra{background:none; border:0; padding:.7rem 0; cursor:pointer; font:inherit; color:var(--olivo-t);
  font-weight:700; text-decoration:underline; text-underline-offset:5px;}

/* ---------- Plan visual ---------- */
.plan{background:var(--papel-2);}
.ruta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; position:relative;}
@media (max-width:880px){ .ruta{grid-template-columns:1fr;} }
.hito{position:relative; background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.8rem 1.6rem; transition:transform .22s ease, box-shadow .25s ease;}
.hito:hover{transform:translateY(-6px); box-shadow:0 18px 40px color-mix(in srgb, var(--tinta) 13%, transparent);}
.hito .n{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--olivo); color:var(--sobre-olivo); font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; font-size:1.4rem; margin-bottom:1.1rem; letter-spacing:-.03em;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);}
.hito:hover .n{transform:scale(1.12) rotate(-8deg);}
.hito h3{font-size:1.35rem; margin-bottom:.55rem;}
.hito p{color:var(--texto); font-size:1rem;}
.pacto{margin-top:1.8rem; background:var(--noche); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(1.4rem,3vw,3rem);}
@media (max-width:880px){ .pacto{grid-template-columns:1fr; gap:1.2rem;} }
.pacto h3{color:var(--noche-tx); font-size:1.8rem; margin-top:.9rem;}
.compromisos{display:grid; gap:.8rem;}
.compromiso{display:flex; gap:.9rem; align-items:flex-start; color:var(--noche-tx2); font-size:1.02rem;}
.compromiso b{color:var(--noche-tx);}
.compromiso .tic{flex:none; width:24px; height:24px; border-radius:50%; background:var(--lima);
  display:grid; place-items:center; margin-top:.15rem;}
.compromiso .tic svg{width:13px; height:13px; stroke:var(--sobre-lima); fill:none; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;}
.pend{display:inline; color:var(--ambar); border-bottom:1px dashed var(--ambar-l); font-weight:700;}

/* ---------- Servicios en rejilla visual ---------- */
.rejilla-serv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem;}
@media (max-width:1000px){ .rejilla-serv{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .rejilla-serv{grid-template-columns:1fr;} }
.card{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;}
.card:hover{transform:translateY(-7px); box-shadow:0 22px 50px color-mix(in srgb, var(--tinta) 15%, transparent);}
.card .lam{aspect-ratio:16/10; border-radius:0;}
.card .txt{padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1;}
.card h3{font-size:1.42rem; letter-spacing:-.025em;}
.card .desc{color:var(--texto); font-size:1rem;}
.card dl{display:grid; gap:.55rem; margin:.4rem 0 0; padding-top:.9rem; border-top:1px solid var(--linea);}
.card .fila{display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr); gap:.8rem; align-items:baseline;}
.card dt{font-family:'Bricolage Grotesque',sans-serif; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--suave); font-weight:700;}
.card dd{margin:0; font-size:.94rem; color:var(--tinta);}
@media (max-width:520px){ .card .fila{grid-template-columns:1fr; gap:.1rem;} }

/* ---------- Balanza visual ---------- */
.balanza{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem;}
@media (max-width:880px){ .balanza{grid-template-columns:1fr;} }
.panel{border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem); position:relative; overflow:hidden;}
.panel h3{font-size:1.9rem; margin:1rem 0 1.4rem;}
.panel ul{list-style:none; padding:0; margin:0; display:grid; gap:.85rem;}
.panel li{display:flex; gap:.8rem; align-items:flex-start; font-size:1.02rem; line-height:1.55;}
.panel .mk{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:.2rem;}
.panel .mk svg{width:12px; height:12px; fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;}
.panel--mal{background:var(--alerta-f); border:1px solid color-mix(in srgb, var(--alerta) 35%, transparent);}
.panel--mal h3{color:var(--alerta);} .panel--mal li{color:var(--texto);}
.panel--mal .mk{background:color-mix(in srgb, var(--alerta) 16%, transparent);} .panel--mal .mk svg{stroke:var(--alerta);}
.panel--bien{background:var(--noche);} .panel--bien h3{color:var(--noche-tx);} .panel--bien li{color:var(--noche-tx2);}
.panel--bien .mk{background:var(--lima);} .panel--bien .mk svg{stroke:var(--sobre-lima);}

/* ---------- Reseñas ---------- */
.resenas{background:var(--papel-2);}
.marco-resenas{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:clamp(1rem,3vw,1.8rem); overflow:hidden;}
.marco-resenas .ti-widget{max-width:100%;}

/* ---------- Trámites ---------- */
.tramites{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:.9rem;}
.tram{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:1.2rem 1.3rem;
  display:flex; gap:.9rem; align-items:flex-start; transition:transform .2s ease, border-color .25s ease;}
.tram:hover{transform:translateY(-4px); border-color:var(--olivo);}
.tram .pt{flex:none; width:9px; height:9px; border-radius:50%; background:var(--olivo); margin-top:.5rem;}
.tram p{font-size:.93rem; color:var(--suave); margin-top:.2rem;}

/* ---------- Dudas ---------- */
details{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); margin-bottom:.7rem;
  transition:border-color .25s ease;}
details[open]{border-color:var(--olivo);}
summary{cursor:pointer; list-style:none; padding:1.2rem 1.4rem; display:flex; gap:1.2rem;
  align-items:center; justify-content:space-between; min-height:var(--toque);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.12rem;
  color:var(--tinta); letter-spacing:-.018em;}
summary::-webkit-details-marker{display:none;}
summary .mas{flex:none; width:26px; height:26px; border-radius:50%; background:var(--papel-2);
  display:grid; place-items:center; color:var(--olivo-t); font-weight:800; font-size:1.1rem;
  transition:transform .3s ease, background-color .25s ease;}
details[open] summary .mas{transform:rotate(45deg); background:var(--olivo); color:var(--sobre-olivo);}
details .resp{padding:0 1.4rem 1.4rem; color:var(--texto); max-width:var(--texto-ancho); animation:revela .35s ease;}

/* ---------- Contacto ---------- */
.contacto{background:var(--noche); color:var(--noche-tx);}
.contacto h2{color:var(--noche-tx);}
.contacto .env{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start;}
@media (max-width:920px){ .contacto .env{grid-template-columns:1fr;} }
.contacto .plomo{color:var(--noche-tx2);}
.wa-bloque{margin-top:2rem; background:var(--noche-2); border:1px solid var(--noche-linea);
  border-radius:var(--r); padding:1.6rem;}
.wa-bloque h3{color:var(--noche-tx); font-size:1.4rem; margin-bottom:.6rem;}
.wa-bloque p{color:var(--noche-tx2); font-size:.98rem; margin-bottom:1.3rem;}
form{display:grid; gap:1.1rem; background:var(--noche-2); border:1px solid var(--noche-linea);
  border-radius:var(--r); padding:clamp(1.5rem,3vw,2.1rem);}
.campo{display:grid; gap:.4rem;}
label{font-family:'Bricolage Grotesque',sans-serif; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--noche-tx2); font-weight:700;}
input[type="text"],input[type="tel"],select,textarea{
  font:inherit; font-size:1rem; color:var(--noche-tx); background:transparent;
  border:1px solid var(--noche-linea); border-radius:10px; padding:.75rem .9rem;
  width:100%; min-height:var(--toque); transition:border-color .25s ease;}
input[type="text"]:hover,input[type="tel"]:hover,select:hover,textarea:hover,
input[type="text"]:focus,input[type="tel"]:focus,select:focus,textarea:focus{border-color:var(--lima);}
select option{background:var(--noche-2); color:var(--noche-tx);}
textarea{min-height:4.8rem; resize:vertical;}

/* Casilla del aviso: pequeña, discreta, y sigue siendo obligatoria */
.consent{display:flex; gap:.7rem; align-items:flex-start; padding:.3rem 0; min-height:44px;}
.consent input{position:absolute; opacity:0; width:1px; height:1px;}
.consent label{display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  text-transform:none; letter-spacing:0; font-weight:400; font-family:'Atkinson Hyperlegible',sans-serif;
  font-size:.86rem; line-height:1.5; color:var(--noche-tx2);}
.consent .box{flex:none; width:19px; height:19px; border-radius:5px; margin-top:.15rem;
  border:1.5px solid var(--noche-tx2); display:grid; place-items:center;
  transition:background-color .2s ease, border-color .2s ease;}
.consent .box svg{width:11px; height:11px; stroke:var(--sobre-lima); fill:none; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .18s ease;}
.consent input:checked + label .box{background:var(--lima); border-color:var(--lima);}
.consent input:checked + label .box svg{opacity:1;}
.consent input:focus-visible + label .box{outline:3px solid var(--lima); outline-offset:2px;}
.consent label a{color:var(--lima); display:inline-block; padding-block:.75rem;}
.consent.falta .box{border-color:var(--alerta-osc);}
.consent.falta label{color:var(--alerta-osc);}
.yerro{color:var(--alerta-osc); font-weight:700; font-size:.9rem;}
.yerro:empty{display:none;}
.pie-form{font-size:.88rem; color:var(--noche-tx2); line-height:1.55;}

/* ---------- Barra móvil ---------- */
.movil{position:fixed; inset-inline:0; bottom:0; z-index:90; display:none;
  background:color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--linea); padding:.7rem .9rem;}
.movil .btn{width:100%;}
/* La barra flotante solo esta en la portada. En el aviso reservaba 86 px de
   vacio al final para algo que no existe alli. */
@media (max-width:1099px){ .movil{display:block; padding-bottom:calc(.7rem + env(safe-area-inset-bottom));}
  body:not(.pagina-legal){padding-bottom:5.4rem;} }
/* El aviso no tiene barra flotante. Si se publica suelto, sin <body> propio, la
   clase no existe: el hueco se cierra tambien desde el propio aviso. */
@media (max-width:1099px){ body:has(.aviso-portada){padding-bottom:0;} }

/* ---------- Pie ---------- */
.pie{background:var(--papel-2); border-top:1px solid var(--linea); padding:3.6rem 0 2.2rem;
  font-size:.95rem; color:var(--suave);}
.pie-cols{display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3, minmax(0,1fr));
  gap:2.6rem 2.4rem;}
@media (max-width:1080px){ .pie-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.pie-cols > div:first-child p{max-width:40ch;}
.pie-datos{margin-top:1.4rem; line-height:1.75;}
.pie-legal-txt p{margin:0;}
@media (max-width:800px){ .pie-cols{grid-template-columns:1fr; gap:2rem;} }
.pie h4{font-size:1.08rem; margin-bottom:1rem;}
.pie ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem;}
.pie a{color:var(--suave); text-decoration:none;}
.pie ul a{display:inline-block; padding:.6rem 0;}
.pie a:hover{color:var(--olivo-t);}
.pie-legal{border-top:1px solid var(--linea); margin-top:2.6rem; padding-top:1.5rem;
  font-size:.87rem; line-height:1.7;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.6rem;}
.pie-legal p{margin:0;}
@media (max-width:640px){ .pie-legal{justify-content:center; text-align:center;} }
/* Conmutador de color. 9-sep-2026: era una pastilla con la frase «Colores:
   automaticos segun la hora», que a Santos le resultaba poco estetica. Pasa a
   icono. Lo que NO cambia es la accesibilidad: la frase sigue existiendo en
   `aria-label` y en `title`, asi que un lector de pantalla y el raton siguen
   diciendo lo mismo que antes; lo que se retira es el bulto visual.
   El area tocable se mantiene en 44 px, que es el minimo del sitio. */
.luz-pie{background:none; border:1px solid var(--linea); border-radius:100px;
  padding:0; margin:0; cursor:pointer; width:44px; height:44px; min-height:44px;
  /* El pie es una fila flex que envuelve. Sin esto el boton es encogible y en un
     ancho justo se aplasta por debajo de los 44 px, que es el minimo tocable del
     sitio. Medido: con `flex-shrink:1` heredado llegaba a 21 px de ancho. */
  flex:0 0 auto;
  color:var(--suave); display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;}
.luz-pie:hover{color:var(--olivo-t); border-color:var(--olivo); background:var(--papel-2);}
.luz-pie svg{width:19px; height:19px; display:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
/* El icono lo elige el MODO elegido, no la hora: en «auto» el reloj se queda
   aunque el sitio se haya puesto oscuro, porque es lo que la persona escogio. */
.luz-pie[data-modo="auto"] .i-auto,
.luz-pie[data-modo="dia"] .i-dia,
.luz-pie[data-modo="noche"] .i-noche{display:block;}
@media (prefers-reduced-motion: reduce){ .luz-pie{transition:none;} }

/* ---------- Aviso de privacidad ----------
   Es un documento de 2,153 palabras que la gente abre con una duda concreta.
   Por eso: indice que sigue al lector, apartados numerados, los derechos ARCO
   en tarjetas y la tabla convertida en fichas en movil. El texto no se toca. */

.lectura{position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:120;
  background:color-mix(in srgb, var(--linea) 60%, transparent);}
.lectura i{display:block; height:100%; width:0; background:var(--olivo);
  transition:width .12s linear;}

.aviso-portada{background:var(--papel-2); border-block-end:1px solid var(--linea);
  padding:clamp(2.2rem,5vw,4rem) 0 clamp(1.8rem,4vw,3rem);}
.aviso-portada h1{font-size:clamp(1.9rem,1.2rem+2.6vw,3.2rem); margin:1rem 0 .7rem;}
.aviso-firma{color:var(--suave); font-size:1.02rem;}
.aviso-ficha{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.8rem 0 0; padding:0;}
.aviso-ficha div{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:.75rem 1.1rem; min-width:9.5rem;}
.aviso-ficha dt{font-family:'Bricolage Grotesque',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--suave); margin:0;}
.aviso-ficha dd{margin:.25rem 0 0; color:var(--tinta); font-weight:700; font-size:1.02rem;}

.aviso-cuerpo{display:grid; grid-template-columns:15.5rem minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
  padding:clamp(2rem,4vw,3.2rem) 0 clamp(3rem,6vw,5rem);}
@media (max-width:900px){ .aviso-cuerpo{grid-template-columns:minmax(0,1fr); gap:1.4rem;} }

.aviso-indice{position:sticky; inset-block-start:5.2rem; max-height:calc(100vh - 7rem); min-width:0;
  overflow:auto; overscroll-behavior:contain;
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--r); padding:1.1rem;}
.aviso-indice-t{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--suave); margin-bottom:.7rem;}
.aviso-indice ol{list-style:none; margin:0; padding:0; counter-reset:ap;}
.aviso-indice li{margin:0;}
.aviso-indice a{display:flex; align-items:center; min-height:44px; padding:.35rem .6rem;
  font-size:.9rem; line-height:1.35; color:var(--texto); text-decoration:none;
  border-inline-start:2px solid transparent; border-radius:0 8px 8px 0;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;}
.aviso-indice a:hover{color:var(--olivo-t); background:var(--papel);}
.aviso-indice a[aria-current="true"]{color:var(--olivo-t); font-weight:700;
  border-inline-start-color:var(--olivo); background:var(--papel);}
@media (max-width:900px){
  /* En movil el indice es una tira que se desliza: 13 apartados en columna
     dejarian el documento a media pantalla de distancia. */
  .aviso-indice{position:static; max-height:none; overflow-x:auto; overflow-y:hidden;
    padding:.8rem .9rem; -webkit-overflow-scrolling:touch;}
  .aviso-indice ol{display:flex; flex-wrap:nowrap; gap:.4rem;}
  .aviso-indice a{white-space:nowrap; border:1px solid var(--linea); border-radius:100px;
    background:var(--papel); padding:.4rem .9rem;}
  .aviso-indice a[aria-current="true"]{border-color:var(--olivo);}
}

.aviso-texto{min-width:0;}
.aviso-entrada{font-size:1.06rem;}
.aviso-entrada p{margin-bottom:1rem; max-width:70ch;}
.apartado{scroll-margin-block-start:6rem; padding-block-start:.6rem;}
.apartado + .apartado{border-block-start:1px solid var(--linea); margin-block-start:2.4rem; padding-block-start:2.4rem;}
.apartado h2{display:flex; align-items:baseline; gap:.8rem; margin-bottom:1rem;
  font-size:clamp(1.25rem,1.05rem+.9vw,1.7rem);}
.apartado h2 .num{flex:none; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:.78rem; letter-spacing:.06em; color:var(--olivo-t); background:var(--papel-2);
  border:1px solid var(--linea); border-radius:100px; padding:.28rem .7rem;
  position:relative; inset-block-start:-.18rem;}
.apartado h3{font-size:1.08rem; margin:1.6rem 0 .6rem;}
.apartado p,.apartado li{max-width:70ch; margin-bottom:.9rem; color:var(--texto);}
.apartado ul{padding-inline-start:1.2rem;}
.apartado li{margin-bottom:.5rem;}
.apartado strong{color:var(--tinta);}
.apartado a{overflow-wrap:anywhere;}
.apartado > *:last-child{margin-block-end:0;}

/* Tipografia justificada, como se compone un documento legal en Mexico.
   Va con particion de palabras: justificar sin partir abre rios de espacio en
   columna estrecha, y a 390 px el rio se come la lectura. La particion necesita
   que el idioma este declarado, y por eso <main> lleva lang="es". */
.aviso-entrada p,.apartado p,.categoria p,.apartado li{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:7 4 3;}
/* Ni los enlaces ni los nombres propios se parten: la particion metio un guion
   dentro de aviso@planetainmobiliario.com.mx y un correo partido con guion deja
   de ser ese correo. */
.apartado a,.apartado strong,.apartado code,.apartado span{
  hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
/* Fuera de la prosa corrida no se justifica: en lineas cortas queda peor. */
ul.arco .arco-d,.apartado td,.apartado th,.aviso-ficha dd,.aviso-firma{
  text-align:start; hyphens:manual;}

/* Los cinco derechos ARCO: cada uno es una accion que la persona puede pedir.
   El titulo y su articulo van en un solo renglon que fluye. La version anterior
   dejaba small y span en display:block heredado de una regla vieja, y el
   parentesis, el articulo y los dos puntos caian en renglones distintos. */
ul.arco{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.8rem; padding:0; margin:1rem 0 1.4rem;}
ul.arco li{display:flex; flex-direction:column; gap:.45rem; margin:0; max-width:none;
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.1rem 1.2rem; transition:border-color .25s ease, transform .2s ease;}
ul.arco li:hover{border-color:var(--olivo); transform:translateY(-3px);}
ul.arco .arco-t{margin:0; max-width:none; line-height:1.28;}
ul.arco .arco-t b{font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.1rem; color:var(--tinta); letter-spacing:-.015em;}
ul.arco .arco-t small{font-size:.84rem; font-weight:700; color:var(--olivo-t);}
ul.arco .arco-d{margin:0; max-width:none; color:var(--texto); font-size:.95rem; line-height:1.5;}

/* Las cuatro categorias de datos venian sueltas tras el parrafo, sin bloque
   propio: en pantalla eran un muro. Cada una en su ficha. */
.categoria{background:var(--papel-2); border-inline-start:3px solid var(--linea-2);
  border-radius:0 var(--r) var(--r) 0; padding:1rem 1.2rem; margin:0 0 .8rem;
  transition:border-color .25s ease;}
.categoria:hover{border-inline-start-color:var(--olivo);}
.categoria b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.02rem; color:var(--tinta); margin-bottom:.4rem; letter-spacing:-.01em;}
.categoria p{margin:0; font-size:.97rem;}

/* Las 55 citas legales del documento van marcadas: se distinguen del texto
   corrido y se ve de un vistazo en que se apoya cada afirmacion. */
.apartado p > span,.apartado li > span,.apartado td span,.categoria p span{
  display:inline; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:.86em; color:var(--olivo-t); background:color-mix(in srgb, var(--olivo) 10%, transparent);
  border-radius:4px; hyphens:manual;
  /* El area tintada se pinta con sombra, no con relleno: el relleno ocupa sitio y
     dejaba un hueco antes de la coma que sigue a cada cita. */
  box-shadow:0 0 0 .2em color-mix(in srgb, var(--olivo) 10%, transparent);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;}
/* dentro de la tarjeta, la cita ya va en olivo: no necesita distintivo */
ul.arco small span,.aviso-portada .rot{background:none; padding:0; margin:0; font:inherit; color:inherit;}

/* La tabla de transferencias. En movil cada fila se lee como ficha: desplazarse
   de lado en un telefono para leer un cuadro legal es pedir que no se lea. */
.tabla-env{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2rem 0 2rem;}
.apartado table{width:100%; min-width:0; border-collapse:collapse; font-size:.95rem;}
.apartado th,.apartado td{text-align:start; padding:.85rem .95rem;
  border-block-end:1px solid var(--linea); vertical-align:top; color:var(--texto);}
.apartado th{background:var(--papel-2); color:var(--tinta);
  font-family:'Bricolage Grotesque',sans-serif; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap;}
@media (max-width:720px){
  .tabla-env{overflow:visible;}
  .apartado table,.apartado tbody,.apartado tr,.apartado td{display:block; width:100%;}
  .apartado thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
  .apartado tr{background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--r);
    padding:.4rem .2rem; margin-bottom:.8rem;}
  .apartado td{border:0; padding:.6rem .9rem;}
  .apartado td::before{content:attr(data-col); display:block;
    font-family:'Bricolage Grotesque',sans-serif; font-size:.66rem; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:var(--suave); margin-bottom:.25rem;}
}

.arriba{position:fixed; inset-block-end:1.2rem; inset-inline-end:1.2rem; z-index:95;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--linea-2);
  background:var(--papel); color:var(--tinta); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 26px color-mix(in srgb, var(--tinta) 16%, transparent);
  transition:background-color .2s ease, color .2s ease, transform .18s ease;}
.arriba:hover{background:var(--tinta); color:var(--papel); transform:translateY(-3px);}
.arriba svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:1099px){ .arriba{inset-block-end:1.2rem;} }

.volver{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-weight:700;
  font-family:'Bricolage Grotesque',sans-serif; text-decoration:none; color:var(--olivo-t);}

/* ---------- Articulos rescatados del WordPress ----------
   Tres direcciones que Google ya tiene indexadas y que hablan de INFONAVIT,
   intestados y herencias. Se conservan tal cual estaban, con su texto intacto. */
.articulo{padding:clamp(2rem,5vw,3.6rem) 0 clamp(3rem,6vw,5rem);}
.articulo .env{max-width:min(100% - 2.2rem, 46rem);}
.art-cab{margin-bottom:clamp(1.6rem,3vw,2.4rem);}
.art-cab h1{font-size:clamp(1.8rem,1.2rem+2.2vw,2.9rem); margin:.9rem 0 .8rem;}
.art-cab .art-datos{color:var(--suave); font-size:.92rem;}
.art-cuerpo p,.art-cuerpo li{color:var(--texto); font-size:1.06rem; line-height:1.75;
  margin-bottom:1.1rem; text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;}
.art-cuerpo a,.art-cuerpo strong{hyphens:manual; -webkit-hyphens:manual;}
.art-cuerpo h2{font-size:clamp(1.3rem,1.1rem+.9vw,1.7rem); margin:2.2rem 0 .8rem;}
.art-cuerpo h3{font-size:1.1rem; margin:1.6rem 0 .6rem;}
.art-cuerpo ul,.art-cuerpo ol{padding-inline-start:1.3rem; margin-bottom:1.2rem;}
.art-cuerpo li{margin-bottom:.6rem;}
.art-cuerpo strong{color:var(--tinta);}
.art-pie{margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;}
.art-otros{background:var(--papel-2); border-block-start:1px solid var(--linea);
  padding:clamp(2rem,4vw,3rem) 0;}
.art-otros h2{font-size:1.4rem; margin-bottom:1.2rem;}
.art-lista{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem;
  list-style:none; padding:0; margin:0;}
.art-lista li{margin:0;}
.art-lista a{display:block; height:100%; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r); padding:1.1rem 1.2rem; text-decoration:none; color:var(--tinta);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; line-height:1.3;
  transition:border-color .25s ease, transform .2s ease;}
.art-lista a:hover{border-color:var(--olivo); transform:translateY(-3px);}

/* ---------- Deslizador de reseñas, propio: el del widget lo movía un script ajeno ---------- */
.marco-resenas .ti-reviews-container{overflow:hidden;}
/* El carril media 16 px mas que la ventana que lo recorta y cada salto arrastraba
   ese error hasta dejar fichas fuera de cuadro. La culpa es de
   @media (min-width:1024px){.ti-widget.ti-goog .ti-reviews-container-wrapper{margin:0 8px !important}}
   de la hoja del widget: tres clases con !important. Para ganarle hay que subir
   la especificidad, no repetir !important, y por eso todo lo que sigue lleva
   .ti-widget.ti-goog delante: cuatro clases contra tres. */
.marco-resenas .ti-widget.ti-goog .ti-reviews-container-wrapper{margin:0 !important;
  padding-inline:0 !important; display:flex !important; flex-wrap:nowrap !important;
  /* El carril traia overflow:hidden y se recortaba a si mismo: al desplazarlo, el
     recorte viajaba con el, y de la primera pagina en adelante no se pintaba nada.
     Quien recorta es la ventana, .ti-reviews-container, no el carril. */
  overflow:visible !important;
  transition:transform .55s cubic-bezier(.22,.68,.3,1); will-change:transform;}
/* El widget deja 3 columnas fijas en todos los anchos: de eso se encargaba su script.
   A 375 px cada reseña quedaba en 107 px, ilegible.
   --por-vista viaja junto al ancho de la ficha: el guion lo lee en vez de medir y adivinar. */
.marco-resenas{--por-vista:1;}
.marco-resenas .ti-widget.ti-goog .ti-review-item{flex:0 0 100% !important; max-width:100% !important; min-width:0 !important;}
@media (min-width:640px){ .marco-resenas{--por-vista:2;}
  .marco-resenas .ti-widget.ti-goog .ti-review-item{flex:0 0 50% !important; max-width:50% !important;} }
@media (min-width:1000px){ .marco-resenas{--por-vista:3;}
  .marco-resenas .ti-widget.ti-goog .ti-review-item{flex:0 0 33.3333% !important; max-width:33.3333% !important;} }
@media (prefers-reduced-motion: reduce){ .marco-resenas .ti-reviews-container-wrapper{transition:none;} }
.marco-resenas .ti-review-item{scroll-snap-align:start;}
.marco-resenas .ti-controls{position:static !important; height:auto !important;}
.marco-resenas .ti-prev,.marco-resenas .ti-next{display:none !important;}
/* Restos del widget que sin su script quedan muertos o mintiendo:
   la barra de desplazamiento propia, que ademas duplica mis puntos;
   el «leer mas», que es un hueco vacio de 8 px que ya no abre nada;
   y el recorte a cuatro lineas, que cortaba dos reseñas de nueve sin
   manera de leerlas enteras. El texto completo ya estaba en el HTML. */
.marco-resenas .ti-widget.ti-goog .ti-controls-line{display:none !important;}
.marco-resenas .ti-widget.ti-goog .ti-read-more{display:none !important;}
.marco-resenas .ti-widget.ti-goog .ti-review-content{height:auto !important; max-height:none !important;
  display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important;}
.res-mandos{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.1rem;}
.res-flecha{width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--linea-2);
  background:var(--papel); color:var(--tinta); cursor:pointer; display:grid; place-items:center;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease;}
.res-flecha:hover:not(:disabled){background:var(--tinta); color:var(--papel); border-color:var(--tinta); transform:translateY(-2px);}
.res-flecha:disabled{opacity:.35; cursor:default;}
.res-flecha svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;}
.res-puntos{display:flex; gap:.5rem; align-items:center;}
.res-punto{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--linea-2);
  cursor:pointer; transition:background-color .25s ease, width .25s ease;}
.res-punto[aria-current="true"]{background:var(--olivo); width:26px; border-radius:100px;}
.res-mandos .res-punto-toque{width:44px; height:44px; display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer;}

/* ---------- Ajustes de móvil. Van al final a propósito: a igual
     especificidad gana la última regla del archivo. ---------- */
@media (max-width:560px){
  .logo .plaza{display:none;} .logo .marca{height:32px;}
  .btn{font-size:.94rem; padding:.72rem 1.1rem; gap:.45rem; min-height:48px;}
  .cab .btn{padding:.68rem 1rem; font-size:.9rem;}
  .wa{width:19px; height:19px;}
  .acciones{gap:.6rem;}
  .acciones .btn{flex:1 1 100%;}
  /* El dictamen tenía menos ancho útil y el botón se partía en tres líneas */
  .dictamen{padding:1.2rem 1.1rem;}
  .dictamen .acciones .btn{font-size:.88rem; padding:.7rem .85rem; gap:.4rem;}
  .op{padding:1.1rem 1rem;}
  .paso, .hito{padding:1.4rem 1.2rem;}
  .panel{padding:1.4rem 1.2rem;}
  .pacto{padding:1.4rem 1.2rem;}
  .acuerdo{padding:1.3rem 1.1rem;}
}

/* Lo que se anade a la hoja del sitio y no viene del prototipo.

   `estilo.css` se genera del bloque <style> del prototipo, que es el documento de
   diseno de la portada. Lo de aqui no es diseno de la portada: es la banda legal
   que va en todas las paginas, la forma de las dos paginas legales sin indice y la
   fecha de los articulos. Vive aparte para no meter en el prototipo reglas que ese
   documento no usa, y `produccion.py` lo anade al final de la hoja.

   El marcado de la banda NO se escribe aqui: sale del `D013` del expediente, y sus
   clases son las que Tomas dejo puestas para no rehacer nada. `estilo.css` ya trae
   `aviso-portada`, `aviso-cuerpo`, `aviso-texto`, `apartado`, `num`, `rot` y `env`. */

/* ---------- la banda ---------- */

/* Se pinta con el HTML, no con JavaScript: es la condicion que no admite discusion
   del encargo. El guion solo la RETIRA cuando ya hay una decision guardada, y para
   eso el atributo `data-aviso` lo pone un guion de dos lineas en la cabecera, antes
   del primer pintado, para que no parpadee.

   🔴 OJO CON LOS SELECTORES. El marcado del `D013` son DOS parrafos hermanos: el
   texto, sin clase, y las acciones, con `class="aviso-banda-acc"`. Un `.aviso-banda
   > p` alcanza a los dos, y ademas le GANA por especificidad a `.aviso-banda-acc`,
   que es una sola clase. Escrito asi, el tope de ancho y el `flex` del texto se le
   aplicaban tambien a los botones y ninguna regla de acciones mandaba de verdad.
   Por eso el texto va con `:not([class])` y las acciones con el hijo directo. */
.aviso-banda{position:fixed; inset-inline:0; inset-block-end:0; z-index:200;
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 2rem;
  /* Centra el contenido al mismo ancho que `.env` sin necesitar un envoltorio:
     el relleno lateral absorbe lo que sobra de los 1280 px del sitio. */
  padding:.8rem max(1.1rem, calc((100% - var(--ancho)) / 2))
          calc(.8rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--papel) 96%, transparent);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-block-start:1px solid color-mix(in srgb, var(--olivo) 40%, var(--linea));
  box-shadow:0 -8px 26px color-mix(in srgb, var(--tinta) 13%, transparent);
  font-size:.82rem; line-height:1.55; color:var(--texto);}

/* El texto ocupa lo que queda y las acciones se van a la derecha. En cuanto no
   caben en una linea, el `flex-wrap` las baja solo: no hace falta punto de corte.
   El 26rem es el minimo por debajo del cual el texto se parte en demasiadas lineas
   y compensa mas bajar los botones. */
.aviso-banda > p:not([class]){margin:0; flex:1 1 26rem; max-width:78ch;
  text-wrap:pretty;}
.aviso-banda strong{color:var(--tinta); font-weight:700;}

.aviso-banda > .aviso-banda-acc{display:flex; flex-wrap:wrap; align-items:center;
  gap:.45rem .9rem; margin:0; max-width:none; flex:0 0 auto;}

/* Los botones del sitio son pastillas de 52 px pensadas para la portada, donde son
   la accion principal. Aqui no lo son: aqui la accion principal es leer. Bajan a
   31 px en escritorio y a 42 en tactil, que es donde manda el dedo. */
.aviso-banda-acc .btn{min-height:0; padding:.42rem 1.05rem; font-size:.82rem;
  letter-spacing:0; border-width:1px; white-space:nowrap;
  background:var(--olivo); color:var(--sobre-olivo); border-color:var(--olivo);}
.aviso-banda-acc .btn:hover{transform:translateY(-1px);}
.aviso-banda-acc .btn-sec{background:transparent; color:var(--tinta);
  border-color:var(--linea-2);}
.aviso-banda-acc .btn-sec:hover{border-color:var(--olivo); color:var(--olivo-t);}
.aviso-banda-acc a{color:var(--suave); font-size:.78rem; text-decoration:none;
  border-block-end:1px solid var(--linea-2); padding-block:.3rem;}
.aviso-banda-acc a:hover{color:var(--olivo-t); border-color:currentColor;}
/* El anillo de foco NO se redefine aqui. La hoja del sitio ya trae un
   `:focus-visible` global de 3 px con 3 de separacion, y la version que yo habia
   puesto era de 2 y 2: mas fina que la del resto del sitio y sin ninguna razon.
   Redefinir un estilo de accesibilidad para empeorarlo es peor que no tocarlo. */

/* Tableta y pantallas estrechas: el texto pasa a ocupar su propia fila y las
   acciones la siguiente, con los botones medidos por su texto. Estirarlos al ancho
   de la pantalla aqui dejaba pastillas de 315 px: enormes y sin motivo. */
@media (max-width:860px){
  .aviso-banda{gap:.55rem 1rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    font-size:.79rem; line-height:1.48;}
  .aviso-banda > p:not([class]){flex:1 1 100%;}
  .aviso-banda > .aviso-banda-acc{flex:1 1 100%; gap:.45rem .9rem;}
  .aviso-banda-acc .btn{min-height:42px; padding:.42rem 1rem; font-size:.79rem;}
}

/* Movil de verdad. Aqui los cuatro elementos NO caben en una fila: con `flex-wrap`
   los dos enlaces se colaban entre los botones, que se quedaban en 91 px y partian
   «Rechazar la publicidad» en TRES lineas, con un boton mas alto que el otro. La
   rejilla de dos columnas fija quien va en cada fila y alinea los enlaces bajo los
   botones. El tope de ancho evita que en un movil de 560 px salgan de 259 px. */
@media (max-width:560px){
  .aviso-banda{font-size:.77rem; line-height:1.45;
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));}
  /* Tope de altura SOLO para el texto, no para la banda entera: asi los botones
     siguen siempre a la vista y lo unico que se desplaza es la lectura. En un
     movil normal no se activa nunca; existe por las pantallas cortas de verdad,
     donde el aviso llegaba a comerse cuatro decimas de la altura util. */
  .aviso-banda > p:not([class]){max-height:30vh; overflow-y:auto;
    overscroll-behavior:contain;}
  .aviso-banda > .aviso-banda-acc{display:grid; grid-template-columns:1fr 1fr;
    gap:.45rem .6rem; align-items:center; max-width:26rem;}
  .aviso-banda-acc .btn{width:100%; padding:.4rem .5rem; font-size:.78rem;
    white-space:nowrap;}
  .aviso-banda-acc a{justify-self:start; font-size:.75rem; padding-block:.25rem;}
}
/* Y con el dedo, el area de toque manda sobre la estetica. */
@media (hover:none){ .aviso-banda-acc .btn{min-height:42px;} }
/* Quien pide menos movimiento no lo pide a medias: la hoja del sitio ya apaga las
   transiciones, pero el salto de un pixel al pasar por encima seguiria ocurriendo,
   solo que de golpe. */
@media (prefers-reduced-motion: reduce){ .aviso-banda-acc .btn:hover{transform:none;} }

/* Mientras la banda pide una decision no hay nada mas fijo abajo.
   Dos barras superpuestas en un movil se comen la pantalla, y el boton redondo
   de «volver arriba» del aviso caia justo encima de los botones de la banda.
   Las dos vuelven en cuanto se decide, que es un solo clic. */
html:not([data-aviso]) .arriba{display:none;}
@media (max-width:1099px){ html:not([data-aviso]) .movil{display:none;} }

/* El hueco que reserva el propio guion, medido de la banda ya pintada: asi el
   pie no se queda debajo de ella. Sin decision no hay variable y no hay hueco. */
html:not([data-aviso]) body{padding-block-end:var(--banda-alto, 0);}

/* ---------- las paginas legales sin indice lateral ---------- */

/* `.aviso-cuerpo` es una rejilla de dos columnas porque el aviso integral lleva
   su indice a la izquierda. El simplificado y la politica de cookies NO lo llevan,
   y su unica columna caia en el carril de 15,5 rem: el texto salia en una tira
   estrecha. La clase la pone la construccion en el <main>, no el fragmento:
   los fragmentos son de Tomas y no se editan a mano. */
.legal-simple .aviso-cuerpo{grid-template-columns:minmax(0,1fr);}
.legal-simple .aviso-texto{max-width:var(--texto-ancho); margin-inline:auto;}

/* El contenedor del simplificado no aporta caja propia: solo agrupa. */
.aviso-corto{display:block;}

/* ---------- la fecha de los articulos ---------- */

/* La traia la ficha del WordPress, junto a dos enlaces muertos: uno al formulario
   de comentarios, que en un sitio estatico no existe, y otro al archivo de autor,
   que hoy da 404. La ficha se retira en `articulos.py` y la fecha se vuelve a
   pintar aqui, limpia y con <time>, que es lo unico de ella que valia. */
.art-fecha{margin:.6rem 0 0; font-size:.85rem; color:var(--suave);
  font-family:'Bricolage Grotesque',sans-serif; letter-spacing:.02em;}