/* LANDING · lo que producción tiene y la demo del diseñador no (02/10/2026).
   Armado con los tokens y las piezas de marca.css, según el "Diseño propuesto para lo que falta" de
   nuevo-frontend/cobertura-demo.md (sección Home). El celular llega hasta 719 px, como en la landing anterior.
   marca.css y landing.css son copias del diseñador y no se tocan: todo lo propio va acá. */

/* ---------- textos y bloques distintos en escritorio y celular ---------- */
.solo-celular { display: none; }
@media (max-width: 719px) {
  .solo-escritorio { display: none; }
  .solo-celular { display: inline; }
}

/* ---------- los saltos a una sección no quedan tapados por la barra fija (68 px) ---------- */
html { scroll-padding-top: 80px; }
/* en el celular, lo que recibe el foco tampoco queda bajo la barra inferior */
@media (max-width: 719px) { html { scroll-padding-bottom: 88px; } }

/* ---------- si el JS no corre, el contenido se ve igual (el aparecer depende de JS) ---------- */
html:not(.js) .revela { opacity: 1; transform: none; }

/* ---------- franja "En simple" (solo celular), debajo de los botones del hero ---------- */
.en-simple { display: none; }
@media (max-width: 719px) {
  .en-simple { display: grid; gap: 10px; margin-top: 28px; }
  .en-simple ol {
    list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); box-shadow: var(--s-1);
  }
  .en-simple li {
    display: grid; gap: 6px; align-content: start; padding: 12px 10px;
    font-size: var(--t-13); font-weight: 600; line-height: 1.3; color: var(--tinta-900);
  }
  .en-simple li + li { border-left: 1px solid var(--borde); }
  .en-simple li .mono { font-size: 11px; font-weight: 600; color: var(--acento-600); }
  .en-simple.visible li { animation: aparece var(--d-lenta) var(--ease-salida) both; }
  .en-simple.visible li:nth-child(2) { animation-delay: 90ms; }
  .en-simple.visible li:nth-child(3) { animation-delay: 180ms; }
}

/* ---------- ejemplos: logos reales dentro de las tarjetas .signo ---------- */
.ejemplo .signo.con-imagen { background: var(--superficie); padding: 6px 10px; }
.ejemplo .signo.con-imagen img, .ejemplo .signo.con-imagen svg { width: auto; height: auto; max-width: 100%; max-height: 48px; margin: 0; }

/* ---------- carrusel automático: la barra de 2 px de la tarjeta activa marca el tiempo hasta el cambio ---------- */
.ejemplo { position: relative; overflow: hidden; }
.ejemplo .tiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.ejemplo.activa .tiempo::after {
  content: ""; display: block; width: 0; height: 100%; background: var(--acento-500);
  animation: llenar var(--dur, 4000ms) linear forwards;
}

/* ---------- precios: el control de público es una lista de pestañas; se ve como el control segmentado ---------- */
.segmentado [role="tab"][aria-selected="true"] { color: var(--tinta-900); }
.cierre-estudios { margin-top: 24px; text-align: center; }
.cierre-estudios a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-14); color: var(--acento-600); }
.cierre-estudios a svg { width: 16px; height: 16px; transition: transform var(--d-rapida) var(--ease-salida); }
.cierre-estudios a:hover svg { transform: translateX(2px); }

/* ---------- preguntas: se abre una y se cierran las demás; la altura se anima donde el navegador lo permite ---------- */
.acordeon { interpolate-size: allow-keywords; }
.acordeon details::details-content {
  height: 0; overflow: clip;
  transition: height var(--d-media) var(--ease-salida), content-visibility var(--d-media) allow-discrete;
}
.acordeon details[open]::details-content { height: auto; }

/* ---------- formulario de consulta ---------- */
.contacto form .nota-error {
  grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--alto-100); color: var(--alto-texto); font-size: var(--t-13);
}
.contacto form .nota-error[hidden] { display: none; }
.check.error input { accent-color: var(--alto); }
.check.error .texto-2 { color: var(--alto-texto); }
/* cada campo obligatorio tiene su propio mensaje, visible mientras siga inválido */
.error-campo { display: none; font-size: var(--t-12); color: var(--alto-texto); }
.entrada.error + .error-campo { display: block; }
.error-permiso { display: none; grid-column: 1 / -1; margin-top: -12px; font-size: var(--t-12); color: var(--alto-texto); }
.check.error + .error-permiso { display: block; }
/* en el celular el formulario pide solo nombre, teléfono y permiso, como antes */
@media (max-width: 719px) { .contacto form .opcional { display: none; } }

/* ---------- barra inferior fija en el celular (aparece cuando el hero sale de pantalla) ---------- */
.barra-movil { display: none; }
@media (max-width: 719px) {
  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: .8fr 1fr; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--borde); box-shadow: 0 -6px 24px rgba(14, 42, 71, .06);
    transform: translateY(110%); pointer-events: none;
    transition: transform var(--d-media) var(--ease-salida);
  }
  .barra-movil.visible { transform: none; pointer-events: auto; }
  .barra-movil .btn { --alto-btn: 44px; padding: 0 12px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .avisos { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .barra-movil { transition: none; } }

/* ---------- WhatsApp flotante: en el celular sube para no tapar la barra inferior ---------- */
@media (max-width: 719px) { .flotante { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- pie: links legales reales e "Información oficial del INPI" ---------- */
.pie .legal { align-items: center; }
.pie .legal .lineas { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pie .legal a { color: var(--texto-2); }
.pie .legal a:hover { color: var(--tinta-900); }
.pie .legal .externo { display: inline-flex; align-items: center; gap: 5px; }
.pie .legal .externo svg { width: 13px; height: 13px; }

/* ---------- estudios: "Operación del estudio" antes de las seis tareas del día a día ---------- */
.operacion { margin-top: 56px; max-width: 720px; }
.operacion .rotulo { display: block; margin-bottom: 8px; }
.operacion p { color: var(--texto-2); }

/* ---------- hero: la animación de producción (video.html) dentro del marco del tablero (Marco, 02/10/2026).
   video.html escala sola a cualquier cuadro 16:9 y su fondo es #071A2D ---------- */
.tablero-video { background: #071A2D; }
.tablero-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #071A2D; }

/* Barra superior en celulares muy angostos (≤360 px): entra en 320 sin desplazamiento lateral. Pedido del diseñador
   (04/10/2026): logo a 16 px, "Ingresar" oculto (está en el menú), botón primario compacto y menos separación */
@media (max-width: 360px) {
  .barra .contenedor { gap: 8px; }
  .barra .acciones { gap: 8px; }
  .barra .logo b { font-size: 16px; }
  .barra .acciones a.btn-secundario { display: none; }
  .barra .acciones .btn-primario { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  /* "En simple": los 3 pasos entran en 320 (antes la columna del héroe quedaba en 326 px y desbordaba) */
  .en-simple ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .en-simple li { padding: 10px 8px; font-size: 12px; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  /* los controles de la sección de precios ("Marcas individuales / Estudios…" y "Mensual / Anual…") entran en 320:
     ocupan el ancho y sus textos pueden partir renglón */
  #selPublico, #selPeriodo { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
  #selPublico button, #selPeriodo button { white-space: normal; height: auto; min-height: 34px; padding: 6px 8px; line-height: 1.25; }
}

/* Barra: donde el logo completo y el botón no entran juntos (se tapaban), queda solo el ícono; el link conserva
   su nombre accesible ("MarcaCheck, inicio") */
@media (max-width: 359px) { .barra .logo b { display: none; } }