/*
 * presentaciones.css - Lo que comparten las presentaciones comerciales (presentaciones/*.html).
 *
 * Las 98 reglas de este archivo estaban COPIADAS dentro del <style> de cada presentación, unas
 * 12,6 KB repetidas en los siete archivos (incluida la plantilla presentacion-base.html): un
 * ajuste del diseño común eran siete ediciones. Lo propio de cada producto sigue en su <style>,
 * que se carga DESPUÉS de esta hoja y por eso manda sobre ella.
 *
 * Se enlaza con ?v=<huella>: /assets/ se cachea 7 días y, sin versión en la URL, quien ya vio
 * una presentación seguiría con la hoja vieja. Al cambiar este archivo, cambiar la ?v= en los
 * siete (la huella es el md5 corto del contenido).
 *
 * Una presentación no carga style.css (la maqueta del sitio choca con la suya): esta hoja es
 * solo de las presentaciones.
 */

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Open Sans', sans-serif;
    background: var(--navy);
    color: var(--text);
    overflow: hidden;
    height: 100vh;
  }

/* ── ENGINE ──────────────────────────────── */
.slides-wrapper { width:100%; height:100vh; overflow:hidden; position:relative; }
.slides-track {
    display:flex; width:100%; height:100vh;
    transition: transform 0.55s cubic-bezier(0.77,0,0.175,1);
  }
.slide {
    min-width:100vw; height:100vh;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    padding:36px 64px;
    position:relative; overflow:hidden;
    background: var(--bg);
  }

/* ── NAVIGATION ──────────────────────────── */
.nav-btn {
    position:fixed; top:50%; transform:translateY(-50%);
    background:rgba(6,43,91,0.7); border:1px solid rgba(16,110,234,0.5);
    color:#fff; width:40px; height:40px; border-radius:50%;
    cursor:pointer; font-size:18px;
    display:flex; align-items:center; justify-content:center;
    z-index:1000; transition:all 0.3s; backdrop-filter:blur(6px);
  }
.nav-btn:hover { background:var(--blue); border-color:var(--blue); }
#prev { left:12px; }
#next { right:12px; }
.nav-btn:disabled { opacity:0.2; cursor:not-allowed; }
.dots-wrap {
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
    display:flex; gap:7px; z-index:1000;
  }
.dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(6,43,91,0.25); border:1.5px solid var(--navy);
    cursor:pointer; transition:all 0.3s;
  }
.dot.active { background:var(--blue); border-color:var(--blue); width:22px; border-radius:4px; }
.kb-hint {
    position:fixed; bottom:46px; right:18px;
    font-size:10px; color:rgba(6,43,91,0.4); z-index:1000;
    font-family:'Poppins',sans-serif; letter-spacing:0.05em;
  }

/* ── TYPOGRAPHY ──────────────────────────── */
.label {
    font-family:'Poppins',sans-serif; font-size:0.62rem; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--blue); margin-bottom:10px;
  }
h1.htitle {
    font-family:'Poppins',sans-serif; font-size:clamp(1.8rem,3.2vw,3rem);
    font-weight:800; line-height:1.12; color:var(--navy);
  }
h1.htitle span, h2.stitle span { color:var(--blue); }
h2.stitle {
    font-family:'Roboto',sans-serif; font-size:clamp(1.2rem,2.2vw,2rem);
    font-weight:700; line-height:1.2; color:var(--navy); margin-bottom:20px; text-align:center;
  }
.divider {
    width:48px; height:4px; background:var(--blue);
    border-radius:2px; margin:12px auto 22px;
  }
p.sub {
    font-size:clamp(0.82rem,1.2vw,1rem); color:var(--text-mid);
    line-height:1.7; max-width:640px; text-align:center;
  }

/* ── LOGO ────────────────────────────────── */
.logo-row { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.logo-row img { height:52px; }
.logo-row .bname {
    font-family:'Poppins',sans-serif; font-size:1.15rem; font-weight:700;
    color:var(--navy); line-height:1.2;
  }
.logo-row .bname small {
    display:block; font-size:0.58rem; font-weight:500;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  }

/* ── PILL ────────────────────────────────── */
.pill {
    display:inline-block;
    background:var(--bg-pale); border:1px solid rgba(16,110,234,0.3);
    color:var(--blue-dark); font-family:'Poppins',sans-serif;
    font-size:0.65rem; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; padding:5px 14px; border-radius:50px;
    margin:4px;
  }

/* ── CARDS ───────────────────────────────── */
.card {
    background:var(--bg); border:1px solid var(--border);
    border-radius:12px; padding:20px 18px;
    transition:all 0.25s; box-shadow:0 2px 8px rgba(6,43,91,0.06);
  }
.card:hover { border-color:var(--blue); box-shadow:0 4px 18px rgba(16,110,234,0.13); }
.card .cicon { font-size:1.7rem; margin-bottom:10px; }
.card h3 { font-family:'Roboto',sans-serif; font-size:0.88rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
.card p { font-size:0.75rem; color:var(--text-mid); line-height:1.55; }
.card .tag { display:inline-block; margin-top:8px; font-size:0.65rem; font-weight:700; font-family:'Poppins',sans-serif; color:var(--blue); letter-spacing:0.05em; }

/* ── GRIDS ───────────────────────────────── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; width:100%; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:100%; }

/* ── HIGHLIGHT BOX ───────────────────────── */
.hbox {
    background:var(--bg-soft); border-left:4px solid var(--blue);
    border-radius:0 10px 10px 0; padding:14px 18px;
    font-size:0.82rem; line-height:1.6; color:var(--text-mid);
  }
.hbox strong { color:var(--navy); }

/* ── FEATURE LIST ────────────────────────── */
.flist { list-style:none; display:flex; flex-direction:column; gap:9px; }
.flist li { display:flex; align-items:flex-start; gap:10px; font-size:0.82rem; line-height:1.5; color:var(--text-mid); }
.flist li .ck {
    flex-shrink:0; width:20px; height:20px; border-radius:50%;
    background:var(--bg-pale); border:1.5px solid var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-size:0.65rem; color:var(--blue); margin-top:1px;
  }

/* ── SECTION MAX-WIDTH ───────────────────── */
.mw { max-width:1120px; width:100%; }
.mw-md { max-width:900px; width:100%; }
.mw-sm { max-width:720px; width:100%; }

/* ── GEOMETRIC DECORATORS ─────────────────── */
.deco-circle-tr::before {
    content:''; position:absolute; top:-140px; right:-140px;
    width:480px; height:480px; border-radius:50%;
    background:linear-gradient(135deg, rgba(16,110,234,0.10), rgba(6,43,91,0.06));
    pointer-events:none;
  }
.deco-circle-tr::after {
    content:''; position:absolute; top:-60px; right:-60px;
    width:260px; height:260px; border-radius:50%;
    border:2px solid rgba(16,110,234,0.10); pointer-events:none;
  }
.deco-left-bar::before {
    content:''; position:absolute; top:0; left:0; bottom:0;
    width:6px; background:linear-gradient(180deg, var(--blue), var(--blue-dark));
    pointer-events:none;
  }
.deco-diagonal::before {
    content:''; position:absolute; top:0; left:0;
    width:340px; height:200px;
    background:linear-gradient(135deg, var(--bg-soft) 0%, transparent 100%);
    clip-path:polygon(0 0, 100% 0, 60% 100%, 0 100%);
    pointer-events:none;
  }
.deco-wave::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:80px;
    background:linear-gradient(0deg, var(--bg-soft), transparent);
    pointer-events:none;
  }
.deco-topbar::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:5px;
    background:linear-gradient(90deg, var(--blue-dark), var(--blue), var(--blue-h));
    pointer-events:none;
  }
.deco-bgpale { background:var(--bg-soft) !important; }
.deco-bgpale::after {
    content:''; position:absolute; bottom:-100px; right:-100px;
    width:360px; height:360px; border-radius:50%;
    background:rgba(16,110,234,0.06); pointer-events:none;
  }
.deco-split { background:var(--bg-soft) !important; }
.deco-split::before {
    content:''; position:absolute; bottom:-120px; right:-120px;
    width:420px; height:420px; border-radius:50%;
    background:rgba(16,110,234,0.07); pointer-events:none;
  }
.deco-split::after {
    content:''; position:absolute; bottom:-40px; right:-40px;
    width:220px; height:220px; border-radius:50%;
    border:2px solid rgba(16,110,234,0.12); pointer-events:none;
  }
.deco-right-bar::after {
    content:''; position:absolute; top:0; right:0; bottom:0;
    width:5px; background:linear-gradient(180deg, var(--blue-h), var(--blue-dark));
    pointer-events:none;
  }
.deco-dots::before {
    content:''; position:absolute; top:0; left:0; right:0; height:5px;
    background:repeating-linear-gradient(90deg, var(--blue) 0px, var(--blue) 16px, transparent 16px, transparent 28px);
    pointer-events:none;
  }
.deco-band::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:52px;
    background:linear-gradient(90deg, var(--navy), var(--blue-dark));
    pointer-events:none;
  }
.deco-navy-bottom::before {
    content:''; position:absolute; top:-100px; right:-100px;
    width:380px; height:380px; border-radius:50%;
    background:rgba(16,110,234,0.06); pointer-events:none;
  }
.deco-navy-bottom::after {
    content:''; position:absolute; bottom:-60px; left:-60px;
    width:240px; height:240px; border-radius:50%;
    border:2px solid rgba(16,110,234,0.08); pointer-events:none;
  }

/* ── PRICING CARD ────────────────────────── */
.plan-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(16,110,234,0.14); }
.plan-card.featured { border:2px solid var(--blue); box-shadow:0 6px 28px rgba(16,110,234,0.20); background:linear-gradient(160deg, #f0f6ff, #ffffff); }
.plan-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--blue); color:#fff;
    font-family:'Poppins',sans-serif; font-size:0.6rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    padding:4px 14px; border-radius:50px; white-space:nowrap;
  }
.pf .pc { color:var(--blue); font-size:0.82rem; flex-shrink:0; margin-top:1px; }

/* ── HOSTING CARDS ───────────────────────── */
.host-card { border-radius:14px; padding:24px 22px; display:flex; flex-direction:column; gap:12px; position:relative; }
.host-onp { background:var(--bg); border:1px solid rgba(16,110,234,0.2); box-shadow:0 2px 12px rgba(6,43,91,0.06); }
.host-cld { background:var(--bg-pale); border:1px solid rgba(16,110,234,0.25); }
.host-card h3 { font-family:'Roboto',sans-serif; font-size:1rem; font-weight:700; color:var(--navy); }
.host-card .h-icon { font-size:2rem; }
.host-price { background:rgba(16,110,234,0.07); border-radius:8px; padding:10px 14px; font-size:0.8rem; color:var(--text-mid); }
.host-price strong { font-family:'Poppins',sans-serif; color:var(--navy); font-size:1rem; }
.host-rate { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:0.78rem; }
.host-rate .row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--border); }
.host-rate .row:last-child { border:none; }
.host-rate .row strong { color:var(--blue-dark); font-family:'Poppins',sans-serif; }
.host-card ul { list-style:none; font-size:0.76rem; color:var(--text-mid); line-height:1.75; }
.host-card ul li::before { content:"→ "; color:var(--blue); font-weight:700; }
.host-tip { font-size:0.72rem; background:var(--bg-soft); border-radius:8px; padding:10px 13px; color:var(--text-muted); line-height:1.5; }
.host-tip strong { color:var(--blue-dark); }

/* ── SUPPORT TABLE ───────────────────────── */
.sup-table tr:hover td { background:var(--bg-soft); }

/* ── ROI METRICS ─────────────────────────── */
.roi-metric { text-align:center; padding:18px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--border); box-shadow:0 2px 8px rgba(6,43,91,0.06); }
.roi-num { font-family:'Poppins',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--blue); line-height:1; }
.roi-lbl { font-size:0.72rem; color:var(--text-muted); margin-top:5px; line-height:1.4; }

/* ── CTA BUTTON ──────────────────────────── */
.cta-btn {
    display:inline-block; background:var(--blue); color:#fff;
    font-family:'Poppins',sans-serif; font-size:0.82rem; font-weight:700;
    padding:12px 34px; border-radius:50px; text-decoration:none;
    letter-spacing:0.05em; transition:all 0.3s;
    box-shadow:0 4px 16px rgba(16,110,234,0.3); z-index:1; position:relative;
  }
.cta-btn:hover { background:var(--blue-dark); box-shadow:0 6px 22px rgba(16,110,234,0.4); }

/* ── MÓVIL ───────────────────────────────────────────────────────────────
     Por qué existe: la presentación es un carrusel horizontal de diapositivas de 100vw x 100vh
     con overflow:hidden, pensado para proyectar. En un celular eso RECORTA el contenido -el
     título salía cortado por la mitad- y encima deja las columnas encimadas, porque los seis
     archivos no tenían una sola @media.

     Qué hace: por debajo de 820px la presentación deja de ser un carrusel y pasa a ser UNA
     PÁGINA que se lee hacia abajo, que es como se lee en un teléfono. No se toca nada del
     diseño de escritorio.

     Por qué importa: es el destino de los QR de los volantes impresos y de las tarjetas de
     "Demo gratuito". Quien escanea, escanea con el celular. Si esto se rompe, el volante
     repartido no sirve para nada.

     ⚠️ El corte NO puede ser solo por ancho. Un celular EN HORIZONTAL mide 844x390: pasa de
     820px de ancho, así que volvía el carrusel... sobre una pantalla de 390px de alto, y las
     diapositivas de 100vh recortaban su contenido (6 de 13 medidas en vivo, una necesitaba
     656px de los 390 disponibles). Por eso va también (max-height: 620px): lo que manda no es
     el aparato sino si el contenido cabe a lo alto. Un portátil (768px) o un proyector siguen
     con carrusel. */
@media (max-width: 820px), (max-height: 620px) {
    body { overflow:auto; height:auto; }
    .slides-wrapper { height:auto; overflow:visible; }

    /* transform con !important: el motor JS escribe translateX EN LÍNEA al arrancar y en cada
       gesto. Sin !important la página aparecería desplazada fuera de la pantalla. */
    .slides-track { display:block; width:100%; height:auto;
                    transform:none !important; transition:none; }

    /* overflow:hidden SE MANTIENE. En escritorio recortaba el contenido porque la diapositiva
       tenía alto fijo (100vh); con height:auto ya no recorta nada y sigue haciendo su trabajo
       original: contener los círculos decorativos (::before), que si no se escapan y ensanchan
       la página 140px - desborde horizontal en el teléfono sin que se vea de dónde sale. */
    .slide { min-width:100%; width:100%; height:auto; min-height:0;
             padding:30px 18px; overflow:hidden;
             border-bottom:6px solid var(--bg-soft); }

    /* Controles de carrusel: no aplican cuando se lee con el dedo hacia abajo */
    .nav-btn, .dots-wrap, .kb-hint { display:none !important; }

    /* Las figuras decorativas son ::before/::after posicionados y, al no llevar z-index, se
       pintan ENCIMA del contenido normal. En escritorio quedaban en una esquina lejos del
       texto; con la diapositiva ya sin alto fijo caen sobre él y lo dejan lavado (el título
       "Una caja completa lista para vender" salía casi ilegible). Se mandan al fondo. */
    .slide::before, .slide::after { z-index:0 !important; }
    .slide > * { position:relative; z-index:1; }

    /* El botón fijo "Volver a Productos" tapaba el logo de la primera diapositiva */
    .slide:first-child { padding-top:58px; }

    /* Una sola columna. Los bloques de dos columnas van con estilo EN LÍNEA (gap grande),
       así que hay que ganarles con !important; los flex de gap pequeño -píldoras, filas de
       precio, listas con icono- se dejan como están, que ahí sí se ven bien. */
    .g2, .g3, .g4, .plan-wrap { grid-template-columns:1fr !important; gap:14px !important; }
    .slide [style*="gap:52px"], .slide [style*="gap:36px"],
    .slide [style*="gap:32px"], .slide [style*="gap:14px;width:100%"] { display:block !important; }
    .slide [style*="display:flex"] { flex-wrap:wrap; }
    .slide [style*="flex:"] + [style*="flex:"] { margin-top:18px; }

    /* Línea de tiempo ("de la firma a la primera venta"): sus pasos van en fila con flex:1, y
       un hijo flex NO se encoge por debajo de su contenido (min-width:auto). En un teléfono eso
       la sacaba 114px fuera de la pantalla. Se apila y se quita la línea que los une. */
    .tl-wrap { display:block !important; }
    .tl-wrap::before { display:none; }
    .tl-step { padding:0 0 16px; text-align:left; }

    /* Misma razón (min-width:auto) para cualquier otra columna flex con texto largo */
    .slide [style*="display:flex"] > *, .g2 > *, .g3 > *, .g4 > * { min-width:0; }

    /* Los anchos fijos (420px, 480px, 260px…) desbordan una pantalla de 390px */
    .slide [style*="width:"] { max-width:100% !important; }
    .slide img { max-width:100%; height:auto; }

    /* Tipografía: los clamp() se calcularon en vw para proyector y su valor mínimo sigue
       siendo demasiado grande para un teléfono */
    h1.htitle { font-size:1.6rem; }
    h2.stitle { font-size:1.15rem; margin-bottom:14px; }
    .logo-row img { height:40px; }

    /* La tabla comparativa no cabe: se desplaza en horizontal en vez de encogerse hasta ser
       ilegible. Encogerla es lo que hace que el prospecto no lea los planes. */
    .slide table { display:block; width:100%; overflow-x:auto; font-size:0.72rem; }

    /* El botón de volver es fijo: encogido para que no tape el encabezado */
    body > a[href="/page/productos.html"] { padding:5px 12px !important; font-size:12px !important; }
  }

/* ── BANNER DE COOKIES ───────────────────────────────────────────────────
     Por qué está aquí y no en assets/css/style.css: el banner lo inyecta
     assets/js/consentimiento-cookies.js en TODAS las páginas, pero su CSS vive solo en
     style.css - y las presentaciones NO cargan esa hoja, porque son autocontenidas y su
     diseño es propio. Resultado: el aviso salía sin estilos (texto suelto y botones del
     navegador encima del contenido), y en el celular tapaba media pantalla.

     No se enlaza style.css para arreglarlo: traería la maqueta entera del sitio (su :root,
     su body, su tipografía) y chocaría con la de la presentación. Se copian solo estas
     reglas, que es lo único que falta.

     Los dos botones pesan lo MISMO a propósito: un "Rechazar" escondido o en gris pálido
     invalida el consentimiento, que la Ley 1581 exige libre e informado. */
#banner-cookies {
    position:fixed; bottom:0; left:0; right:0; z-index:9999;
    background:#fff; border-top:3px solid var(--blue);
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
    padding:18px 24px; display:flex; align-items:center; justify-content:center;
    gap:24px; flex-wrap:wrap;
    font-family:'Open Sans', sans-serif;
  }
.banner-cookies__texto { max-width:720px; }
.banner-cookies__texto strong { display:block; color:var(--text); font-size:15px; margin-bottom:4px; }
.banner-cookies__texto p { margin:0; font-size:13px; color:var(--text-mid); line-height:1.5; max-width:none; text-align:left; }
.banner-cookies__texto a { color:var(--blue); font-weight:600; }
.banner-cookies__botones { display:flex; gap:10px; flex-shrink:0; }
.banner-cookies__btn {
    border-radius:6px; padding:10px 24px; font-size:14px; font-weight:600;
    cursor:pointer; border:1px solid transparent; transition:.2s;
    font-family:'Open Sans', sans-serif;
  }
.banner-cookies__btn--primario { background:var(--blue); color:#fff; }
.banner-cookies__btn--primario:hover { background:var(--blue-h); }
.banner-cookies__btn--secundario { background:#fff; color:var(--blue); border-color:var(--blue); }
.banner-cookies__btn--secundario:hover { background:var(--bg-soft); }
@media (max-width: 768px) {
    #banner-cookies { padding:16px; gap:14px; }
    .banner-cookies__botones { width:100%; }
    .banner-cookies__btn { flex:1; padding:10px 12px; }
  }

/* Mientras el aviso está en pantalla, sube los puntos de navegación: el banner va anclado
     abajo y los tapaba justo donde el visitante intenta pasar de diapositiva. Al aceptar o
     rechazar, el banner se borra del DOM y los puntos vuelven solos a su sitio. */
body:has(#banner-cookies) .dots-wrap { bottom:118px; }
body:has(#banner-cookies) .kb-hint { bottom:148px; }