/* Tema claro, blanco y azul (pedido y elección del dueño, 2026-10-21: "más serio, como Vmake"). Todos los colores
   salen de estos tokens. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --fondo: #ffffff;
  --superficie: #f5f6f8;      /* bandas, campos, botones de modo */
  --panel: #ffffff;           /* tarjetas */
  --borde: #e4e7ec;
  --borde-fuerte: #cfd4dc;
  --texto: #101828;
  --suave: #5b6475;
  --acento: #2b59ff;          /* botón principal y enlaces */
  --acento-hover: #1d47e6;
  --acento-suave: #eef2ff;
  --tinta: #101828;           /* barra del pie y botón oscuro */
  --ok: #128a4a;
  --ok-suave: #e8f6ee;
  --aviso: #9a6200;
  --aviso-suave: #fff6e0;
  --peligro: #d92d20;
  --peligro-suave: #fdecea;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --sombra-alta: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .08);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); line-height: 1.55; font-size: 16px; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--texto); }
.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Barra */
header.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borde); }
header.barra .contenedor { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { font-weight: 800; font-size: 21px; color: var(--texto); letter-spacing: -.6px; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--acento); }
nav.menu { display: flex; gap: 22px; flex: 1; }
nav.menu a { color: var(--suave); font-size: 15px; font-weight: 500; }
nav.menu a:hover, nav.menu a.activo { color: var(--texto); text-decoration: none; }
.idiomas { display: flex; gap: 2px; background: var(--superficie); border-radius: 8px; padding: 2px; }
.idiomas button { background: none; border: 0; color: var(--suave); border-radius: 6px; padding: 3px 8px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.idiomas button.activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra); }
#sesion { font-size: 14px; font-weight: 500; }
#sesion a { color: var(--texto); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--acento); color: #fff;
  border: 1px solid transparent; border-radius: 10px; padding: 12px 22px; font: inherit; font-weight: 600; font-size: 16px;
  cursor: pointer; transition: background .15s, box-shadow .15s; box-shadow: var(--sombra); }
.boton:hover { background: var(--acento-hover); text-decoration: none; }
.boton.secundario { background: var(--panel); border-color: var(--borde-fuerte); color: var(--texto); }
.boton.secundario:hover { background: var(--superficie); }
.boton.oscuro { background: var(--tinta); }
.boton.chico { padding: 7px 14px; font-size: 14px; border-radius: 8px; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Portada */
.heroe { padding-top: 72px; padding-bottom: 28px; text-align: center; }
.heroe .pildora { display: inline-block; background: var(--acento-suave); color: var(--acento); font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.heroe h1 { font-size: clamp(34px, 5.6vw, 60px); line-height: 1.05; margin: 0 auto 18px; letter-spacing: -2px; font-weight: 800;
  max-width: 860px; }
.heroe p.sub { color: var(--suave); font-size: 19px; max-width: 680px; margin: 0 auto 30px; }
.heroe .acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.heroe .nota { color: var(--suave); font-size: 14px; margin-top: 14px; }
/* Antes / después con un deslizador (index.html) */
.comparador { position: relative; max-width: 960px; margin: 40px auto 0; border-radius: 18px; overflow: hidden;
  box-shadow: var(--sombra-alta); border: 1px solid var(--borde); aspect-ratio: 16 / 9; background: #0b0b0c; user-select: none; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.comparador .encima { clip-path: inset(0 calc(100% - var(--corte, 50%)) 0 0); }
.comparador .linea-corte { position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px; background: #fff;
  transform: translateX(-1px); pointer-events: none; }
.comparador .agarre { position: absolute; top: 50%; left: var(--corte, 50%); width: 44px; height: 44px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); box-shadow: var(--sombra-alta); display: grid; place-items: center;
  pointer-events: none; color: var(--texto); font-weight: 700; }
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparador .chip { position: absolute; top: 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.comparador .chip.antes { left: 14px; }
.comparador .chip.despues { right: 14px; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.tarjeta h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 15px; }
.icono { width: 42px; height: 42px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); display: grid;
  place-items: center; margin-bottom: 14px; }
.icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
section { padding: 72px 0; }
section.banda { background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
section h2 { font-size: clamp(26px, 3.4vw, 36px); text-align: center; margin: 0 0 10px; letter-spacing: -1px; font-weight: 800; }
section p.centro { text-align: center; color: var(--suave); max-width: 660px; margin: 0 auto 36px; font-size: 17px; }
section h3.centro { font-size: 24px; text-align: center; margin: 56px 0 8px; letter-spacing: -.5px; }
.rotulo-seccion { display: block; text-align: center; color: var(--acento); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }

/* Precios */
.paquete { text-align: center; position: relative; padding: 28px 22px; }
.paquete .minutos { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; }
.paquete .precio { font-size: 26px; font-weight: 700; margin: 10px 0 2px; }
.paquete .por { color: var(--suave); font-size: 14px; margin-bottom: 18px; }
.paquete .boton { width: 100%; }
.paquete.popular { border: 2px solid var(--acento); box-shadow: var(--sombra-alta); }
.paquete .etiqueta { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--acento);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.aviso-prueba { text-align: center; color: var(--aviso); font-size: 14px; margin-top: 22px; }
/* Preguntas frecuentes */
.preguntas { max-width: 760px; margin: 28px auto 0; display: grid; gap: 10px; }
.preguntas details { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 18px; }
.preguntas summary { cursor: pointer; font-weight: 600; }
.preguntas p { margin: 8px 0 0; color: var(--suave); }

/* Páginas de texto */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 20px; }
.legal h1 { font-size: 36px; letter-spacing: -1px; margin: 0 0 12px; }
.legal p, .legal li { color: var(--texto); }
form.reclamo { display: grid; gap: 14px; margin-top: 24px; }
form.reclamo label { display: grid; gap: 6px; color: var(--suave); font-size: 14px; font-weight: 500; }
input, select, textarea { background: var(--panel); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 10px;
  padding: 11px 13px; font: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
textarea { min-height: 140px; resize: vertical; }
.gracias { background: var(--ok-suave); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--texto);
  border-radius: 10px; padding: 14px 16px; }
.aviso { background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent); color: var(--texto);
  border-radius: 10px; padding: 12px 16px; }
.lista-videos { display: grid; gap: 12px; margin-top: 24px; }
.fila-video { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.fila-video h3 { overflow-wrap: anywhere; }
.acciones-video { display: flex; align-items: center; gap: 12px; }
.acciones-video .ayuda { margin: 0; }

footer { background: var(--superficie); border-top: 1px solid var(--borde); color: var(--suave); font-size: 14px; padding: 32px 0;
  margin-top: 0; }
footer .contenedor { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--suave); }
footer a:hover { color: var(--texto); }

/* Editor */
.editor { padding-top: 28px; padding-bottom: 48px; min-height: 70vh; }
.subida { display: block; border: 2px dashed var(--borde-fuerte); border-radius: 18px; padding: 72px 20px; text-align: center;
  cursor: pointer; background: var(--superficie); transition: border-color .15s, background .15s; }
.subida:hover { border-color: var(--acento); }
.subida.encima { border-color: var(--acento); background: var(--acento-suave); }
.subida h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.5px; }
.subida p { color: var(--suave); margin: 0 0 20px; }
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.herramientas .espacio { flex: 1; }
.modos { display: flex; background: var(--superficie); border-radius: 10px; padding: 3px; gap: 2px; }
.modos button { background: none; border: 0; color: var(--suave); padding: 6px 12px; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 500; border-radius: 8px; }
.modos button.activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra); }
.vistas { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vistas.comparar { grid-template-columns: 1fr 1fr; }
.vista { position: relative; background: #0b0b0c; border-radius: 12px; overflow: hidden; }
.vista video { display: block; width: 100%; max-height: 60vh; }
.vista canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.vista .rotulo { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .6); color: #fff; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; pointer-events: none; }
.reproductor { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.reproductor { flex-wrap: wrap; }
.reproductor .espacio { flex: 1; }
.reproductor .bordes { display: flex; gap: 6px; }
.reproductor .tiempo { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 13px; }
/* Sin borde propio (el alto lo fija tarjeta.js y el borde lo descuadraba): el marco lo pone una sombra. */
canvas.linea { width: 100%; height: 70px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde);
  border-radius: 10px; display: block; cursor: pointer; touch-action: none; user-select: none; }
.ayuda { color: var(--suave); font-size: 14px; margin: 8px 0; }
.avance { height: 6px; background: var(--superficie); border-radius: 6px; overflow: hidden; margin: 12px 0 6px; }
.avance div { height: 100%; width: 0; background: var(--acento); transition: width .3s; }
.estado { color: var(--suave); font-size: 14px; min-height: 22px; }
.minutos-cuenta { color: var(--suave); font-size: 14px; }

/* Mesa de trabajo del editor: subir varios videos, una tarjeta por video (js/editor.js y js/tarjeta.js). */
.mesa-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.mesa-cabecera .espacio { flex: 1; }
main.soltando .mesa-cabecera { outline: 2px dashed var(--acento); outline-offset: 6px; border-radius: 10px; }
#subir.apagado { opacity: .45; pointer-events: none; }
.saldo { text-align: right; color: var(--suave); font-size: 14px; line-height: 1.35; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 8px 14px; }
.saldo strong { color: var(--texto); font-size: 20px; font-weight: 800; }
.aviso-mesa { background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.aviso-mesa.gracias { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.mesa { display: grid; gap: 18px; }
.mesa-titulo { color: var(--suave); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin: 36px 0 12px; }
.tarjeta-video { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 16px; padding: 18px; box-shadow: var(--sombra); }
.tarjeta-video .vista video { max-height: 52vh; }
.tv-linea .ayuda { margin: 6px 0 0; }
.tv-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tv-panel .ayuda, .tv-panel .estado, .tv-panel .avance { margin: 0; }
.tv-panel .estado { min-height: 0; }
.tv-panel .estado:empty { display: none; }
.tv-nombre { display: flex; align-items: center; gap: 8px; }
.tv-nombre strong { flex: 1; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.tv-acciones .eliminar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--peligro);
  border-color: color-mix(in srgb, var(--peligro) 30%, transparent); box-shadow: none; }
.tv-acciones .eliminar:hover { background: var(--peligro-suave); }
.tv-acciones .eliminar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tv-acciones .eliminar.confirmar { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.insignia { font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-suave); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.tv-herramientas { display: flex; flex-direction: column; gap: 12px; }
.tv-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tv-modos button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; color: var(--suave); font: inherit;
  font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s; }
.tv-modos button:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.tv-modos button.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.tv-modos svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tv-panel .modos { align-self: flex-start; }
.tv-costo { margin: 0; font-size: 15px; font-weight: 600; }
.boton.ancho { width: 100%; text-align: center; }
.tv-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tarjeta-video.cargando .tv-herramientas, .tarjeta-video.fallida .tv-herramientas,
.tarjeta-video.borrando .tv-herramientas { opacity: .45; pointer-events: none; }
.tarjeta-video.fallida .tv-zona-video { opacity: .35; }
/* Mientras se borra: la rueda sobre el video y nada se puede editar (ni recuadros ni línea de tiempo). */
.trabajando { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: rgba(11, 11, 12, .55); color: #fff; text-align: center; padding: 16px; }
.tarjeta-video.borrando .trabajando { display: flex; }
.trabajando strong { font-size: 16px; font-weight: 600; }
.trabajando span:last-child { font-size: 13px; opacity: .85; max-width: 340px; }
.rueda { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rueda { animation-duration: 3s; } }
.tarjeta-video.borrando .lienzo, .tarjeta-video.borrando canvas.linea, .tarjeta-video.borrando .bordes { pointer-events: none; }
.tarjeta-video.borrando canvas.linea, .tarjeta-video.borrando .bordes { opacity: .45; }
.tv-recuadros { display: flex; flex-wrap: wrap; gap: 8px; }
.cuenta-recuadros { color: var(--suave); font-weight: 500; }
/* Mientras carga la mesa guardada (al volver al editor). */
.cargando-mesa { display: flex; align-items: center; gap: 12px; color: var(--suave); padding: 40px 0; justify-content: center; }
.cargando-mesa .rueda { width: 26px; height: 26px; border-width: 3px; border-color: var(--borde); border-top-color: var(--acento); }
/* Cerrada (ya descargada): una fila con el estado y Descargar. */
.tarjeta-video.cerrada { grid-template-columns: 1fr; padding: 14px 18px; box-shadow: none; }
.tarjeta-video.cerrada .tv-zona-video, .tarjeta-video.cerrada .tv-herramientas { display: none; }
.tarjeta-video.cerrada .tv-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
.tarjeta-video.cerrada .tv-acciones { grid-column: 2; grid-row: 1 / span 4; }
.tarjeta-video.cerrada .boton.ancho { width: auto; padding: 8px 18px; }
.oculto { display: none !important; }

/* Guías */
.guia h2 { text-align: left; font-size: 24px; margin: 34px 0 10px; }
.guia h3 { margin: 18px 0 4px; font-size: 17px; }
.comparar-guia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.comparar-guia figure { margin: 0; }
.comparar-guia img { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid var(--borde); }
.comparar-guia figcaption { color: var(--suave); font-size: 13px; text-align: center; margin-top: 4px; }
.pasos li { margin-bottom: 8px; }
.centro-guia { text-align: center; margin: 26px 0; }

@media (max-width: 720px) {
  .contenedor { padding: 0 16px; }
  .comparar-guia { grid-template-columns: 1fr; }
  nav.menu { display: none; }
  /* Con sesión no caben el correo, "Mis videos" y "Salir": el correo se esconde. */
  header.barra .contenedor { gap: 10px; }
  #sesion { white-space: nowrap; }
  #sesion .ayuda { display: none; }
  header.barra .contenedor:has(#salir) > .boton.chico { display: none; }
  .tarjeta-video { grid-template-columns: 1fr; padding: 12px; }
  .tarjeta-video.cerrada .tv-panel { grid-template-columns: 1fr; }
  .tarjeta-video.cerrada .tv-acciones { grid-column: 1; grid-row: auto; }
  .saldo { text-align: left; }
  .vistas.comparar { grid-template-columns: 1fr; }
  .heroe { padding-top: 44px; padding-bottom: 20px; }
  .heroe h1 { letter-spacing: -1.2px; }
  section { padding: 52px 0; }
  .comparador { margin-top: 28px; border-radius: 12px; }
}