/* Estilos del popup de la oferta, sueltos para las páginas ANTIGUAS.

   Las páginas que genera build.py ya los llevan dentro de site.css. Las de la
   web anterior cargan bold.css y no los tenían: el diálogo salía con los campos
   descolocados y el icono de WhatsApp a pantalla completa.

   Dos decisiones a propósito:
   - Las variables y la tipografía cuelgan de .pop y NO de :root. bold.css usa
     nombres parecidos y tocarlos en la raíz repintaría la página entera.
   - Las clases genéricas del formulario (.form, .field, .btn…) van copiadas de
     site.css pero prefijadas con .pop, por el mismo motivo.
*/
.pop{
  --card:#ffffff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ink:#111110;
  --line:rgba(17,17,16,.16);
  --line-inv:rgba(246,245,242,.18);
  --muted:#6b6a63;
  --muted-2:#9d9a90;
  --paper:#f6f5f2;
  --r:5px;
  --red:#ff2d2d;
  --wa:#25d366;
  --wa-d:#1da851;
  --sans:'General Sans','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --text:'Switzer','Helvetica Neue','Segoe UI',Arial,sans-serif;
  font-family:var(--text);
}
.pop *{font-family:inherit}

/* ---- clases genéricas que usa el diálogo, copiadas de site.css y prefijadas ---- */
.pop .acc{color:var(--red)}
.pop .small{font-size:.9rem;color:var(--muted)}
.pop .label{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted)}
.pop .label::before{content:"";width:22px;height:2px;background:var(--red);display:inline-block}

.pop .btn{display:inline-flex;align-items:center;gap:.65em;font-family:var(--sans);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding:1.02em 1.7em;border-radius:var(--r);
  border:1.5px solid var(--ink);transition:.3s var(--ease);white-space:nowrap;cursor:pointer;
  background:none;color:var(--ink);text-decoration:none}
.pop .btn svg{width:1.18em;height:1.18em;flex:none}
.pop .arw,.pop .btn .arw{display:inline-block;transition:transform .3s var(--ease)}
.pop .btn:hover .arw{transform:translateX(4px)}
.pop .btn--red{background:var(--red);border-color:var(--red);color:#fff}
.pop .btn--red:hover{background:var(--ink);border-color:var(--ink)}
.pop .btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.pop .btn--wa:hover{background:var(--wa-d);border-color:var(--wa-d);color:#fff}

.pop .form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pop .field{display:flex;flex-direction:column;gap:8px}
.pop .field.full{grid-column:1/-1}
.pop .field label{font-family:var(--sans);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;
  color:var(--muted);font-weight:500}
.pop .field input,.pop .field textarea,.pop .field select{font-family:var(--text);font-size:1rem;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  color:var(--ink);transition:.2s;width:100%}
.pop .field input:focus,.pop .field textarea:focus,.pop .field select:focus{border-color:var(--ink);outline:none}
.pop .field textarea{resize:vertical;min-height:140px}
@media(max-width:820px){
  .pop .form{grid-template-columns:1fr}
}

/* ================= popup de la oferta de migración a HTML ================= */
/* El diálogo vive fuera del flujo de la página: se abre sobre ella, atrapa el
   foco mientras está abierto y se cierra con Esc, con la X o pulsando fuera. */
.pop{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  padding:clamp(12px,3vw,32px);overscroll-behavior:contain}
.pop[open],.pop.is-open{display:grid}
.pop__velo{position:absolute;inset:0;background:rgba(10,10,10,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s var(--ease)}
.pop.is-in .pop__velo{opacity:1}

.pop__caja:focus{outline:none}
.pop__caja{position:relative;width:min(100%,980px);max-height:min(94vh,880px);
  overflow:auto;-webkit-overflow-scrolling:touch;background:var(--ink);color:var(--paper);
  border-radius:calc(var(--r) * 2);box-shadow:0 40px 100px rgba(0,0,0,.5);
  display:grid;grid-template-columns:1fr 1fr;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pop.is-in .pop__caja{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pop__velo,.pop__caja{transition:none}
  .pop__caja{transform:none}
}

.pop__x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-inv);
  background:rgba(17,17,16,.55);color:var(--paper);cursor:pointer;
  font-size:20px;line-height:1;transition:.25s var(--ease)}
.pop__x:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg)}

/* --- lado izquierdo: el gancho --- */
.pop__pitch{padding:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;gap:16px;
  justify-content:center}
.pop__pitch .label{margin-bottom:2px}
.pop__tit{font-family:var(--sans);font-weight:600;line-height:1.02;letter-spacing:-.028em;
  font-size:clamp(1.75rem,3.1vw,2.5rem)}
.pop__desde{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pop__chip{font-family:var(--sans);font-weight:500;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.07em;padding:.45em .75em;border:1px solid var(--line-inv);border-radius:var(--r);
  color:rgba(246,245,242,.76)}
.pop__chip--dest{background:var(--red);border-color:var(--red);color:#fff}
.pop__flecha{color:var(--red);font-size:1rem;line-height:1}
.pop__precio{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 0;border-block:1px solid var(--line-inv)}
.pop__precio b{font-family:var(--sans);font-weight:600;line-height:.9;letter-spacing:-.04em;
  font-size:clamp(2.8rem,5vw,3.9rem)}
.pop__precio i{font-style:normal;font-family:var(--sans);font-weight:500;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2)}
.pop__txt{font-size:1rem;line-height:1.5;color:rgba(246,245,242,.76)}
.pop__feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.pop__feat li{position:relative;padding-left:20px;font-size:.93rem;line-height:1.4;
  color:rgba(246,245,242,.84)}
.pop__feat li::before{content:"";position:absolute;left:0;top:.44em;width:8px;height:8px;
  background:var(--red);border-radius:2px}
.pop__cond{border-left:2px solid var(--red);padding:1px 0 1px 13px;
  font-size:.84rem;line-height:1.45;color:rgba(246,245,242,.66)}
.pop__cond a{border-bottom:1px solid rgba(246,245,242,.35)}
.pop__cond a:hover{border-bottom-color:var(--red);color:#fff}

/* --- lado derecho: el formulario --- */
.pop__panel{--pop-px:clamp(24px,3vw,38px);--pop-py:clamp(24px,3vw,38px);
  background:var(--card);color:var(--ink);padding:var(--pop-py) var(--pop-px) 0;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
.pop__panel .form{min-width:0}
.pop__panel h3{font-family:var(--sans);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.12}
.pop__panel .small{display:block;margin-bottom:16px}
.pop__panel .form{gap:13px}
.pop__panel .field label{font-size:.66rem}
.pop__panel .field input,.pop__panel .field textarea{padding:11px 13px;font-size:.97rem}
.pop__panel .field textarea{min-height:78px}
/* La barra de botones va a sangre: ocupa todo el ancho del panel y se pega al
   canto de abajo. Sin el margen negativo se quedaba flotando sobre el relleno
   del panel y por debajo se veía el formulario mientras se hacía scroll. El
   min-width:0 es lo que permite que la fila se parta en vez de desbordarse:
   sin él, el ancho mínimo de los dos botones ensanchaba la columna y el botón
   de WhatsApp se salía de la caja. */
.pop__acciones{grid-column:1/-1;min-width:0;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;margin:6px calc(var(--pop-px) * -1) 0;
  padding:12px var(--pop-px) max(14px,calc(var(--pop-py) * .45));background:var(--card)}
/* Dentro del diálogo los botones pueden partir su propio texto: con el
   nowrap de .btn el ancho mínimo de la fila ensanchaba la columna del grid
   y el botón de WhatsApp acababa fuera de la caja. */
.pop__acciones .btn{flex:1 1 auto;min-width:0;justify-content:center;
  padding:.92em 1.3em;white-space:normal}
.pop__o{font-family:var(--sans);font-weight:500;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted);flex:0 0 auto}
.pop__legal{grid-column:1/-1;font-size:.74rem;line-height:1.45;color:var(--muted);margin-top:2px}
.pop__legal a{border-bottom:1px solid var(--line)}
.pop__hp{position:absolute!important;left:-9999px!important;top:-9999px!important;
  width:1px;height:1px;overflow:hidden}
.pop .g-recaptcha{grid-column:1/-1;transform:scale(.85);transform-origin:0 0;height:67px}
/* El hueco del captcha: el widget de Google mide 304 px fijos y no se puede
   encoger, así que su ancho mínimo ensanchaba la columna del grid y arrastraba
   a TODO el formulario fuera de la caja (por eso el botón de WhatsApp se salía).
   Con min-width:0 la columna vuelve a su sitio y del tamaño ya se encarga la
   escala de arriba. */
.pop [data-mf-captcha]{grid-column:1/-1;min-width:0;overflow:hidden}
.pop .mf-form-msg{grid-column:1/-1}

/* mientras el diálogo está abierto la página de detrás no se mueve */
body.pop-abierto{overflow:hidden}

@media(max-width:860px){
  /* En móvil el gancho se comprime: si ocupa toda la pantalla, el formulario
     queda tan abajo que nadie llega. Se deja el titular, el precio y dos
     motivos; el resto sobra en un espacio tan pequeño. */
  .pop__caja{grid-template-columns:1fr}
  .pop__pitch{padding:22px 22px 16px;gap:11px}
  .pop__tit{font-size:clamp(1.45rem,6vw,1.9rem)}
  .pop__txt{display:none}
  .pop__feat{gap:7px}
  .pop__feat li:nth-child(n+3){display:none}
  .pop__feat li{font-size:.88rem}
  .pop__precio{padding:11px 0}
  .pop__precio b{font-size:2.4rem}
  .pop__cond{font-size:.78rem}
  .pop__chip{font-size:.63rem;padding:.4em .65em}
  .pop__panel{--pop-px:22px;--pop-py:20px;padding:20px 22px 0}
  .pop__panel .small{margin-bottom:12px}
  /* La barra de botones se queda pegada abajo mientras se hace scroll dentro
     del diálogo. En una pantalla de móvil el gancho y el formulario no caben a
     la vez, y sin esto "Quiero la oferta" quedaba siempre por debajo del corte. */
  .pop__acciones{flex-direction:column;align-items:stretch;gap:9px;
    position:sticky;bottom:0;z-index:2;background:var(--card);
    margin:6px calc(var(--pop-px) * -1) 0;
    padding:10px var(--pop-px) 14px;box-shadow:0 -14px 16px -6px var(--card)}
  .pop__o{align-self:center}
  .pop__legal{padding-bottom:2px}
}
@media(max-width:420px){
  .pop{padding:0}
  .pop__caja{max-height:100vh;border-radius:0;width:100%}
}

/* --- pantallas BAJAS: el portátil normal tiene ~620-730 px de alto útil y con
   el diseño de arriba los botones de enviar quedaban por debajo del corte. Se
   comprime todo hasta que "Quiero la oferta" y WhatsApp entran en pantalla. --- */
@media(max-height:820px){
  .pop__pitch{padding:22px 26px;gap:10px}
  .pop__tit{font-size:clamp(1.35rem,2.3vw,1.85rem)}
  .pop__precio{padding:9px 0}
  .pop__precio b{font-size:clamp(2.1rem,3.4vw,2.7rem)}
  .pop__txt{font-size:.9rem;line-height:1.42}
  .pop__feat{gap:6px}
  .pop__feat li{font-size:.86rem;line-height:1.34}
  .pop__cond{font-size:.78rem;line-height:1.38}
  .pop__panel{--pop-px:26px;--pop-py:20px;padding:20px 26px 0;gap:2px}
  .pop__panel h3{font-size:clamp(1.05rem,1.7vw,1.3rem)}
  .pop__panel .small{margin-bottom:9px;font-size:.84rem}
  .pop__panel .form{gap:9px}
  .pop__panel .field{gap:5px}
  .pop__panel .field input,.pop__panel .field textarea{padding:9px 12px;font-size:.92rem}
  .pop__panel .field textarea{min-height:52px}
  .pop .g-recaptcha,.pop [data-mf-captcha]{transform:scale(.78);height:60px}
  .pop__acciones .btn{padding:.8em 1.1em;font-size:.72rem}
  .pop__legal{font-size:.7rem;line-height:1.35}
}
@media(max-height:680px){
  /* aquí ya no cabe el discurso entero: se queda el titular, el precio y dos
     motivos, que es lo que hace falta para entender la oferta */
  .pop__pitch{padding:18px 24px;gap:8px}
  .pop__txt{display:none}
  .pop__feat li:nth-child(n+3){display:none}
  .pop__cond{font-size:.74rem;line-height:1.34}
  .pop__panel{--pop-px:24px;--pop-py:16px;padding:16px 24px 0}
  .pop__panel .field textarea{min-height:44px}
  .pop__panel .form{gap:7px}
  .pop .g-recaptcha,.pop [data-mf-captcha]{transform:scale(.72);height:55px}
  .pop__legal{display:none}
}

/* ── Popup Kit Digital: grupos, selects y casillas ────────────────── */
.pop__grupo{grid-column:1/-1;margin:10px 0 -4px;font-family:var(--sans);font-weight:600;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:9px}
.pop__grupo::before{content:"";width:7px;height:7px;background:var(--brand,#ff2d2d);flex:0 0 auto}
.pop__grupo:first-of-type{margin-top:2px}
.pop__panel .field select{
  width:100%;padding:11px 13px;font:inherit;font-size:.97rem;color:var(--ink);
  background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;
}
.pop__panel .field select:focus{outline:none;border-color:var(--brand,#ff2d2d);
  box-shadow:0 0 0 3px rgba(255,45,45,.14)}
.pop__chks{display:flex;flex-wrap:wrap;gap:7px}
.pop__chk{position:relative;display:inline-flex}
.pop__chk input{position:absolute;opacity:0;width:0;height:0}
.pop__chk span{
  display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:.83rem;line-height:1.2;color:var(--ink-2,#5c564d);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pop__chk span:hover{border-color:var(--brand,#ff2d2d);color:var(--ink)}
.pop__chk input:checked + span{background:var(--brand,#ff2d2d);border-color:var(--brand,#ff2d2d);color:#fff}
.pop__chk input:focus-visible + span{outline:2px solid var(--brand,#ff2d2d);outline-offset:2px}
@media (max-width:560px){
  .pop__chk span{font-size:.79rem;padding:6px 10px}
  .pop__grupo{margin:8px 0 -6px}
}

/* El formulario del Kit Digital es mucho más largo que la oferta anterior: en
   un portátil de 625 px el botón de enviar se quedaba fuera de la caja. Cada
   columna scrollea por su cuenta y la barra de botones se queda pegada abajo,
   igual que ya hacía en móvil. */
@media(min-width:861px){
  /* la fila del grid tiene que poder encogerse: sin minmax(0,1fr) y min-height:0
     las columnas crecen con el contenido y la caja las recorta sin más */
  .pop__caja{overflow:hidden;grid-template-rows:minmax(0,1fr)}
  .pop__pitch,.pop__panel{min-height:0}
  .pop__pitch{overflow-y:auto}
  .pop__panel{overflow-y:auto;justify-content:flex-start}
  .pop__acciones{position:sticky;bottom:0;z-index:2;background:var(--card);
    margin:6px calc(var(--pop-px) * -1) 0;
    padding:11px var(--pop-px) 14px;box-shadow:0 -14px 16px -6px var(--card)}
}
@media(max-height:680px){
  /* aquí el aviso legal vuelve: está encima del botón, no ocupa sitio útil */
  .pop__legal{display:block;font-size:.68rem;line-height:1.3}
}