/* ==========================================================================
   TuCloudServer · Hoja de estilos principal
   Marca de IT Encore Tecnologia SL
   ========================================================================== */

:root{
  --azul:#0069b4;
  --azul-osc:#004b80;
  --azul-cla:#e8f2fb;
  --cian:#00b7e6;
  --tinta:#0b1a2b;
  --tinta-2:#12283f;
  --gris:#61738a;
  --gris-cla:#f4f7fa;
  --linea:#e3e9f0;
  --blanco:#fff;
  --ok:#0f9d58;
  --warn:#f6a609;
  --err:#d93025;
  --radio:14px;
  --radio-sm:9px;
  --sombra:0 1px 2px rgba(11,26,43,.06), 0 8px 28px rgba(11,26,43,.07);
  --sombra-alta:0 2px 4px rgba(11,26,43,.08), 0 18px 48px rgba(11,26,43,.14);
  --max:1200px;
  --fuente:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fuente);color:var(--tinta);background:var(--blanco);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-osc)}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.i{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor}
.center{text-align:center}
.mut{color:var(--gris)}
.nowrap{white-space:nowrap}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.85em 1.6em;border-radius:99px;border:1.5px solid transparent;
  font-weight:700;font-size:.95rem;cursor:pointer;transition:.18s;
  font-family:inherit;line-height:1.2;text-align:center;
}
.btn--pri{background:linear-gradient(135deg,var(--azul),#0086d4);color:#fff;box-shadow:0 6px 18px rgba(0,105,180,.28)}
.btn--pri:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,105,180,.36)}
.btn--sec{background:var(--tinta);color:#fff}
.btn--sec:hover{color:#fff;background:var(--tinta-2)}
.btn--out{background:#fff;color:var(--azul);border-color:#cfe0ef}
.btn--out:hover{border-color:var(--azul);background:var(--azul-cla)}
.btn--ghost{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--ghost:hover{background:var(--gris-cla)}
.btn--luz{background:#fff;color:var(--azul)}
.btn--luz:hover{background:#f0f7ff;color:var(--azul-osc)}
.btn--sm{padding:.6em 1.15em;font-size:.86rem}
.btn--lg{padding:1.05em 2.1em;font-size:1.02rem}
.btn--full{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{background:var(--tinta);color:#c7d5e3;font-size:.8rem}
.topbar__in{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#c7d5e3}
.topbar a:hover{color:#fff}
.topbar__item{display:inline-flex;align-items:center;gap:.45em}
.topbar__grow{flex:1}
.topbar__sep{width:1px;height:14px;background:#2b4257}
.topbar__item--ok .dot{width:7px;height:7px;border-radius:50%;background:#2fd07a;box-shadow:0 0 0 3px rgba(47,208,122,.2)}
@media(max-width:860px){.topbar__sep,.topbar__item--ok{display:none}}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab__in{display:flex;align-items:center;gap:26px;min-height:76px}
.cab__logo img{width:190px;height:auto}
.cab__nav{display:flex;gap:4px;margin-left:auto}
.cab__nav a{
  padding:.55em .8em;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--tinta);
  white-space:nowrap;transition:.15s;
}
.cab__nav a:hover{background:var(--gris-cla);color:var(--azul)}
.cab__nav a.is-on{color:var(--azul);background:var(--azul-cla)}
.cab__acc{display:flex;align-items:center;gap:12px}
.carrito-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gris-cla);color:var(--tinta);font-size:1.15rem}
.carrito-btn:hover{background:var(--azul-cla);color:var(--azul)}
.carrito-btn__n{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--gris);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;line-height:1;
}
.carrito-btn.has .carrito-btn__n{background:var(--err)}
.navtog,.cab__burger{display:none}

@media(max-width:1080px){
  .cab__nav a{padding:.5em .55em;font-size:.85rem}
  .cab__logo img{width:160px}
}
@media(max-width:900px){
  .cab__burger{display:flex;flex-direction:column;gap:5px;margin-left:auto;cursor:pointer;padding:10px}
  .cab__burger span{width:24px;height:2px;background:var(--tinta);border-radius:2px;transition:.2s}
  .cab__nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--linea);box-shadow:var(--sombra);padding:8px 22px 18px;display:none;
  }
  .navtog:checked ~ .cab__nav{display:flex}
  .cab__nav a{padding:.8em .4em;border-bottom:1px solid var(--gris-cla);border-radius:0}
  .cab__acc{order:3}
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1100px 520px at 78% -10%,#0b5fa5 0%,transparent 60%),
             linear-gradient(160deg,#0b1a2b 0%,#0d2843 52%,#0a3a63 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(78% 78% at 60% 20%,#000 30%,transparent 100%);
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:82px 0 92px}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6em;padding:.42em 1em;border-radius:99px;
  background:rgba(0,183,230,.14);border:1px solid rgba(0,183,230,.35);color:#8ce4ff;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;margin-bottom:22px;
}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#3fd0ff,#7ee8c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:1.13rem;color:#b9cde0;max-width:56ch;margin-bottom:30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.9rem;color:#cfe0ee}
.hero__ticks span{display:inline-flex;align-items:center;gap:.5em}
.hero__ticks .i{color:#5fe0a8;width:1.05em;height:1.05em;stroke-width:2.6}

.hero__panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:20px;
  padding:26px;backdrop-filter:blur(8px);box-shadow:0 30px 70px rgba(0,0,0,.32);
}
.hero__panel h3{color:#fff;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#8ce4ff;margin-bottom:16px}
.hpitem{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.hpitem:last-child{border-bottom:0}
.hpitem__ico{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(0,183,230,.15);display:grid;place-items:center;color:#5fd8ff;font-size:1.05rem}
.hpitem__t{font-weight:700;color:#fff;font-size:.95rem;line-height:1.3}
.hpitem__d{font-size:.82rem;color:#9fb6cb}
.hpitem__p{margin-left:auto;text-align:right;white-space:nowrap}
.hpitem__p b{display:block;color:#fff;font-size:1.1rem}
.hpitem__p small{color:#9fb6cb;font-size:.72rem}

@media(max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:38px;padding:56px 0 64px}
}

/* ── Barra de confianza ────────────────────────────────────────────────── */
.trust{background:var(--gris-cla);border-bottom:1px solid var(--linea)}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0}
.trust__c{padding:26px 20px;text-align:center;background:var(--gris-cla)}
.trust__c b{display:block;font-size:1.7rem;color:var(--azul);letter-spacing:-.03em}
.trust__c span{font-size:.85rem;color:var(--gris)}
@media(max-width:760px){.trust__in{grid-template-columns:repeat(2,1fr)}}

/* ── Secciones ─────────────────────────────────────────────────────────── */
.sec{padding:82px 0}
.sec--gris{background:var(--gris-cla)}
.sec--osc{background:var(--tinta);color:#c9d8e6}
.sec--osc h2,.sec--osc h3{color:#fff}
.sec__cab{max-width:720px;margin:0 auto 48px;text-align:center}
.sec__cab p{color:var(--gris);font-size:1.05rem;margin:0}
.sec--osc .sec__cab p{color:#9fb6cb}
.eyebrow{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);margin-bottom:12px;
}
.sec--osc .eyebrow{color:var(--cian)}

/* ── Rejillas y tarjetas ───────────────────────────────────────────────── */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px;transition:.2s}
.card:hover{border-color:#c6dcef;box-shadow:var(--sombra);transform:translateY(-2px)}
.card__ico{
  width:48px;height:48px;border-radius:12px;background:var(--azul-cla);color:var(--azul);
  display:grid;place-items:center;font-size:1.35rem;margin-bottom:16px;
}
.card h3{font-size:1.08rem;margin-bottom:.4em}
.card p{color:var(--gris);font-size:.93rem;margin:0}
.sec--osc .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.sec--osc .card p{color:#9fb6cb}
.sec--osc .card__ico{background:rgba(0,183,230,.14);color:var(--cian)}

/* ── Tarjeta de producto (precios) ─────────────────────────────────────── */
.plan{
  position:relative;background:#fff;border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:28px 24px;display:flex;flex-direction:column;transition:.2s;
}
.plan:hover{border-color:var(--azul);box-shadow:var(--sombra-alta);transform:translateY(-3px)}
.plan--top{border-color:var(--azul);box-shadow:var(--sombra)}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--azul),#00a0e0);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.42em 1.1em;border-radius:99px;white-space:nowrap;
}
.plan__gama{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.plan__n{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin:.15em 0 .1em}
.plan__ideal{font-size:.85rem;color:var(--gris);min-height:3.2em;margin-bottom:16px}
.plan__precio{display:flex;align-items:baseline;gap:.3em;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.plan__precio b{font-size:2.35rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan__precio span{font-size:.9rem;color:var(--gris)}
.plan__iva{font-size:.76rem;color:var(--gris);margin:8px 0 18px}
.specs{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px}
.specs li{display:flex;align-items:flex-start;gap:.65em;font-size:.9rem}
.specs .i{color:var(--azul);flex:0 0 auto;margin-top:.22em;width:1.05em;height:1.05em}
.specs b{font-weight:700}
.plan__pie{margin-top:auto}

/* ── Tabla comparativa / listado dedicados ─────────────────────────────── */
.filtros{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:34px}
.filtros a{
  padding:.55em 1.15em;border:1.5px solid var(--linea);border-radius:99px;font-size:.86rem;
  font-weight:700;color:var(--tinta);background:#fff;transition:.15s;
}
.filtros a:hover{border-color:var(--azul);color:var(--azul)}
.filtros a.is-on{background:var(--azul);border-color:var(--azul);color:#fff}

.srv{
  display:grid;grid-template-columns:190px 1fr 220px;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px 24px;transition:.18s;
}
.srv:hover{border-color:#bcd8ee;box-shadow:var(--sombra)}
.srv__id .serie{font-size:.7rem;font-weight:800;letter-spacing:.13em;color:var(--azul);text-transform:uppercase}
.srv__id .nom{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.srv__id .loc{font-size:.78rem;color:var(--gris);display:flex;align-items:center;gap:.35em;margin-top:4px}
.srv__specs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.srv__s{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;min-width:0}
.srv__s .i{color:var(--azul);flex:0 0 auto;margin-top:.15em;font-size:1.05rem}
.srv__s small{display:block;color:var(--gris);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.srv__s span{font-weight:600;word-break:break-word}
.srv__buy{text-align:right}
.srv__buy .pr{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.srv__buy .pr small{font-size:.85rem;font-weight:600;color:var(--gris)}
.srv__buy .iva{font-size:.74rem;color:var(--gris);margin-bottom:12px}
@media(max-width:1080px){
  .srv{grid-template-columns:1fr;gap:16px}
  .srv__specs{grid-template-columns:repeat(2,1fr)}
  .srv__buy{text-align:left;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:16px}
  .srv__buy .iva{margin:0}
}
@media(max-width:520px){.srv__specs{grid-template-columns:1fr}}

/* ── Bloques informativos ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.lista-check li{display:flex;gap:.8em;align-items:flex-start}
.lista-check .i{color:var(--ok);flex:0 0 auto;margin-top:.2em}
.lista-check b{display:block}
.lista-check span{color:var(--gris);font-size:.92rem}
.sec--osc .lista-check span{color:#9fb6cb}

.pasos{counter-reset:p;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}
.paso{position:relative;padding-top:52px}
.paso::before{
  counter-increment:p;content:counter(p);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:12px;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;
}
.paso h3{font-size:1.02rem}
.paso p{color:var(--gris);font-size:.92rem;margin:0}
.sec--osc .paso p{color:#9fb6cb}

/* ── CTA franja ────────────────────────────────────────────────────────── */
.cta{background:linear-gradient(120deg,var(--azul-osc),var(--azul) 55%,#0093d8);color:#fff;padding:64px 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:.25em}
.cta p{color:#d5eaf9;margin:0;max-width:60ch}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-sm);margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--azul);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--linea)}
.faq p{padding:16px 22px 20px;margin:0;color:var(--gris);font-size:.94rem}

/* ── Formularios ───────────────────────────────────────────────────────── */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.83rem;font-weight:700;margin-bottom:6px}
.campo .ayuda{font-weight:400;color:var(--gris);font-size:.8rem}
.inp,select.inp,textarea.inp{
  width:100%;padding:.8em 1em;border:1.5px solid var(--linea);border-radius:var(--radio-sm);
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--tinta);transition:.15s;
}
.inp:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,105,180,.14)}
textarea.inp{min-height:130px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:600px){.f2{grid-template-columns:1fr}}
.opt{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--linea);
  border-radius:var(--radio-sm);cursor:pointer;transition:.15s;background:#fff;margin-bottom:10px;
}
.opt:hover{border-color:#bcd8ee;background:#fbfdff}
.opt input{margin-top:.25em;accent-color:var(--azul);width:17px;height:17px;flex:0 0 auto}
.opt input:checked ~ .opt__t{color:var(--azul)}
.opt:has(input:checked){border-color:var(--azul);background:var(--azul-cla)}
.opt__t{font-weight:700;font-size:.93rem}
.opt__d{font-size:.83rem;color:var(--gris);margin-top:2px}
.opt__p{margin-left:auto;text-align:right;font-weight:800;white-space:nowrap;font-size:.9rem}
.opt__p small{display:block;font-weight:600;color:var(--gris);font-size:.72rem}

/* ── Avisos ────────────────────────────────────────────────────────────── */
.aviso{padding:14px 18px;border-radius:var(--radio-sm);font-size:.92rem;margin-bottom:14px;border:1px solid}
.aviso--ok{background:#eaf7ef;border-color:#bde5cb;color:#12683c}
.aviso--err{background:#fdecea;border-color:#f6c9c4;color:#a1231a}
.aviso--info{background:var(--azul-cla);border-color:#c3ddf3;color:var(--azul-osc)}
.aviso--warn{background:#fff6e5;border-color:#ffe0a3;color:#8a5a00}

/* ── Carrito / checkout ────────────────────────────────────────────────── */
.compra{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}
@media(max-width:960px){.compra{grid-template-columns:1fr}}
.resumen{position:sticky;top:96px;background:#fff;border:1.5px solid var(--linea);border-radius:var(--radio);padding:24px}
.resumen h3{font-size:1.05rem;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.rline{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding:7px 0}
.rline--tot{border-top:2px solid var(--tinta);margin-top:12px;padding-top:14px;font-size:1.22rem;font-weight:800}
.rline--desc{color:var(--ok)}
.item{display:grid;grid-template-columns:1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--linea)}
.item:first-child{padding-top:0}
.item__n{font-size:1.12rem;font-weight:800;margin-bottom:2px}
.item__r{font-size:.86rem;color:var(--gris);margin-bottom:10px}
.item__meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag{background:var(--gris-cla);border:1px solid var(--linea);border-radius:99px;padding:.24em .8em;font-size:.76rem;font-weight:600}
.tag--az{background:var(--azul-cla);border-color:#c3ddf3;color:var(--azul-osc)}
.item__acc{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.item__pr{text-align:right;white-space:nowrap}
.item__pr b{font-size:1.28rem;font-weight:800;display:block}
.item__pr small{color:var(--gris);font-size:.78rem}
.pasos-compra{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:36px;flex-wrap:wrap;font-size:.86rem;font-weight:700;color:var(--gris)}
.pasos-compra i{width:26px;height:26px;border-radius:50%;background:var(--gris-cla);display:inline-grid;place-items:center;font-style:normal;font-size:.8rem;margin-right:.45em}
.pasos-compra .on{color:var(--azul)}
.pasos-compra .on i{background:var(--azul);color:#fff}
.pasos-compra .sep{width:26px;height:1.5px;background:var(--linea)}

/* ── Página interior / legal ───────────────────────────────────────────── */
.cabint{background:linear-gradient(150deg,#0b1a2b,#0d3054);color:#fff;padding:62px 0 58px}
.cabint h1{color:#fff;margin-bottom:.3em}
.cabint p{color:#a9c2d8;max-width:70ch;margin:0;font-size:1.05rem}
.miga{font-size:.82rem;color:#7f9ab2;margin-bottom:16px}
.miga a{color:#a9c2d8}
.doc{max-width:860px;margin:0 auto}
.doc h2{font-size:1.35rem;margin-top:2em;padding-top:.4em;border-top:1px solid var(--linea)}
.doc h3{font-size:1.05rem;margin-top:1.6em}
.doc p,.doc li{color:#31445a;font-size:.97rem}
.doc ul,.doc ol{padding-left:1.3em}
.doc li{margin-bottom:.5em}
.doc table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.9rem}
.doc th,.doc td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--gris-cla);font-weight:700}
.doc .datos{background:var(--gris-cla);border-left:4px solid var(--azul);padding:18px 22px;border-radius:0 var(--radio-sm) var(--radio-sm) 0}
.doc .datos p{margin:0}

/* ── Tabla genérica ────────────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.tabla th,.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);text-align:left}
.tabla th{background:var(--gris-cla);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.estado{display:inline-flex;align-items:center;gap:.4em;padding:.24em .8em;border-radius:99px;font-size:.76rem;font-weight:700}
.estado--ok{background:#eaf7ef;color:#12683c}
.estado--pend{background:#fff6e5;color:#8a5a00}
.estado--prov{background:var(--azul-cla);color:var(--azul-osc)}
.estado--err{background:#fdecea;color:#a1231a}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#9fb6cb;font-size:.9rem;margin-top:0}
.pie__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;padding:62px 22px 48px}
@media(max-width:900px){.pie__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pie__top{grid-template-columns:1fr}}
.pie__col h4{color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.pie__col a{display:block;color:#9fb6cb;padding:5px 0;font-size:.9rem}
.pie__col a:hover{color:#fff}
.pie__logo{display:inline-block;background:#fff;padding:9px 12px;border-radius:10px;margin-bottom:16px}
.pie__logo img{width:200px}
.pie__claim{font-size:.9rem;line-height:1.65;margin-bottom:16px}
.pie__marca{font-size:.85rem;color:#7e97ae}
.pie__marca strong{color:#c9d8e6}
.pie__dir{font-size:.85rem;margin:10px 0 0;color:#7e97ae}
.pie__pagos{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip-pago{border:1px solid #2b4257;border-radius:6px;padding:.35em .75em;font-size:.75rem;color:#c9d8e6}
.pie__bot{border-top:1px solid #1d3348}
.pie__bot__in{display:flex;justify-content:space-between;gap:20px;padding:20px 22px;flex-wrap:wrap;font-size:.82rem}
.pie__bot p{margin:0;color:#7e97ae}
.pie__legal{display:flex;gap:18px;flex-wrap:wrap}
.pie__legal a{color:#7e97ae}
.pie__legal a:hover{color:#fff}

/* ── Cookies ───────────────────────────────────────────────────────────── */
/* IMPORTANTE: estas reglas deben ganar al atributo [hidden]; si no, el aviso
   nunca se cierra y su capa fija deja el pie de página sin poder pulsarse. */
[hidden]{display:none !important}

.cookies{position:fixed;inset:auto 0 0 0;z-index:200;padding:16px;display:flex;justify-content:center;background:linear-gradient(transparent,rgba(11,26,43,.35));pointer-events:none}
.cookies__box{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-alta);
  padding:20px 22px;max-width:760px;pointer-events:auto;max-height:calc(100vh - 32px);overflow-y:auto;
}
.cookies__box h3{font-size:1.05rem;margin-bottom:.35em}
.cookies__box p{font-size:.88rem;color:var(--gris);margin-bottom:14px}
.cookies__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cookies__pref{border-top:1px solid var(--linea);padding-top:14px;margin-bottom:14px;display:grid;gap:10px}
.cookies__sw{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--gris)}
.cookies__sw input{accent-color:var(--azul);width:17px;height:17px;margin-top:.15em;flex:0 0 auto}
/* Mientras el aviso está visible, reservamos espacio para no tapar el pie. */
body.con-cookies .pie__bot{padding-bottom:190px}

@media(max-width:640px){
  .cookies{padding:0}
  .cookies__box{
    max-width:none;width:100%;border-radius:14px 14px 0 0;border-width:1px 0 0;
    padding:16px 18px calc(16px + env(safe-area-inset-bottom));max-height:70vh;
  }
  .cookies__box h3{font-size:1rem}
  .cookies__box p{font-size:.82rem;margin-bottom:12px;line-height:1.5}
  .cookies__btns{gap:8px}
  .cookies__btns .btn{flex:1 1 100%}
  .cookies__sw{font-size:.8rem}
  body.con-cookies .pie__bot{padding-bottom:280px}
}

/* ── Utilidades ────────────────────────────────────────────────────────── */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt24{margin-top:24px}.mt36{margin-top:36px}
.hr{height:1px;background:var(--linea);border:0;margin:34px 0}
.badge-off{background:#eaf7ef;color:#12683c;border-radius:99px;padding:.2em .7em;font-size:.74rem;font-weight:800}
.pie__ver{display:inline-block;margin-left:8px;padding:.1em .55em;border:1px solid #2b4257;border-radius:99px;font-size:.72rem;color:#7e97ae;letter-spacing:.03em}

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTES RESPONSIVE
   Las tablas anchas y los bloques de dos columnas necesitan tratamiento
   específico para que ninguna página desborde horizontalmente en móvil.
   ══════════════════════════════════════════════════════════════════════════ */

/* Ninguna tabla debe empujar el ancho del documento.
   Por defecto los items de grid tienen min-width:auto, así que un contenido
   ancho (una tabla) impide que su columna se encoja y desborda la página. */
.grid > *,.split > *,.compra > *,.srv > *,.srv__specs > *{min-width:0}
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.doc table{display:block;overflow-x:auto;white-space:normal;max-width:100%}
.doc table thead,.doc table tbody{width:100%}

@media(max-width:900px){
  .sec{padding:58px 0}
  .sec__cab{margin-bottom:34px}
  .cabint{padding:44px 0 40px}
  .resumen{position:static}          /* deja de flotar cuando ya no hay columna lateral */
  .cta{padding:48px 0}
  .cta__in{gap:24px}
  .pie__top{padding:44px 22px 34px;gap:30px}
}

@media(max-width:640px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  .sec{padding:46px 0}
  h1{font-size:clamp(1.65rem,7vw,2.1rem)}
  h2{font-size:clamp(1.35rem,5.4vw,1.75rem)}

  /* Cabecera y barra superior */
  .topbar__in{gap:10px 14px;padding:6px 0;font-size:.75rem}
  .cab__in{min-height:64px;gap:10px}
  .cab__logo img{width:140px}
  .cab__acc .btn{display:none}       /* el CTA duplica al menú en pantallas pequeñas */

  /* Hero */
  .hero__in{padding:40px 0 48px;gap:28px}
  .hero__sub{font-size:1rem}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 100%}
  .hero__ticks{gap:8px 18px;font-size:.84rem}
  .hero__panel{padding:18px}
  .hpitem{padding:11px 0;gap:11px}
  .hpitem__ico{width:32px;height:32px;flex-basis:32px;font-size:.95rem}
  .hpitem__t{font-size:.88rem}
  .hpitem__d{font-size:.76rem}
  .hpitem__p b{font-size:.98rem}

  /* Cifras */
  .trust__c{padding:18px 12px}
  .trust__c b{font-size:1.35rem}
  .trust__c span{font-size:.76rem}

  /* Tarjetas y planes */
  .card{padding:20px}
  .plan{padding:24px 20px}
  .plan__ideal{min-height:0}
  .plan__precio b{font-size:2rem}

  /* Listado de servidores */
  .srv{padding:18px 16px}
  .srv__id .nom{font-size:1.15rem}
  .srv__buy{gap:12px}
  .srv__buy .pr{font-size:1.4rem}
  .srv__buy .btn{margin-left:auto}

  /* Compra */
  .pasos-compra{gap:6px;font-size:.78rem;margin-bottom:26px}
  .pasos-compra .sep{width:14px}
  .item{grid-template-columns:1fr;gap:12px}
  .item__pr{text-align:left}
  .opt{padding:12px 13px;gap:10px}
  .opt__p{margin-left:0;width:100%;text-align:left;margin-top:6px}
  .opt > span:nth-child(2){min-width:0}
  .resumen{padding:20px}

  /* Documentos legales */
  .doc h2{font-size:1.15rem}
  .doc p,.doc li{font-size:.93rem}
  .doc .datos{padding:14px 16px}

  /* Pie */
  .pie__bot__in{flex-direction:column;gap:12px;align-items:flex-start}
  .pie__legal{gap:12px 16px}
}

@media(max-width:400px){
  .filtros a{padding:.45em .85em;font-size:.8rem}
  .btn{padding:.8em 1.25em}
  .btn--lg{padding:.95em 1.5em;font-size:.95rem}
}