/*
Theme Name: GRUPOMASPC
Description: Tema propio de grupomaspc.com (2026). Estilo editorial, ligero, sin Elementor.
Author: GRUPOMASPC S.L.
Version: 2.0.0
Text Domain: grupomaspc
*/

@font-face { font-family: 'Space Grotesk'; src: url('assets/space-grotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --papel: #f3f2ed;
  --papel-2: #e9e7df;
  --blanco: #ffffff;
  --tinta: #0d0d0d;
  --texto: #2f2f2c;
  --gris: #6b6a64;
  --linea: #dcdad1;
  --azul: #2b50ff;
  --azul-osc: #1d3be0;
  --rojo: #ff4d3d;
  --verde: #33b24a;
  --amarillo: #ffc21a;
  --violeta: #7b5cff;
  --radio: 28px;
  --ancho: 1240px;
  --titulos: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--papel); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); color: var(--tinta); line-height: 1.02; margin: 0 0 .45em; letter-spacing: -.035em; font-weight: 600; }
h1 { font-size: clamp(2.7rem, 7.2vw, 6.2rem); letter-spacing: -.05em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 1em; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 28px; position: relative; }
.estrecho { max-width: 860px; }
.centrado { text-align: center; }
.gris { color: var(--gris); }
.nw { white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.saltar:focus { left: 8px; }

/* Botones en píldora */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.35em; border-radius: 999px; font-weight: 600; font-size: .96rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; line-height: 1.2; font-family: inherit; white-space: nowrap; transition: transform .15s, background .2s, border-color .2s, color .2s; }
.boton:hover { transform: translateY(-2px); }
.boton .ico { transition: transform .2s; }
.boton:hover .ico { transform: translateX(3px); }
.boton-grande { padding: 1.05em 1.7em; font-size: 1.02rem; }
.boton-primario { background: var(--tinta); color: #fff; }
.boton-primario:hover { background: var(--azul); }
.boton-borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton-borde:hover { background: var(--tinta); color: #fff; }
.boton-blanco { background: #fff; color: var(--tinta); }
.boton-blanco:hover { background: var(--amarillo); }
.boton-borde-claro { color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; }
.boton-borde-claro:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Barra superior y cabecera flotante */
.barra-superior { background: var(--tinta); color: rgba(255, 255, 255, .7); font-size: .8rem; }
.barra-fila { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.barra-superior span { display: inline-flex; align-items: center; gap: 6px; }
.barra-superior a { color: rgba(255, 255, 255, .85); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.barra-superior .ico { width: 1em; height: 1em; }
.soporte-barra { color: var(--tinta) !important; font-weight: 700; background: var(--amarillo); padding: 2px 11px; border-radius: 999px; }
.cabecera { position: sticky; top: 12px; z-index: 50; margin-top: 12px; padding-inline: 28px; }
.cabecera-fila { display: flex; align-items: center; gap: 20px; height: 66px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border: 1px solid var(--linea); border-radius: 999px; padding: 0 10px 0 22px; max-width: calc(var(--ancho) - 56px); margin: 0 auto; transition: box-shadow .2s; }
.cabecera.con-fondo .cabecera-fila { box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .35); }
.marca { flex: none; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.marca img { width: 40px; height: auto; }
.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a, .menu-desplegable > a { color: var(--texto); text-decoration: none; font-weight: 550; font-size: .94rem; padding: 9px 13px; border-radius: 999px; display: block; white-space: nowrap; }
.menu > a:hover, .menu-desplegable > a:hover, .menu a[aria-current] { color: var(--tinta); background: var(--papel); }
.menu-desplegable { position: relative; }
.submenu { position: absolute; top: calc(100% + 8px); left: -8px; min-width: 290px; padding: 8px; background: #fff; border: 1px solid var(--linea); border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .3); display: none; }
.menu-desplegable:hover .submenu, .menu-desplegable:focus-within .submenu { display: grid; }
.menu-desplegable::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.submenu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; color: var(--tinta); text-decoration: none; font-weight: 550; font-size: .94rem; }
.submenu a:hover { background: var(--papel); }
.cabecera-acciones { display: flex; align-items: center; gap: 6px; }
.cabecera-acciones .boton { padding: .72em 1.2em; }
.boton-menu { display: none; background: none; border: 0; color: var(--tinta); padding: 8px; cursor: pointer; }
.boton-menu .ico { width: 26px; height: 26px; }

/* Cubitos del logo */
.cubitos { display: inline-grid; grid-template-columns: 7px 7px; gap: 2px; vertical-align: middle; }
.cubitos i { width: 7px; height: 7px; border-radius: 2px; }
.cubitos i:nth-child(1) { background: var(--rojo); } .cubitos i:nth-child(2) { background: var(--verde); } .cubitos i:nth-child(3) { background: var(--azul); } .cubitos i:nth-child(4) { background: var(--amarillo); }

/* Portada */
.portada { padding: 70px 0 40px; }
.antetitulo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; font-size: .82rem; letter-spacing: .02em; color: var(--gris); margin-bottom: 18px; text-transform: none; }
.portada .antetitulo { background: #fff; border: 1px solid var(--linea); padding: 7px 14px; border-radius: 999px; color: var(--texto); }
.portada h1 { max-width: 13.5ch; margin-bottom: .35em; }
h1 em, h2 em { font-style: normal; color: var(--azul); }
.portada-pie { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
.portada-pie .botones { justify-content: flex-end; margin: 0 0 6px; }
.entradilla { font-size: 1.2rem; line-height: 1.55; max-width: 34em; margin: 0; }

.bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; margin-top: 56px; }
.pieza { border-radius: var(--radio); padding: 26px; background: #fff; border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto); min-height: 170px; }
.pieza b { font-family: var(--titulos); color: var(--tinta); font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; }
.pieza span { font-size: .95rem; color: var(--gris); }
.pieza > .ico { width: 30px; height: 30px; margin-bottom: auto; }
.pieza-estado { grid-row: span 2; background: var(--tinta); border-color: var(--tinta); color: rgba(255, 255, 255, .8); gap: 10px; }
.estado-cabeza { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pastilla-ok { white-space: nowrap; }
.estado-cabeza b { color: #fff; font-size: 1.15rem; }
.pastilla-ok { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #b9f5c3; background: rgba(51, 178, 74, .18); padding: 5px 11px; border-radius: 999px; }
.pastilla-ok i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); animation: latido 2s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, .05); } }
.estado-fila { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.estado-fila .ico { color: #9fb3ff; width: 22px; height: 22px; }
.estado-fila span { flex: 1; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.estado-fila b { font-family: var(--titulos); color: #fff; font-size: 1rem; }
.pieza-anos { background: var(--amarillo); border-color: var(--amarillo); justify-content: flex-end; }
.pieza-anos b { font-size: clamp(3.4rem, 6vw, 5rem); letter-spacing: -.06em; line-height: .9; }
.pieza-anos span { color: var(--tinta); font-weight: 550; }
.pieza-soporte { background: var(--azul); border-color: var(--azul); color: rgba(255, 255, 255, .85); transition: transform .2s; }
.pieza-soporte:hover { transform: translateY(-3px); }
.pieza-soporte b { color: #fff; }
.pieza-soporte span { color: rgba(255, 255, 255, .8); }
.pieza-soporte > .ico { color: #fff; }
.pieza-soporte em { font-style: normal; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.pieza-copias > .ico { color: var(--verde); }
.pieza-ataque > .ico { color: var(--rojo); }

/* Cubos del logo en grande (portada) */
.cubos-portada { position: absolute; right: 40px; top: 70px; width: 340px; height: 340px; pointer-events: none; }
.cubos-portada i { position: absolute; border-radius: 26px; animation: flota 8s ease-in-out infinite; }
.cubos-portada i:nth-child(1) { width: 120px; height: 120px; background: var(--rojo); left: 20px; top: 150px; transform: rotate(-12deg); }
.cubos-portada i:nth-child(2) { width: 150px; height: 150px; background: var(--verde); left: 120px; top: 10px; transform: rotate(10deg); animation-delay: -2s; }
.cubos-portada i:nth-child(3) { width: 110px; height: 110px; background: var(--azul); left: 190px; top: 190px; transform: rotate(-6deg); animation-delay: -4s; }
.cubos-portada i:nth-child(4) { width: 70px; height: 70px; background: var(--amarillo); left: 30px; top: 40px; transform: rotate(16deg); animation-delay: -6s; }
@keyframes flota { 50% { translate: 0 -12px; } }
.cubos-interior { right: max(40px, calc((100vw - var(--ancho)) / 2 + 40px)); top: 50%; transform: translateY(-50%) scale(.72); transform-origin: right center; z-index: 0; }
.cubos-mini { transform: translateY(-50%) scale(.46); }

/* Cinta de palabras */
.cinta { overflow: hidden; border-block: 1px solid var(--linea); background: #fff; padding: 18px 0; margin-top: 40px; }
.cinta-pista { display: flex; align-items: center; gap: 28px; width: max-content; animation: cinta 40s linear infinite; }
.cinta span { font-family: var(--titulos); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 600; color: var(--tinta); letter-spacing: -.03em; white-space: nowrap; }
.cinta i { width: 14px; height: 14px; border-radius: 4px; transform: rotate(18deg); flex: none; }
.cinta i:nth-of-type(4n+1) { background: var(--rojo); } .cinta i:nth-of-type(4n+2) { background: var(--verde); } .cinta i:nth-of-type(4n+3) { background: var(--azul); } .cinta i:nth-of-type(4n+4) { background: var(--amarillo); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Secciones */
.seccion { padding: 110px 0; position: relative; }
.seccion-papel, .seccion-suave { background: var(--papel-2); }
.seccion-oscura { background: var(--tinta); color: rgba(255, 255, 255, .72); }
.seccion-oscura h2, .seccion-oscura h3 { color: #fff; }
.seccion-oscura .antetitulo { color: rgba(255, 255, 255, .6); }
.seccion-cabeza { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.seccion-cabeza.izquierda { margin-left: 0; text-align: left; }
.seccion-cabeza p:not(.antetitulo) { font-size: 1.12rem; color: var(--gris); }
.seccion-oscura .seccion-cabeza p:not(.antetitulo) { color: rgba(255, 255, 255, .62); }
.fila-cabeza { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fila-cabeza h2 { margin: 0; }
.antetitulo::before { content: ''; width: 18px; height: 2px; background: currentColor; display: inline-block; margin-right: 4px; }
.portada .antetitulo::before { display: none; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dos-columnas.arriba { align-items: start; }

/* Servicios principales */
.principales { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.principal { padding: 40px; border-radius: 34px; display: flex; flex-direction: column; }
.principal-claro { background: #fff; border: 1px solid var(--linea); }
.principal-oscuro { background: var(--tinta); color: rgba(255, 255, 255, .75); }
.principal-oscuro h3 { color: #fff; }
.principal-oscuro .lista-check b { color: #fff; }
.principal-oscuro .lista-check .ico { color: #ff8a7f; }
.principal-cabeza { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.principal-cabeza .tarjeta-ico { margin: 0; }
.principal-num { font-family: var(--titulos); font-size: 3.4rem; font-weight: 600; line-height: .8; color: var(--linea); letter-spacing: -.05em; }
.principal-oscuro .principal-num { color: rgba(255, 255, 255, .14); }
.principal h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.principal > p { color: inherit; opacity: .85; }
.principal .lista-check { font-size: .95rem; flex: 1; align-content: start; }
.principal .lista-check b { color: var(--tinta); }
.principal-oscuro .lista-check b { color: #fff; }
.principal .botones { margin-top: 8px; }

/* Problemas */
.problemas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.problemas li { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--linea); font-size: 1.08rem; }
.problemas li:last-child { border-bottom: 1px solid var(--linea); }
.problemas span { font-family: var(--titulos); font-weight: 600; color: var(--azul); font-size: 1rem; padding-top: 3px; }
.problemas b { font-family: var(--titulos); color: var(--tinta); font-weight: 600; }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 30px; transition: transform .2s, border-color .2s; }
.tarjeta p { color: var(--gris); font-size: .97rem; margin: 0; }
.tarjeta-enlace { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tarjeta-enlace:hover { transform: translateY(-4px); border-color: var(--tinta); }
.tarjeta-enlace p { flex: 1; margin-bottom: 22px; }
.mas { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--tinta); font-size: .95rem; text-decoration: none; }
.tarjeta-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; }
.tarjeta-ico .ico { width: 25px; height: 25px; }
.tarjeta-ico.grande { width: 62px; height: 62px; border-radius: 18px; }
.tarjeta-ico.grande .ico { width: 30px; height: 30px; }
.c-azul { background: #e6ebff; color: var(--azul); }
.c-rojo { background: #ffe8e5; color: #e5321f; }
.c-verde { background: #e3f6e6; color: #23893a; }
.c-amarillo { background: #fff3cf; color: #a87900; }
.c-violeta { background: #ece7ff; color: var(--violeta); }
.principal-oscuro .tarjeta-ico.c-rojo { background: rgba(255, 77, 61, .16); color: #ff8a7f; }

/* Productos (lista editorial) */
.productos { border-top: 1px solid rgba(255, 255, 255, .14); }
.producto { display: grid; grid-template-columns: 60px 64px minmax(200px, 1fr) 1.4fr 40px; gap: 22px; align-items: center; padding: 26px 8px; border-bottom: 1px solid rgba(255, 255, 255, .14); text-decoration: none; color: rgba(255, 255, 255, .7); transition: background .2s, padding .2s; }
.producto:hover { background: rgba(255, 255, 255, .04); padding-inline: 18px; }
.producto-num { font-family: var(--titulos); color: rgba(255, 255, 255, .4); font-size: 1rem; }
.producto img { width: 56px; height: 56px; object-fit: contain; border-radius: 16px; background: #fff; padding: 7px; }
.producto-texto b { display: block; font-family: var(--titulos); color: #fff; font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.producto-texto small { color: rgba(255, 255, 255, .55); font-size: .85rem; }
.producto-desc { font-size: .95rem; }
.producto-flecha { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: #fff; transition: background .2s, color .2s; }
.producto:hover .producto-flecha { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.nota-oscura { margin: 36px 0 0; color: rgba(255, 255, 255, .6); }
.nota-oscura a { color: #fff; }

/* Listas, cifras y pasos */
.lista-check { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .ico { color: var(--azul); margin-top: 3px; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cifras div { padding: 30px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); }
.cifras div:nth-child(2) { background: var(--tinta); border-color: var(--tinta); }
.cifras div:nth-child(3) { background: var(--azul); border-color: var(--azul); }
.cifras b { display: block; font-family: var(--titulos); font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 600; color: var(--tinta); letter-spacing: -.05em; line-height: .95; margin-bottom: 10px; }
.cifras div:nth-child(2) b, .cifras div:nth-child(3) b { color: #fff; }
.cifras span { color: var(--gris); font-size: .95rem; }
.cifras div:nth-child(2) span, .cifras div:nth-child(3) span { color: rgba(255, 255, 255, .75); }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--tinta); }
.pasos li { padding: 28px 26px 10px 0; position: relative; }
.pasos li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta); }
.pasos p { margin: 0; color: var(--gris); font-size: .97rem; }
.paso-num { display: block; font-family: var(--titulos); font-size: .95rem; font-weight: 600; color: var(--azul); margin-bottom: 10px; }
.paso-num::before { content: '0'; }

/* Llamada final */
.llamada { background: var(--azul); color: rgba(255, 255, 255, .85); padding: 84px 0; }
.llamada h2 { color: #fff; margin-bottom: .2em; }
.llamada p { margin: 0; font-size: 1.12rem; }
.llamada-rejilla { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.llamada .botones { margin: 0; }

/* Páginas interiores */
.cabeza-pagina { position: relative; overflow: hidden; padding: 76px 0 64px; border-bottom: 1px solid var(--linea); }
.cabeza-pagina .contenedor { position: relative; z-index: 1; }
.cabeza-pagina h1 { max-width: 16ch; font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.cabeza-pagina .entradilla { color: var(--texto); }
.cubos-fondo { display: none; }
.miga { font-size: .88rem; color: var(--gris); }
.miga a { color: var(--gris); }
.lista-servicios { display: grid; gap: 14px; }
.fila-servicio { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 28px 30px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; transition: border-color .2s; }
.fila-servicio:hover { border-color: var(--tinta); }
.fila-servicio .tarjeta-ico { margin: 0; }
.fila-servicio h2 { font-size: 1.7rem; margin-bottom: .2em; }
.fila-servicio p { margin: 0 0 12px; color: var(--gris); }
.etiquetas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas li { font-size: .8rem; padding: 5px 11px; border-radius: 999px; background: var(--papel); color: var(--texto); }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px 28px; }
.plan .lista-check { flex: 1; align-content: start; font-size: .95rem; }
.plan-precio { font-family: var(--titulos); font-size: 3rem; font-weight: 600; color: var(--tinta); letter-spacing: -.05em; line-height: 1; margin: 8px 0 0; }
.plan-precio small { font-size: 1rem; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.plan-medida { background: var(--tinta); border-color: var(--tinta); color: rgba(255, 255, 255, .8); }
.plan-medida h3, .plan-medida .plan-precio { color: #fff; }
.plan-medida .plan-precio small { color: rgba(255, 255, 255, .7); font-size: 1.05rem; }
.plan-medida .boton-borde { color: #fff; border-color: rgba(255, 255, 255, .5); }
.otros-servicios { display: grid; gap: 8px; margin-top: 28px; }
.otros-servicios h3 { font-size: 1rem; margin-bottom: 6px; }
.otros-servicios a { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; padding: 12px 18px; border: 1px solid var(--linea); border-radius: 999px; font-weight: 550; background: #fff; }
.otros-servicios a:hover { border-color: var(--tinta); }
.valores { display: grid; gap: 14px; }
.valores > div { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px; }
.valores p { margin: 0; color: var(--gris); }
.credenciales { background: var(--tinta); color: rgba(255, 255, 255, .8); padding: 34px 0; }
.credenciales-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.credenciales-texto { display: flex; gap: 14px; align-items: center; }
.credenciales-texto > .ico { width: 36px; height: 36px; color: #ff8a7f; }
.credenciales-texto b { display: block; color: #fff; font-family: var(--titulos); font-size: 1.25rem; }
.credenciales-texto span { font-size: .93rem; color: rgba(255, 255, 255, .62); }
.credenciales ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.credenciales li { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font-size: .88rem; font-weight: 600; color: #fff; }
.credenciales li .ico { color: var(--amarillo); width: 1.05em; height: 1.05em; }

/* Formulario y contacto */
.contacto-rejilla { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; }
.contacto-rejilla:has(> .formulario:first-child) { grid-template-columns: 1.4fr 1fr; }
.formulario { background: #fff; border: 1px solid var(--linea); border-radius: 30px; padding: 34px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.campos label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--tinta); }
.campos .ancho { grid-column: 1 / -1; }
.campos input, .campos select, .campos textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: 13px 16px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--papel); color: var(--tinta); width: 100%; }
.campos input:focus, .campos select:focus, .campos textarea:focus { outline: none; border-color: var(--tinta); background: #fff; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 10px; }
.casilla input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--tinta); }
.nota-legal { font-size: .8rem; color: var(--gris); }
.trampa { position: absolute; left: -9999px; }
.aviso { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 18px; margin-bottom: 18px; font-size: .95rem; }
.aviso-ok { background: #e3f6e6; color: #14532d; }
.aviso-error { background: #ffe8e5; color: #7f1d1d; }
.contacto-datos { display: grid; gap: 12px; }
.dato { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--linea); border-radius: 24px; background: #fff; }
.dato .ico { width: 24px; height: 24px; color: var(--azul); }
.dato b { display: block; color: var(--tinta); font-family: var(--titulos); }
.dato a, .dato span { display: block; }
.dato span { color: var(--gris); font-size: .93rem; }
.dato-destacado { background: var(--azul); border-color: var(--azul); color: #fff; }
.dato-destacado b, .dato-destacado a, .dato-destacado .ico { color: #fff; }
.dato-destacado span { color: rgba(255, 255, 255, .8); }

.texto-legal { padding-block: 56px 96px; }
.texto-legal h2 { font-size: 1.6rem; margin-top: 1.6em; }
.entradas { display: grid; gap: 18px; padding-block: 56px; }

/* Pie con la marca gigante */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .62); padding: 80px 0 26px; font-size: .95rem; overflow: hidden; }
.pie-rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.pie h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; font-family: var(--titulos); }
.pie a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.pie a:hover { color: #fff; }
.pie-rejilla > div:not(:first-child) { display: flex; flex-direction: column; gap: 8px; }
.marca-pie { color: #fff; margin-bottom: 16px; }
.pie .boton-borde-claro { color: #fff; margin-top: 6px; }
.pie-marca { font-family: var(--titulos); font-weight: 700; color: #fff; font-size: clamp(2.6rem, 10.8vw, 10.4rem); letter-spacing: -.07em; line-height: .8; margin: 64px 0 28px; white-space: nowrap; }
.pie-marca i { display: inline-block; width: .16em; height: .16em; border-radius: .04em; margin-left: .04em; vertical-align: baseline; }
.pie-marca i:nth-of-type(1) { background: var(--rojo); } .pie-marca i:nth-of-type(2) { background: var(--verde); } .pie-marca i:nth-of-type(3) { background: var(--azul); } .pie-marca i:nth-of-type(4) { background: var(--amarillo); }
.pie-final { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }
.pie-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1080px) {
  .cabecera { top: 8px; }
  .cubos-portada { display: none; }
  .cabecera-fila { border-radius: 26px; }
  .menu { position: absolute; top: calc(100% + 8px); left: 28px; right: 28px; flex-direction: column; align-items: stretch; background: #fff; padding: 12px; border: 1px solid var(--linea); border-radius: 24px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .3); display: none; max-height: calc(100vh - 120px); overflow-y: auto; }
  .menu-abierto .menu { display: flex; }
  .menu > a, .menu-desplegable > a { padding: 12px 14px; font-size: 1.05rem; }
  .submenu { position: static; display: grid; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .boton-menu { display: block; }
  .oculto-movil { display: none !important; }
  .portada-pie, .dos-columnas, .contacto-rejilla, .contacto-rejilla:has(> .formulario:first-child) { grid-template-columns: 1fr; }
  .portada-pie .botones { justify-content: flex-start; }
  .bento { grid-template-columns: 1fr 1fr; }
  .pieza-estado { grid-column: 1 / -1; grid-row: auto; }
  .principales { grid-template-columns: 1fr; }
  .tarjetas, .planes { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .producto { grid-template-columns: 40px 56px 1fr 40px; }
  .producto-desc { grid-column: 3 / 4; grid-row: 2; }
  .fila-servicio { grid-template-columns: auto 1fr; }
  .fila-servicio .boton { grid-column: 2; justify-self: start; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 16px; }
  .barra-fila { justify-content: center; }
  .cabecera { padding-inline: 12px; }
  .cabecera-fila { padding: 0 6px 0 16px; height: 60px; gap: 8px; }
  .menu { left: 16px; right: 16px; }
  .marca { font-size: 1.02rem; }
  .cabecera-acciones { margin-left: auto; }
  .cabecera-acciones .boton-primario { padding: .6em .95em; font-size: .9rem; }
  .portada { padding: 40px 0 24px; }
  .seccion { padding: 76px 0; }
  .cabeza-pagina { padding: 48px 0 40px; }
  .bento, .tarjetas, .planes, .pasos, .pie-rejilla, .campos, .cifras { grid-template-columns: 1fr; }
  .pieza { min-height: 0; }
  .principal { padding: 26px; border-radius: 26px; }
  .botones .boton { width: 100%; }
  .producto { grid-template-columns: 48px 1fr 36px; gap: 14px; padding-inline: 0; }
  .producto-num { display: none; }
  .producto-desc { grid-column: 1 / -1; grid-row: auto; }
  .producto-flecha { width: 36px; height: 36px; }
  .fila-servicio { grid-template-columns: 1fr; }
  .fila-servicio .boton { grid-column: auto; }
  .formulario { padding: 22px; border-radius: 24px; }
}

/* Portada v3: bloques de servicio, casos, tarjetas de color y productos */
.bloque { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 48px; border-radius: 36px; margin-bottom: 16px; }
.bloque-claro { background: #fff; border: 1px solid var(--linea); }
.bloque-oscuro { background: var(--tinta); color: rgba(255, 255, 255, .75); }
.bloque-oscuro h3 { color: #fff; }
.bloque-texto h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 22px; }
.bloque-texto p { font-size: 1.05rem; }
.bloque-texto .botones { margin-top: 22px; }
.bloque-texto .tarjeta-ico { margin: 0; }
.bloque-oscuro .tarjeta-ico.c-rojo { background: rgba(255, 77, 61, .16); color: #ff8a7f; }
.bloque-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bloque-rejilla li { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--papel); min-height: 118px; }
.bloque-rejilla li .ico { width: 26px; height: 26px; color: var(--azul); }
.bloque-rejilla li b { font-family: var(--titulos); font-weight: 600; color: var(--tinta); font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.bloque-oscuro .bloque-rejilla li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.bloque-oscuro .bloque-rejilla li .ico { color: #ff8a7f; }
.bloque-oscuro .bloque-rejilla li b { color: #fff; }
.bloque-oscuro { direction: rtl; }
.bloque-oscuro > * { direction: ltr; }
.avisos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aviso-caso { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; }
.aviso-caso > span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; }
.aviso-caso > span .ico { width: 25px; height: 25px; }
.aviso-caso b { display: block; font-family: var(--titulos); color: var(--tinta); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.aviso-caso p { margin: 0; color: var(--gris); font-size: .96rem; }
.tarjeta-color { padding: 12px 12px 26px; }
.tarjeta-color h3, .tarjeta-color p, .tarjeta-color .mas { margin-left: 16px; margin-right: 16px; }
.tarjeta-cabeza { display: grid; place-items: center; height: 150px; border-radius: 20px; margin-bottom: 22px; }
.tarjeta-cabeza .ico { width: 54px; height: 54px; }
.productos-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.producto-tarjeta { display: flex; gap: 22px; align-items: flex-start; padding: 30px; border-radius: var(--radio); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s, border-color .2s, transform .2s; }
.producto-tarjeta:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.producto-tarjeta img { width: 68px; height: 68px; object-fit: contain; border-radius: 20px; background: #fff; padding: 9px; flex: none; }
.producto-tarjeta h3 { font-size: 1.5rem; margin-bottom: .3em; }
.producto-tarjeta p { color: rgba(255, 255, 255, .7); font-size: .97rem; margin-bottom: 14px; }
.producto-tarjeta .producto-tipo { color: var(--amarillo); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.producto-tarjeta .mas { color: #fff; }
.pie { padding-bottom: 26px; }
.pie-final { margin-top: 56px; }
@media (max-width: 1080px) {
  .bloque, .bloque-oscuro { grid-template-columns: 1fr; padding: 32px; direction: ltr; }
  .avisos { grid-template-columns: 1fr 1fr; }
  .productos-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .bloque, .bloque-oscuro { padding: 24px; border-radius: 26px; }
  .bloque-rejilla { grid-template-columns: 1fr 1fr; }
  .bloque-rejilla li { min-height: 0; padding: 16px; }
  .avisos { grid-template-columns: 1fr; }
  .producto-tarjeta { flex-direction: column; padding: 24px; }
}


/* Portada: fondo crema y la Tierra de noche con ataques a la derecha */
.planeta { --d: min(640px, 52vw); position: absolute; z-index: -1; width: var(--d); height: var(--d); right: max(-60px, calc((100vw - var(--ancho)) / 2 - 80px)); top: 150px; border-radius: 50%; overflow: hidden; }
.planeta i { position: absolute; inset: 0; border-radius: 50%; }
.planeta-superficie { background-size: auto 100%; background-repeat: repeat-x; animation: gira 70s linear infinite; }
.planeta-sombra { background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 36% 34%, transparent 30%, rgba(0, 0, 0, .35) 48%, rgba(0, 0, 0, .78) 64%, rgba(0, 0, 0, .96) 76%); box-shadow: inset 10px 8px 26px rgba(150, 200, 255, .35), inset -40px -30px 70px rgba(0, 0, 0, .9); }
@keyframes gira { from { background-position-x: 0; } to { background-position-x: calc(var(--d) * -2); } }
.planeta-noche, .globo { position: absolute; z-index: 0; right: 0; top: 40px; width: 500px; height: 500px; }
.planeta-noche { --d: 400px; width: var(--d); height: var(--d); right: 50px; top: 90px; box-shadow: 0 0 60px rgba(91, 140, 255, .45), 0 0 160px rgba(43, 80, 255, .25); transition: opacity .8s; }
.planeta-noche .planeta-superficie { background-image: url('assets/tierra-noche.webp'); animation-duration: 60s; }
.globo { opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.globo canvas { display: block; }
.globo-listo .globo { opacity: 1; }
.globo-listo .planeta-noche { opacity: 0; }
.leyenda-ataques { position: absolute; z-index: 1; right: 0; top: -2px; list-style: none; margin: 0; padding: 8px 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; width: 500px; font-size: .76rem; color: rgba(255, 255, 255, .75); }
.leyenda-ataques li { display: flex; align-items: center; gap: 6px; }
.leyenda-ataques i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.leyenda-nota { color: rgba(255, 255, 255, .45); }
.portada .cubos-portada { display: none; }
.cabecera { z-index: 60; }
.portada h1, .portada .antetitulo, .portada .portada-pie { position: relative; z-index: 1; }
.leyenda-ataques { color: var(--texto) !important; }
.leyenda-nota { color: var(--gris) !important; }
.planeta-noche, .globo { filter: drop-shadow(0 30px 50px rgba(20, 30, 80, .35)); }
@media (max-width: 1080px) { .planeta-noche, .globo, .leyenda-ataques { display: none; } .portada .cubos-portada { display: block; } }

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