/* ============================================================
   LA HOME · se apoya en nicho.css, el de las 15 landings, y usa
   sus montajes tal cual (perfil, calendario, WhatsApp, circuito,
   logos). Aqui van SOLO los que la home tiene y aquellas no:
   el muro de anuncios, Google, ChatGPT, la web en el movil, la
   bandeja de correo, las etiquetas de servicio, los 12, las 5
   condiciones, el pie y el aviso de cookies.
   Eric, 12/09/2026: «no es lo mismo escribirlo que verlo». Cada
   montaje tiene que leerse como una CAPTURA, no como un diagrama.
   TODO CENTRADO fuera de los montajes. Rejillas que cierran fila.
   ============================================================ */

.sec-hondo{background:var(--hondo);}
/* ---------- el titular de la home: GRANDE y en MAYUSCULAS ----------
   Eric, 12/09/2026: «como mas en grande y mayusculas, al final es el
   titulo». Registro de impacto de la norma tipografica: Archivo al 74 % de
   anchura y peso 800. Mas especifico que .hero h1 de nicho.css.
   Despues, Eric: «muy apretujado, muy estrecho y poco ancho»: misma letra
   (Archivo), con el eje de anchura al 106 %. */
.hero .h1-grande{
  text-transform:uppercase;font-stretch:106%;font-weight:800;
  font-size:clamp(1.9rem,9.4vw,5rem);line-height:.95;letter-spacing:-.005em;
  max-width:none;margin-left:auto;margin-right:auto;
}
.hero .h1-grande em{font-weight:800;}
/* en ordenador, mas ancho: a 13ch «NOS» se quedaba solo en la primera linea */
/* por lineas: una idea por linea, y MARKETING e IA mas grandes y en verde.
   Eric: «destacar las palabras que sean clave, una palabra debajo de la otra» */
.hero .h1-grande > span{display:block;}
.hero .h1-grande .h1-k{font-size:1.38em;line-height:.88;}
/* Eric: «el IA abajo no me termina de gustar». Lo de automatizar va en UNA
   frase, mas pequena, debajo de MARKETING; IA en verde pero sin linea propia */
.hero .h1-grande .h1-s{font-size:.5em;line-height:1.12;margin-top:.45em;text-wrap:balance;}
@media (max-width:620px){.hero .h1-grande .h1-s{font-size:.6em;}}
@media (min-width:900px){.hero .h1-grande{font-size:clamp(3rem,5.2vw,5rem);}}

/* las secciones de nicho.css encogen a sus hijos al contenido: los bloques
   de la home ocupan su ancho entero, con su max-width */
.duo,.ads,.grs,.svcs{width:100%;} /* las secciones */
.gr-e,.gs i,.svcs i,.wb-f i{
  font-style:normal;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.m-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}

/* la chapa que dice que servicio pone esa pieza ahi */
.m-chapa{
  position:absolute;right:10px;top:10px;padding:.22rem .5rem;border-radius:99px;
  background:var(--verde);color:#fff;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

/* las etiquetas de servicio debajo de cada montaje */
.svcs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.8rem;}
.svcs a{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:99px;
  background:var(--sup);border:1px solid var(--linea-f);color:var(--texto);
  font-size:.86rem;font-weight:600;text-decoration:none;transition:border-color .2s var(--ease);
}
.svcs a:hover{border-color:var(--verde);}

/* dos montajes lado a lado arriba, uno encima de otro en movil */
.duo{display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;align-items:start;margin:2.6rem auto 0;max-width:1000px;}
@media (min-width:900px){.duo{grid-template-columns:repeat(2,1fr);}}

/* nicho.css (linea ~744) limita en ordenador cada hijo de seccion a 56ch,
   salvo el movil de Instagram. Aqui eso apretaba Google y ChatGPT a 273 px y
   partia los 12 servicios y las 5 condiciones palabra a palabra. Los
   montajes y las rejillas de la home recuperan su ancho con una regla MAS
   especifica, sin tocar las landings. */
@media (min-width:900px){
  .sec > .duo:not(.movil):not(.ig-grid),
  .sec > .grs:not(.movil):not(.ig-grid),
  .sec > .gars:not(.movil):not(.ig-grid){max-width:1000px;}
  .sec > .ads:not(.movil):not(.ig-grid){max-width:760px;}
}

/* ---------- 1 · el muro de anuncios: 3x2 arriba, 2x3 en movil ---------- */
.ads{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:2.6rem auto 0;max-width:760px;}
@media (min-width:760px){.ads{grid-template-columns:repeat(3,1fr);gap:16px;}}
.ad{margin:0;display:flex;flex-direction:column;gap:.55rem;}
.ad-m{
  aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--tinta);
  border:1px solid var(--linea-f);box-shadow:0 10px 30px rgba(27,26,24,.10);
}
.ad-m{position:relative;}
.ad-m video,.ad-m img{width:100%;height:100%;object-fit:cover;display:block;}
/* los controles de cada anuncio: avance, sonido, volumen y lo que queda */
.adc{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:30px 10px 9px;background:linear-gradient(to top,rgba(12,11,10,.82),rgba(12,11,10,0));color:#fff;}
.adc input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;--p:0%;}
.adc input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px;}
.adc input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#fff var(--p),rgba(255,255,255,.32) var(--p));}
.adc input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.32);}
.adc input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:#fff;}
.adc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);}
.adc input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);}
.adc-f{display:flex;align-items:center;gap:8px;}
.adc-s{flex:none;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:background .2s;}
.adc-s:hover{background:rgba(255,255,255,.32);}
.adc-s svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.adc-s svg path:first-child{fill:currentColor;}
.adc.on .adc-s{background:#25D366;color:#08130C;}
.adc-v{flex:1;min-width:0;}
.adc.on .adc-v::-webkit-slider-runnable-track{background:linear-gradient(to right,#25D366 var(--p),rgba(255,255,255,.32) var(--p));}
.adc.on .adc-v::-moz-range-progress{background:#25D366;}
.adc-q{flex:none;margin-left:auto;font-family:var(--mono);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5);}
@media (max-width:420px){.adc{padding:26px 7px 7px;}.adc-f{gap:5px;}.adc-s{width:32px;height:32px;}.adc-s svg{width:17px;height:17px;}.adc-q{font-size:.66rem;}}
.ad figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);text-align:center;}
.ads + .svcs + .circ{margin-top:3rem;}

/* ---------- 2 · Google ---------- */
.gg,.ai,.mail{
  width:100%;max-width:470px;background:#fff;border:1px solid var(--linea-f);border-radius:14px;
  box-shadow:0 14px 40px rgba(27,26,24,.10);text-align:left;overflow:hidden;
  font-family:Arial,'Inter',sans-serif;color:#202124;
}
.gg{padding:1rem 1rem 1.1rem;}
.gg-top{display:flex;justify-content:center;margin:.2rem 0 .7rem;}
.gg-logo{font-family:'Product Sans',Arial,sans-serif;font-size:1.55rem;letter-spacing:-.02em;font-weight:500;}
.gg-logo i{font-style:normal;}
.gg-logo i:nth-child(1),.gg-logo i:nth-child(4){color:#4285F4;}
.gg-logo i:nth-child(2),.gg-logo i:nth-child(6){color:#EA4335;}
.gg-logo i:nth-child(3){color:#FBBC05;}
.gg-logo i:nth-child(5){color:#34A853;}
.gg-q{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border:1px solid #dfe1e5;border-radius:99px;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:.88rem;color:#202124;}
.gg-q .m-ic{color:#9aa0a6;}
.gg-tabs{display:flex;gap:1.1rem;margin:.8rem .2rem .3rem;font-size:.74rem;color:#5f6368;border-bottom:1px solid #ebebeb;}
.gg-tabs b{color:#1a73e8;font-weight:500;border-bottom:3px solid #1a73e8;padding-bottom:.45rem;}
.gg-r{position:relative;padding:.85rem .2rem .7rem;border-bottom:1px solid #f1f1f1;display:flex;flex-direction:column;gap:.18rem;}
.gg-pat{font-size:.7rem;font-weight:700;color:#202124;}
.gg-site{display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:#202124;}
.gg-site i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#F1EDE6;font-style:normal;font-weight:700;font-size:.7rem;color:var(--marca);}
.gg-site span{display:flex;flex-direction:column;line-height:1.25;}
.gg-site small{font-size:.66rem;color:#4d5156;}
.gg-t{font-size:1rem;font-weight:400;color:#1a0dab;line-height:1.3;margin-top:.15rem;padding-right:4.5rem;}
.gg-d{font-size:.76rem;color:#4d5156;line-height:1.45;}
.gg-map{position:relative;margin:.75rem 0 .2rem;border:1px solid #ebebeb;border-radius:10px;overflow:hidden;}
.gg-mapa{
  position:relative;height:92px;
  background:
    linear-gradient(90deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),
    linear-gradient(0deg,transparent 38%,#fff 38%,#fff 43%,transparent 43%),
    linear-gradient(35deg,transparent 60%,#fde7a8 60%,#fde7a8 64%,transparent 64%),
    #e8f0e3;
}
.gg-mapa i{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#9aa0a6;}
.gg-mapa i:nth-child(1){left:30%;top:28%;}
.gg-mapa i:nth-child(2){left:62%;top:52%;}
.gg-mapa i:nth-child(3){left:78%;top:20%;}
.gg-mapa i.on{background:#EA4335;width:20px;height:20px;box-shadow:0 0 0 4px rgba(234,67,53,.18);}
.gg-loc{padding:.55rem .75rem;border-top:1px solid #f1f1f1;display:flex;flex-direction:column;font-size:.72rem;color:#70757a;}
.gg-loc b{font-size:.86rem;font-weight:400;color:#1a0dab;}
.gg-loc.on{background:#f8faff;}
.gg-map .m-chapa{top:8px;}

/* ---------- 2 · ChatGPT ---------- */
.ai{background:#fff;display:flex;flex-direction:column;}
.ai-top{display:flex;align-items:center;gap:.4rem;padding:.8rem 1rem;font-size:.9rem;border-bottom:1px solid #f0f0f0;}
.ai-top span{color:#8e8ea0;}
.ai-yo{align-self:flex-end;margin:1rem 1rem .4rem 3rem;padding:.6rem .9rem;border-radius:18px;background:#f4f4f4;font-size:.84rem;line-height:1.4;}
.ai-r{position:relative;margin:.6rem 1rem 1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.84rem;line-height:1.5;color:#0d0d0d;padding-top:1.3rem;}
.ai-r .m-chapa{top:0;right:0;}
.ai-src{display:inline-block;margin-left:.25rem;padding:.05rem .45rem;border-radius:99px;background:#f0f0f0;font-size:.64rem;color:#5d5d5d;vertical-align:1px;}
.ai-gris{color:#8e8ea0;}
.ai-in{margin:auto .8rem .8rem;display:flex;align-items:center;justify-content:space-between;padding:.6rem .6rem .6rem 1rem;border:1px solid #e5e5e5;border-radius:24px;font-size:.8rem;color:#8e8ea0;}
.ai-in i{width:26px;height:26px;border-radius:50%;background:#0d0d0d;}

/* ---------- 3 · la web en el movil ---------- */
.tel{position:relative;width:250px;}
.tel-p{
  border:9px solid var(--tinta);border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(27,26,24,.18);text-align:left;aspect-ratio:9/18.5;
  display:flex;flex-direction:column;
}
/* la chapa va ENCIMA del marco: dentro tapaba el menu de la web */
.tel .m-chapa{top:-12px;right:50%;transform:translateX(50%);}
.wb-nav{display:flex;justify-content:space-between;align-items:center;padding:.9rem .9rem .6rem;font-size:.62rem;letter-spacing:.18em;}
.wb-nav i{width:16px;height:10px;border-top:2px solid #222;border-bottom:2px solid #222;position:relative;}
.wb-nav i::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid #222;}
.wb-hero{padding:.6rem .9rem .8rem;display:flex;flex-direction:column;gap:.35rem;}
.wb-k{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);}
.wb-hero b{font-family:'Archivo',sans-serif;font-size:1.15rem;line-height:1.1;font-weight:600;}
.wb-btn{align-self:flex-start;margin-top:.35rem;padding:.45rem .8rem;border-radius:4px;background:var(--wa);color:#08130C;font-size:.66rem;font-weight:700;}
.wb-img{height:88px;margin:0 .9rem;border-radius:8px;background:linear-gradient(135deg,#d9cbb6,#efe6d8 55%,#c9b89e);}
.wb-f{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .9rem 0;font-size:.62rem;color:#5b5750;line-height:1.35;}
.wb-f i{font-size:.95rem;}
.wb-f b{display:block;color:#1b1a18;font-size:.7rem;}

/* ---------- 3 · la bandeja de correo ---------- */
.mail{position:relative;align-self:center;}
.mail-top{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem;font-size:1rem;border-bottom:1px solid #f0f0f0;}
.mail-top span{color:#1a73e8;}
.mail > .m-chapa{top:14px;right:44px;}
.mail-f{display:grid;grid-template-columns:34px 1fr auto;gap:.65rem;align-items:start;padding:.75rem 1rem;border-bottom:1px solid #f3f3f3;}
.mail-f i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8eaed;font-style:normal;font-weight:700;font-size:.8rem;color:#5f6368;}
.mail-f.on i{background:#F1EDE6;color:var(--marca);}
.mail-f span{display:flex;flex-direction:column;min-width:0;font-size:.76rem;line-height:1.35;}
.mail-f b{font-size:.82rem;}
.mail-f em{font-style:normal;color:#202124;}
.mail-f small{color:#70757a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-f time{font-size:.66rem;color:#70757a;}
.mail-f.on b,.mail-f.on em,.mail-f.on time{font-weight:700;}
.mail-f:not(.on){opacity:.55;}

/* ---------- los 12 en 4 bloques: 4 / 2 / 1 ---------- */
.grs{display:grid;grid-template-columns:1fr;gap:14px;margin:2.6rem auto 0;}
@media (min-width:640px){.grs{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1040px){.grs{grid-template-columns:repeat(4,1fr);}}
.gr{
  background:var(--sup);border:1px solid var(--linea);border-radius:5px;
  padding:1.5rem 1rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.gr-e{font-size:2rem;}
.gr > b{font-family:'Archivo',system-ui,sans-serif;font-size:1.12rem;font-weight:600;font-stretch:106%;color:var(--verde);letter-spacing:-.012em;margin-top:.4rem;}
.gr-s{align-self:stretch;display:flex;flex-direction:column;margin-top:.9rem;border-top:1px solid var(--linea);}
.gs{
  display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem .3rem;
  border-bottom:1px solid var(--linea);font-size:.95rem;font-weight:600;color:var(--texto);
  text-decoration:none;transition:background .2s var(--ease);
}
.gs:last-child{border-bottom:0;}
.gs:hover{background:var(--fondo);}
.gs i{font-size:1.1rem;}

/* ---------- sin riesgo: 5 en fila arriba, 1 en columna abajo ---------- */
.sec-gar .gars{grid-template-columns:1fr;max-width:520px;}
@media (min-width:980px){.sec-gar .gars{grid-template-columns:repeat(5,1fr);max-width:1180px;}}

/* ---------- clientes con video (ocultos por ahora) ---------- */
.h3v{font-family:'Archivo',system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(1.45rem,4.2vw,2.1rem);line-height:1.15;margin-top:4rem;text-wrap:balance;}
.h3v em{font-style:normal;color:var(--verde);font-weight:600;}
.vcs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:2.2rem auto 0;max-width:940px;}
@media (min-width:900px){.vcs{grid-template-columns:repeat(4,1fr);}}
.vc{margin:0;background:var(--sup);border:1px solid var(--linea);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;text-align:center;}
.vc-cara{aspect-ratio:3/4;background:var(--hondo);overflow:hidden;border-bottom:1px solid var(--linea);}
.vc-cara video{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.vc-p{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.9rem .7rem 1rem;}
.vc-p b{font-size:.9rem;font-weight:600;}
.vc-p > span{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);line-height:1.5;}
.vc-s{margin-top:.6rem;padding:.32rem .65rem;border:1px solid var(--linea-f);border-radius:99px;font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);text-decoration:none;}

/* ---------- pie: mapa de la web y legales ---------- */
.pie-i{border-top:1px solid var(--linea);}
.pie-n{display:grid;grid-template-columns:1fr;gap:1.8rem;text-align:center;max-width:760px;margin:0 auto;padding:2.6rem clamp(1.1rem,5vw,2rem) 2rem;}
.pie-n b{display:block;margin-bottom:.8rem;font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);}
.pie-n ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem;}
.pie-n a{color:var(--texto-2);text-decoration:none;font-size:.88rem;}
.pie-n a:hover{color:var(--texto);}
.pie-i .pie-w{justify-content:center;text-align:center;}
.pie-legal a{color:inherit;}

/* ---------- aviso de cookies ----------
   Lo pinta assets/pixel.js con las clases de estilo.css, que esta pagina no
   carga. Rechazar y aceptar pesan lo mismo: si no, no es consentimiento libre. */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--sup);border-top:1px solid var(--linea-f);box-shadow:0 -8px 30px rgba(27,26,24,.10);padding:1.1rem clamp(1rem,5vw,3rem) calc(1.1rem + env(safe-area-inset-bottom));}
.ck[hidden]{display:none;}
.ck-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;}
.ck-t{flex:1 1 22rem;font-size:.9rem;line-height:1.55;color:var(--texto-2);margin:0;text-align:left;}
.ck-t b{color:var(--texto);font-weight:600;}
.ck-t a{color:var(--verde);}
.ck-b{display:flex;gap:.6rem;flex:0 0 auto;}
.ck-b .btn,.ck-b button{margin-top:0;padding:.7rem 1.2rem;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;background:var(--sup);color:var(--texto);border:1px solid var(--linea-f);border-radius:4px;}
@media (max-width:620px){.ck-b{width:100%;}.ck-b .btn,.ck-b button{flex:1;}}

/* ---------- los dibujos (antes emoticonos) ----------
   Eric, 12/09/2026: «algo mas profesional», y en «Que compre» el euro. El
   del bloque va en blanco dentro de un circulo verde; los de cada servicio,
   de linea en verde. */
.gr-e{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--verde);box-shadow:0 8px 22px rgba(35,122,74,.28);font-size:0;}
.gr-i{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sv-i{width:19px;height:19px;flex:none;fill:none;stroke:var(--verde);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.gs{gap:.55rem;}

/* El menu de arriba vive en menu.css: lo cargan TODAS las paginas. */

/* El mapa de «Donde estamos» vive en nicho.css: tambien lo llevan las landings. */

/* la etiqueta roja de arriba de la home, un pelin mas grande (Eric, 12/09/2026) */
.hero > .et-home{font-size:.8rem;letter-spacing:.18em;margin-bottom:1.15rem;}