/* Variante: Neobrutalismo pop (paleta original: verde lima). Se carga después de estilos.css. */
.boton, .chip, .producto, .cotizacion, .plano, .plano-lienzo, .formulario, .cifra, .sector, .testimonio, .campo input, .campo select, .campo textarea, .hero-precio, .foto-marco, .cta-banda, .aviso-ok, .aviso-error, .idioma, .cant, .radio-chip span, .contacto-datos, .redes, .vacio, .op-vacio, .cot-vacia, .condiciones-foto img, .linea-acento { border-radius: var(--r); }
.foto-marco, .contacto-datos, .cant, .idioma, .producto { overflow: hidden; }
.foto-marco img { border-radius: 0; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select, .campo textarea { border-radius: var(--r); }
.boton { border-radius: var(--rb, var(--r)); }
.idioma button, .cant button, .cant input { border-radius: 0; }

/* Neobrutalismo pop: bordes gruesos, sombra dura, esquinas redondeadas, color en bloques y etiquetas ladeadas. */
:root { --r: 16px; --rb: 999px; --papel: #eef6d4; --panel: #ffffff; --tinta: #111111; --suave: #3d4a22; --borde: 3px; --sombra: 7px 7px 0 var(--tinta); --sombra-chica: 4px 4px 0 var(--tinta); }
html[data-tema="oscuro"] { --papel: #131a0a; --panel: #1f2a10; --tinta: #f1f8dc; --suave: #bccb94; }
.hero h1 { font-weight: 900; }
.linea-acento { transform: rotate(-1.5deg); padding: 0.02em 0.22em 0.08em; }
.seccion:nth-of-type(even) { background: color-mix(in srgb, var(--acento) 22%, var(--papel)); }
.sector:nth-child(odd) { transform: rotate(-1deg); }
.sector:nth-child(even) { transform: rotate(1deg); }
.sector:hover { transform: rotate(0) translate(-2px, -2px); }
.cifra-acento, .sector-acento { background: var(--acento); color: var(--sobre-acento); }
.cta-banda { background: var(--acento); color: var(--sobre-acento); }
.producto:hover { transform: translate(-3px, -3px) rotate(-0.4deg); }
.chip[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.seccion-cabeza h2 { text-shadow: 3px 3px 0 color-mix(in srgb, var(--acento) 70%, transparent); }

/* El recuadro de la bolsa del plano no se sale de las esquinas redondeadas */
.plano-lienzo { overflow: hidden; }
.plano-bolsa { border-radius: 0 var(--r, 0px) 0 0; box-sizing: border-box; }
.hero-foto img { max-height: 300px; }

/* En celular el botón "Arriba" es más chico y queda pegado al borde, para tapar menos contenido */
@media (max-width: 720px) {
  .arriba.boton { min-height: 36px; padding: 0.25rem 0.6rem; font-size: 0.72rem; box-shadow: 2px 2px 0 var(--tinta); right: max(0.5rem, env(safe-area-inset-right)); }
  body.con-barra .arriba { bottom: calc(76px + 0.5rem); }
}


/* ===== Legal: páginas de privacidad y términos, aviso de cookies, casillas de consentimiento ===== */
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.enlace-boton { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.enlace-boton:hover { text-decoration-thickness: 3px; }

.campo-check .check { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; font-family: var(--fuente); font-weight: 500; font-size: 0.95rem; text-transform: none; line-height: 1.4; }
.campo-check input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--acento); cursor: pointer; }
.campo-check a { font-weight: 700; }
#cot-privacidad a { font-weight: 700; }

.legal { max-width: 52rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--pad) 4rem; }
.legal-cabeza { display: grid; gap: 0.75rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: var(--borde) solid var(--tinta); }
.legal-cabeza h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.legal-fecha, .legal-soloes { font-family: var(--mono); font-size: 0.85rem; color: var(--suave); }
.legal-seccion { margin-bottom: 2rem; }
.legal-seccion h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.75rem; }
.legal-seccion p, .legal-seccion li { max-width: 68ch; line-height: 1.6; }
.legal-seccion p + p, .legal-seccion ul + p, .legal-seccion p + ul { margin-top: 0.75rem; }
.legal-seccion ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.legal-seccion a { font-weight: 700; }
.legal-tabla { overflow-x: auto; margin-bottom: 0.75rem; border: var(--borde) solid var(--tinta); border-radius: var(--r, 0); background: var(--panel); }
.legal-tabla table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.legal-tabla th, .legal-tabla td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 25%, transparent); }
.legal-tabla th { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; }
.legal-tabla tr:last-child td { border-bottom: 0; }
.pendiente { background: #ffe14d; color: #111; padding: 0 0.3em; font-weight: 800; }

.cookies {
  position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  width: min(30rem, calc(100vw - 2rem)); display: grid; gap: 0.6rem; padding: 1rem 1.1rem;
  background: var(--panel); color: var(--tinta); border: var(--borde) solid var(--tinta); border-radius: var(--r, 0); box-shadow: var(--sombra);
}
.cookies[hidden] { display: none !important; }
.cookies-titulo { font-weight: 900; font-size: 1.15rem; letter-spacing: -0.02em; }
.cookies-texto { font-size: 0.92rem; line-height: 1.45; }
.cookies-mas { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; }
.cookies-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookies-acciones .boton { flex: 1 1 8rem; }
@media (max-width: 720px) {
  .cookies { bottom: calc(76px + 0.5rem); left: 0.5rem; width: calc(100vw - 1rem); }
}
html[lang="es"] .legal-soloes { display: none; }


/* ===== Botón flotante de WhatsApp (abajo a la derecha); "Arriba" queda justo encima ===== */
.wa-flotante { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 27; min-height: 52px; padding: 0.6rem 1.2rem; }
.arriba { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.2rem); }
body.con-barra .wa-flotante { bottom: calc(76px + 0.6rem); }
body.con-barra .arriba { bottom: calc(76px + 0.6rem + 4.2rem); }
@media (max-width: 720px) {
  .wa-flotante { right: max(0.5rem, env(safe-area-inset-right)); min-height: 46px; padding: 0.45rem 0.9rem; font-size: 0.82rem; }
  .arriba.boton, body.con-barra .arriba { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem); }
  body.con-barra .arriba { bottom: calc(76px + 0.6rem + 3.6rem); }
}


/* ===== Anti-spam, 404 ===== */
.trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pagina-404 { text-align: left; }
.cuatrocientos { font-size: clamp(6rem, 22vw, 14rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; color: var(--acento); text-shadow: 6px 6px 0 var(--tinta); }
.pagina-404 h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin: 1rem 0; }
.acciones-404 { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }