/* =====================================================
   ESTILOS DE LA LANDING  ·  G1 Digital
   Para cambiar el look, tocá SOLO la sección 1 (variables).
   ===================================================== */

/* ---------- 1. COLORES, TIPOGRAFÍA Y MEDIDAS (editar acá) ---------- */
:root{
  /* Colores principales */
  --brand:  #4f46e5;   /* color de marca: títulos, botones, detalles */
  --brand2: #2563eb;   /* segundo color del degradé del botón */
  --hl:     #d9f99d;   /* resaltado verde del titular */

  /* Fondos */
  --bg:     #f6f7fb;   /* fondo de la página */
  --card:   #ffffff;   /* fondo de tarjetas y formulario */
  --soft:   #eef0ff;   /* fondo de opción elegida / hover */
  --video-bg:#0d0f24;  /* fondo del cuadro de video vacío */
  --video-ink:#c7c9e6; /* texto del cuadro de video vacío */

  /* Textos */
  --ink:    #12132b;   /* texto principal y títulos */
  --text:   #2b2d4a;   /* párrafos */
  --mut:    #5b5e7a;   /* textos chicos y secundarios */
  --btn-ink:#ffffff;   /* texto del botón */
  --error:  #b91c1c;   /* mensaje de error */

  /* Bordes y sombras */
  --line:   #e3e5f0;   /* bordes */
  --shadow: 0 8px 30px rgba(18,19,43,.07);
  --shadow-strong: 0 8px 30px rgba(18,19,43,.12);

  /* Tipografía */
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --h1-size: clamp(26px,5.6vw,42px);  /* tamaño del titular (mín, ideal, máx) */

  /* Medidas */
  --radius: 12px;       /* esquinas de tarjetas y campos */
  --radius-lg: 16px;    /* esquinas de banner, video y formulario */
  --max-width: 1060px;  /* ancho máximo de la página */
  --video-width: 340px;  /* ancho del video (centrado en su columna) */
  --video-ratio: 9 / 16; /* proporción: 9/16 vertical (celular), 16/9 horizontal */
  --banner-max-width: 900px; /* ancho máximo del banner en PC (más chico = banner más bajo) */
  --banner-ratio: 3 / 1;     /* proporción del banner: 3/1 es apaisado, como las referencias; 4/1 lo hace aún más bajo */
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px}
p{margin:8px 0;color:var(--text)}
ul{margin:8px 0 8px 20px;color:var(--text)}
li{margin:4px 0}
h2{font-size:21px;margin:26px 0 8px;color:var(--brand)}

/* ---------- 3. ESTRUCTURA ---------- */
.wrap{max-width:var(--max-width);margin:0 auto;padding:20px 16px 48px}
.grid{display:grid;gap:28px}
@media(min-width:900px){
  .grid{grid-template-columns:1.15fr .85fr;align-items:start}  /* columna de texto | columna de formulario */
  .sticky{position:sticky;top:20px}                            /* el formulario acompaña al scrollear */
}
footer{margin-top:36px;font-size:12px;color:var(--mut);text-align:center}

/* ---------- 4. BANNER, TITULAR Y VIDEO ---------- */
.banner{display:block;width:100%;max-width:var(--banner-max-width);aspect-ratio:var(--banner-ratio);object-fit:cover;height:auto;margin:0 auto 26px;border-radius:var(--radius-lg);box-shadow:var(--shadow-strong)}  /* arriba de las dos columnas, centrado */
h1{font-size:var(--h1-size);line-height:1.22;letter-spacing:-.01em;font-weight:900;overflow-wrap:anywhere;padding-bottom:4px}
.sub{margin-top:14px;font-size:18px}
mark{background:var(--hl);padding:0 6px;border-radius:4px;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.video{margin:20px auto;width:100%;max-width:var(--video-width);border-radius:var(--radius-lg);overflow:hidden;background:var(--video-bg);aspect-ratio:var(--video-ratio);display:flex;align-items:center;justify-content:center;color:var(--video-ink);text-align:center;padding:24px;font-size:15px}
.video.has-video{padding:0}
.video iframe,.video video{width:100%;height:100%;border:0}

/* ---------- 5. PRECIO Y PASOS ---------- */
.price{margin:18px 0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.price b{color:var(--brand)}
.steps{display:grid;gap:10px;margin-top:14px}
@media(min-width:600px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.step b{display:block;color:var(--brand)}
.step small{color:var(--mut)}
.aviso{font-size:13px;color:var(--mut);margin-top:16px}

/* ---------- 6. FORMULARIO ---------- */
form{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
form h3{text-align:center;font-size:20px;margin-bottom:12px}
label,.q{display:block;font-size:13.5px;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=tel],textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--card);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
textarea{min-height:76px;resize:vertical}
.opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:14.5px;font-weight:500;cursor:pointer}
.opt input{accent-color:var(--brand);width:18px;height:18px}
.opt:has(input:checked){border-color:var(--brand);background:var(--soft)}
button{width:100%;margin-top:18px;padding:15px;border:0;border-radius:var(--radius);font:inherit;font-weight:800;font-size:16px;color:var(--btn-ink);background:linear-gradient(90deg,var(--brand),var(--brand2));cursor:pointer}
button:disabled{opacity:.6}
.fine{text-align:center;font-size:12px;color:var(--mut);margin-top:10px}
.err{color:var(--error);font-size:13px;margin-top:8px;display:none}
.thanks{display:none;text-align:center;padding:30px 10px}
.thanks h3{margin-bottom:8px}

/* ---------- 7. SELECTOR DE PAÍS (bandera + código) ---------- */
.phone{position:relative;display:flex;gap:8px}
.phone input{flex:1;min-width:0}
.phone .cc{width:auto;margin:0;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:15px;white-space:nowrap}
.cc img{border-radius:2px;object-fit:cover}
.ccl{display:none;position:absolute;top:100%;left:0;z-index:10;width:100%;max-height:260px;overflow:auto;margin:6px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(18,19,43,.15)}
.ccl.open{display:block}
.ccl li{display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.ccl li:hover{background:var(--soft)}
.ccl li span{margin-left:auto;color:var(--mut);font-weight:600}