/* ============================================================
   LAS PAGINAS DE NICHO · /hoteles /restaurantes /dentistas
   Eric, 12/09/2026: «claro e impactante, y que se entienda de golpe
   sin tener que entrar». Asi que aqui manda una regla sobre todas:
   CADA SECCION SE ENTIENDE SIN LEER EL PARRAFO. El parrafo esta para
   el que quiera mas, no para el que tiene que enterarse.

   Paleta y tipografia: las mismas que rexen.es. Esta pagina no carga
   estilo.css porque no comparte ni cabecera ni rejilla, asi que los
   tokens van copiados. Si alli cambia la paleta, hay que tocar estas
   lineas.
   ============================================================ */
:root{
  --fondo:#F5F2ED;          /* hueso calido */
  --hondo:#E9E4D9;          /* hueso profundo, para alternar seccion */
  --sup:#FFFFFF;
  --texto:#1B1A18;
  --texto-2:#575249;
  --texto-3:#767065;
  --linea:#E3DED5;
  --linea-f:#C8C1B4;
  --marca:#C7371C;          /* el rojo de la X */
  --verde:#237A4A;          /* el de los enfasis */
  --wa:#25D366;             /* WhatsApp: donde acaba el embudo */
  --tinta:#221F1C;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--fondo);color:var(--texto);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}

/* ---------- cabecera ---------- */
.cab{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 clamp(1rem,5vw,3rem);height:62px;
  border-bottom:1px solid var(--linea);background:var(--fondo);
  position:sticky;top:0;z-index:20;
}
.logo{
  font-size:1.1rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--texto);text-decoration:none;
}
.logo span{color:var(--marca);}
.cab-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-3);}

/* ---------- lo comun a todas las secciones ---------- */
main{overflow:hidden;}
.hero,.sec,.cierre{
  padding:clamp(3rem,8vw,5.5rem) clamp(1.1rem,5vw,2rem);
  max-width:1180px;margin:0 auto;text-align:center;
}
.sec{border-top:1px solid var(--linea);max-width:none;}
.sec > *{max-width:1180px;margin-left:auto;margin-right:auto;}
/* el hero tambien centra a sus hijos: sin esto la etiqueta de arriba se
   quedaba a la izquierda en ordenador, con el titular centrado debajo */
.hero > *{margin-left:auto;margin-right:auto;}
.et{
  display:block;font-family:var(--mono);font-size:.63rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--marca);
  margin-bottom:1rem;
}
h1,h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:500;font-stretch:108%;
  letter-spacing:-.022em;line-height:1.03;text-wrap:balance;
}
h1{font-size:clamp(2.3rem,7.4vw,4.2rem);}
h2{font-size:clamp(1.9rem,5.2vw,3.1rem);}
h1 em,h2 em{font-style:normal;color:var(--verde);font-weight:600;}
.sub{
  font-size:clamp(1.02rem,2.3vw,1.24rem);color:var(--texto-2);
  max-width:44ch;margin:1.2rem auto 0;text-wrap:balance;
}
.quien{
  display:inline-block;margin:1.6rem auto 0;padding:.5rem 1rem;
  border:1px solid var(--linea-f);border-radius:999px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2);
}
.lead{font-size:1.02rem;color:var(--texto-2);max-width:42ch;margin:.9rem auto 0;text-wrap:balance;}
.pie{
  font-family:var(--mono);font-size:.64rem;line-height:1.7;letter-spacing:.04em;
  color:var(--texto-3);max-width:52ch;margin:1.6rem auto 0;
}
.micro{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-top:1rem;}
.sec h2{margin-bottom:0;}

/* ---------- el boton. UNA sola accion por pagina (leccion 171) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:2rem;padding:1.05rem 2.2rem;border:0;border-radius:3px;
  background:var(--tinta);color:#F7F5F0;
  font-family:'Inter',sans-serif;font-size:1.03rem;font-weight:600;
  text-decoration:none;transition:transform .2s var(--ease),background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-g{background:var(--wa);color:#08130C;}
.btn-g:hover{background:#1FBE59;}

/* ============================================================
   EL MOVIL. Es el objeto que lleva el peso de la pagina: lo que
   Eric pide es que se VEA como quedaria, y para eso hace falta el
   marco, no una cuadricula suelta flotando.
   ============================================================ */
.movil{
  width:min(390px,100%);margin:2.6rem auto 0;
  border:9px solid #171614;border-radius:38px;
  background:#171614;box-shadow:0 26px 70px rgba(27,26,24,.22);
  position:relative;
}
.movil::before{     /* la isla de la camara, que es lo que lo hace leer como un movil */
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:82px;height:19px;border-radius:999px;background:#000;z-index:3;
}
.movil-p{
  background:var(--sup);border-radius:29px;overflow:hidden;padding-top:30px;
}

/* --- la cabecera del perfil --- */
.ig-cab{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem .85rem;border-bottom:1px solid #EFEDE8;}
.ig-av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--marca),#E8A13C,var(--verde),var(--marca));
}
.ig-nom{display:flex;flex-direction:column;text-align:left;font-size:.84rem;font-weight:600;line-height:1.25;}
.ig-nom small{font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);font-weight:400;}

/* --- LA CUADRICULA. 9 laminas, cada tipo con su cara, para que se vea
       que el feed tiene ritmo y no son nueve fotos iguales. --- */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#EFEDE8;}
.ig{
  position:relative;aspect-ratio:1;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.5rem .42rem;text-align:center;gap:.2rem;
}
.ig-t{font-size:.52rem;line-height:1.25;font-weight:500;}
.ig-k{font-family:var(--mono);font-size:.46rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.75;}

/* el dato: la cifra manda */
.ig-dato{background:var(--tinta);color:#F7F5F0;}
.ig-n{font-family:'Archivo',sans-serif;font-weight:600;font-stretch:105%;font-size:1.42rem;line-height:1;letter-spacing:-.02em;color:var(--wa);}
.ig-dato .ig-t{color:#CFCAC0;}

/* la cita: hueso, tipografia grande, sin adornos */
.ig-cita{background:var(--hondo);}
.ig-q{font-family:'Archivo',sans-serif;font-size:.6rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;}
.ig-cita::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--marca);}

/* la lista: es el formato base del feed (leccion 198) */
.ig-lista{background:var(--verde);color:#EAF5EE;}
.ig-lista .ig-k{font-size:.62rem;letter-spacing:.06em;opacity:1;color:#fff;}
.ig-lista .ig-t{color:#CDE6D7;}

/* el reel */
.ig-reel{background:linear-gradient(150deg,#2C2925,#4A443B);color:#F7F5F0;}
.ig-play{font-size:.9rem;line-height:1;}
.ig-reel .ig-t{color:#D8D2C6;}

/* la foto: no hay foto, hay ROTULO. Enseñar una foto de banco seria
   enseñar algo que no es suyo. */
.ig-foto{background:var(--sup);border:1px dashed var(--linea-f);}
.ig-foto .ig-k{color:var(--marca);}
.ig-foto .ig-t{color:var(--texto-3);}

/* ============================================================
   LA CONVERSACION. Lo que HACE el agente, enseñado. Cero prosa.
   ============================================================ */
.sec-wa{background:var(--hondo);}
.movil-wa .movil-p{background:#ECE5DD;}
.wa-cab{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;background:#075E54;color:#fff;}
.wa-av{width:34px;height:34px;border-radius:50%;flex:none;background:#cfd8d3;}
.wa-nom{display:flex;flex-direction:column;text-align:left;font-size:.82rem;font-weight:600;line-height:1.25;}
.wa-nom small{font-size:.6rem;font-weight:400;opacity:.8;}
.wa-chat{display:flex;flex-direction:column;gap:.4rem;padding:.9rem .7rem 1.2rem;}
.wa-b{
  max-width:84%;padding:.48rem .62rem .34rem;border-radius:8px;
  font-size:.74rem;line-height:1.38;text-align:left;position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.07);
}
.wa-b time{display:block;font-size:.54rem;color:#6d7a72;text-align:right;margin-top:.1rem;}
.wa-ellos{align-self:flex-start;background:#fff;border-top-left-radius:2px;}
.wa-nos{align-self:flex-end;background:#DCF8C6;border-top-right-radius:2px;}

/* ============================================================
   EL CIRCUITO. Cinco pasos en una linea, con la flecha entre ellos.
   Antes eran cinco tarjetas de parrafo.
   ============================================================ */
.circ{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin:2.6rem auto 0;max-width:980px;
}
.cx{
  position:relative;padding:1.5rem .7rem;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.cx:not(:last-child)::after{
  content:"→";position:absolute;right:-.45em;top:2.3rem;
  font-size:1rem;color:var(--linea-f);
}
.cx-e{font-size:1.9rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
.cx b{font-size:.94rem;font-weight:600;}
.cx span:last-child{font-size:.78rem;color:var(--texto-3);line-height:1.35;}

/* ---------- que entra ---------- */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:2.6rem;}
.fx{
  background:var(--sup);border:1px solid var(--linea);border-radius:4px;
  padding:1.5rem 1.4rem;text-align:left;
  display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:start;
}
.fx-e{font-size:1.6rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
.fx-t{font-size:.92rem;color:var(--texto-2);line-height:1.5;}
.fx-t b{display:block;color:var(--texto);font-size:1.02rem;margin-bottom:.25rem;}

/* ---------- garantias ---------- */
.gars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:2.6rem;}
.gx{
  background:var(--sup);border:1px solid var(--linea);border-radius:4px;
  padding:1.7rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;
}
.gx-s{font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:500;color:var(--verde);line-height:1;}
.gx b{font-size:1rem;}
.gx span:last-child{font-size:.85rem;color:var(--texto-3);line-height:1.45;}

/* ---------- cierre ---------- */
.cierre{background:var(--hondo);max-width:none;border-top:1px solid var(--linea);}
.cierre > *{max-width:640px;margin-left:auto;margin-right:auto;}
.cierre p{color:var(--texto-2);margin-top:1.1rem;text-wrap:balance;}

.pie-w{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.2rem clamp(1rem,5vw,3rem);border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);
}
.pie-w a{color:var(--texto-2);text-decoration:none;}

/* ============================================================
   MOVIL DE VERDAD
   ============================================================ */
@media (max-width:760px){
  /* El circuito en 5 columnas a 390 px deja 60 px por paso: ilegible.
     Pasa a 2 columnas y la flecha se quita. */
  .circ{grid-template-columns:repeat(2,1fr);gap:10px;}
  .cx{background:var(--sup);border:1px solid var(--linea);border-radius:4px;padding:1.2rem .8rem;}
  .cx:not(:last-child)::after{display:none;}
  .cx:last-child{grid-column:1 / -1;}
  .fx{grid-template-columns:2.2rem 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none;}
}

/* Zonas de toque. El logo medIa 81x27 y el enlace del pie 52x15: por debajo
   de los 44 px que hace falta para acertar con el dedo. Se agrandan con
   area invisible, sin tocar el tamano visual. */
.logo,.pie-w a{position:relative;}
.logo::after,.pie-w a::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:44px;
}

/* ============================================================
   LOS CLIENTES. Eric: «al final lo de los clientes es importante».
   Plato BLANCO por defecto, igual que en rexen.es, y plato oscuro
   para los de tinta clara: La Cote Club es blanco puro y sobre
   blanco no se ve. Es el fallo que costo encontrar el 12/09.
   ============================================================ */
/* 4 columnas FIJAS en todos los anchos: con auto-fit el movil sacaba 3 y dejaba
   3-3-3-3-3-3-2, y el ordenador 4 o 5 segun el ancho. Eric, 12/09/2026: movil y
   ordenador se tienen que ver igual a nivel de bloques. Con 20 marcas son 4x5.
   Si cambia el numero de marcas, que siga siendo multiplo de 4. */
.sec-cli{background:var(--hondo);}
.logos{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin:2.4rem auto 0;max-width:940px;
}
.lg{
  height:66px;border:1px solid var(--linea-f);border-radius:3px;background:#FFF;
  display:flex;align-items:center;justify-content:center;padding:.7rem .85rem;
}
.lg[data-tono="claro"]{background:var(--tinta);border-color:var(--tinta);}
.lg[data-tono="oscuro"]{background:#EFECE5;}
.lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.cli-x{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:1.8rem auto 0;max-width:620px;
}
.cli-x span{
  display:flex;flex-direction:column;gap:.15rem;
  font-size:.76rem;line-height:1.3;color:var(--texto-3);
}
.cli-x b{
  font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:500;
  color:var(--verde);line-height:1;
}
@media (max-width:520px){
  .lg{height:56px;padding:.5rem .6rem;}
  .cli-x{grid-template-columns:1fr;text-align:left;max-width:280px;}
  .cli-x span{flex-direction:row;align-items:baseline;gap:.5rem;}
}

/* ============================================================
   LAS LAMINAS, MAS CLARAS. Eric: «el contenido esta bien, pero
   visualmente que se vea mejor y mas claro». Lo que fallaba: el
   texto a .52rem dentro de una celda de 126 px no se lee, y los
   tres tipos oscuros seguidos hacian bloque.
   ============================================================ */
.ig{padding:.6rem .5rem;gap:.3rem;}
.ig-t{font-size:.58rem;line-height:1.3;}
.ig-k{font-size:.5rem;letter-spacing:.1em;}
.ig-n{font-size:1.75rem;}
.ig-q{font-size:.66rem;line-height:1.28;}
.ig-lista .ig-k{font-size:.72rem;}
.ig-foto{background:#FAF8F4;}
.ig-foto .ig-k{font-size:.52rem;}
/* la rejilla, con mas aire: a 2 px los bloques oscuros se fundian */
.ig-grid{gap:3px;}

/* ============================================================
   LA CONVERSACION, MAS HUMANA. Avatar con inicial, doble tick de
   leido y la burbuja un poco mas grande: lo que hace que se lea
   como una conversacion de verdad y no como una maqueta.
   ============================================================ */
.wa-av{
  display:flex;align-items:center;justify-content:center;
  background:#5B8C7B;color:#fff;font-weight:700;font-size:.9rem;
}
.wa-b{font-size:.79rem;padding:.55rem .68rem .38rem;}
.wa-b time{font-size:.57rem;display:flex;align-items:center;gap:.2rem;justify-content:flex-end;}
.wa-v{font-style:normal;color:#4FC3F7;font-size:.62rem;letter-spacing:-.08em;}
.wa-chat{padding:1rem .75rem 1.3rem;gap:.45rem;}

/* ============================================================
   EL CALENDARIO. Mismo formato que el que recibe Lumeria: dia,
   formato y titulo. Lo que tiene que quedar claro de un vistazo
   es que hay un PLAN y que esta aprobado antes de subirse.
   ============================================================ */
.sec-cal .cal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin:2.4rem auto 0;max-width:1000px;
}
.cd{
  background:var(--sup);border:1px solid var(--linea);border-radius:4px;
  padding:1rem 1.05rem;text-align:left;display:flex;flex-direction:column;gap:.35rem;
  border-left:3px solid var(--linea-f);
}
.cd[data-f="reel"]{border-left-color:var(--marca);}
.cd[data-f="carrusel"]{border-left-color:var(--verde);}
.cd[data-f="historia"]{border-left-color:#C79A1C;}
.cd-d{
  display:flex;align-items:baseline;gap:.35rem;
  font-family:'Archivo',sans-serif;font-size:1.3rem;font-weight:500;line-height:1;
}
.cd-d small{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--texto-3);font-weight:400;}
.cd-f{
  font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texto-2);
}
.cd-t{font-size:.88rem;line-height:1.35;color:var(--texto);}
.cal-x{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:2rem auto 0;max-width:660px;
}
.cal-x span{display:flex;align-items:baseline;gap:.5rem;font-size:.84rem;color:var(--texto-2);text-align:left;}
.cal-x b{
  font-family:'Archivo',sans-serif;font-size:1.1rem;font-weight:600;color:var(--verde);
  width:1.5rem;height:1.5rem;flex:none;border:1px solid var(--verde);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;
}
@media (max-width:620px){
  .cal-x{grid-template-columns:1fr;max-width:320px;gap:.7rem;}
}

/* ============================================================
   QUE PAREZCAN CAPTURAS, NO DIAGRAMAS
   Eric, 12/09/2026, ensenando su propia captura de @rexen_ai y el
   calendario de Lumeria: «visualmente como un perfil de Insta real».
   Lo que faltaba eran los detalles de interfaz: barra de estado,
   destacados, pestanas, barra de navegacion y el distintivo de
   carrusel. Sin ellos el ojo lo lee como un esquema.
   ============================================================ */
.movil{
  border:11px solid #1A1A1C;border-radius:44px;
  box-shadow:0 0 0 2px #46464B, 0 30px 80px rgba(27,26,24,.28);
}
.movil-p{border-radius:33px;padding-top:0;overflow:hidden;}

/* --- la barra de estado --- */
.st{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .95rem .3rem;font-size:.68rem;font-weight:600;
  background:#000;color:#fff;padding-top:1.5rem;
}
.st-h{letter-spacing:-.01em;}
.st-i{display:flex;align-items:center;gap:.28rem;}
.st-sig,.st-wifi,.st-bat{display:block;background:#fff;}
.st-sig{width:15px;height:9px;clip-path:polygon(0 66%,22% 66%,22% 100%,0 100%,0 66%,28% 40%,50% 40%,50% 100%,28% 100%,28% 40%,56% 18%,78% 18%,78% 100%,56% 100%,56% 18%,84% 0,100% 0,100% 100%,84% 100%);}
.st-wifi{width:12px;height:9px;border-radius:1px;clip-path:polygon(50% 100%,0 32%,15% 18%,50% 52%,85% 18%,100% 32%);}
.st-bat{width:21px;height:10px;border-radius:2.5px;position:relative;}

/* --- Instagram: cabecera, destacados, pestanas, nav --- */
.ig-top{display:flex;align-items:center;justify-content:center;padding:.6rem .9rem .5rem;background:#fff;}
.ig-h{font-size:.87rem;font-weight:600;display:flex;align-items:center;gap:.25rem;}
.ig-h i{font-style:normal;font-size:.7rem;color:#666;}
.ig-dest{display:flex;gap:.62rem;padding:.25rem .8rem .7rem;background:#fff;overflow:hidden;}
.dst{display:flex;flex-direction:column;align-items:center;gap:.22rem;flex:none;width:54px;}
.dst i{
  width:50px;height:50px;border-radius:50%;background:#F0EEE9;
  border:1px solid #DEDAD2;display:block;
}
.dst small{
  font-size:.44rem;letter-spacing:.03em;color:#333;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px;
}
.ig-tabs{display:flex;background:#fff;border-top:1px solid #EFEDE8;}
.ig-tabs i{flex:1;height:31px;position:relative;opacity:.3;}
.ig-tabs i::before{
  content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;
  border:1.6px solid #111;
}
.ig-tabs i.on{opacity:1;border-bottom:1.6px solid #111;}
.ig-tabs i.on::before{border-width:1.6px;background:
  linear-gradient(#111,#111) center/100% 1.6px no-repeat,
  linear-gradient(#111,#111) center/1.6px 100% no-repeat;}
.ig-tabs .tb-reel::before{border-radius:2px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
.ig-tabs .tb-guard::before{clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);}
.ig-tabs .tb-etiq::before{border-radius:50% 50% 40% 40%;}
.ig-nav{display:flex;background:#fff;border-top:1px solid #EFEDE8;padding:.5rem 0 .85rem;}
.ig-nav i{flex:1;height:19px;position:relative;}
.ig-nav i::before{
  content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;
  border:1.6px solid #111;border-radius:2px;
}
.ig-nav .ig-yo::before{border-radius:50%;background:#C9C4BA;border-color:#C9C4BA;}

/* el distintivo de varias imagenes, arriba a la derecha */
.ig-multi{
  position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:1.5px;
  border:1.4px solid rgba(255,255,255,.92);
  box-shadow:2px -2px 0 -1px rgba(255,255,255,.92);
}
.ig-foto .ig-multi,.ig-cita .ig-multi{border-color:rgba(30,28,25,.6);box-shadow:2px -2px 0 -1px rgba(30,28,25,.6);}
/* el triangulo de reel, dibujado */
.ig-play{
  width:0;height:0;border-left:9px solid rgba(255,255,255,.95);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}

/* --- WhatsApp: cabecera completa y barra de escribir --- */
.movil-wa .st{background:#075E54;}
.wa-cab{gap:.5rem;padding:.55rem .7rem;}
.wa-atras{
  width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);flex:none;margin-right:.1rem;
}
.wa-vid,.wa-tel{width:16px;height:14px;flex:none;background:rgba(255,255,255,.9);margin-left:auto;}
.wa-vid{border-radius:2px;clip-path:polygon(0 15%,68% 15%,68% 38%,100% 12%,100% 88%,68% 62%,68% 85%,0 85%);}
.wa-tel{margin-left:.55rem;border-radius:3px;clip-path:polygon(28% 0,52% 0,60% 30%,44% 42%,58% 62%,72% 48%,100% 58%,100% 84%,72% 100%,38% 84%,14% 52%,4% 20%);}
.wa-nom{flex:1;}
.wa-in{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem 1rem;background:#ECE5DD;
}
.wa-in span{
  flex:1;background:#fff;border-radius:999px;padding:.5rem .8rem;
  font-size:.72rem;color:#9aa29d;text-align:left;
}
.wa-env{width:30px;height:30px;border-radius:50%;background:#00A884;flex:none;position:relative;}
.wa-env::before{
  content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;
  background:#fff;clip-path:polygon(0 0,100% 50%,0 100%,18% 50%);
}

/* ============================================================
   EL CALENDARIO, REJILLA DE MES. Copiado del que ya recibe
   Lumeria: fondo oscuro, columnas L M X J V S D, celda rellena
   para carrusel y solo borde para post.
   ============================================================ */
.sec-cal .cal{
  display:block;max-width:720px;margin:2.4rem auto 0;
  background:#1E1C1A;border:1px solid #3A3631;border-radius:14px;
  padding:1.3rem 1.15rem 1.15rem;text-align:left;
}
.cal-cab b{
  display:block;font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:500;
  color:#F4EFE7;letter-spacing:-.015em;
}
.cal-cab span{display:block;font-size:.8rem;color:#A89F92;margin-top:.15rem;}
.cal-sem{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:1.1rem 0 .35rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:#8C8478;text-align:center;
}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cg{
  aspect-ratio:.82;border:1px solid #322E29;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:.3rem .15rem;gap:.05rem;background:#232120;
}
.cg b{font-family:'Archivo',sans-serif;font-size:.88rem;font-weight:500;color:#6F6860;line-height:1.1;}
.cg i{font-style:normal;font-family:var(--mono);font-size:.52rem;font-weight:700;color:#8C8478;}
.cg small{font-size:.45rem;line-height:1.15;color:#8C8478;text-align:center;overflow:hidden;}
.cg-no{border-color:transparent;background:transparent;}
/* carrusel: celda rellena */
.cg-c{background:#D9A277;border-color:#D9A277;}
.cg-c b{color:#2A211A;}
.cg-c i,.cg-c small{color:#4A3A2C;}
/* post: solo borde */
.cg-p{border-color:#D9A277;background:#232120;}
.cg-p b{color:#E8C6A6;}
.cg-p i,.cg-p small{color:#C4A184;}
.cal-ley{
  display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;margin-top:1.1rem;
  font-size:.72rem;color:#A89F92;
}
.cal-ley span{display:flex;align-items:center;gap:.4rem;}
.ll{width:13px;height:13px;border-radius:2px;border:1px solid #3A3631;background:#232120;flex:none;}
.ll-c{background:#D9A277;border-color:#D9A277;}
.ll-p{background:#232120;border-color:#D9A277;}
@media (max-width:480px){
  .cg small{display:none;}
  .cg{aspect-ratio:1;}
  .sec-cal .cal{padding:1rem .7rem .9rem;}
}

/* ============================================================
   WHATSAPP DE VERDAD, EN OSCURO
   Eric paso su captura el 12/09/2026. Lo que habia era el WhatsApp
   claro de hace anos: fondo beige #ECE5DD, burbuja verde palido.
   El de ahora es casi negro con el fondo de dibujitos, burbuja
   entrante gris pizarra y saliente verde oscuro.
   ============================================================ */
.st-wa{background:#0B141A;}
.movil-wa .movil-p{background:#0B141A;}
.wa-cab{
  gap:.55rem;padding:.5rem .6rem;background:#1F2C34;color:#E9EDEF;
  align-items:center;
}
.wa-atras{
  display:flex;align-items:center;gap:.28rem;flex:none;
  font-size:.78rem;font-weight:500;color:#E9EDEF;
}
.wa-atras i{
  width:8px;height:8px;border-left:2px solid #E9EDEF;border-bottom:2px solid #E9EDEF;
  transform:rotate(45deg);display:block;
}
.wa-av{width:33px;height:33px;background:#2A3942;color:#8696A0;font-size:.85rem;}
.wa-nom{flex:1;color:#E9EDEF;font-size:.82rem;font-weight:500;}
.wa-nom small{color:#8696A0;font-size:.6rem;font-weight:400;}
.wa-tel{
  width:30px;height:30px;border-radius:50%;background:#2A3942;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.wa-tel i{
  width:13px;height:13px;background:#E9EDEF;display:block;
  clip-path:polygon(28% 0,52% 0,60% 30%,44% 42%,58% 62%,72% 48%,100% 58%,100% 84%,72% 100%,38% 84%,14% 52%,4% 20%);
}
/* el fondo de dibujitos, muy tenue */
.wa-chat{
  background:#0B141A;padding:1rem .6rem 1.1rem;gap:.5rem;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(233,237,239,.045) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 32%, rgba(233,237,239,.04) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 62%, rgba(233,237,239,.035) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 80%, rgba(233,237,239,.04) 0 5px, transparent 6px);
  background-size:130px 130px, 170px 170px, 150px 150px, 190px 190px;
}
.wa-b{border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.2);}
.wa-ellos{background:#1F2C34;color:#E9EDEF;border-top-left-radius:2px;}
.wa-nos{background:#005C4B;color:#E9EDEF;border-top-right-radius:2px;}
.wa-b time{color:#8696A0;}
.wa-nos time{color:rgba(233,237,239,.6);}
.wa-v{color:#53BDEB;}
/* la barra de abajo */
.wa-in{background:#0B141A;padding:.45rem .5rem .9rem;gap:.45rem;align-items:center;}
.wa-in span{
  flex:1;background:#1F2C34;border-radius:999px;height:34px;padding:0;
}
.wa-mas,.wa-peg,.wa-cam{flex:none;background:#8696A0;}
.wa-mas{
  width:17px;height:17px;
  clip-path:polygon(44% 0,56% 0,56% 44%,100% 44%,100% 56%,56% 56%,56% 100%,44% 100%,44% 56%,0 56%,0 44%,44% 44%);
}
.wa-peg{width:15px;height:15px;border-radius:3px;clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);margin-left:-2.3rem;}
.wa-cam{width:16px;height:13px;border-radius:2px;clip-path:polygon(0 22%,26% 22%,34% 5%,66% 5%,74% 22%,100% 22%,100% 100%,0 100%);}
.wa-mic{
  width:32px;height:32px;border-radius:50%;background:#E9EDEF;flex:none;position:relative;
}
.wa-mic::before{
  content:"";position:absolute;inset:0;margin:auto;width:8px;height:14px;
  border-radius:999px 999px 4px 4px;background:#0B141A;
}

/* La barra de estado de WhatsApp salia VERDE: la regla vieja
   «.movil-wa .st{background:#075E54}» gana en especificidad a «.st-wa».
   En el WhatsApp de ahora es del mismo casi negro que el chat. */
.movil-wa .st,.movil-wa .st-wa{background:#0B141A;}
/* La flecha se montaba encima del contador de no leidos. */
.wa-atras{gap:.42rem;padding-right:.15rem;}
.wa-atras i{margin-right:.1rem;}
/* Los iconos del pie, un poco mas finos y bien colocados. */
.wa-peg{margin-left:-2.6rem;width:16px;height:16px;border-radius:50%;clip-path:none;
  background:none;border:1.6px solid #8696A0;}
.wa-cam{width:17px;height:14px;}

/* La flecha y el contador: el numero salia en cursiva y encima de la
   flecha. Cada uno en su elemento y alineados en linea. */
.wa-atras{display:inline-flex;align-items:center;gap:.3rem;font-style:normal;}
.wa-atras .wa-ch{
  width:9px;height:9px;border:0;border-left:2px solid #E9EDEF;border-bottom:2px solid #E9EDEF;
  transform:rotate(45deg);display:block;margin:0;
}
.wa-atras b{font-style:normal;font-weight:500;font-size:.8rem;color:#E9EDEF;line-height:1;}

/* LA CAUSA: la primera regla de .wa-atras, de cuando era solo una flecha,
   ponia transform:rotate(45deg) EN EL CONTENEDOR. Al meterle dentro el
   contador, el numero giraba con el. Se resetea el contenedor y la
   rotacion se queda solo en la flecha. */
.wa-cab .wa-atras{
  transform:none;width:auto;height:auto;border:0;margin-right:0;
  display:inline-flex;align-items:center;gap:.3rem;flex:none;
}

/* ============================================================
   EL CALENDARIO, EN BLANCO Y NEGRO
   Eric, 12/09/2026: «ese fondo no esta bien, visualmente se tiene
   que ver mejor, como en blanco y negro y tal, pero bien».
   Iba en marron oscuro con celdas color arena, copiado del de
   Lumeria, que tiene la paleta de SU marca. Aqui la paleta es la de
   Rexen: hueso, tinta y nada mas. Carrusel = celda de tinta,
   post = celda con borde de tinta, dia vacio = hueso.
   ============================================================ */
.sec-cal .cal{
  background:var(--sup);border:1px solid var(--linea);border-radius:6px;
  padding:1.6rem 1.4rem 1.3rem;
}
.cal-cab b{color:var(--texto);}
.cal-cab span{color:var(--texto-3);}
.cal-sem{
  color:var(--texto-3);border-bottom:1px solid var(--linea);
  padding-bottom:.5rem;margin:1.2rem 0 .5rem;
}
.cg{
  border:1px solid var(--linea);background:var(--fondo);border-radius:2px;
}
.cg b{color:var(--linea-f);}
.cg i,.cg small{color:var(--texto-3);}
.cg-no{border-color:transparent;background:transparent;}
/* carrusel: celda de tinta */
.cg-c{background:var(--tinta);border-color:var(--tinta);}
.cg-c b{color:#F7F5F0;}
.cg-c i{color:#F7F5F0;}
.cg-c small{color:#BDB6AB;}
/* post: solo el borde */
.cg-p{background:var(--sup);border:1.5px solid var(--tinta);}
.cg-p b{color:var(--texto);}
.cg-p i,.cg-p small{color:var(--texto-2);}
.cal-ley{color:var(--texto-2);border-top:1px solid var(--linea);padding-top:.9rem;}
.ll{border:1px solid var(--linea-f);background:var(--fondo);}
.ll-c{background:var(--tinta);border-color:var(--tinta);}
.ll-p{background:var(--sup);border:1.5px solid var(--tinta);}

/* ============================================================
   LOS ICONOS DE WHATSAPP, EN SVG DE CONTORNO
   Estaban hechos con clip-path sobre divs y salian manchas sin
   forma. Eric paso dos capturas el 12/09/2026 pidiendo que se
   vieran bien. Todos de contorno, como los de la app.
   ============================================================ */
.wa-ic{width:22px;height:22px;flex:none;fill:none;stroke:#8696A0;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
/* arriba: video y llamada, los dos juntos en su pildora */
.wa-accs{display:flex;align-items:center;gap:.55rem;flex:none;
  background:#2A3942;border-radius:999px;padding:.3rem .6rem;}
.wa-accs .wa-ic{width:19px;height:19px;stroke:#E9EDEF;}
.wa-cab .wa-tel{display:none;}
/* abajo: el + , el campo con la pegatina dentro, la camara y el microfono */
.wa-in{padding:.5rem .55rem .9rem;gap:.4rem;}
.wa-in .wa-mas{width:24px;height:24px;stroke:#8696A0;stroke-width:1.9;}
.wa-campo{
  flex:1;background:#1F2C34;border-radius:999px;height:36px;padding:0 .5rem 0 0;
  display:flex;align-items:center;justify-content:flex-end;
}
.wa-campo .wa-peg{width:20px;height:20px;}
.wa-in .wa-cam{width:23px;height:23px;}
.wa-mic{
  width:36px;height:36px;border-radius:50%;background:#E9EDEF;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.wa-mic::before{content:none;}
.wa-mic svg{width:19px;height:19px;fill:none;stroke:#0B141A;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}

/* ANULACION DE LAS REGLAS VIEJAS DE LA BARRA DE WHATSAPP.
   Los nombres de clase se reutilizaron al pasar a SVG, asi que las reglas
   de la version anterior seguian pintando: .wa-peg tenia border-radius:50%
   y salia un circulo, .wa-cam tenia background y salia una mancha, y
   «.wa-in span» convertia el circulo del microfono en un campo de texto.
   Se resetean aqui, que es lo ultimo que lee el navegador. */
.wa-in svg.wa-ic,
.wa-in .wa-mas,.wa-in .wa-peg,.wa-in .wa-cam{
  background:none!important;border:0!important;border-radius:0!important;
  clip-path:none!important;margin:0!important;
}
.wa-in > span.wa-mic{
  background:#E9EDEF!important;border-radius:50%!important;
  width:36px!important;height:36px!important;flex:none!important;
  padding:0!important;display:flex!important;align-items:center;justify-content:center;
}
.wa-in > span.wa-campo{
  background:#1F2C34!important;border-radius:999px!important;height:36px!important;
  flex:1!important;padding:0 .55rem 0 0!important;
  display:flex!important;align-items:center;justify-content:flex-end;
}

/* La barra de estado: cobertura y wifi en SVG, y la bateria con su numero
   dentro, como en las capturas que paso Eric. Los clip-path de antes
   salian como manchas sin forma. */
.st-i{display:flex;align-items:center;gap:.3rem;}
.st-ic{height:11px;width:auto;fill:#fff;stroke:none;flex:none;}
.st-ic.st-w{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;height:12px;}
.st-bat{
  width:26px;height:13px;border-radius:3.5px;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.st-bat b{font-size:.55rem;font-weight:700;color:#000;line-height:1;}
.st-bat::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:2px;height:5px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.5);
}

/* el pie tambien, para que no se salga de la columna */
.sec .pie{max-width:46ch;}
@media (max-width:620px){
  .hero h1,.sec h2{max-width:20ch;}
  .hero .sub,.sec .lead,.sec .pie{max-width:34ch;}
}

/* lo que es rejilla o montaje se queda como bloque centrado */
.movil{margin-left:auto;margin-right:auto;}
.circ,.fichas,.gars,.logos,.cal-x,.cli-x,.sec-cal .cal{max-width:1000px;}
.cierre .btn,.hero .btn{margin-left:0;}
@media (min-width:900px){
  /* en ordenador la columna de texto se alinea con la del contenido */
  .hero > *,.sec > *:not(.movil):not(.ig-grid),.cierre > *{max-width:56ch;}
  .hero h1,.sec h2{max-width:26ch;}
}


/* La celda del calendario: solo el dia y la letra, en grande. Los titulos
   iban a 0,45 rem y no se leian. */
.cg{padding:.35rem .1rem;gap:.1rem;justify-content:center;}
.cg b{font-size:.92rem;}
.cg i{font-family:'Archivo',sans-serif;font-style:normal;font-size:1rem;font-weight:600;line-height:1;}
.cg small{display:none;}
.cal-ley b{font-family:'Archivo',sans-serif;font-weight:600;margin-right:.15rem;}
@media (max-width:480px){ .cg{aspect-ratio:.9;} .cg b{font-size:.8rem;} .cg i{font-size:.86rem;} }

/* ============================================================
   EL CALENDARIO: BLANCO Y NEGRO CON RECUADRO VERDE
   Eric, 12/09/2026: «que sea blanco y negro y recuadro en verde,
   pero sin que sea muy agresivo». Y los titulos CENTRADOS, no a la
   izquierda: la tarjeta iba con text-align:left y cantaba al lado
   del resto de la pagina, que va centrada.
   ============================================================ */
.sec-cal .cal{text-align:center;}
.cal-cab b,.cal-cab span{text-align:center;}
.cal-ley{justify-content:center;}

/* el dia con contenido: fondo claro y recuadro verde fino */
.cg-p{
  background:var(--sup);border:1.5px solid var(--verde);
}
.cg-p b{color:var(--texto);}
.cg-p i{color:var(--verde);}
/* el carrusel: el mismo recuadro y un tinte verde muy suave, para que se
   distinga del post sin meter otro color */
.cg-c{
  background:rgba(35,122,74,.10);border:1.5px solid var(--verde);
}
.cg-c b{color:var(--texto);}
.cg-c i{color:var(--verde);font-weight:700;}
/* el dia libre: hueso y borde tenue, sin verde */
.cg{background:var(--fondo);border:1px solid var(--linea);}
.cg b{color:var(--linea-f);}
/* la leyenda, con las mismas muestras */
.ll-c{background:rgba(35,122,74,.10);border:1.5px solid var(--verde);}
.ll-p{background:var(--sup);border:1.5px solid var(--verde);}
.ll{background:var(--fondo);border:1px solid var(--linea);}
.cal-ley b{color:var(--verde);}

/* El recuadro verde no se veia: «.cg» y «.cg-p» tienen la misma
   especificidad y la del dia libre estaba escrita despues, asi que ganaba
   ella y pintaba el borde gris. Con las dos clases juntas ya manda esta. */
.cg.cg-p{background:var(--sup);border:1.5px solid var(--verde);}
.cg.cg-c{background:rgba(35,122,74,.10);border:1.5px solid var(--verde);}
.cg.cg-p b,.cg.cg-c b{color:var(--texto);}
.cg.cg-p i,.cg.cg-c i{color:var(--verde);}

/* Mismo caso que el de las celdas: «.ll» iba despues de «.ll-c» y «.ll-p»
   y les pisaba el verde, y «.cg» le pisaba a «.cg-no» el fondo, asi que
   los huecos del principio y del final del mes se veian como cajas. */
.ll.ll-c{background:rgba(35,122,74,.10);border:1.5px solid var(--verde);}
.ll.ll-p{background:var(--sup);border:1.5px solid var(--verde);}
.cg.cg-no{background:transparent;border-color:transparent;}

/* ============================================================
   EL CALENDARIO, VERSION FINAL
   Eric, 12/09/2026: la palabra entera -carrusel, post, reel- en vez
   de la letra, y el dia sin contenido EN ROJO con su recuadro, como
   los demas. Blanco y negro con el verde de contorno, sin agresividad.
   ============================================================ */
.cg{aspect-ratio:auto;min-height:56px;padding:.4rem .15rem;}
.cg b{font-size:.86rem;}
.cg i{
  font-family:var(--mono);font-style:normal;font-weight:700;
  font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
}
/* los tres formatos: el mismo recuadro verde, y el carrusel con tinte */
.cg.cg-carrusel{background:rgba(35,122,74,.10);border:1.5px solid var(--verde);}
.cg.cg-reel,.cg.cg-post{background:var(--sup);border:1.5px solid var(--verde);}
.cg.cg-carrusel b,.cg.cg-reel b,.cg.cg-post b{color:var(--texto);}
.cg.cg-carrusel i,.cg.cg-reel i,.cg.cg-post i{color:var(--verde);}
/* el dia sin contenido: recuadro ROJO, igual de fino */
.cg.cg-libre{background:rgba(199,55,28,.07);border:1.5px solid var(--marca);}
.cg.cg-libre b{color:var(--texto-2);}
.cg.cg-libre i{color:var(--marca);}
/* las muestras de la leyenda */
.ll.ll-carrusel{background:rgba(35,122,74,.10);border:1.5px solid var(--verde);}
.ll.ll-reel,.ll.ll-post{background:var(--sup);border:1.5px solid var(--verde);}
.ll.ll-libre{background:rgba(199,55,28,.07);border:1.5px solid var(--marca);}
.cal-ley{gap:.45rem .9rem;font-size:.7rem;}
@media (max-width:480px){
  .cg{min-height:48px;}
  .cg i{font-size:.42rem;letter-spacing:.03em;}
}

/* El unico bloque que se quedaba sin centrar: las 3 cifras de clientes.
   Lo puse a la izquierda en un media query de movil y desentonaba. */
.cli-x{text-align:center;justify-items:center;}
.cli-x span{justify-content:center;text-align:center;}
@media (max-width:520px){
  .cli-x{text-align:center;max-width:320px;}
  .cli-x span{flex-direction:row;justify-content:center;}
}

/* ============================================================
   LOS DIBUJOS EN VEZ DE EMOTICONOS (Eric, 12/09/2026: «algo mas
   profesional»). En blanco dentro de un circulo verde, como en la home.
   ============================================================ */
.cx-e{display:grid;place-items:center;width:52px;height:52px;margin:0 auto .15rem;border-radius:50%;background:var(--verde);box-shadow:0 8px 20px rgba(35,122,74,.25);font-size:0;}
.cx-i{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fx-e{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--verde);box-shadow:0 6px 16px rgba(35,122,74,.22);font-size:0;}
.fx-i{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ============================================================
   CIERRE MAS GRANDE. Eric, 12/09/2026: «¿Lo hacemos con tu negocio?
   puede ser un poco mas grande, el boton un poco mas grande, como el
   titulo». Solo la pregunta y el boton: ya esta todo dicho arriba.
   ============================================================ */
.cierre > *{max-width:900px;}
.cierre h2{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.05;max-width:18ch;margin-left:auto;margin-right:auto;}
/* debajo del boton, pequeno: cuanto tardamos y que no compromete */
.cierre .micro{margin-top:1.1rem;font-size:.7rem;}
/* los 3 datos de clientes, mas visibles: 0 permanencia, 15 dias de aviso, 93 % renueva */
.cli-x{margin-top:2.2rem;}
.cli-x b{font-size:2rem !important;}
.cierre .btn{margin-top:2.4rem;padding:1.3rem 2.9rem;font-size:1.22rem;border-radius:6px;}
@media (max-width:620px){.cierre .btn{width:100%;max-width:340px;padding:1.2rem 1.5rem;font-size:1.12rem;}}

/* ---------- el cierre con texto y los 3 puntos (Eric: «muy vacio») ---------- */
.cierre .cierre-p{margin:1.3rem auto 0;max-width:58ch;font-size:1.06rem;line-height:1.65;color:var(--texto-2);text-wrap:pretty;}
.cierre .cierre-p b{color:var(--texto);}
.cierre-pts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.7rem auto 0;}
.cierre-pts span{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.05rem;border-radius:99px;background:var(--sup);border:1px solid var(--linea-f);font-size:.92rem;}
.cierre-pts b{font-weight:700;}
.pt-i{width:18px;height:18px;flex:none;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:620px){.cierre-pts{flex-direction:column;align-items:stretch;max-width:320px;}.cierre-pts span{justify-content:center;}}

/* ---------- donde estamos: oficinas en rojo, clientes en verde ---------- */
@media (min-width:900px){.sec > .mapa:not(.movil):not(.ig-grid),.sec > .mp-ley:not(.movil):not(.ig-grid){max-width:1100px;}}
.mapa{width:100%;max-width:1100px;margin:2.4rem auto 0;background:#FFFFFF;border:1px solid #E3DED5;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(27,26,24,.08);}
.mapa svg{display:block;width:100%;height:auto;}
.mp-tierra{fill:#E9E4D9;stroke:#FFFFFF;stroke-width:.6;}
.mp-cli{fill:#237A4A;stroke:#FFFFFF;stroke-width:.6;}
.mp-halo{fill:rgba(199,55,28,.22);}
.mp-dot{fill:#C7371C;stroke:#fff;stroke-width:2;}
.mp-cdot{fill:#FFFFFF;stroke:#1B1A18;stroke-width:2;}
.mp-guia{fill:none;stroke:#C7371C;stroke-width:1.5;}
.mp-ofi,.mp-ciudad,.mp-pais{paint-order:stroke;stroke:#FFFFFF;stroke-width:5px;stroke-linejoin:round;}
.mp-ofi{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:106%;font-size:17px;fill:#C7371C;text-transform:uppercase;letter-spacing:.03em;}
.mp-ciudad{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:13px;fill:#1B1A18;}
.mp-pais{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:15px;fill:#237A4A;text-transform:uppercase;letter-spacing:.04em;}
.mp-ley{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin:1.2rem auto 0;font-size:.88rem;font-weight:600;color:var(--texto-2);}
.mp-ley span{display:inline-flex;align-items:center;gap:.5rem;text-align:left;}
.mp-ley i{flex:none;}
.mp-ley i{width:14px;height:14px;border-radius:50%;display:inline-block;}
.ley-ofi{background:#C7371C;box-shadow:0 0 0 4px rgba(199,55,28,.2);}
.ley-cli{background:#237A4A;border-radius:3px !important;}
@media (max-width:620px){.mapa{border-radius:10px;} .mp-ofi{font-size:32px;} .mp-ciudad{font-size:27px;} .mp-pais{font-size:28px;} .mp-ofi,.mp-ciudad,.mp-pais{stroke-width:8px;} .mp-ley{flex-direction:column;align-items:center;gap:.5rem;font-size:.84rem;}}
/* los enlaces a la agencia debajo del mapa de las landings */
.ag-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem;margin:1.8rem auto 0;}
.ag-links a{font-weight:700;color:var(--texto);text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:5px;}
.ag-links a::after{content:" →";color:var(--verde);}
.ag-links a:hover{color:var(--verde);}

/* ---------- las dos cosas del hero de las landings, numeradas ----------
   Eric, 12/09/2026: «que se entienda mucho mas en movil: dos cosas, centrado,
   uno y el punto las redes, dos y el punto el agente». */
.hero > .dos{width:100%;max-width:800px;margin:1.9rem auto 0;}
.dos-t{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:106%;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texto);}
.dos-g{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1rem;}
@media (min-width:760px){.dos-g{grid-template-columns:1fr 1fr;gap:1rem;}}
.dos-i{margin:0;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.15rem 1.25rem 1.25rem;background:#fff;border:1px solid var(--linea-f);border-radius:14px;box-shadow:0 8px 24px rgba(27,26,24,.06);text-align:center;font-size:1.04rem;line-height:1.5;color:var(--texto-2);text-wrap:pretty;}
.dos-n{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:106%;font-size:2.2rem;line-height:1;color:var(--verde);}