/* ===== Fondos hechos a mano para las zonas planas + texto en movimiento (sin mover la página al hacer scroll) ===== */

/* --- texto dividido en letras (textfx.js) --- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .16em;margin:-.08em -.03em -.16em}
.c{display:inline-block;will-change:transform}
.hl{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 90%/0% .42em;transition:background-size .9s cubic-bezier(.2,.8,.2,1);color:inherit;padding:0 .08em;margin:0 -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl.on{background-size:100% .42em}
.sale .hl,.about .hl,.services .hl{color:#fff;background-size:0% .1em;background-position:0 98%;transition:color .6s,background-size .9s cubic-bezier(.2,.8,.2,1)}
.sale .hl.on,.about .hl.on,.services .hl.on{color:var(--yellow);background-size:100% .1em}
.rate-n,.stat dt,.lic-fee b,.pp-main b{font-variant-numeric:tabular-nums}

/* anotaciones a mano con flecha */
.hand{position:absolute;display:flex;align-items:center;gap:6px;font:700 clamp(1.5rem,2.2vw,2rem)/1 var(--script);rotate:-5deg;pointer-events:none;z-index:2;color:var(--ink)}
.hand svg{width:70px;height:54px;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sale .hand{color:var(--yellow)}
.hand-rent{right:10px;top:12px;flex-direction:row-reverse}
.hand-rent svg{transform:scaleY(-1) scaleX(-1);margin-top:-6px}
.incl-wrap{height:0}

.hand-sale{right:8px;top:-62px}
@media (max-width:1180px){.hand{display:none}}

/* --- fondos --- */
.rent{background-color:var(--paper);background-image:url(assets/contour.svg),url(assets/grain.svg);background-repeat:no-repeat,repeat;background-position:right -210px top 120px,0 0;background-size:900px auto,220px;overflow:hidden}
.rent::before{content:"";position:absolute;left:5%;top:-12px;width:230px;height:50px;background:rgba(255,217,59,.94);rotate:-4deg;clip-path:polygon(0 0,100% 0,98% 22%,100% 48%,97% 74%,100% 100%,0 100%,3% 74%,0 48%,2% 22%);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.assistant{background-color:var(--paper);background-image:url(assets/doodles.svg);background-size:340px;position:relative}
.faq{background-color:var(--paper);background-image:radial-gradient(rgba(14,14,12,.2) 1.3px,transparent 1.5px);background-size:26px 26px;position:relative;overflow:hidden}
.faq::after{content:"?";position:absolute;right:3%;top:10px;font:900 24rem/1 var(--display);font-stretch:125%;color:transparent;-webkit-text-stroke:3px var(--yellow);rotate:12deg;pointer-events:none;opacity:.85}
.faq .wrap{position:relative;z-index:1}
.faq details{background:rgba(255,255,255,.92)}
.voices{background-color:var(--concrete);background-image:url(assets/grain.svg);position:relative;overflow:hidden}
.voices::before{content:"\201C";position:absolute;left:2%;top:-60px;font:900 26rem/1 var(--display);color:transparent;-webkit-text-stroke:3px rgba(14,14,12,.14);pointer-events:none}
.voices .wrap{position:relative;z-index:1}
.voices figure{position:relative;box-shadow:6px 8px 0 rgba(14,14,12,.12)}
.voices figure::before{content:"";position:absolute;top:-16px;left:50%;width:96px;height:30px;margin-left:-48px;background:rgba(255,217,59,.94);rotate:-3deg;clip-path:polygon(0 0,100% 0,97% 30%,100% 55%,96% 80%,100% 100%,0 100%,3% 78%,0 52%,3% 28%)}
.voices figure:nth-child(1){rotate:-1.4deg}.voices figure:nth-child(2){rotate:.9deg}.voices figure:nth-child(3){rotate:-.7deg}
.route{background-color:var(--concrete);background-image:url(assets/grain.svg),repeating-linear-gradient(0deg,rgba(14,14,12,.06) 0 1px,transparent 1px 72px),repeating-linear-gradient(90deg,rgba(14,14,12,.06) 0 1px,transparent 1px 72px)}
.book-grid .form{background:#fff}
@media (max-width:760px){.faq::after{font-size:15rem;opacity:.5}.voices::before{font-size:16rem}.rent{background-size:560px auto,220px;background-position:right -260px top 190px,0 0}}
@media (prefers-reduced-motion:reduce){.hl{transition:none;background-size:100% .42em}}

/* ===== v9: preguntas frecuentes, testimonios en papel y asistente en tarjetas de color ===== */

/* --- FAQ: fondo amarillo para que las tarjetas blancas resalten --- */
.faq{background-color:var(--yellow);background-image:radial-gradient(rgba(14,14,12,.24) 1.6px,transparent 1.8px);background-size:26px 26px}
.faq::after{color:rgba(255,255,255,.4);-webkit-text-stroke:3px var(--ink);opacity:1}
.faq .kicker{color:var(--ink)}
.faq .muted{color:#2b2a23}
.faq-list{counter-reset:q}
.faq details{counter-increment:q;position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);padding:0 20px 0 66px;transition:translate .2s,box-shadow .2s,background .25s,color .25s}
.faq details::before{content:counter(q);position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--ink);color:var(--ink);display:grid;place-items:center;font:900 1rem var(--display)}
.faq details:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--ink)}
.faq details[open]{background:var(--ink);color:#fff;box-shadow:5px 5px 0 #fff;border-color:var(--ink)}
.faq details[open] summary::after{content:"×";color:var(--yellow)}
.faq details[open] p{color:#E9E6D8;animation:faqIn .4s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{padding:20px 34px 20px 0;font-size:1.06rem}
.faq summary::after{font-weight:700;font-size:1.9rem;line-height:1}

/* --- testimonios: papeles de verdad (libreta, nota adhesiva, ficha) --- */
.voices figure{border:0;border-radius:3px;padding:30px 24px 24px;gap:14px;background:#FFFDF6;box-shadow:6px 8px 0 rgba(14,14,12,.14)}
.voices blockquote{font:700 clamp(1.45rem,2.1vw,1.7rem)/32px var(--script);color:#1f2a44;letter-spacing:.01em;position:relative}
.voices blockquote::before{content:"\201C";display:block;font:900 5rem/.6 var(--display);color:var(--yellow);-webkit-text-stroke:2px var(--ink);margin-bottom:6px;height:36px}
.voices figcaption{font:700 1.5rem/1 var(--script);color:var(--ink);align-self:flex-start;padding:0 4px;background:linear-gradient(var(--yellow),var(--yellow)) 0 92%/100% .38em no-repeat}
/* 1 · libreta con renglones y margen rojo */
.voices figure:nth-child(1){padding-left:64px;background:linear-gradient(90deg,transparent 48px,#e0848a 48px 50px,transparent 50px),repeating-linear-gradient(#FFFDF6 0 31px,#c9d4ea 31px 32px);background-position:0 0,0 14px}
.voices figure:nth-child(1)::after{content:"";position:absolute;left:14px;top:46px;width:16px;height:16px;border-radius:50%;background:#d8d2c0;box-shadow:0 110px 0 #d8d2c0,0 220px 0 #d8d2c0}
/* 2 · nota adhesiva amarilla con esquina doblada */
.voices figure:nth-child(2){background:#FFE873;box-shadow:5px 8px 12px rgba(14,14,12,.18)}
.voices figure:nth-child(2)::after{content:"";position:absolute;right:0;bottom:0;width:34px;height:34px;background:linear-gradient(135deg,#f2cf3f 50%,#d8d4c6 50%);box-shadow:-3px -3px 6px rgba(14,14,12,.12)}
.voices figure:nth-child(2) blockquote::before{color:#fff}
.voices figure:nth-child(2) figcaption{background:linear-gradient(#fff,#fff) 0 92%/100% .38em no-repeat}
/* 3 · ficha con encabezado rojo */
.voices figure:nth-child(3){background:repeating-linear-gradient(#fff 0 31px,#cfd9ee 31px 32px);background-position:0 44px;padding-top:56px}
.voices figure:nth-child(3)::after{content:"";position:absolute;left:0;right:0;top:36px;height:3px;background:#e0848a}
.voices figure.writing blockquote{will-change:clip-path}

/* --- asistente: texto fuera del papel tapiz, en tarjetas de color --- */
.as-grid>div:first-child{position:relative}
.as-grid>div:first-child::after{content:"24/7";position:absolute;right:0;top:-34px;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:900 1.25rem var(--display);color:var(--ink);rotate:8deg;animation:wob 3.4s ease-in-out infinite alternate}
@keyframes wob{to{rotate:-6deg}}
.as-grid .muted{background:var(--paper);border-left:8px solid var(--yellow);padding:12px 14px;border-radius:0 8px 8px 0;color:#3B392F}
.as-list{counter-reset:as;gap:14px;margin:30px 0}
.as-list li{counter-increment:as;position:relative;padding:16px 18px 16px 72px;border:2.5px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);font-weight:700;line-height:1.35;background:#fff;transition:translate .2s,box-shadow .2s}
.as-list li::before{content:counter(as);left:16px;top:50%;translate:0 -50%;position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:900 1.2rem var(--display);background:var(--ink);color:var(--yellow)}
.as-list li:nth-child(1){background:var(--yellow);rotate:-.8deg}
.as-list li:nth-child(2){background:#fff;rotate:.7deg}
.as-list li:nth-child(3){background:var(--wa);color:#fff;rotate:-.5deg}
.as-list li:nth-child(3)::before{background:#fff;color:var(--wa-dark)}
.as-list li:nth-child(4){background:var(--ink);color:#fff;rotate:.8deg}
.as-list li:hover{translate:-2px -3px;rotate:0deg;box-shadow:8px 8px 0 var(--ink)}
.try{font-size:1.05rem}
.try-chips button{color:var(--ink);border-width:2.5px;box-shadow:3px 3px 0 var(--ink);transition:translate .15s,box-shadow .15s,background .15s}
.try-chips button:nth-child(1){background:var(--yellow)}
.try-chips button:nth-child(2){background:#fff}
.try-chips button:nth-child(3){background:#CFF3DC}
.try-chips button:nth-child(4){background:#FFE3D6}
.try-chips button:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
@media (max-width:760px){
  .faq details{padding-left:60px}.faq details::before{left:12px}
  .as-grid>div:first-child::after{width:64px;height:64px;font-size:1rem;top:-30px}
  .voices figure:nth-child(1){padding-left:58px}
}
@media (prefers-reduced-motion:reduce){.as-grid>div:first-child::after{animation:none}.faq details[open] p{animation:none}}