/* Componentes de la landing /demo/ (y de /como-funciona/). Generado a partir de la landing del 05/10/2026. */
/* ===========================================================
   Landing Mapealo — estructura y medidas de acquisition.com/workshop
   (.container 1140/15px · .page-width 950 · h1 50/62 800 · botón
   24/32 700 máx. 440 r8 borde 2,5 · FAQ 24/32 sobre navy · pie 12/1.3).
   Colores de Mapealo: morado #6633E0, navy #0B0B33, azul #2A66DB.
   Ámbar #F2B705 = «falta un dato», igual que en los manuales.
   =========================================================== */
:root{
  --navy:#0B0B33;
  --navy-hover:#23225C;
  --morado:#6633E0;
  --azul:#2A66DB;
  --texto:#333333;
  --gris:#5A5F7D;
  --suave:#F2F0FE;
  --linea:#D8D8E6;
  --degradado:linear-gradient(100deg,#2A66DB,#6633E0);
  --ambar:#F2B705;
  --ambar-suave:#FFF6D6;
  --verde:#1A7A48;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--navy);
     font-family:"Poppins",-apple-system,"Helvetica Neue",Arial,sans-serif;
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
.container{max-width:1140px;margin:0 auto;padding-inline:15px}
.page-width{max-width:950px;margin:0 auto}
.salto{position:absolute;left:-999px;top:0;background:#fff;color:var(--navy);padding:10px 14px;z-index:99}
.salto:focus{left:10px;top:10px}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
h2,h3{text-wrap:balance}

/* ---------- barra fija ---------- */
.aviso{position:fixed;inset-inline:0;top:0;z-index:50;background:var(--navy);
       padding-top:env(safe-area-inset-top,0px)}
.aviso .barra{position:relative;display:flex;align-items:center;justify-content:center;
              padding:12px 16px;min-height:65px}
.aviso .marca{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:block;line-height:0}
.aviso .marca img{width:104px}
.aviso > .barra > a.pildora{display:block;text-decoration:none}
.aviso p{display:flex;width:fit-content;margin:0 auto;padding:11px;border-radius:3px;
         align-items:center;gap:3px 6px;background:#fff;color:var(--navy);
         font-size:11.03px;font-weight:800;letter-spacing:.96px;line-height:1.15;
         text-transform:uppercase;text-align:center;flex-wrap:wrap;justify-content:center}
.aviso .punto{width:9px;height:9px;border-radius:50%;background:var(--morado);flex:0 0 auto}
.hueco{height:65px}
@media (max-width:520px){ .solo-ancho{display:none} }
@media (max-width:640px){
  .aviso .barra{flex-direction:column;gap:9px;padding:10px 12px;min-height:0}
  .aviso .marca{position:static;transform:none}
  .aviso .marca img{width:88px}
  .hueco{height:104px}
}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;padding:14px 0 20px}
.hero .cont{text-align:center;padding-inline:10px}
.gancho{display:inline-block;margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;color:#C3BFEA}
.hero h1{font-size:28px;line-height:1.2;font-weight:800;text-transform:uppercase;
         max-width:900px;margin:0 auto;text-wrap:balance}
.hero h1 span{background:linear-gradient(100deg,#7FA6FF,#B79CFF);-webkit-background-clip:text;
              background-clip:text;color:transparent}
.hero .bajo{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:16px}
.hero .sub{font-size:19px;line-height:1.45;font-weight:400;margin:0 auto;max-width:760px;text-wrap:balance}
.videobox{width:100%;margin:0 auto -50px;max-width:350px}
.videobox video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;
                box-shadow:0 18px 40px rgba(0,0,0,.35)}
.videobox figcaption{font-size:13px;color:var(--gris);margin-top:10px}
@media (min-width:382px){ .videobox{max-width:360px} }
@media (min-width:452px){ .videobox{max-width:420px} }
@media (min-width:672px){ .videobox{max-width:660px;margin-bottom:-25px} }
@media (min-width:768px){
  .hero{padding:0}
  .hero .cont{padding-inline:15px}
  .hero .interior{padding-top:40px}
  .gancho{font-size:16px}
  .hero h1{font-size:50px;line-height:62px}
  .hero .sub{font-size:23px;line-height:36px}
  .hero .bajo{margin-top:20px}
}

/* ---------- entradilla + botón ---------- */
.entrada{padding:76px 16px 56px}
@media (min-width:672px){ .entrada{padding-top:60px} }
.entrada .in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:20px}
.entrada p{font-size:17px;line-height:1.6;letter-spacing:.3px;margin:0;max-width:62ch}
@media (min-width:770px){ .entrada p{font-size:19px;line-height:30px} }
.sellos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
        font-size:14px;font-weight:600;color:var(--gris)}
.sellos li::before{content:"✓ ";color:var(--verde);font-weight:800}
.btn{display:inline-block;padding:22px 10px;width:100%;max-width:440px;border-radius:8px;
     border:2.5px solid transparent;background:var(--degradado) border-box;color:#fff;
     font-size:24px;line-height:32px;font-weight:700;text-transform:uppercase;
     text-align:center;text-decoration:none;cursor:pointer;transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:#fff;color:var(--morado);border-color:var(--morado)}
.btn small{display:block;font-size:13px;line-height:18px;font-weight:600;text-transform:none;opacity:.9;margin-top:4px}
@media (max-width:420px){ .btn{font-size:21px;line-height:28px;padding:18px 10px} }

/* ---------- títulos de sección ---------- */
.sec{padding:56px 16px}
.sec .in{max-width:1100px;margin:0 auto}
.sec h2{font-size:32px;line-height:40px;letter-spacing:.4px;font-weight:800;margin:0 0 12px;text-align:center}
.sec .intro{margin:0 auto 32px;max-width:62ch;text-align:center;color:var(--gris);font-size:17px}
@media (max-width:420px){ .sec h2{font-size:26px;line-height:34px} .sec{padding:44px 14px} }
.gris{background:var(--suave)}

/* ---------- el problema ---------- */
.dolores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:18px;
         list-style:none;margin:0;padding:0}
.dolores li{background:#fff;border:1px solid var(--linea);border-left:5px solid var(--ambar);
            border-radius:12px;padding:20px 20px 18px}
.dolores h3{margin:0 0 6px;font-size:19px;line-height:1.3}
.dolores p{margin:0;color:var(--texto);font-size:15.5px}
.remate{margin:28px auto 0;max-width:60ch;text-align:center;font-size:19px;font-weight:600}

/* ---------- cómo funciona ---------- */
.pasos4{list-style:none;margin:0;padding:0;display:grid;gap:22px;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));counter-reset:p}
.pasos4 li{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:16px;
           display:grid;grid-template-rows:auto auto 1fr;gap:12px;counter-increment:p}
.pasos4 h3{margin:0;font-size:19px;line-height:1.3;display:flex;gap:10px;align-items:center;min-height:50px}
.pasos4 h3::before{content:counter(p);flex:0 0 30px;height:30px;border-radius:50%;
           background:linear-gradient(100deg,var(--azul),var(--morado));color:#fff;
           display:grid;place-items:center;font-size:15px}
.pasos4 p{margin:0;font-size:15px;color:var(--texto)}
.pasos4 .foto{border-radius:10px;overflow:hidden;background:var(--suave);border:1px solid var(--linea);aspect-ratio:4/3}
.pasos4 .foto img{width:100%;height:100%;object-fit:cover;object-position:left top}

/* ---------- de dónde sale ---------- */
.tiras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.tira{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:20px;text-align:left}
.tira .dato{font-size:34px;font-weight:800;line-height:1;color:var(--morado);margin-bottom:8px}
.tira p{margin:0;font-size:15.5px;color:var(--gris)}
.tira p b{color:var(--navy);font-weight:600}
.sectores{margin:26px auto 0;max-width:70ch;text-align:center;color:var(--gris);font-size:15.5px}
.sectores b{color:var(--navy)}

/* ---------- comparativa ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:14px;background:#fff}
table.vs{width:100%;border-collapse:collapse;min-width:620px;font-size:15.5px}
.vs caption{position:absolute;left:-999px}
.vs th,.vs td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.vs thead th{background:var(--navy);color:#fff;font-size:15px}
.vs thead th:last-child{background:var(--degradado)}
.vs tbody th{font-weight:700;width:24%}
.vs td:nth-child(2){color:var(--gris)}
.vs td:last-child{font-weight:600}
.vs tr:last-child th,.vs tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .tabla-wrap{border:0;background:none;overflow:visible}
  table.vs{min-width:0}
  .vs thead{position:absolute;left:-9999px}
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  .vs tbody tr{background:#fff;border:1px solid var(--linea);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .vs tbody th{width:auto;background:var(--navy);color:#fff;padding:12px 16px;border:0}
  .vs td{padding:12px 16px}
  .vs td::before{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
  .vs td:nth-child(2)::before{content:"A mano"}
  .vs td:last-child::before{content:"Con Mapealo";color:var(--morado)}
  .vs tr:last-child td:nth-child(2){border-bottom:1px solid var(--linea)}
}

/* ---------- la oferta ---------- */
.banda{background:var(--navy);padding:64px 0;text-align:center}
.banda h2{max-width:1100px;margin:0 auto;padding-inline:30px;color:#fff;font-size:29px;
          font-weight:700;line-height:39px}
.banda u{text-decoration-thickness:2px;text-underline-offset:5px}
@media (min-width:768px){ .banda h2{font-size:41px;line-height:52px} }
@media (max-width:420px){ .banda{padding:46px 0} .banda h2{font-size:25px;line-height:34px;padding-inline:16px} }
.oferta .in{padding:24px 11px;max-width:1264px;margin:0 auto;text-align:center}
@media (min-width:768px){ .oferta .in{padding:32px} }
.oferta .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin-top:20px}
@media (min-width:768px){ .oferta .cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
.col{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;text-align:left}
.col h3{font-size:20px;font-weight:700;line-height:30px;margin:0;text-align:center;padding:12px 0 0}
@media (min-width:768px){ .col h3{min-height:96px;padding-inline:12px;display:grid;align-items:center} }
.marco{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--linea);aspect-ratio:636/426}
.marco img{width:100%;height:100%;object-fit:cover;object-position:top center}
.col p{margin:0;letter-spacing:.02em;font-size:16px;color:var(--texto)}
.col p b{color:var(--navy)}
.garantia{max-width:820px;margin:40px auto 0;display:flex;gap:18px;align-items:flex-start;text-align:left;
          background:var(--suave);border:2px solid var(--morado);border-radius:16px;padding:22px}
.garantia .escudo{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:var(--degradado);color:#fff;
          display:grid;place-items:center;font-size:26px}
.garantia h3{margin:0 0 6px;font-size:20px}
.garantia p{margin:0;font-size:16px;color:var(--texto)}
@media (max-width:520px){ .garantia{flex-direction:column} }
.cta-bloque{padding:40px 0 56px;display:grid;justify-items:center;gap:12px;text-align:center}
.cta-bloque .razon{margin:0;max-width:52ch;color:var(--gris);font-size:15px}
@media (max-width:520px){ .cta-bloque{padding-bottom:24px} }

/* ---------- para quién ---------- */
.quien{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.quien > div{border-radius:14px;padding:22px;border:1px solid var(--linea);background:#fff}
.quien h3{margin:0 0 10px;font-size:20px}
.quien ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15.5px;color:var(--texto)}
.quien .si{border-top:5px solid var(--verde)}
.quien .no{border-top:5px solid #C0392B}

/* ---------- agenda ---------- */
.agenda{padding:48px 10px 54px}
.agenda h2{font-size:32px;line-height:40px;letter-spacing:.4px;font-weight:800;text-align:center;margin:0 0 10px}
@media (max-width:420px){ .agenda h2{font-size:26px;line-height:34px} }
.agenda .sub{text-align:center;color:var(--gris);margin:0 auto 24px;max-width:52ch}
.reserva{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--linea);
         border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,11,51,.07)}
.reserva-cab{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;padding:16px 20px}
.reserva-cab img{width:86px;flex:0 0 auto}
.reserva-cab > div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.reserva-cab b{font-size:16px;font-weight:700}
.reserva-cab span{font-size:13px;color:#C3BFEA}
.reserva-cab .chip{margin-left:auto;background:var(--degradado);color:#fff;font-size:11px;font-weight:700;
        letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;white-space:nowrap}
.reserva-cuerpo{padding:20px}
.pasos-res{list-style:none;display:flex;gap:10px;margin:0 0 18px;padding:0;flex-wrap:wrap;justify-content:center}
.pasos-res li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--gris);
        background:var(--suave);border-radius:999px;padding:7px 13px 7px 7px}
.pasos-res li span{width:21px;height:21px;border-radius:50%;background:var(--morado);color:#fff;
        display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
#cal > iframe{display:block;width:100%;height:640px;border:0;border-radius:10px;background:#fff}
/* En móvil Google apila la ficha encima del mes: sin esto las horas quedan por debajo del marco. */
@media (max-width:480px){ #cal > iframe{height:1300px} }  /* solo el de Google: el de Cal.com se ajusta solo */
.reserva-pie{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--gris);text-align:left;
        border-top:1px solid var(--linea);padding-top:14px}
.reserva-pie b{color:var(--navy);font-weight:600}
@media (max-width:420px){
  .reserva-cab{flex-wrap:wrap;gap:10px}
  .reserva-cab .chip{margin-left:0}
  .reserva-cuerpo{padding:14px}
  .pasos-res li{font-size:12px}
}
.slot{border:2px dashed #C9C2EE;border-radius:12px;background:var(--suave);padding:26px 20px;
      text-align:center;color:var(--gris);font-size:15px;min-height:160px;
      display:flex;flex-direction:column;justify-content:center;gap:6px}
.slot[hidden]{display:none}   /* si no, el display:flex gana al hidden y el aviso no se va nunca */
.slot a{color:var(--morado);font-weight:600}
.slot b{font-weight:700;color:var(--navy);font-size:17px}

/* ---------- faq ---------- */
.faq{padding:40px 16px 50px}
.faq .in{max-width:1030px;margin:0 auto;display:grid;justify-items:center}
.faq > .in > h2{font-size:32px;line-height:40px;font-weight:800;margin:0 0 26px;text-align:center}
@media (max-width:420px){ .faq > .in > h2{font-size:26px;line-height:34px} }
.acordeon{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;width:100%}
/* Solo el acordeón de preguntas: sin acotar, estas reglas pisaban el menú y el pie de /como-funciona/. */
.acordeon details{width:100%}
.acordeon summary{position:relative;list-style:none;cursor:pointer;background:var(--navy);color:#fff;
        padding:22px 48px;border-radius:8px;text-align:center;transition:background .3s}
.acordeon summary h3{margin:0;font-size:22px;line-height:30px;font-weight:700}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:hover{background:var(--navy-hover)}
.acordeon summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
               font-size:26px;line-height:1;transition:transform .3s}
.acordeon details[open] summary{border-radius:8px 8px 0 0}
.acordeon details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
@media (max-width:769px){ .acordeon summary{padding:20px 34px 20px 12px} .acordeon summary h3{font-size:19px;line-height:27px}
                          .acordeon summary::after{right:10px} }
.resp{background:#fff;border:1px solid var(--linea);border-top:0;border-radius:0 0 8px 8px;
      padding:22px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
      font-size:18px;line-height:28px;letter-spacing:.3px;color:var(--texto)}
.resp p{margin:0}
.resp b{color:var(--navy);font-weight:600}
@media (max-width:520px){ .resp{font-size:16.5px;line-height:26px;padding:18px 14px} }

/* ---------- cierre ---------- */
.final{background:var(--navy);color:#fff;text-align:center;padding:60px 16px}
.final h2{margin:0 auto 12px;max-width:820px;font-size:32px;line-height:1.25;font-weight:800}
.final p{margin:0 auto 26px;max-width:58ch;color:#C3BFEA;font-size:17px}
@media (max-width:420px){ .final h2{font-size:25px} }


/* ---------- iconos ---------- */
.ico{width:26px;height:26px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dolores .ico-caja{width:46px;height:46px;border-radius:12px;background:var(--ambar-suave);color:#9A6A00;
       display:grid;place-items:center;margin-bottom:12px}

/* ---------- en planta (voces reales) ---------- */
.planta{background:var(--navy);color:#fff;padding:64px 16px;position:relative;overflow:hidden}
.planta::before{content:"";position:absolute;inset:auto -10% -55% auto;width:620px;height:620px;border-radius:50%;
       background:radial-gradient(circle,rgba(102,51,224,.35),transparent 65%);pointer-events:none}
.planta .in{max-width:1100px;margin:0 auto;position:relative}
.planta h2{font-size:32px;line-height:40px;font-weight:800;margin:0 0 10px;text-align:center}
.planta .intro{margin:0 auto 34px;max-width:60ch;text-align:center;color:#C3BFEA;font-size:17px}
@media (max-width:420px){ .planta h2{font-size:26px;line-height:34px} .planta{padding:48px 14px} }
.voces{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.voz{margin:0;display:flex;flex-direction:column;gap:14px}
.voz blockquote{margin:0;position:relative;background:#fff;color:var(--navy);border-radius:16px 16px 16px 4px;
       padding:22px 20px 20px;font-size:16.5px;line-height:1.5;font-weight:600;flex:1}
.voz blockquote::before{content:"“";position:absolute;top:-18px;left:14px;font-size:64px;line-height:1;
       color:var(--ambar);font-weight:800}
.voz figcaption{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#C3BFEA;line-height:1.35}
.voz .ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;
       font-size:15px;color:#fff;background:linear-gradient(135deg,var(--azul),var(--morado))}
.voz figcaption b{color:#fff;font-weight:600}
.voz figcaption a{color:#C3BFEA}
.voz .rol{display:inline-block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
       color:var(--ambar)}
.nota-voces{margin:26px auto 0;max-width:70ch;text-align:center;font-size:13.5px;color:#9F9BCB}

/* ---------- el primer día del nuevo: sin / con ---------- */
.dia{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.carril{border-radius:18px;padding:24px 22px;position:relative}
.carril h3{margin:0 0 4px;font-size:22px;display:flex;align-items:center;gap:10px}
.carril .bajada{margin:0 0 18px;font-size:14.5px}
.carril.sin{background:#F6F6F9;border:1px solid #E4E4EC;color:var(--navy)}
.carril.sin .bajada{color:var(--gris)}
.carril.con{background:linear-gradient(150deg,#1B1A5C,var(--navy) 60%);color:#fff;box-shadow:0 18px 40px rgba(11,11,51,.18)}
.carril.con .bajada{color:#C3BFEA}
.etq{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.sin .etq{background:#FBE3E0;color:#C0392B}
.con .etq{background:var(--degradado);color:#fff}
.linea{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.linea li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.linea .hora{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.sin .hora{background:#fff;border:1px solid #E4E4EC;color:#C0392B}
.con .hora{background:rgba(255,255,255,.1);color:#B79CFF}
.linea b{display:block;font-size:15.5px;line-height:1.3}
.linea span{font-size:14px;line-height:1.45}
.sin .linea span{color:var(--gris)}
.con .linea span{color:#D9D6F5}
.resultado{margin-top:18px;padding-top:16px;border-top:1px dashed currentColor;font-weight:700;font-size:15.5px;
       display:flex;gap:10px;align-items:center}
.sin .resultado{color:#C0392B;border-color:#E4C4C0}
.con .resultado{color:#7CE0A8;border-color:rgba(255,255,255,.25)}

/* ---------- cifras con icono ---------- */
.tira{position:relative;overflow:hidden}
.tira .ico{position:absolute;right:16px;top:16px;width:30px;height:30px;color:#D4CCF6}

/* ---------- comparativa con iconos ---------- */
.vs td .mk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:8px;
       font-size:12px;font-weight:800;vertical-align:-3px}
.vs td:nth-child(2) .mk{background:#FBE3E0;color:#C0392B}
.vs td:last-child .mk{background:#DDF3E7;color:var(--verde)}


/* ===========================================================
   Componentes al estilo de acquisition.com/workshop, recreados
   con código propio (sin sus imágenes): papel texturizado,
   banner negro rasgado, tarjetas de reseña inclinadas con
   subrayado amarillo, aviso girado y aparición al hacer scroll.
   =========================================================== */
.papel{background-color:#F1F1F8;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.7),transparent 60%)}
.rasgado{background:var(--navy) radial-gradient(ellipse at 80% 0%,rgba(102,51,224,.5),transparent 60%) no-repeat;clip-path:polygon(0.00% 2.9px,1.67% 1.4px,3.33% 5.9px,5.00% 0.7px,6.67% 4.8px,8.33% 3.3px,10.00% 0.5px,11.67% 4.6px,13.33% 0.3px,15.00% 3.9px,16.67% 0.6px,18.33% 0.8px,20.00% 3.8px,21.67% 7.4px,23.33% 1.1px,25.00% 2.0px,26.67% 5.6px,28.33% 8.5px,30.00% 5.2px,31.67% 3.6px,33.33% 8.8px,35.00% 0.4px,36.67% 7.7px,38.33% 2.6px,40.00% 1.3px,41.67% 1.1px,43.33% 2.8px,45.00% 7.3px,46.67% 1.6px,48.33% 5.2px,50.00% 5.8px,51.67% 3.4px,53.33% 4.9px,55.00% 0.6px,56.67% 0.5px,58.33% 1.9px,60.00% 6.1px,61.67% 3.8px,63.33% 2.8px,65.00% 5.3px,66.67% 4.1px,68.33% 2.7px,70.00% 7.1px,71.67% 6.3px,73.33% 2.2px,75.00% 5.2px,76.67% 4.7px,78.33% 7.9px,80.00% 6.6px,81.67% 2.6px,83.33% 8.8px,85.00% 1.1px,86.67% 3.8px,88.33% 6.8px,90.00% 1.4px,91.67% 4.4px,93.33% 0.4px,95.00% 6.0px,96.67% 6.9px,98.33% 5.2px,100.00% 7.9px,100.00% calc(100% - 2.8px),98.33% calc(100% - 6.3px),96.67% calc(100% - 5.3px),95.00% calc(100% - 5.2px),93.33% calc(100% - 4.1px),91.67% calc(100% - 7.6px),90.00% calc(100% - 8.5px),88.33% calc(100% - 4.3px),86.67% calc(100% - 6.0px),85.00% calc(100% - 0.5px),83.33% calc(100% - 6.3px),81.67% calc(100% - 5.8px),80.00% calc(100% - 8.9px),78.33% calc(100% - 7.4px),76.67% calc(100% - 2.6px),75.00% calc(100% - 3.5px),73.33% calc(100% - 6.0px),71.67% calc(100% - 0.2px),70.00% calc(100% - 4.2px),68.33% calc(100% - 1.5px),66.67% calc(100% - 1.1px),65.00% calc(100% - 0.5px),63.33% calc(100% - 6.9px),61.67% calc(100% - 1.2px),60.00% calc(100% - 2.2px),58.33% calc(100% - 3.5px),56.67% calc(100% - 7.8px),55.00% calc(100% - 0.7px),53.33% calc(100% - 4.0px),51.67% calc(100% - 4.9px),50.00% calc(100% - 8.0px),48.33% calc(100% - 7.4px),46.67% calc(100% - 7.8px),45.00% calc(100% - 2.5px),43.33% calc(100% - 3.7px),41.67% calc(100% - 3.2px),40.00% calc(100% - 8.0px),38.33% calc(100% - 8.6px),36.67% calc(100% - 1.4px),35.00% calc(100% - 1.6px),33.33% calc(100% - 2.1px),31.67% calc(100% - 2.1px),30.00% calc(100% - 4.4px),28.33% calc(100% - 5.3px),26.67% calc(100% - 2.4px),25.00% calc(100% - 0.0px),23.33% calc(100% - 3.8px),21.67% calc(100% - 3.3px),20.00% calc(100% - 5.1px),18.33% calc(100% - 8.6px),16.67% calc(100% - 6.2px),15.00% calc(100% - 4.6px),13.33% calc(100% - 5.6px),11.67% calc(100% - 6.1px),10.00% calc(100% - 0.5px),8.33% calc(100% - 8.1px),6.67% calc(100% - 7.0px),5.00% calc(100% - 7.9px),3.33% calc(100% - 7.2px),1.67% calc(100% - 3.5px),0.00% calc(100% - 3.6px));padding:71px 0;text-align:center;margin:0}
.rasgado h2{max-width:1280px;margin:0 auto;padding-inline:30px;color:#fff;font-size:29px;font-weight:700;line-height:39px;text-wrap:balance}
.rasgado u{text-decoration-thickness:2px;text-underline-offset:5px}
@media (min-width:768px){ .rasgado h2{font-size:41px;line-height:52px} }
@media (max-width:420px){ .rasgado{padding:48px 0} .rasgado h2{font-size:25px;line-height:34px;padding-inline:16px} }
.rasgado-wrap{padding:40px 0 0}

/* voces: collage de reseñas */
.planta.papel{color:var(--navy)}
.planta.papel::before{display:none}
.planta.papel h2{color:var(--navy)}
.planta.papel .intro{color:var(--gris)}
.collage{display:grid;gap:26px 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));align-items:start;padding:10px 4px}
.resena{margin:0;background:#fff;border-radius:10px;padding:16px 16px 14px;box-shadow:0 10px 24px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
        text-align:left;transition:transform .3s}
.resena:nth-child(4n+1){transform:rotate(-2.2deg) translateY(8px)}
.resena:nth-child(4n+2){transform:rotate(1.6deg)}
.resena:nth-child(4n+3){transform:rotate(-1deg) translateY(14px)}
.resena:nth-child(4n+4){transform:rotate(2.4deg) translateY(4px)}
.resena:hover{transform:rotate(0) scale(1.02)}
.resena .cab{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.resena .ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--azul),var(--morado))}
.resena .quien{display:flex;flex-direction:column;line-height:1.2}
.resena .quien b{font-size:14px;color:var(--navy)}
.resena .quien span{font-size:11.5px;color:#777}
.resena .src{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--morado);white-space:nowrap}
.resena blockquote{margin:0;font-size:14.5px;line-height:1.5;color:#222}
.resena mark{background:linear-gradient(100deg,rgba(42,102,219,.18),rgba(102,51,224,.22));color:inherit;padding:0 2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.resena .pie-r{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px;color:#888}
.resena .pie-r a{color:#888}
.resena .rol{font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.aviso-girado{margin:34px auto 0;max-width:470px;transform:rotate(-2deg);background:rgba(255,255,255,.75);padding:10px 14px;
        font-size:14px;line-height:1.35;color:#222;text-align:center}

/* aparición al hacer scroll (como sus bloques #1/#2/#3) */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .aparece{opacity:1;transform:none;transition:none} }

/* barra superior negra, como la suya */
.aviso{background:var(--navy)}

/* ---------- pie ---------- */
footer:not(.sitefoot){background:linear-gradient(150deg,#2A66DB,#6633E0);color:#fff;font-weight:400;font-size:12px;line-height:1.3em;padding:35px 0 25px}
footer:not(.sitefoot) .in{max-width:1170px;margin:0 auto;padding-inline:15px}
.pie-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 10px 10px;flex-wrap:wrap}
.pie-top img{width:150px}
.pie-datos{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
footer:not(.sitefoot) a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
footer:not(.sitefoot) a:hover{border-color:#fff}
.legales{list-style:none;margin:0;padding:18px 0 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;text-align:center}
@media (min-width:768px){ .legales{padding:24px 0} .legales li{font-size:16px} }
.disclaimer{padding:10px 0;text-align:center;font-size:13px;opacity:.92;max-width:900px;margin:0 auto}
@media (max-width:640px){ .pie-top{flex-direction:column;justify-content:center;text-align:center}
                          .pie-datos{flex-direction:column;align-items:center;gap:10px} }