/* Conectao Estudio · estilo «Señal» (24.13 Suizo local): blanco, tinta y un solo acento.
   Todos los colores y letras salen de tokens.css. Rejilla de 12 columnas con líneas finas y números grandes. */

@font-face { font-family: "Inter"; src: url("assets/fonts/inter-400.woff?v=20261111") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-500.woff?v=20261111") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-600.woff?v=20261111") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/interdisplay-700.woff?v=20261111") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("assets/fonts/interdisplay-800.woff?v=20261111") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; overflow-x: clip; background: var(--color-fondo); color: var(--color-texto);
  font: 400 var(--texto-m)/1.6 var(--fuente-texto); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-acento-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-l); letter-spacing: -.02em; line-height: 1.15; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--color-oscuro); color: var(--blanco); padding: .7rem 1rem; z-index: 100; border-radius: 8px; }
.saltar:focus { left: 8px; }
.contenedor { width: min(100% - 2.5rem, var(--ancho-max)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }
.etiqueta {
  font: 600 var(--texto-xs)/1.2 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-texto-suave); display: inline-flex; gap: .6em; align-items: center;
}
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-acento); flex: none; }

/* ───────── botones ───────── */
.boton {
  --b-fondo: var(--color-acento); --b-texto: var(--color-sobre-acento);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .85rem 1.4rem;
  background: var(--b-fondo); color: var(--b-texto); border: 1.5px solid var(--b-fondo); border-radius: 999px;
  font: 600 var(--texto-s)/1 var(--fuente-texto); text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.boton:hover { background: var(--color-acento-hover); border-color: var(--color-acento-hover); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--linea { --b-fondo: transparent; --b-texto: var(--color-texto); border-color: var(--color-borde); background: transparent; }
.boton--linea:hover { background: var(--color-superficie); border-color: var(--color-texto); }
.oscuro .boton--linea { --b-texto: var(--color-sobre-oscuro); border-color: var(--alfa-9); }
.oscuro .boton--linea:hover { background: var(--alfa-6); border-color: var(--blanco); }
.boton--pequeno { min-height: 44px; padding: .6rem 1.05rem; }
.flecha { display: inline-block; transition: transform .2s; }
a:hover .flecha { transform: translateX(3px); }

/* ───────── cabecera ───────── */
.cabecera {
  position: sticky; top: 0; z-index: 40; background: var(--alfa-4);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--color-borde);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.logo { display: inline-flex; color: var(--color-oscuro); --logo-acento: var(--color-acento); }
.logo svg { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: .25rem; }
.menu a:not(.boton) {
  color: var(--color-texto); text-decoration: none; font-weight: 500; font-size: var(--texto-s);
  padding: .7rem .8rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
}
.menu a:not(.boton):hover, .menu a[aria-current="page"] { background: var(--alfa-12); color: var(--color-acento-texto); }
.menu .boton { margin-left: .5rem; }
.menu-movil { display: none; }
@media (max-width: 960px) {
  .menu { display: none; }
  .menu-movil { display: block; position: relative; }
  .menu-movil summary {
    list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; padding: .55rem 1rem; border: 1.5px solid var(--color-borde);
    border-radius: 999px; font-weight: 600; font-size: var(--texto-s); display: inline-flex; align-items: center; gap: .5rem; background: var(--color-superficie);
  }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-movil summary::after { content: ""; width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; }
  .menu-movil[open] summary { border-color: var(--color-texto); }
  .menu-movil nav {
    position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 320px); background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio-m); box-shadow: var(--sombra-m); padding: .5rem; display: grid;
  }
  .menu-movil nav a { padding: .9rem 1rem; border-radius: 10px; text-decoration: none; color: var(--color-texto); font-weight: 500; }
  .menu-movil nav a:hover, .menu-movil nav a[aria-current="page"] { background: var(--color-fondo); color: var(--color-acento-texto); }
  .menu-movil nav .boton { margin-top: .4rem; color: var(--color-sobre-acento); }
  .logo svg { height: 32px; }
}

/* ───────── bloques comunes ───────── */
.seccion { padding-block: var(--espacio-xl); }
.seccion--borde { border-top: 1px solid var(--color-borde); }
.oscuro { background: var(--color-oscuro); color: var(--color-sobre-oscuro); }
.oscuro .etiqueta { color: var(--color-sobre-oscuro-suave); }
.oscuro .etiqueta::before { background: var(--color-acento-sobre-oscuro); }
.oscuro a:not(.boton) { color: var(--blanco); }
.cabeza-seccion { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: end; margin-bottom: var(--espacio-l); }
.cabeza-seccion .etiqueta { grid-column: 1 / -1; }
.cabeza-seccion h2 { grid-column: 1 / span 7; }
.cabeza-seccion p { grid-column: 9 / -1; color: var(--color-texto-suave); }
.oscuro .cabeza-seccion p { color: var(--color-sobre-oscuro-suave); }
@media (max-width: 860px) { .cabeza-seccion h2, .cabeza-seccion p { grid-column: 1 / -1; } }

/* ───────── portada (inicio) ───────── */
.portada { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.portada::before { /* rejilla suiza: 12 líneas finas */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--alfa-5) 0 1px, transparent 1px calc((min(100vw - 2.5rem, var(--ancho-max))) / 12));
  background-position: calc((100vw - min(100vw - 2.5rem, var(--ancho-max))) / 2) 0;
}
.portada-rejilla { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: center; }
.portada-texto { grid-column: 1 / span 7; }
.portada h1 { font-size: clamp(3.3rem, 1.4rem + 7.2vw, 7.6rem); letter-spacing: -.042em; line-height: .92; margin-block: 1.4rem 1.6rem; }
.portada h1 .acento { color: var(--color-acento-sobre-oscuro); display: inline-block; }
.portada-sub { font-size: var(--texto-l); line-height: 1.45; color: var(--color-sobre-oscuro-suave); max-width: 34ch; }
.portada-sub strong { color: var(--blanco); font-weight: 500; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.portada-precios { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--alfa-8); display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: var(--texto-s); color: var(--color-sobre-oscuro-suave); }
.portada-precios b { color: var(--blanco); font-weight: 600; }
.portada-visual { grid-column: 8 / -1; position: relative; display: grid; justify-items: center; align-content: center; min-height: 560px; }
.ondas { position: absolute; inset: -10% -25% -10% -10%; width: 135%; height: 120%; color: var(--color-acento-sobre-oscuro); pointer-events: none; }
.ondas circle { fill: none; stroke: currentColor; transform-origin: 50% 50%; }
.ondas .o1 { opacity: .55; } .ondas .o2 { opacity: .32; } .ondas .o3 { opacity: .18; } .ondas .o4 { opacity: .09; }
@media (prefers-reduced-motion: no-preference) {
  .ondas .pulso { animation: pulso 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
  @keyframes pulso { 0% { transform: scale(.35); opacity: .7; } 100% { transform: scale(1.05); opacity: 0; } }
}
.movil {
  position: relative; width: min(300px, 74vw); aspect-ratio: 390 / 819; border-radius: 44px; padding: 10px;
  background: linear-gradient(145deg, var(--deco-movil-1), var(--deco-movil-2) 45%, var(--deco-movil-3)); box-shadow: 0 40px 80px var(--alfa-2), inset 0 0 0 1.5px var(--alfa-8);
}
.movil img { width: 100%; height: calc(100% - 30px); margin-top: 30px; object-fit: cover; object-position: top; border-radius: 0 0 35px 35px; background: var(--deco-pantalla); }
.movil::before { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; height: 31px; border-radius: 35px 35px 0 0; background: var(--deco-pantalla); }
.movil::after { content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 78px; height: 22px; border-radius: 20px; background: var(--deco-muesca); }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px;
  background: var(--alfa-11); color: var(--color-oscuro); font: 600 var(--texto-xs)/1.2 var(--fuente-texto); box-shadow: var(--sombra-m); white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; }
.chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.chips .chip { position: static; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); flex: none; }
@media (max-width: 960px) {
  .portada-texto, .portada-visual { grid-column: 1 / -1; }
  .portada-visual { min-height: 0; margin-top: 2.5rem; }
}

/* ───────── 01 02 03 ───────── */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-texto); }
.tres article { padding: 1.6rem 1.6rem 2rem 0; border-right: 1px solid var(--color-borde); display: grid; gap: .9rem; align-content: start; }
.tres article + article { padding-left: 1.6rem; }
.tres article:last-child { border-right: 0; }
.tres .n { font: 800 clamp(3rem, 2rem + 3vw, 5rem)/.9 var(--fuente-titulos); letter-spacing: -.06em; color: var(--color-acento); font-variant-numeric: tabular-nums; }
.tres p { color: var(--color-texto-suave); }
@media (max-width: 860px) {
  .tres { grid-template-columns: 1fr; }
  .tres article, .tres article + article { padding: 1.5rem 0 1.8rem; border-right: 0; border-bottom: 1px solid var(--color-borde); }
}

/* ───────── precios ───────── */
.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nivel {
  position: relative; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-l);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); display: grid; gap: 1.1rem; align-content: start;
}
.nivel--destacado { background: var(--color-oscuro); color: var(--color-sobre-oscuro); border-color: var(--color-oscuro); }
.nivel--destacado p, .nivel--destacado li { color: var(--color-sobre-oscuro-suave); }
.nivel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.nivel-nombre { font: 700 var(--texto-l)/1.1 var(--fuente-titulos); letter-spacing: -.02em; }
.nivel-plazo { font-size: var(--texto-xs); color: var(--color-texto-suave); white-space: nowrap; }
.nivel--destacado .nivel-plazo { color: var(--color-sobre-oscuro-suave); }
.precio { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.precio b { font: 800 clamp(2.8rem, 2rem + 2.6vw, 4.2rem)/.9 var(--fuente-titulos); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.precio span { font-size: var(--texto-s); color: var(--color-texto-suave); }
.nivel--destacado .precio span { color: var(--color-sobre-oscuro-suave); }
.precio-iva { font-size: var(--texto-xs); color: var(--color-texto-suave); margin-top: -.6rem; }
.nivel--destacado .precio-iva { color: var(--color-sobre-oscuro-suave); }
.nivel ul { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--color-borde); display: grid; gap: .55rem; font-size: var(--texto-s); }
.nivel--destacado ul { border-top-color: var(--alfa-8); }
.nivel li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; }
.nivel li::before { content: ""; width: 16px; height: 16px; margin-top: .3em; border-radius: 50%; background: radial-gradient(circle, var(--color-acento) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 6px, var(--color-acento) 6.5px 7.5px, transparent 8px); }
.nivel--destacado li::before { background: radial-gradient(circle, var(--color-acento-sobre-oscuro) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 6px, var(--color-acento-sobre-oscuro) 6.5px 7.5px, transparent 8px); }
.nivel .boton { justify-self: start; margin-top: .4rem; }
.sello-nivel { position: absolute; top: -12px; right: 1.4rem; background: var(--color-acento); color: var(--blanco); font: 600 var(--texto-xs)/1 var(--fuente-texto); padding: .45rem .8rem; border-radius: 999px; }
.nota-precios { margin-top: 1.4rem; font-size: var(--texto-s); color: var(--color-texto-suave); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
@media (max-width: 960px) { .niveles { grid-template-columns: 1fr; } }

/* tablas de extras y mantenimiento */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.tabla th, .tabla td { text-align: left; padding: 1rem .75rem 1rem 0; border-bottom: 1px solid var(--color-borde); vertical-align: top; }
.tabla th { font-weight: 600; }
.tabla td.cifra { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; padding-right: 0; }
.tabla td.cifra small { display: block; font-weight: 400; color: var(--color-texto-suave); }
.tabla td:nth-child(2) { color: var(--color-texto-suave); }
.tabla caption { text-align: left; color: var(--color-texto-suave); font-size: var(--texto-xs); padding-bottom: .8rem; }
@media (max-width: 640px) {
  .tabla td:nth-child(2) { display: none; }
}
.mantenimiento { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-texto); }
.mantenimiento article { padding: 1.6rem 1.6rem 1.8rem 0; border-right: 1px solid var(--color-borde); display: grid; gap: .8rem; align-content: start; }
.mantenimiento article + article { padding-left: 1.6rem; }
.mantenimiento article:last-child { border-right: 0; }
.mantenimiento .precio b { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); }
.mantenimiento p { color: var(--color-texto-suave); font-size: var(--texto-s); }
@media (max-width: 860px) {
  .mantenimiento { grid-template-columns: 1fr; }
  .mantenimiento article, .mantenimiento article + article { padding: 1.4rem 0; border-right: 0; border-bottom: 1px solid var(--color-borde); }
}

/* ───────── trabajos / muestra ───────── */
.muestra { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: center; }
.muestra-pantallas { grid-column: 1 / span 7; position: relative; padding: 0 0 3rem; }
.navegador { border-radius: 14px; overflow: hidden; background: var(--color-superficie); box-shadow: var(--sombra-m); border: 1px solid var(--color-borde); }
.navegador-barra { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-borde); background: var(--deco-barra); }
.navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--deco-punto); }
.navegador-barra span { margin-left: 10px; font-size: 12px; color: var(--color-texto-suave); background: var(--blanco); border-radius: 6px; padding: 3px 10px; }
.muestra-pantallas .movil { position: absolute; right: 0; bottom: 0; width: 34%; border-radius: 30px; padding: 7px; }
.muestra-pantallas .movil img { border-radius: 0 0 24px 24px; height: calc(100% - 20px); margin-top: 20px; }
.muestra-pantallas .movil::before { top: 7px; left: 7px; right: 7px; height: 21px; border-radius: 24px 24px 0 0; }
.muestra-pantallas .movil::after { top: 13px; width: 46px; height: 13px; }
.muestra-texto { grid-column: 9 / -1; display: grid; gap: 1.2rem; }
.aviso-simulado { display: inline-flex; gap: .5rem; align-items: center; justify-self: start; font-size: var(--texto-xs); font-weight: 600; padding: .45rem .8rem; border-radius: 999px; background: var(--color-aviso-fondo); color: var(--color-aviso-texto); border: 1px solid var(--color-aviso-borde); }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.lista-check li { padding-left: 1.6rem; position: relative; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-acento); }
@media (max-width: 960px) { .muestra-pantallas, .muestra-texto { grid-column: 1 / -1; } }
.galeria-moviles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.galeria-moviles figure { margin: 0; display: grid; gap: .8rem; }
.galeria-moviles .movil { width: 100%; border-radius: 34px; padding: 8px; }
.galeria-moviles .movil img { border-radius: 0 0 27px 27px; height: calc(100% - 24px); margin-top: 24px; }
.galeria-moviles .movil::before { top: 8px; left: 8px; right: 8px; height: 25px; border-radius: 27px 27px 0 0; }
.galeria-moviles .movil::after { top: 15px; width: 54px; height: 15px; }
.galeria-moviles figcaption { font-size: var(--texto-s); }
.galeria-moviles figcaption b { display: block; }
.galeria-moviles figcaption span { color: var(--color-texto-suave); }
@media (max-width: 860px) { .galeria-moviles { grid-template-columns: repeat(2, 1fr); } }
.caso { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; padding-block: 2rem; border-top: 1px solid var(--color-borde); }
.caso h3 { grid-column: 1 / span 4; }
.caso > div { grid-column: 6 / -1; display: grid; gap: .9rem; color: var(--color-texto-suave); }
@media (max-width: 860px) { .caso h3, .caso > div { grid-column: 1 / -1; } }
.hueco-cliente { border: 1.5px dashed var(--color-borde); border-radius: var(--radio-l); padding: 2rem; display: grid; gap: .6rem; color: var(--color-texto-suave); }

/* ───────── pasos ───────── */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: paso; border-top: 1px solid currentColor; }
.pasos li { counter-increment: paso; padding: 1.4rem 1.5rem 1.8rem 0; border-bottom: 1px solid var(--alfa-7); display: grid; gap: .55rem; align-content: start; }
.pasos li::before { content: counter(paso, decimal-leading-zero); font: 800 var(--texto-xl)/1 var(--fuente-titulos); letter-spacing: -.05em; color: var(--color-acento-sobre-oscuro); font-variant-numeric: tabular-nums; }
.pasos b { font: 700 var(--texto-l)/1.15 var(--fuente-titulos); letter-spacing: -.02em; }
.pasos p { color: var(--color-sobre-oscuro-suave); font-size: var(--texto-s); }
.claro .pasos li { border-bottom-color: var(--color-borde); }
.claro .pasos li::before { color: var(--color-acento); }
.claro .pasos p { color: var(--color-texto-suave); }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } .pasos li { padding-right: 0; } }

/* ───────── Toque ───────── */
.toque { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: center; }
.toque-texto { grid-column: 1 / span 6; display: grid; gap: 1.3rem; }
.toque-texto h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); }
.toque-texto p { color: var(--color-sobre-oscuro-suave); font-size: var(--texto-l); line-height: 1.45; max-width: 36ch; }
.pronto { justify-self: start; font: 600 var(--texto-xs)/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; padding: .55rem .85rem; border-radius: 999px; border: 1px solid var(--alfa-10); }
.toque-visual { grid-column: 8 / -1; display: grid; place-items: center; }
.placa { position: relative; width: min(330px, 72vw); aspect-ratio: 1; }
.placa-disco {
  position: absolute; inset: 8%; border-radius: 50%; display: grid; place-items: center; gap: 0; text-align: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--blanco) 0%, var(--deco-placa-2) 60%, var(--deco-placa-3) 100%);
  box-shadow: 0 30px 60px var(--alfa-3), inset 0 2px 0 var(--blanco), inset 0 -6px 14px var(--alfa-1);
  color: var(--color-oscuro); --logo-acento: var(--color-acento);
}
.placa-disco svg { width: 34%; }
.placa-disco small { position: absolute; bottom: 21%; font: 600 11px/1.3 var(--fuente-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--deco-placa-texto); }
.placa-ondas { position: absolute; inset: -12%; color: var(--color-acento-sobre-oscuro); }
.placa-ondas circle { fill: none; stroke: currentColor; }
@media (max-width: 960px) { .toque-texto, .toque-visual { grid-column: 1 / -1; } .toque-visual { margin-top: 1.5rem; } }

/* ───────── preguntas ───────── */
.faq { border-top: 1px solid var(--color-texto); }
.faq details { border-bottom: 1px solid var(--color-borde); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 1rem; align-items: center;
  padding: 1.3rem 0; font: 600 var(--texto-m)/1.35 var(--fuente-texto); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--fuente-titulos); color: var(--color-acento); text-align: center; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 3rem 1.4rem 0; color: var(--color-texto-suave); max-width: 70ch; }
.faq-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.faq-rejilla > div:first-child { grid-column: 1 / span 4; display: grid; gap: 1rem; align-content: start; }
.faq-rejilla > .faq { grid-column: 6 / -1; }
@media (max-width: 860px) { .faq-rejilla > div:first-child, .faq-rejilla > .faq { grid-column: 1 / -1; } }

/* ───────── llamada final ───────── */
.final { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: end; }
.final h2 { grid-column: 1 / span 8; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem); letter-spacing: -.05em; }
.final > div { grid-column: 9 / -1; display: grid; gap: 1.2rem; color: var(--color-sobre-oscuro-suave); }
.final .boton { justify-self: start; }
@media (max-width: 960px) { .final h2, .final > div { grid-column: 1 / -1; } }

/* ───────── cabecera interior ───────── */
.intro { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--color-borde); }
.intro-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: end; }
.intro h1 { grid-column: 1 / span 8; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.8rem); letter-spacing: -.05em; margin-top: 1.1rem; }
.intro-lado { grid-column: 9 / -1; display: grid; gap: 1.2rem; color: var(--color-texto-suave); }
.intro-lado .acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.intro .etiqueta { grid-column: 1 / -1; }
@media (max-width: 960px) { .intro h1, .intro-lado { grid-column: 1 / -1; } }
.dos-col { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.dos-col > :first-child { grid-column: 1 / span 4; }
.dos-col > :last-child { grid-column: 6 / -1; }
@media (max-width: 860px) { .dos-col > :first-child, .dos-col > :last-child { grid-column: 1 / -1; } }
.propiedad { display: grid; gap: 0; border-top: 1px solid var(--color-texto); }
.propiedad div { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-borde); }
.propiedad dt { font-weight: 600; } .propiedad dd { margin: 0; color: var(--color-texto-suave); }
@media (max-width: 640px) { .propiedad div { grid-template-columns: 1fr; gap: .2rem; } }
.cita-grande { font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.15 var(--fuente-titulos); letter-spacing: -.03em; max-width: 26ch; }

/* ───────── formulario ───────── */
.form-zona { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: start; }
.form-zona > aside { grid-column: 1 / span 4; display: grid; gap: 1.4rem; position: sticky; top: 100px; }
.form-zona > .tarjeta-form { grid-column: 6 / -1; }
@media (max-width: 960px) { .form-zona > aside, .form-zona > .tarjeta-form { grid-column: 1 / -1; position: static; } }
.tarjeta-form { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-l); padding: clamp(1.3rem, 1rem + 2vw, 2.6rem); box-shadow: var(--sombra-s); }
.n-form { display: grid; gap: 1.1rem; }
.n-form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .n-form .fila { grid-template-columns: 1fr; } }
.n-form label { display: grid; gap: .45rem; font-weight: 600; font-size: var(--texto-s); }
.n-form label span.opc { font-weight: 400; color: var(--color-texto-suave); }
.n-form input, .n-form select, .n-form textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border: 1.5px solid var(--color-borde); border-radius: 12px;
  background: var(--color-fondo); color: var(--color-texto); font: 400 16px/1.4 var(--fuente-texto);
}
.n-form textarea { min-height: 120px; resize: vertical; }
.n-form input:focus, .n-form select:focus, .n-form textarea:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 4px var(--alfa-13); background: var(--blanco); }
.n-form .n-check { grid-template-columns: 24px 1fr; align-items: start; font-weight: 400; }
.n-form .n-check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--color-acento); }
.n-form .n-check a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.n-info-legal { font-size: var(--texto-xs); color: var(--color-texto-suave); line-height: 1.5; }
.n-form button { justify-self: start; }
.n-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[data-estado] { font-weight: 600; }
.que-incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-texto); }
.que-incluye li { padding: 1rem 0; border-bottom: 1px solid var(--color-borde); display: grid; grid-template-columns: 2.4rem 1fr; gap: .6rem; }
.que-incluye li b { font: 800 var(--texto-l)/1 var(--fuente-titulos); color: var(--color-acento); letter-spacing: -.04em; }
.contacto-directo { display: grid; gap: .6rem; }
.contacto-directo a { display: flex; align-items: center; gap: .7rem; min-height: 48px; font-weight: 600; text-decoration: none; color: var(--color-texto); }
.contacto-directo a svg { width: 22px; height: 22px; color: var(--color-acento); flex: none; }
.contacto-directo a:hover { color: var(--color-acento-texto); }

/* ───────── texto largo (legales, blog) ───────── */
.prosa { max-width: 72ch; }
.prosa h2 { font-size: var(--texto-l); margin: 2.2rem 0 .8rem; letter-spacing: -.02em; }
.prosa h3 { font-size: var(--texto-m); margin: 1.6rem 0 .6rem; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1rem; }
.prosa li { margin-bottom: .4rem; }
.prosa table { border-collapse: collapse; width: 100%; font-size: var(--texto-s); margin-bottom: 1rem; }
.prosa th, .prosa td { border-bottom: 1px solid var(--color-borde); padding: .6rem .5rem .6rem 0; text-align: left; vertical-align: top; }

/* ───────── pie ───────── */
.pie { background: var(--color-oscuro); color: var(--color-sobre-oscuro-suave); padding-block: var(--espacio-l) 2rem; font-size: var(--texto-s); }
.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-rejilla { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: 2rem 1.5rem; }
.pie-marca { display: grid; max-width: 34ch; gap: 1rem; align-content: start; color: var(--blanco); --logo-acento: var(--color-acento-sobre-oscuro); }
.pie-marca svg { height: 40px; width: auto; }
.pie-col { display: grid; gap: .5rem; align-content: start; }
.pie-col h2 { font: 600 var(--texto-xs)/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--color-sobre-oscuro-suave); margin-bottom: .6rem; }
.pie-col a { min-height: 32px; display: inline-flex; align-items: center; }
.pie-bajo { margin-top: var(--espacio-l); padding-top: 1.4rem; border-top: 1px solid var(--alfa-7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: var(--texto-xs); }
@media (max-width: 860px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 860px) { body { padding-bottom: 64px; } }

/* barra fija de contacto en el móvil */
.n-barra-movil { display: none; }
@media (max-width: 860px) {
  .n-barra-movil {
    position: fixed; inset: auto 0 0 0; z-index: 45; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); gap: 4px;
    background: var(--alfa-11); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-borde); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .n-barra-movil a { min-width: 0; white-space: nowrap; overflow: hidden; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; color: var(--color-texto); font-weight: 600; font-size: 14px; border-radius: 12px; }
  .n-barra-movil a svg { width: 19px; height: 19px; }
  .n-barra-movil a:last-child { background: var(--color-acento); color: var(--blanco); }
}

/* revelado suave (contenido siempre visible sin JavaScript) */
.js .revelar { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; transition: none; } }

/* páginas legales generadas por el estudio (legal.mjs) */
.pagina-texto { padding-block: var(--espacio-l) var(--espacio-xl); }
.pagina-texto > article, .pagina-texto .legal { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.legal h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); margin-bottom: .6rem; }
.legal > p:first-of-type { color: var(--color-texto-suave); font-size: var(--texto-s); }
.legal h2 { font-size: var(--texto-l); margin: 2.4rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--color-borde); letter-spacing: -.02em; }
.legal h3 { font-size: var(--texto-m); margin: 1.6rem 0 .5rem; }
.legal p, .legal ul, .legal ol, .legal table { margin: 0 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--texto-s); display: block; overflow-x: auto; }
.legal th, .legal td { border-bottom: 1px solid var(--color-borde); padding: .6rem .6rem .6rem 0; text-align: left; vertical-align: top; }
.legal button, .legal [data-abrir-cookies] { min-height: 44px; }
/* enlaces dentro de un párrafo: zona de toque cómoda sin mover el texto */
.faq-rejilla p a, .dos-col p a, .legal p a, .caso p a:not(.boton), .seccion > .contenedor > p > a:not(.boton) { display: inline-block; padding-block: 12px; margin-block: -12px; }
.toque-banda { background: var(--color-oscuro-2, var(--color-oscuro)); color: var(--blanco); }
.toque-banda .boton--linea { --b-texto: var(--blanco); border-color: var(--alfa-10); }
.pie .logo { color: var(--blanco); }

/* blog */
/* Blog y noticias (blog-noticias.mjs). Solo tokens de la web: hereda colores y letras de su marca. */
.bn { max-width: var(--ancho-max, 1240px); margin: 0 auto; padding: var(--espacio-l, 3rem) 20px var(--espacio-xl, 5rem); }
.bn-migas { font-size: var(--texto-xs, .85rem); color: var(--color-texto-suave); margin: 0 0 var(--espacio-m, 1.5rem); }
.bn-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.bn-migas li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.bn-migas a { color: inherit; }
.bn-cabeza { max-width: 760px; }
.bn-cabeza h1 { font-family: var(--fuente-titulos); font-size: var(--texto-xxl, 3rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 18px; }
.bn-entradilla { font-size: var(--texto-l, 1.3rem); line-height: 1.5; color: var(--color-texto-suave); margin: 0 0 20px; }
.bn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--texto-s, .95rem); color: var(--color-texto-suave); margin: 0; }
.bn-meta strong { color: var(--color-texto); }
.bn-portada { margin: var(--espacio-m, 2rem) 0; }
.bn-portada img, .bn-foto img { width: 100%; height: auto; display: block; border-radius: var(--radio-m, 16px); }
.bn-portada img { max-height: 520px; object-fit: cover; }
.bn-portada figcaption, .bn-foto figcaption { font-size: var(--texto-xs, .85rem); color: var(--color-texto-suave); margin-top: 8px; }
.bn-rejilla { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); gap: var(--espacio-l, 3rem); align-items: start; }
.bn-cuerpo { font-size: var(--texto-m, 1.1rem); line-height: 1.7; }
.bn-cuerpo h2 { font-family: var(--fuente-titulos); font-size: var(--texto-xl, 2rem); line-height: 1.15; margin: 1.8em 0 .5em; }
.bn-cuerpo p, .bn-cuerpo ul, .bn-cuerpo ol { margin: 0 0 1em; }
.bn-cuerpo li { margin: .3em 0; }
.bn-cuerpo a { color: var(--color-acento-texto); }
.bn-cita { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--color-acento); font-family: var(--fuente-titulos); font-size: var(--texto-l, 1.3rem); font-style: italic; }
.bn-cita footer { font-family: var(--fuente-texto); font-style: normal; font-size: var(--texto-s, .95rem); color: var(--color-texto-suave); margin-top: 6px; }
.bn-pregunta { border-top: 1px solid var(--color-borde); padding: 16px 0 4px; }
.bn-pregunta h3 { font-size: var(--texto-m, 1.1rem); margin: 0 0 6px; }
.bn-lado { position: sticky; top: 96px; display: grid; gap: 18px; }
.bn-cta, .bn-autor, .bn-como { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-m, 16px); padding: 20px; }
.bn-cta { background: var(--color-oscuro); color: var(--color-sobre-oscuro); border: 0; }
.bn-cta h2 { font-family: var(--fuente-titulos); font-size: var(--texto-l, 1.3rem); margin: 0 0 8px; color: inherit; }
.bn-cta p { margin: 0 0 14px; color: var(--color-sobre-oscuro-suave); }
.bn-cta .boton { display: inline-block; }
.bn-cta a:not(.boton) { color: var(--color-sobre-oscuro); }
.bn-autor { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.bn-autor-sello { width: 56px; height: 56px; border-radius: 50%; background: var(--color-oscuro); color: var(--color-sobre-oscuro); display: grid; place-items: center; font-family: var(--fuente-titulos); font-size: 1.5rem; }
.bn-autor p { margin: 0; font-size: var(--texto-s, .95rem); }
.bn-como { font-size: var(--texto-s, .95rem); color: var(--color-texto-suave); }
.bn-como strong { color: var(--color-texto); }
.bn-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: var(--espacio-m, 2rem) 0 0; }
.bn-etiquetas a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--color-superficie); border: 1px solid var(--color-borde); color: var(--color-texto); text-decoration: none; font-size: var(--texto-s, .95rem); }
.bn-relacionados { margin-top: var(--espacio-l, 3rem); }
.bn-relacionados h2 { font-family: var(--fuente-titulos); font-size: var(--texto-xl, 2rem); }
.bn-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.bn-tarjeta { display: grid; gap: 10px; }
.bn-tarjeta a { color: inherit; text-decoration: none; }
.bn-tarjeta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-m, 16px); background: var(--color-superficie); }
.bn-tarjeta h2, .bn-tarjeta h3 { font-family: var(--fuente-titulos); font-size: var(--texto-l, 1.3rem); line-height: 1.2; margin: 0; }
.bn-tarjeta a:hover h2, .bn-tarjeta a:hover h3 { color: var(--color-acento-texto); }
.bn-tarjeta p { margin: 0; color: var(--color-texto-suave); font-size: var(--texto-s, .95rem); }
.bn-tipo { font-size: var(--texto-xs, .8rem); letter-spacing: .08em; text-transform: uppercase; color: var(--color-acento-texto); font-weight: 600; }
.bn-sin-foto { aspect-ratio: 4 / 3; border-radius: var(--radio-m, 16px); background: var(--color-oscuro); color: var(--color-sobre-oscuro); display: grid; place-items: center; font-family: var(--fuente-titulos); font-size: 3rem; }
.bn-aviso-ia { font-size: var(--texto-xs, .85rem); color: var(--color-texto-suave); }
@media (max-width: 900px) { .bn-rejilla { grid-template-columns: 1fr; } .bn-lado { position: static; } }
/* dedo: enlaces de texto con al menos 24 px de alto */
.bn-migas a, .bn-cta p a, .bn-autor a, .bn-etiquetas a { display: inline-block; min-height: 24px; padding: 4px 0; }
.bn-etiquetas a { padding: 8px 14px; }

@media print {
  .n-barra-movil, .bn-aside, .bn-cta, .idiomas, header nav { display: none !important; }
  .bn-portada img { max-height: 95mm; }
  .bn figure, .bn img, .bn blockquote, .bn h2, .bn h3 { break-inside: avoid; break-after: auto; }
  .bn h2, .bn h3 { break-after: avoid; }
  .bn { grid-template-columns: 1fr !important; }
  body > footer { break-inside: avoid; padding-block: 8mm !important; }
}
/* /blog */