/* ═══════════════════════════════════════════════════════════════════════
   Cuidadora · hoja principal (estilo.css)

   CORRECCIÓN DE PALETA (2026-09-19, lo mandó el dueño desde su teléfono):
   el diseño de nexustelesis.com NO es verde. Es
     · AZUL MARINO #1A325B  → encabezado, secciones oscuras, títulos
     · DORADO  #E0B85C → #C29A3D (degradado) → botones principales e iconos
     · BLANCO para texto sobre azul marino
     · Neutros de apoyo: #FFFFFF, fondos muy claros, borde #E2E8F0
   El verde quedó fuera por completo como acento.

   REGLAS QUE NO SE NEGOCIAN:
   · Relleno OSCURO (azul marino) ⇒ letra BLANCA.
   · Relleno CLARO (dorado)      ⇒ letra OSCURA (azul marino #1A325B).
     El dorado es claro: por eso el botón dorado lleva letra azul marino.
   · Sin degradados radiales, sin neón. Dos tonos como máximo.
   · Redondeos generosos: botones tipo píldora (999 px), tarjetas 20-24 px.
   · El logo se queda en MAGENTA y por eso vive sobre blanco: en el
     encabezado azul marino va dentro de una placa blanca redondeada.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* — AZUL MARINO de Nexustelesis: el color de la casa — */
  --marino:#1A325B;      /* encabezado, secciones oscuras, títulos */
  --marino-osc:#132445;  /* pies de bloque y hover del marino */
  --marino-claro:#24406F;/* segundo tono del degradado marino */
  --marino-500:#33507F;  /* marino medio (enlaces, detalles) */
  --marino-300:#8FA3C4;  /* marino desvaído (texto sobre marino) */
  --marino-050:#F6F8FC;  /* fondo clarísimo azulado */
  --marino-100:#E8EDF6;  /* borde azulado muy claro */
  --marino-200:#D5DEEE;  /* borde azulado */

  /* — DORADO de la familia de marcas (SOFTGAT también es púrpura y oro) — */
  --oro:#E0B85C;         /* dorado claro */
  --oro-osc:#C29A3D;     /* dorado oscuro: texto e iconos sobre claro */
  --oro-hondo:#8A6A1F;   /* dorado muy oscuro, solo para texto chico */
  --oro-050:#FCF8EC;     /* fondo dorado clarísimo */
  --oro-100:#F1E3BE;     /* borde dorado claro */

  /* — neutros de apoyo — */
  --blanco:#FFFFFF;
  --tinta:#1A325B;       /* títulos: el azul marino */
  --texto:#243B5E;       /* texto corrido */
  --parrafo:#4A5A73;     /* párrafos */
  --suave:#6B7891;       /* texto secundario */
  --linea:#E2E8F0;       /* bordes finos */
  --borde:#CBD5E1;       /* bordes de campos */
  --pizarra-050:#F8FAFC;
  --pizarra-100:#F1F5F9;
  --pizarra-200:#DBE4F0;

  /* — elevación y degradados suaves (dos tonos, sin brillos) — */
  --sombra:0 1px 2px rgba(26,50,91,.04),0 10px 28px rgba(26,50,91,.07);
  --sombra-alta:0 2px 4px rgba(26,50,91,.05),0 20px 48px rgba(26,50,91,.13);
  --sombra-oro:0 4px 14px rgba(194,154,61,.30);
  --grad-oro:linear-gradient(135deg,#E0B85C 0%,#C29A3D 100%);
  --grad-marino:linear-gradient(160deg,#1A325B 0%,#24406F 100%);
  --grad-claro:linear-gradient(180deg,#FFFFFF 0%,var(--marino-050) 100%);
  --grad-suave:linear-gradient(180deg,var(--marino-050) 0%,#FFFFFF 100%);

  /* — nombres cortos, vivos en el resto de la hoja y en las otras páginas — */
  --accion:var(--marino);--accion-osc:var(--marino-osc);--marca:var(--marino);
  --realce:var(--oro-osc);--oro-claro:var(--oro);

  /* — alias heredados: estilo-extra.css y las páginas los siguen usando — */
  --azul-050:var(--marino-050);--azul-100:var(--marino-100);
  --azul-300:var(--marino-300);--azul-500:var(--marino-500);
  --azul-700:var(--marino);--azul-900:var(--marino);
  --p:var(--marino);--pp:var(--marino-osc);--bg:#FFFFFF;--g:var(--suave);
  --t:var(--texto);--d:var(--marino);--mas:var(--marino-300);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,
    'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#FFFFFF;color:var(--texto);line-height:1.62;
  font-size:17.5px;letter-spacing:-.1px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  font-feature-settings:'cv11','ss01';
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marino);text-decoration:none}
a:hover{text-decoration:none}
b,strong{font-weight:600;color:var(--tinta)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace}
.caja{max-width:1120px;margin:0 auto;padding:0 24px}
.mini{font-size:13.5px;color:var(--suave);line-height:1.6}

/* ─────────────────────────── Encabezado ───────────────────────────
   Barra AZUL MARINO, como en la captura. El logo es magenta y el magenta
   no contrasta sobre el marino: por eso el logo va dentro de una placa
   BLANCA redondeada. El color del logo no se toca. */
header.top{
  position:sticky;top:0;z-index:60;background:var(--grad-marino);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 26px rgba(26,50,91,.14);
}
header.top .barra{display:flex;align-items:center;gap:30px;min-height:76px;flex-wrap:wrap}
header.top .marca{display:flex;align-items:center;gap:12px;color:#FFFFFF;
  font-weight:700;font-size:19px;letter-spacing:-.5px}
header.top .marca .logo{width:44px;height:44px;object-fit:contain;background:#FFFFFF;
  border-radius:14px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.20)}
header.top .marca .nombre{font-size:19.5px;font-weight:700;letter-spacing:-.6px;color:#FFFFFF}
header.top .menu{margin-left:auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
header.top .menu a{color:rgba(255,255,255,.76);font-size:15.5px;font-weight:500;
  letter-spacing:-.1px;padding:8px 0;position:relative}
header.top .menu a:hover{color:var(--oro)}
header.top .menu a.act{color:#FFFFFF;font-weight:600}
header.top .menu a.act:after{content:"";position:absolute;left:0;right:0;bottom:1px;
  height:2px;border-radius:2px;background:var(--grad-oro)}

/* ─────────────────────────── Botones ───────────────────────────
   REGLA 1: relleno claro (dorado) ⇒ letra OSCURA (azul marino).
            relleno oscuro (marino) ⇒ letra BLANCA.
   El botón principal es la píldora dorada: radio 999 px, muy redondeada. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--grad-oro);color:var(--marino) !important;
  padding:17px 38px;border-radius:999px;
  font-size:17px;font-weight:600;letter-spacing:-.2px;
  border:1px solid rgba(194,154,61,.55);
  min-height:56px;font-family:inherit;cursor:pointer;
  box-shadow:var(--sombra-oro);
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.05);box-shadow:0 8px 24px rgba(194,154,61,.36)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#FFFFFF;color:var(--marino) !important;border:1.5px solid var(--marino-200);
  box-shadow:var(--sombra);filter:none}
.btn.sec:hover{background:var(--marino-050);border-color:var(--marino);filter:none;
  box-shadow:var(--sombra-alta)}
.btn.claro{background:transparent;color:#FFFFFF !important;border:1.5px solid rgba(255,255,255,.55);
  box-shadow:none}
.btn.claro:hover{background:rgba(255,255,255,.10);filter:none}
.btn.chico{padding:12px 26px;font-size:15.5px;border-radius:999px;min-height:46px}
.btn.grande{font-size:18.5px;padding:20px 48px;min-height:60px;border-radius:999px}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
button{font-family:inherit;font-size:16px;font-weight:600;color:var(--marino);
  background:var(--grad-oro);border:1px solid rgba(194,154,61,.55);border-radius:999px;
  padding:17px 26px;cursor:pointer;box-shadow:var(--sombra-oro);
  transition:filter .18s ease}
button:hover{filter:brightness(1.05)}
.btn-principal{width:100%;margin-top:32px;border-radius:999px;padding:18px;font-size:17.5px;
  min-height:58px}

/* ─────────────────────────── Portada: héroe ───────────────────────────
   Orden de la captura del dueño: encabezado marino → botón dorado →
   imagen GRANDE del hero → tarjeta marino flotante que se superpone. */
.hero{background:var(--grad-suave);padding:88px 0 96px;border-bottom:1px solid var(--linea)}
.etiqueta{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--oro-hondo);margin-bottom:22px}
.hero .rejilla-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-1.9px;
  font-weight:700;color:var(--tinta);max-width:22ch;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--marino-500)}
.hero .entrada{font-size:19px;color:var(--parrafo);max-width:62ch;margin-top:22px;
  margin-left:auto;margin-right:auto;line-height:1.6}
.hero .btns{margin-top:34px;justify-content:center}
.hero .nota{font-size:14px;color:var(--suave);margin-top:22px}
.hero .etiqueta{display:block;text-align:center}
.hero .nota{text-align:center}
.hero-cabeza{text-align:center}
.foto-marco{border-radius:24px;overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra-alta)}
.foto-marco img{width:100%;height:100%;object-fit:cover}

/* — la imagen GRANDE del hero: casi todo el ancho de la caja — */
.hero-foto{position:relative;margin:56px auto 0;max-width:1040px;border-radius:30px;
  overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra-alta);background:var(--marino-100)}
.hero-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 32%}
/* velo marino suave en la parte baja: la tarjeta flotante se asienta sin
   costura y la foto sigue viéndose cálida */
.hero-foto:after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,rgba(26,50,91,0) 0%,rgba(26,50,91,.34) 100%);
  pointer-events:none}
/* — motivo de la referencia: nodos y líneas conectadas, dorado y discreto — */
.hero-trama{position:absolute;top:26px;right:30px;width:180px;height:120px;opacity:.55;
  pointer-events:none}
.hero-trama line,.hero-trama polyline{stroke:var(--oro);stroke-width:1.4;fill:none}
.hero-trama circle{fill:var(--oro)}

/* ────────────────── Tarjeta flotante de tres elementos ──────────────────
   Se SUPERPONE a la imagen: sube sobre ella con margen negativo, sombra
   suave y esquinas muy redondeadas. Icono de trazo dorado, texto blanco. */
.tarjeta-flotante{position:relative;z-index:3;margin:-86px auto 0;max-width:1000px;
  background:var(--grad-marino);border-radius:26px;padding:40px 44px;
  display:flex;gap:38px;align-items:flex-start;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(26,50,91,.32),0 2px 0 rgba(255,255,255,.07) inset}
.tarjeta-flotante .tf{display:flex;flex-direction:column;gap:13px;flex:1 1 0;min-width:0}
.tarjeta-flotante .tf .tf-icono{width:56px;height:56px;border-radius:17px;
  background:rgba(224,184,92,.14);border:1px solid rgba(224,184,92,.40);
  display:flex;align-items:center;justify-content:center;color:var(--oro);flex:0 0 auto}
.tarjeta-flotante .tf .tf-icono svg{width:25px;height:25px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tarjeta-flotante .tf b{display:block;color:#FFFFFF;font-size:18px;font-weight:600;
  letter-spacing:-.4px;line-height:1.3}
.tarjeta-flotante .tf > span:not(.tf-icono){display:block;color:rgba(255,255,255,.76);
  font-size:15.5px;line-height:1.6;margin-top:2px}

/* ─────────────────────────── Secciones ─────────────────────────── */
section{padding:88px 0}
.sec-blanca{background:#FFFFFF}
.sec-suave{background:var(--grad-claro)}
.sec-linea{border-top:1px solid var(--linea)}
h2.grande{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-1.3px;
  color:var(--tinta);line-height:1.12;max-width:26ch}
h3.media{font-size:23px;font-weight:600;letter-spacing:-.7px;color:var(--tinta);line-height:1.25}
p.lead{font-size:18.5px;color:var(--parrafo);max-width:62ch;margin-top:18px;line-height:1.62}
.rejilla{display:grid;gap:20px;margin-top:38px}
.rejilla-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.rejilla-2{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dos-col img,.rejilla-2 img{width:100%;border-radius:24px;border:1px solid var(--linea);
  box-shadow:var(--sombra)}

/* franja de datos — bloque oscuro: degradado suave de marino a marino
   más claro, letra blanca y la cifra en DORADO (el único acento sobre oscuro) */
.franja{background:var(--grad-marino);padding:58px 0;color:#FFFFFF}
.franja .caja{display:grid;grid-template-columns:repeat(4,1fr);gap:38px}
.franja .dato{padding:0}
.franja b{display:block;font-size:22px;font-weight:700;letter-spacing:-.6px;
  color:var(--oro);margin-bottom:7px}
.franja span{font-size:15.5px;color:rgba(255,255,255,.80);line-height:1.55}

/* ─────────────────────────── Tarjetas ─────────────────────────── */
.tarj,.card{background:#FFFFFF;border:1px solid var(--linea);border-radius:22px;padding:30px;
  box-shadow:var(--sombra)}
/* ── Fichas del directorio con retrato (2026-09-20) ──
   La foto va en cuadro redondeado y el nombre SIEMPRE visible: quien busca quiere saber
   con quién está tratando antes de tocar nada. */
.prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
.prov-cabeza{display:flex;gap:15px;align-items:flex-start}
.prov-foto{width:88px;height:88px;border-radius:20px;object-fit:cover;flex:0 0 auto;
  background:var(--pizarra-100,#EEF2F8);border:1px solid var(--linea)}
.prov-inicial{width:88px;height:88px;border-radius:20px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--marino,#1A325B);color:#FFFFFF;
  font-size:32px;font-weight:700}
.prov-cabeza h3{margin:2px 0 4px}
.prov-cabeza .etiqueta{margin-bottom:2px}
.prov-ciudad{font-size:14px;color:var(--suave)}
@media(max-width:560px){
  .prov-grid{grid-template-columns:1fr}
  .prov-foto,.prov-inicial{width:72px;height:72px;border-radius:16px}
}
.mapa-caja{height:420px;border-radius:22px;overflow:hidden;border:1px solid var(--linea);
  background:#EEF2F8;margin-top:18px}
@media(max-width:560px){.mapa-caja{height:320px}}
.tarj h3,.card h3{font-size:18px;font-weight:600;letter-spacing:-.4px;color:var(--tinta);
  margin-bottom:9px}
.tarj p,.card p{font-size:15.5px;color:var(--parrafo);line-height:1.62}
.icono{width:50px;height:50px;border-radius:16px;background:var(--oro-050);
  border:1px solid var(--oro-100);display:flex;align-items:center;justify-content:center;
  color:var(--oro-osc);margin-bottom:18px}
.icono svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ico{width:50px;height:50px;border-radius:16px;background:var(--oro-050);
  border:1px solid var(--oro-100);display:flex;align-items:center;justify-content:center;
  color:var(--oro-osc);font-weight:700;font-size:17px;margin-bottom:18px}
.num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--grad-oro);color:var(--marino);font-size:15px;
  font-weight:700;margin-bottom:18px}

/* ─────────────────────────── Membresías ─────────────────────────── */
.planes{display:grid;gap:22px;margin-top:42px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.plan,.plan.dest{background:#FFFFFF;border:1px solid var(--linea);border-radius:24px;
  padding:34px 30px;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.plan.dest{border:1.5px solid var(--oro-osc);box-shadow:var(--sombra-alta)}
.plan .etiqueta,.plan .tag{display:inline-block;align-self:flex-start;background:var(--oro-050);
  border:1px solid var(--oro-100);color:var(--oro-hondo);font-size:11.5px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;padding:6px 13px;border-radius:999px;
  margin-bottom:20px;text-align:left}
.plan h3{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--tinta)}
.plan .precio{font-size:46px;font-weight:700;letter-spacing:-2.2px;color:var(--tinta);
  margin:16px 0 4px;line-height:1}
.plan .precio small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--suave)}
.plan .resumen{font-size:15.5px;color:var(--parrafo);line-height:1.55;margin-top:10px}
.plan ul{margin:26px 0 28px}
.plan li{font-size:15.5px;color:var(--texto);line-height:1.5;padding:10px 0 10px 30px;
  position:relative;border-bottom:1px solid var(--marino-050)}
.plan li:last-child{border-bottom:0}
.plan li:before{content:"";position:absolute;left:2px;top:16px;width:13px;height:7px;
  border-left:2px solid var(--oro-osc);border-bottom:2px solid var(--oro-osc);
  transform:rotate(-45deg)}
.plan .btn{margin-top:auto;width:100%}

/* avisos honestos — fondo claro, jamás un bloque oscuro */
.aviso-honesto,.aviso-precios{background:var(--oro-050);border:1px solid var(--oro-100);
  border-radius:20px;padding:22px 24px;font-size:15.5px;line-height:1.6;color:#5C4A1F;
  margin-top:26px}
.aviso-honesto b,.aviso-precios b{color:var(--marino)}
.aviso-alerta{background:#FEF2F2;border:1px solid #F6D3D3;border-radius:20px;padding:22px 24px;
  font-size:15.5px;line-height:1.6;color:#8C1C1C;margin-top:26px}
.aviso-alerta b{color:#7A1717}

/* ─────────────────────── Cierre y pie ───────────────────────
   El cierre es el bloque oscuro de la casa: marino, letra blanca y el
   botón dorado delante. */
.cierre{background:var(--grad-marino);border-top:1px solid var(--linea);padding:86px 0;
  text-align:center}
.cierre h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-1.3px;
  color:#FFFFFF;line-height:1.15;max-width:24ch;margin:0 auto}
.cierre p{font-size:18px;color:rgba(255,255,255,.80);max-width:52ch;margin:18px auto 0;
  line-height:1.6}
.cierre .btns{justify-content:center;margin-top:34px}
.cierre .mini{color:rgba(255,255,255,.66)}

footer.pie{background:#FFFFFF;border-top:1px solid var(--linea);padding:64px 0 52px;
  color:var(--suave);font-size:15px}
footer.pie .rejilla-pie{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
footer.pie .marca{display:flex;align-items:center;gap:11px;margin-bottom:14px}
footer.pie .marca .logo{width:36px;height:36px;object-fit:contain}
footer.pie .marca .nombre{font-size:18px;font-weight:700;letter-spacing:-.5px;color:var(--tinta)}
footer.pie b{display:block;color:var(--tinta);font-size:15.5px;font-weight:600;margin-bottom:14px}
footer.pie a{display:block;color:var(--marino);font-size:15px;margin-bottom:11px}
footer.pie a.marca{margin-bottom:0}
footer.pie .legal{margin-top:44px;padding-top:26px;border-top:1px solid var(--linea);
  font-size:13.5px;color:var(--suave);line-height:1.7}

/* ─────────────────────────── Formularios ─────────────────────────── */
.hoja{background:#FFFFFF;border:1px solid var(--linea);border-radius:24px;padding:44px;
  max-width:780px;margin:52px auto;box-shadow:var(--sombra)}
.hoja h1{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-1.1px;
  color:var(--tinta);line-height:1.15}
.hoja .sub{font-size:17.5px;color:var(--parrafo);margin-top:14px;line-height:1.6}
.hoja h2{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--tinta);
  margin:44px 0 4px;padding-top:26px;border-top:1px solid var(--linea)}
label{display:block;font-size:15px;font-weight:600;color:var(--tinta);letter-spacing:-.1px;
  margin:22px 0 8px}
input,select,textarea{width:100%;padding:16px 17px;border:1px solid var(--borde);
  border-radius:16px;font-size:16px;font-family:inherit;color:var(--texto);
  background:#FFFFFF;line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marino);
  box-shadow:0 0 0 3px rgba(224,184,92,.38)}
textarea{resize:vertical;min-height:104px}
.cons{display:flex;gap:14px;align-items:flex-start;background:#FFFFFF;border:1px solid var(--linea);
  border-radius:20px;padding:17px 18px;margin-bottom:11px}
.cons input{width:22px;height:22px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--marino)}
.cons span{font-size:15.5px;color:var(--parrafo);line-height:1.58}
.ok{background:var(--oro-050);border:1px solid var(--oro-100);border-radius:20px;
  padding:22px 24px;font-size:15.5px;color:var(--tinta);line-height:1.6;margin-bottom:24px}
.err{background:#FEF2F2;border:1px solid #F6D3D3;border-radius:20px;padding:22px 24px;
  font-size:15.5px;color:#8C1C1C;line-height:1.6;margin-bottom:24px}

/* ─────────────────────────── Tienda ─────────────────────────── */
.prod{background:#FFFFFF;border:1px solid var(--linea);border-radius:22px;padding:24px;
  display:flex;flex-direction:column;box-shadow:var(--sombra)}
.prod h3{font-size:18px;font-weight:600;letter-spacing:-.4px;color:var(--tinta);margin:10px 0 10px}
.prod p{font-size:15.5px;color:var(--parrafo);line-height:1.6}
.pfoto{width:100%;height:180px;object-fit:contain;background:#FFFFFF;border:1px solid var(--linea);
  border-radius:18px;margin-bottom:14px}
.pfoto.sinfoto{display:flex;align-items:center;justify-content:center;background:var(--pizarra-100);
  color:#475569;font-size:13.5px;text-align:center;line-height:1.5;padding:22px}
.psku{font-size:11.5px;font-weight:600;color:var(--suave);letter-spacing:.6px}
.pcat{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--oro-hondo)}
.pnota{font-size:14px;color:var(--texto);background:var(--pizarra-100);border-radius:16px;
  padding:13px 14px;margin:14px 0;line-height:1.55}
.pfab{font-size:13px;color:var(--suave);margin-bottom:10px}
.pgar{font-size:13.5px;color:#5C4A1F;background:var(--oro-050);border:1px solid var(--oro-100);
  border-radius:16px;padding:11px 13px;margin-bottom:16px;line-height:1.5}
.ppre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.psocio{font-size:32px;font-weight:700;letter-spacing:-1.6px;color:var(--tinta)}
.pnormal{font-size:16px;color:var(--suave);text-decoration:line-through}
.punit{font-size:12.5px;color:var(--suave)}
.pplan{font-size:13.5px;color:var(--parrafo);margin:10px 0 14px}
.prod button{width:100%;border-radius:999px;padding:16px;font-size:16px;font-weight:600;
  background:var(--grad-oro);color:var(--marino);border:1px solid rgba(194,154,61,.55);
  min-height:52px}
.prod .btn{width:100%;margin-top:auto}
.phash{background:var(--marino-050);border:1px solid var(--linea);border-radius:16px;
  padding:12px 14px;margin:14px 0;font-size:12.5px;color:var(--suave);line-height:1.5}
.phash code{color:var(--marino);font-size:12px;word-break:break-all}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
#carrito{position:fixed;right:20px;bottom:20px;background:var(--grad-oro);color:var(--marino);
  border-radius:999px;padding:16px 26px;font-size:15.5px;font-weight:600;cursor:pointer;
  z-index:80;box-shadow:0 10px 28px rgba(194,154,61,.36);display:flex;align-items:center;gap:9px}
#carrito svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
#aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--marino);
  color:#FFFFFF;padding:15px 22px;border-radius:18px;font-size:15px;z-index:2000;display:none;
  max-width:88vw;text-align:center;box-shadow:0 12px 34px rgba(26,50,91,.32)}

/* ─────────────────────────── Descargas ─────────────────────────── */
.descarga{background:#FFFFFF;border:1px solid var(--linea);border-radius:24px;padding:30px;
  box-shadow:var(--sombra);margin-top:34px}
.descarga .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap}
.descarga h3{font-size:22px;font-weight:700;letter-spacing:-.6px;color:var(--tinta)}
.descarga .sub{font-size:15.5px;color:var(--parrafo);line-height:1.6;margin-top:10px;max-width:58ch}
.sello{display:inline-block;background:var(--grad-oro);color:var(--marino);font-size:11.5px;
  font-weight:700;letter-spacing:.9px;text-transform:uppercase;padding:7px 14px;
  border-radius:999px;white-space:nowrap}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.datos div{background:var(--marino-050);border:1px solid var(--linea);border-radius:18px;
  padding:15px 17px}
.datos dt{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--suave)}
.datos dd{font-size:17px;font-weight:600;color:var(--tinta);margin:6px 0 0;letter-spacing:-.3px}
.sha{background:var(--marino);color:#FFFFFF;border-radius:18px;padding:18px 20px;
  margin:6px 0 22px;overflow-x:auto}
.sha .rot{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--oro);margin-bottom:9px}
.sha code{display:block;color:#FFFFFF;font-size:13.5px;line-height:1.6;word-break:break-all}
.cmd{background:var(--marino-050);border:1px solid var(--linea);border-radius:18px;
  padding:18px 20px;margin-top:16px}
.cmd .rot{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--suave);margin-bottom:10px}
.cmd code{display:block;color:var(--tinta);font-size:14px;line-height:1.9;word-break:break-all}
.cmd code b{color:var(--oro-osc);font-weight:600}
.libertad{font-size:13.5px;color:var(--suave);line-height:1.6;margin-top:16px}
.pendiente{background:#FFFFFF;border:1.5px dashed var(--borde);border-radius:24px;padding:28px;
  margin-top:20px}
.pendiente h3{font-size:18px;font-weight:700;letter-spacing:-.4px;color:var(--tinta)}
.pendiente p{font-size:15.5px;color:var(--parrafo);line-height:1.62;margin-top:10px}
.pendiente .mini{display:inline-block;margin-top:14px;background:var(--pizarra-100);
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#475569}

/* ═══════════ Responsivo: primero el teléfono, con aire de sobra ═══════════ */
@media(max-width:900px){
  .caja{padding:0 22px}
  section{padding:60px 0}
  .hero{padding:64px 0 62px}
  .franja{padding:48px 0}
  .cierre{padding:68px 0}
  /* una sola columna en el teléfono: nada de rejillas apretadas */
  .hero .rejilla-hero,.dos-col,.rejilla-2{grid-template-columns:1fr;gap:38px}
  .rejilla-3,.rejilla-4,.planes,.pasos{grid-template-columns:1fr}
  .franja .caja{grid-template-columns:1fr;gap:8px}
  .franja .dato{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
  .franja .dato:last-child{border-bottom:0}
  footer.pie .rejilla-pie{grid-template-columns:1fr;gap:32px}
  footer.pie a{font-size:16px;margin-bottom:13px}
  .hero h1{font-size:40px;letter-spacing:-1.3px;max-width:24ch}
  h2.grande{font-size:31px;letter-spacing:-1px;max-width:24ch}
  h3.media{font-size:22px}
  p.lead{font-size:17.5px;margin-top:16px}
  .hero .entrada{font-size:18px;margin-top:20px}
  /* la imagen del hero sigue grande y la tarjeta se apila encima */
  .hero-foto{margin-top:44px;border-radius:24px}
  .hero-foto img{aspect-ratio:4/3}
  .hero-trama{width:120px;height:84px;top:16px;right:18px;opacity:.45}
  .tarjeta-flotante{flex-direction:column;gap:26px;margin-top:-54px;padding:30px 26px;
    border-radius:22px}
  .tarjeta-flotante .tf b{font-size:17.5px}
  .tarjeta-flotante .tf span{font-size:16px}
  .tarj,.card,.prod,.plan,.plan.dest,.descarga,.pendiente{padding:26px;border-radius:20px}
  .plan .precio{font-size:42px}
  .aviso-honesto,.aviso-precios,.aviso-alerta,.ok,.err{padding:18px 19px;font-size:16px}
  .hoja{padding:28px 24px;margin:30px auto;border-radius:20px}
  .hoja h2{margin-top:38px;padding-top:24px}
  label{font-size:15.5px;margin:24px 0 9px}
  input,select,textarea{padding:16px 17px;font-size:16px;border-radius:16px}
  .cons{padding:18px;gap:15px}
  .cons input{width:24px;height:24px;margin-top:1px}
  .cons span{font-size:16px}
  button,.btn-principal{padding:17px 26px;font-size:17px}
  .btn:not(.chico){width:100%;font-size:17px;padding:17px 26px;min-height:56px}
  .btn.grande{font-size:17.5px;padding:18px 26px;min-height:58px}
  .btns{flex-direction:column;align-items:stretch;gap:14px;margin-top:30px}
  .cierre .btns{align-items:center}
  .cierre .btns .btn{width:100%}
  .prod button{padding:16px;font-size:16.5px;min-height:54px}
  .pfoto{height:200px}
  .datos{grid-template-columns:1fr}
  .sha{padding:16px}
  .sha code{font-size:12.5px}
  header.top .barra{gap:14px;padding:12px 0}
  header.top .menu{order:3;width:100%;margin-left:0;justify-content:flex-start;
    gap:4px 26px;flex-wrap:wrap}
  header.top .menu a{font-size:16px;padding:11px 0}
  header.top .alta{margin-left:auto}
  #carrito{right:16px;bottom:16px;padding:16px 22px}
}
@media(max-width:640px){
  .caja{padding:0 20px}
  section{padding:58px 0}
  .hero{padding:56px 0 58px}
  .hero h1{font-size:35px;letter-spacing:-1.1px}
  h2.grande{font-size:29px;letter-spacing:-.9px}
  .plan .precio{font-size:40px}
  header.top .marca .nombre{font-size:18.5px}
  header.top .marca .logo{width:40px;height:40px;border-radius:13px;padding:5px}
  header.top .menu{gap:2px 20px}
  .franja b{font-size:20px}
  .descarga h3{font-size:20px}
  footer.pie{padding:54px 0 46px}
  .tarjeta-flotante{margin-top:-42px;padding:26px 22px;gap:24px}
  .tarjeta-flotante .tf-icono{width:50px;height:50px;border-radius:15px}
}
@media(max-width:420px){
  .caja{padding:0 18px}
  .hero h1{font-size:31px;letter-spacing:-.9px}
  h2.grande{font-size:26px}
  header.top .menu a{font-size:15.5px}
  .tarjeta-flotante{padding:24px 20px}
}