:root {
  --acento: #11fa00;
  --sobre-acento: #0f172a;
  --acento-texto: #107d17;
  --acento-texto-oscuro: #11fa00;
}
/* Landing de TotalTech.
   El color principal lo pone la plantilla antes de esta hoja (--acento y sus
   derivados, MEDIDOS en color.js). Aqui no se escribe ningun color de marca. */

:root {
  --fondo: #ffffff;
  --fondo-alterno: #f6f8fb;
  --papel: #ffffff;
  --tinta: #0f172a;
  --tenue: #4b5a70;
  --linea: #e3e8f0;
  --sombra: 0 1px 2px rgb(15 23 42 / 5%), 0 12px 32px rgb(15 23 42 / 8%);
  --sombra-fuerte: 0 2px 4px rgb(15 23 42 / 6%), 0 24px 60px rgb(15 23 42 / 16%);
  --enlace: var(--acento-texto);
  --tinte: color-mix(in srgb, var(--acento) 9%, transparent);
  --radio: 16px;
  --ancho: 1160px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1120;
    --fondo-alterno: #0f172a;
    --papel: #111a2e;
    --tinta: #e6ecf5;
    --tenue: #a4b3c9;
    --linea: #22314d;
    --sombra: none;
    --sombra-fuerte: 0 24px 60px rgb(0 0 0 / 45%);
    --enlace: var(--acento-texto-oscuro);
    --tinte: color-mix(in srgb, var(--acento) 16%, transparent);
    color-scheme: dark;
  }
}

/* ── Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--enlace); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 12px; text-wrap: pretty; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: 3px;
  border-radius: 6px;
}

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.contenedor.angosto { width: min(820px, 100% - 32px); }

.icono { width: 24px; height: 24px; flex: none; }
.icono.chico { width: 18px; height: 18px; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--papel); color: var(--tinta);
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra-fuerte);
}
.saltar:focus { top: 12px; }

.aviso-previa {
  position: sticky; top: 0; z-index: 30; background: #9a3412; color: #fff;
  text-align: center; font-weight: 700; padding: 8px 16px;
}

/* ── Botones ──────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px; border-radius: 12px;
  background: var(--acento); color: var(--sobre-acento); border: 2px solid var(--acento);
  font-weight: 700; text-decoration: none; line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--acento) 30%, transparent); }
.boton.grande { min-height: 54px; padding: 14px 26px; font-size: 1.05rem; }
.boton.chico { min-height: 40px; padding: 8px 16px; }
.boton.ancho { width: 100%; }
.boton.secundario { background: transparent; color: var(--enlace); border-color: color-mix(in srgb, var(--enlace) 45%, transparent); }
.boton.secundario:hover { background: var(--tinte); box-shadow: none; }
.boton.claro { background: #fff; color: #0f172a; border-color: #fff; }
.boton.contorno { background: transparent; color: #fff; border-color: rgb(255 255 255 / 55%); }
.boton.contorno:hover { background: rgb(255 255 255 / 10%); box-shadow: none; }

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botones.centrados { justify-content: center; }

.enlace-accion { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.enlace-accion:hover { text-decoration: underline; }

/* ── Cabecera ─────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.aviso-previa + .cabecera { top: 40px; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--tinta); }
.marca-texto { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.marca .logo { max-height: 42px; width: auto; }

.menu-escritorio { display: none; align-items: center; gap: 4px; }
.menu-escritorio > a:not(.boton), .submenu > summary {
  padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 0.96rem; cursor: pointer;
}
.menu-escritorio > a:not(.boton):hover, .submenu > summary:hover { background: var(--tinte); }
.menu-escritorio .boton { margin-left: 8px; }

.submenu { position: relative; }
.submenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.submenu > summary::-webkit-details-marker { display: none; }
.submenu > summary::after {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease;
}
.submenu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.submenu-lista {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 250px; padding: 8px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-fuerte);
  display: flex; flex-direction: column;
}
.submenu-lista a { padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.submenu-lista a:hover { background: var(--tinte); }

.menu-movil > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--linea); border-radius: 12px; font-weight: 700;
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.hamburguesa::before, .hamburguesa::after { content: ''; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; }
.hamburguesa::after { top: 6px; }
.menu-movil nav {
  position: absolute; left: 16px; right: 16px; top: 72px; padding: 10px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-fuerte);
  display: flex; flex-direction: column;
}
.menu-movil nav a { padding: 13px 14px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.menu-movil nav a.sangria { padding-left: 28px; font-weight: 500; }
.menu-grupo { margin: 8px 14px 2px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); }

@media (min-width: 960px) {
  .menu-escritorio { display: flex; }
  .menu-movil { display: none; }
}

/* ── Portada ──────────────────────────────────────────────────────── */

.portada {
  padding: 56px 0 72px;
  background:
    radial-gradient(60% 60% at 85% 30%, var(--tinte), transparent 70%),
    var(--fondo);
  overflow: hidden;
}
.portada-fila { display: grid; gap: 48px; align-items: center; }
.portada.sin-imagen .portada-texto { max-width: 760px; margin-inline: auto; text-align: center; }
.portada.sin-imagen .botones, .portada.sin-imagen .destacados { justify-content: center; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 6px 14px; border-radius: 999px; background: var(--tinte); color: var(--enlace);
  font-weight: 700; font-size: 0.9rem;
}
.subtitulo { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--tenue); margin-top: 20px; max-width: 58ch; }
.destacados { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.destacados li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; }
.destacados .icono { color: var(--enlace); }

@media (min-width: 960px) {
  .portada { padding: 88px 0 104px; }
  .portada-fila { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .portada-imagen { margin-right: -48px; }
}

/* Una captura dentro de un marco de ventana. */
.ventana {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-fuerte); overflow: hidden;
}
.ventana-barra { display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--linea); background: var(--fondo-alterno); }
.ventana-barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--linea); }
.ventana-barra span:nth-child(1) { background: #f87171; }
.ventana-barra span:nth-child(2) { background: #fbbf24; }
.ventana-barra span:nth-child(3) { background: #34d399; }
.ventana img, .ventana video { display: block; width: 100%; height: auto; }

/* Los botones del video, sobre la esquina de abajo. Fondo oscuro translucido
   y texto blanco: se leen sobre cualquier cuadro del video, claro u oscuro. */
.video-marco { position: relative; }
.video-controles { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.video-controles[hidden] { display: none; }
.video-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(15 23 42 / 0.78); color: #fff;
  font: inherit; font-size: 0.9rem; font-weight: 700;
}
.video-boton:hover { background: rgb(15 23 42 / 0.92); }
.video-play, .video-con-sonido { display: none; }
.video-marco[data-pausado="si"] .video-pausa { display: none; }
.video-marco[data-pausado="si"] .video-play { display: inline; }
.video-marco[data-sonido="si"] .video-mudo { display: none; }
.video-marco[data-sonido="si"] .video-con-sonido { display: inline; }

/* ── Secciones ────────────────────────────────────────────────────── */

.seccion { padding: 72px 0; }
@media (min-width: 960px) { .seccion { padding: 96px 0; } }
.alterna { background: var(--fondo-alterno); }
section[id] { scroll-margin-top: 68px; }

.seccion-cabeza { max-width: 720px; margin-bottom: 48px; }
.seccion-cabeza.centrada { margin-inline: auto; text-align: center; }
.antetitulo { color: var(--enlace); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.entrada { font-size: 1.12rem; color: var(--tenue); margin-top: 16px; }
.letra-chica { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 0.9rem; margin-top: 18px; }

/* Funciones */
.rejilla-funciones { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.funcion {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.funcion:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); transform: translateY(-2px); }
.funcion-icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  background: var(--tinte); color: var(--enlace);
}
.funcion p { color: var(--tenue); margin: 8px 0 0; font-size: 0.98rem; }

/* Capturas: alternadas en escritorio, una debajo de otra en el celular. */
.capturas { display: flex; flex-direction: column; gap: 56px; margin-top: 88px; }
.captura { margin: 0; display: grid; gap: 20px; align-items: center; }
.captura figcaption { font-size: 1.15rem; font-weight: 600; color: var(--tinta); }
@media (min-width: 960px) {
  .captura { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; }
  .captura.invertida { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .captura.invertida .ventana { order: 2; }
  .captura figcaption { font-size: 1.3rem; }
}

/* Planes */
.rejilla-planes { display: grid; gap: 20px; align-items: stretch; }
.rejilla-planes.cantidad-1 { max-width: 460px; margin-inline: auto; }
@media (min-width: 760px) {
  .rejilla-planes.cantidad-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
  .rejilla-planes.cantidad-3, .rejilla-planes.cantidad-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; padding: 32px 28px; box-shadow: var(--sombra);
}
.plan.destacado { border: 2px solid var(--acento); }
.cinta {
  position: absolute; top: -14px; left: 28px; margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento); font-size: 0.8rem; font-weight: 800;
}
.precio { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 4px 0 6px; }
.precio.palabra { font-size: 1.9rem; }
.precio span { font-size: 1rem; font-weight: 500; color: var(--tenue); letter-spacing: 0; }
.incluye { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.incluye li, .requisitos li { display: flex; gap: 10px; align-items: flex-start; }
.incluye .icono, .requisitos .icono { color: var(--enlace); margin-top: 3px; }
.nota-centrada { text-align: center; color: var(--tenue); max-width: 640px; margin: 32px auto 0; }

/* Descarga */
.franja-descarga {
  display: grid; gap: 32px; padding: 40px 28px; border-radius: 24px;
  background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.franja-descarga h2 { margin-bottom: 16px; }
.franja-descarga p:not(.antetitulo) { color: var(--tenue); }
@media (min-width: 900px) { .franja-descarga { grid-template-columns: 1.4fr 1fr; padding: 56px; align-items: center; } }
.requisitos { background: var(--fondo-alterno); border-radius: var(--radio); padding: 24px; }
.requisitos h3 { margin-bottom: 14px; }
.requisitos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

/* Licencia: pasos numerados */
.pasos { list-style: none; padding: 0; margin: 0 0 32px; counter-reset: paso; display: flex; flex-direction: column; gap: 14px; }
.pasos li {
  counter-increment: paso; display: flex; gap: 16px; align-items: flex-start;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px;
}
.pasos li::before {
  content: counter(paso); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); font-weight: 800;
}
.pasos p { margin: 5px 0 0; }
.aviso {
  display: flex; gap: 16px; align-items: flex-start; scroll-margin-top: 90px;
  background: var(--tinte); border-radius: var(--radio); padding: 22px 24px;
}
.aviso-icono { color: var(--enlace); margin-top: 2px; }
.aviso h3 { margin-bottom: 8px; }

/* Casos */
.rejilla-casos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.caso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; }
.caso h3 { margin-bottom: 10px; }
.caso p { color: var(--tenue); }
.caso .resultado { display: flex; align-items: center; gap: 8px; color: var(--enlace); font-weight: 700; margin: 16px 0 0; }

/* Preguntas */
.preguntas { display: flex; flex-direction: column; gap: 10px; }
.pregunta { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; }
.pregunta summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 700; position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--enlace); transition: transform 0.15s ease;
}
.pregunta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.respuesta { padding: 0 22px 16px; color: var(--tenue); }

/* Contacto: la franja de color es el cierre de la pagina. El fondo se
   oscurece hacia el final para que el texto blanco se lea con cualquier
   color principal. */
.franja-contacto {
  text-align: center; padding: 56px 24px; border-radius: 28px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 80%, #0f172a), color-mix(in srgb, var(--acento) 45%, #0f172a));
  color: #fff;
}
.franja-contacto h2 { color: #fff; }
.franja-contacto .entrada { color: rgb(255 255 255 / 90%); max-width: 560px; margin-inline: auto; }
@media (min-width: 900px) { .franja-contacto { padding: 80px 48px; } }
.datos-contacto { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.datos-contacto li { display: inline-flex; align-items: center; gap: 8px; }
.redes { margin: 20px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.redes a { color: #fff; font-weight: 600; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 32px 0 96px; color: var(--tenue); font-size: 0.95rem; }
@media (min-width: 960px) { .pie { padding-bottom: 32px; } }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pie p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie a { color: var(--tenue); text-decoration: none; }
.pie a:hover { color: var(--tinta); text-decoration: underline; }
.pie strong { color: var(--tinta); }

/* Boton flotante de WhatsApp */
.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #15803d; color: #fff; box-shadow: 0 10px 28px rgb(0 0 0 / 25%);
  transition: transform 0.15s ease;
}
.flotante:hover { transform: scale(1.06); }
.flotante .icono { width: 28px; height: 28px; }

/* 404 */
.pagina-error { padding: 120px 0; text-align: center; }
.pagina-error h1 { margin-bottom: 16px; }
.pagina-error p { color: var(--tenue); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Variante: Magenta ordenado (landing-diseno) ─────────────────────
   Elegida el 2026-09-27. El color principal sigue viniendo del panel
   (--acento y --sobre-acento, medidos en color.js); lo de abajo lo quita
   de donde no se actua, para que el boton principal sea lo unico que
   destaca. Ver .claude/skills/landing-diseno/disenos/INDICE.md. */

/* Variante B · Magenta ordenado
   Se conserva el magenta de la marca, pero DEJA DE ESTAR EN TODAS PARTES: solo
   el boton principal y la cinta del plan recomendado. Todo lo demas en tinta y
   grises, asi el boton es lo unico que grita. Titulares mas grandes y pesados. */
:root {
  --acento-texto: #0f172a;    /* enlaces, antetitulos e iconos en tinta */
  --acento-texto-oscuro: #f5f7fb;
  --tinte: #f1f3f7;
  --radio: 14px;
  --sombra: none;
}
@media (prefers-color-scheme: dark) { :root { --tinte: #1a2438; } }
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -0.035em; }
h2 { letter-spacing: -0.03em; }
.portada { background: var(--fondo); }
.etiqueta { background: var(--tinte); color: var(--tinta); }
.antetitulo { color: var(--tenue); }
.funcion { box-shadow: none; }
.funcion:hover { border-color: var(--tinta); }
.funcion-icono { background: var(--tinte); color: var(--tinta); }
.incluye .icono, .requisitos .icono, .destacados .icono, .aviso-icono { color: var(--tinta); }
.boton.secundario { color: var(--tinta); border-color: var(--linea); }
.plan.destacado { border: 2px solid var(--tinta); }
.pasos li::before { background: var(--tinta); color: var(--fondo); }
.franja-contacto { background: #0f172a; }
.franja-contacto .boton.claro { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
/* En modo oscuro la franja tinta se perdia contra el fondo: un poco de
   magenta la separa sin bajar el contraste del texto blanco. */
@media (prefers-color-scheme: dark) {
  .franja-contacto { background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 22%, #0f172a), #0f172a); border: 1px solid var(--linea); }
}

/* Arreglos comunes: van con CUALQUIER variante (y con la actual).
   Salen de la revision del 2026-09-27: el contraste de la pagina ya estaba
   bien, lo que faltaba es tamano para el dedo. WCAG 2.5.5 pide 44 x 44 px, y
   en el celular es donde se toca: un enlace de 24 px de alto se pulsa mal. */

/* Enlaces del pie (24 px de alto) y el enlace de WhatsApp dentro del aviso
   (27 px): se agranda el area de toque sin cambiar como se ven. */
.pie a,
.aviso .enlace-accion,
.caso .enlace-accion {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* El logo de la cabecera (38 x 42) y los controles del video (42 de alto). */
.marca { min-height: 44px; min-width: 44px; }
.video-boton { min-height: 44px; min-width: 44px; }

/* El boton de la cabecera (40 de alto en computadora). */
.menu-escritorio .boton { min-height: 44px; }

/* El boton flotante de WhatsApp tapaba la ultima linea del texto en el
   celular: se deja aire al final de la pagina para que no quede nada debajo. */
@media (max-width: 700px) { .pie { padding-bottom: 88px; } }