/*
 * lienzocomposer.com · detalles de marca que no son ajustes de un elemento:
 * fondo Papel, etiquetas, chips, tablas oscuras, línea de tiempo y medios.
 * Todo lo demás (colores, fuentes, botones, espaciados) está en los globales
 * y en los elementos de Lienzo. Se activa con clases lc-* en «Clases CSS».
 */
body { background: #fbf8f3; }
:focus-visible { outline: 2px solid #c2410c; outline-offset: 2px; }

/* Etiqueta sobre el título de cada sección. */
.lc-eyebrow { letter-spacing: .12em; text-transform: uppercase; }
.lc-tag { letter-spacing: .02em; }

/* Chips: «Premium» (Caramelo sobre crema) e «Incluido en Básico». */
.lc-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: #fff4de; color: #8a5a00; }
.lc-chip.is-free { background: #e6f4ec; color: #15803d; }
.lc-chip.is-mango { background: #f5a524; color: #1c1917; }

/* Botones: el de la cabecera, compacto; los de tarjetas, a todo lo ancho. */
.lc-btn-sm { padding: 10px 18px !important; font-size: 15px !important; white-space: nowrap; }
.lc-btn-block { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; }

/* Formulario en una línea (correo + botón): la etiqueta queda solo para lectores de pantalla. */
.lc-inline-form .lnz-form-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.lc-inline-form .lnz-field:not(.lnz-field--submit) { flex: 1 1 220px; margin: 0; }
.lc-inline-form .lnz-field--submit { flex: 0 0 auto; margin: 0; }
.lc-inline-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tarjeta: superficie blanca, borde Arena. */
.lc-card { background: #fff; border: 1px solid #e7e2da; border-radius: 16px; }
.lc-card-dark { background: #221e1a; border: 1px solid #3b3530; border-radius: 16px; }
.lc-shadow { box-shadow: 0 24px 60px rgba(28, 25, 23, .14); }
.lc-shot img, .lc-shot video { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #e7e2da; background: #fff; }
.lc-card .lc-shot img, .lc-card .lc-shot video { border: 0; border-bottom: 1px solid #e7e2da; border-radius: 15px 15px 0 0; }

/* Botón grande de descarga y textos que no se parten. */
.lc-download .lnzh-btn { min-height: 54px; width: 100%; justify-content: center; font-size: 17px; box-sizing: border-box; }
.lc-nowrap { white-space: nowrap; }

/* Tablas comparativas. */
.lc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lc-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid #e7e2da; background: #fff; }
.lc-table-wrap .lc-table { min-width: 680px; }
.lc-table th, .lc-table td { text-align: left; padding: 13px 18px; border-top: 1px solid #e7e2da; vertical-align: top; }
.lc-table thead th { border-top: 0; font-size: 13px; font-weight: 600; color: #57534e; }
.lc-table thead th.is-brand { color: #c2410c; }
.lc-table td.c, .lc-table th.c { text-align: center; }
.lc-table .yes { color: #15803d; font-weight: 700; }
.lc-table .no { color: #a8a29e; }
.lc-dark .lc-table-wrap { background: #1c1815; border-color: #3b3530; }
.lc-dark .lc-table th, .lc-dark .lc-table td { border-color: #3b3530; color: #f5f0e8; }
.lc-dark .lc-table thead th { color: #a8a29e; }
.lc-dark .lc-table thead th.is-brand { color: #f5a524; }
.lc-dark .lc-table td:nth-child(2) { color: #a8a29e; }
.lc-dark .lc-table td:first-child { font-weight: 600; }
.lc-card-dark .lc-table-wrap .lc-table { min-width: 0; }

/* Listas con palomita. */
.lc-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-check li { position: relative; padding-left: 26px; }
.lc-check li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 6px; border-left: 2px solid #15803d; border-bottom: 2px solid #15803d; transform: rotate(-45deg); }
.lc-dark .lc-check li::before, .lc-check.is-mango li::before { border-color: #f5a524; }
.lc-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lc-dots li { position: relative; padding-left: 20px; }
.lc-dots li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #f5a524; }

/* Precio con conmutador USD / MXN (sin JavaScript: :has). */
.lc-currency { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #e7e2da; gap: 2px; }
.lc-currency input { position: absolute; opacity: 0; pointer-events: none; }
.lc-currency label { padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; color: #1c1917; }
.lc-currency input:checked + label { background: #1c1917; color: #fff; }
.lc-currency input:focus-visible + label { outline: 2px solid #c2410c; outline-offset: 2px; }
.lc-mxn { display: none !important; }
body:has(#lc-cur-mxn:checked) .lc-mxn { display: revert !important; }
body:has(#lc-cur-mxn:checked) .lc-usd { display: none !important; }
.lc-old { text-decoration: line-through; color: #a8a29e; font-weight: 500; }

/* Línea de tiempo de versiones. */
.lc-dark .lnzh-muted { color: #a8a29e; }

/* Videos: póster con la insignia hasta que se reproducen. */
.lnzh-video { position: relative; }
.lnzh-video video { aspect-ratio: 16 / 10; object-fit: cover; }

/* Textos legales. */
.lc-legal h2 { font-size: 26px; line-height: 1.2; margin: 1.6em 0 .5em; }
.lc-legal ul, .lc-legal ol { padding-left: 1.3em; }
.lc-legal li { margin: .3em 0; }

@media (max-width: 767px) {
	.lc-table th, .lc-table td { padding: 11px 14px; font-size: 14px; }
}

/* Pie: columnas apiladas en móvil con aire entre ellas. */
@media (max-width: 767px) {
	.lc-footer-cols { row-gap: 32px !important; }
}
