/* Albañiles TS — corporativo v3. Fuente de verdad: DESIGN.md (raíz del proyecto). */

/* ---------- fuente (Roboto variable, alojada en el propio dominio) ---------- */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fuentes/roboto-latin-variable.woff2) format("woff2"); }
@font-face { font-family: "Roboto Reserva"; src: local("Arial"), local("ArialMT"); size-adjust: 100%; }

/* ---------- tokens ---------- */
:root {
  --color-primary: #004e98;
  --color-primary-deep: #062c57;
  --color-primary-ink: #041e3d;
  --color-on-primary: #ffffff;
  --color-secondary: #006cd1;
  --color-accent: #ff6700;
  --color-accent-hover: #e65c00;
  --color-on-accent: #0f1b2d;
  --color-neutral: #f3f6fa;
  --color-surface: #ffffff;
  --color-on-surface: #1f2937;
  --color-muted: #4b5563;
  --color-line: #dde4ee;
  --color-whatsapp: #11803f;
  --color-error: #b3261e;
  --color-tinte: #e8f0fa;          /* fondo de los íconos (azul de marca muy claro) */
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-full: 9999px;
  --sombra: 0 10px 30px rgba(6, 44, 87, .08);
  --sombra-alta: 0 18px 40px rgba(6, 44, 87, .14);

  --fuente: "Roboto", "Roboto Reserva", Arial, sans-serif;
  --contenedor: 75rem;
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --sec: clamp(4rem, 2.5rem + 4.5vw, 6.5rem);
  --t-display: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --t-titulo: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  --t-sub: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --t-texto: 1.0625rem;
  --t-nota: .9375rem;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --z-cab: 30;
  --z-flotante: 40;
  --alto-cab: 5rem;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cab) + 1rem); }
body { margin: 0; min-width: 0; background: var(--color-surface); color: var(--color-on-surface);
  font: 400 var(--t-texto)/1.7 var(--fuente); }
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
iframe { max-width: 100%; border: 0; }
button, input, textarea, select { font: inherit; }
p, li, dd, a { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; overflow-wrap: normal; text-wrap: balance; }
p { margin: 0; }
a { color: var(--color-secondary); text-underline-offset: .18em; }
a:hover { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.c-ico { width: 1.25em; height: 1.25em; flex: none; }
.c-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-saltar { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; background: var(--color-surface);
  color: var(--color-primary-deep); font-weight: 600; }
.c-saltar:focus { top: 1rem; }
.c-contenedor { width: min(calc(100% - var(--gutter) * 2), var(--contenedor)); margin-inline: auto; }

/* ---------- títulos y textos ---------- */
.c-h1, .c-cabpag__titulo { font-size: var(--t-display); line-height: 1.12; }
.c-h2 { font-size: var(--t-titulo); line-height: 1.18; color: var(--color-primary); }
.c-h3 { font-size: var(--t-sub); font-weight: 600; line-height: 1.3; color: var(--color-primary-deep); }
.c-h4, .c-h5, .c-h6 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--color-primary-deep); }
/* títulos que el contenido trae en mayúsculas: más chicos, sin cambiar el texto */
.c-h1.c-mayus, .c-h2.c-mayus { font-size: calc(var(--t-titulo) * .78); letter-spacing: .01em; }
.c-h3.c-mayus, .c-h4.c-mayus { font-size: calc(var(--t-sub) * .82); letter-spacing: .02em; }
.c-sub { font-size: var(--t-sub); font-weight: 600; line-height: 1.35; color: var(--color-secondary); }
.c-lead { font-size: 1.1875rem; line-height: 1.6; color: var(--color-muted); max-width: 60ch; }
.c-num { font-size: var(--t-sub); font-weight: 700; color: var(--color-accent); }
.c-texto { max-width: 70ch; color: var(--color-on-surface); }
.c-texto > * + * { margin-top: 1em; }
.c-texto ul, .c-texto ol { padding-left: 1.2em; }
.c-texto li + li { margin-top: .35em; }
.c-mas summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: .5rem; cursor: pointer;
  color: var(--color-secondary); font-weight: 600; list-style: none; }
.c-mas summary::-webkit-details-marker { display: none; }
.c-mas summary::after { content: "+"; font-size: 1.4em; line-height: 1; }
.c-mas[open] summary::after { content: "−"; }
.c-mas[open] summary { margin-bottom: .75rem; }
.c-pila { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* raya naranja bajo los títulos principales de cada bloque */
.c-sec__cab > .c-h2::after, .c-intro .c-h2::after, .c-dividida__texto .c-h2:first-of-type::after,
.c-sec--zonas .c-h2::after, .c-banda--foto .c-h2::after {
  content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .9rem; border-radius: 2px; background: var(--color-accent); }

/* ---------- botones ---------- */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem;
  padding: .8rem 1.5rem; border: 2px solid transparent; border-radius: var(--rounded-sm);
  font: 600 .9375rem/1.2 var(--fuente); letter-spacing: .03em; text-transform: uppercase; text-align: center;
  text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--curva), box-shadow .25s; }
.c-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(6, 44, 87, .16); }
.c-btn:active { transform: translateY(0); }
.c-btn--wa { background: var(--color-accent); color: var(--color-on-accent); }
.c-btn--wa:hover, .c-btn--wa:focus-visible { background: var(--color-accent-hover); color: var(--color-on-accent); }
.c-btn--tel, .c-btn--linea { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.c-btn--tel:hover, .c-btn--linea:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.c-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.c-acciones--centro { justify-content: center; margin-top: 2.5rem; }
.c-pila > .c-acciones, .c-dividida__texto > .c-acciones { margin-top: .5rem; }
@media (width < 30rem) { .c-acciones .c-btn { flex: 1 1 100%; } .c-btn { padding-inline: 1rem; font-size: .875rem; letter-spacing: .02em; } }
/* botones en columnas angostas (menú y pie): una sola línea */
.c-panel__cta .c-btn, .c-pie .c-btn { width: 100%; padding-inline: .9rem; font-size: .8125rem; letter-spacing: .02em; }

/* ---------- barra superior ---------- */
.c-topbar { display: none; background: var(--color-primary-deep); color: var(--color-on-primary); font-size: .875rem; }
.c-topbar a { color: inherit; text-decoration: none; }
.c-topbar a:hover { text-decoration: underline; }
.c-topbar__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.c-topbar ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.c-topbar li, .c-topbar li > a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; }
.c-topbar .c-ico { width: 1rem; height: 1rem; opacity: .85; }
.c-topbar__acciones { font-weight: 600; }
@media (width >= 64rem) { .c-topbar { display: block; } }
@media (width >= 64rem) and (width < 75rem) { .c-topbar__datos li:nth-child(2) { display: none; } }

/* ---------- cabecera ---------- */
.c-cabecera { position: sticky; top: 0; z-index: var(--z-cab); background: var(--color-surface); color: var(--color-primary);
  border-bottom: 1px solid var(--color-line); transition: box-shadow .3s; }
.c-cabecera--sombra { box-shadow: 0 8px 24px rgba(6, 44, 87, .1); border-bottom-color: transparent; }
.c-cabecera__fila { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }
.c-logo { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; color: var(--color-primary);
  text-decoration: none; }
.c-logo img { width: 2.9rem; height: auto; }
.c-logo__marca--blanca { display: none; }
.c-logo__texto { font: 800 1.0625rem/1.05 var(--fuente); text-transform: uppercase; letter-spacing: .01em; color: var(--color-primary-deep); }
.c-logo:hover { color: var(--color-primary); }
.c-cabecera__cta { display: none; }
.c-menu-boton { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .5rem 1rem;
  border: 2px solid var(--color-primary); border-radius: var(--rounded-sm); background: transparent; color: var(--color-primary);
  font-weight: 600; cursor: pointer; }
.c-menu-boton[aria-expanded="true"] { background: var(--color-primary); color: var(--color-on-primary); }

/* menú de celular y tableta: a todo el ancho, debajo de la cabecera */
.c-nav { display: none; }
.c-nav--abierto { display: block; position: fixed; left: 0; right: 0; top: var(--alto-cab); bottom: 0; z-index: var(--z-cab);
  overflow-y: auto; overscroll-behavior: contain; background: var(--color-surface); color: var(--color-on-surface); padding: .5rem var(--gutter) 6rem; }
.c-nav__lista { list-style: none; margin: 0; padding: 0; }
.c-nav__lista > li { border-bottom: 1px solid var(--color-line); }
.c-nav__enlace { display: flex; align-items: center; min-height: 3.5rem; color: var(--color-primary-deep); font-size: 1.125rem; font-weight: 600;
  text-decoration: none; }
.c-nav__enlace[aria-current="page"] { color: var(--color-primary); }
.c-nav__desplegable { display: flex; flex-wrap: wrap; align-items: center; }
.c-nav__desplegable > .c-nav__enlace { flex: 1; }
.c-nav__abrir { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: var(--rounded-sm);
  background: var(--color-neutral); color: var(--color-primary); cursor: pointer; }
.c-nav__abrir .c-ico { transition: transform .25s; }
.c-nav__abrir[aria-expanded="true"] .c-ico, .c-nav__desplegable--abierto .c-nav__abrir .c-ico { transform: rotate(180deg); }
.c-panel { display: none; flex-basis: 100%; padding: .25rem 0 1rem; }
.c-nav__desplegable--abierto .c-panel { display: block; }
.c-panel__marco { display: grid; gap: 1.25rem; }
.c-panel__rejilla { display: grid; gap: 1rem; }
.c-panel__cat { display: flex; align-items: center; min-height: 2.75rem; color: var(--color-primary); font-weight: 700; font-size: 1rem;
  text-decoration: none; }
.c-panel__grupo ul { list-style: none; margin: 0; padding: 0; }
.c-panel__grupo li a { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding-left: 1.1rem;
  color: var(--color-on-surface); text-decoration: none; line-height: 1.3; }
.c-panel__grupo li a::before { content: ""; position: absolute; left: .1rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem;
  border: solid var(--color-secondary); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.c-panel__grupo a:hover { color: var(--color-primary); }
.c-panel__cta { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: var(--rounded-md);
  background: var(--color-primary); color: var(--color-on-primary); }
.c-panel__cta p { font-size: var(--t-nota); line-height: 1.5; }
.c-panel__cta-titulo { font-size: 1.125rem !important; font-weight: 700; }
.c-panel__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--color-on-primary);
  font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.c-panel__tel:hover { color: var(--color-on-primary); text-decoration: underline; }
.c-panel__todos { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--color-on-primary); font-weight: 600;
  text-decoration: none; }
.c-panel__todos:hover { color: var(--color-on-primary); text-decoration: underline; }
.c-panel__cta .c-btn { width: 100%; }
html.c-sin-scroll { overflow: hidden; }

@media (width >= 64rem) {
  .c-menu-boton { display: none; }
  .c-cabecera__fila { align-items: stretch; min-height: 5.25rem; }
  .c-logo, .c-cabecera__cta { align-self: center; }
  .c-cabecera__cta { display: inline-flex; min-height: 2.875rem; padding: .65rem 1.2rem; }
  .c-nav, .c-nav--abierto { display: block; position: static; padding: 0; overflow: visible; background: none; color: inherit; }
  .c-nav__lista { display: flex; align-items: stretch; height: 100%; gap: .25rem; }
  .c-nav__lista > li { display: flex; align-items: center; border: 0; }
  .c-nav__enlace { position: relative; min-height: 3rem; padding: 0 .85rem; color: var(--color-primary); font-size: 1rem; font-weight: 600; }
  .c-nav__enlace:hover { color: var(--color-secondary); }
  .c-nav__enlace[aria-current="page"]::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .1rem; height: 3px;
    border-radius: 2px; background: var(--color-accent); }
  /* el desplegable ocupa todo el alto de la cabecera: el mouse baja al panel sin cruzar un hueco */
  .c-nav__desplegable { position: static; flex-wrap: nowrap; }
  .c-nav__abrir { width: 2rem; height: 3rem; margin-left: -.6rem; background: none; color: inherit; }
  .c-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 0; border-top: 3px solid var(--color-accent);
    border-radius: 0 0 var(--rounded-md) var(--rounded-md); background: var(--color-surface); color: var(--color-on-surface);
    box-shadow: 0 24px 48px rgba(6, 44, 87, .18); }
  .c-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.5rem; }
  .c-panel__marco { grid-template-columns: minmax(0, 1fr) 17rem; gap: 2rem; padding: 2rem; }
  /* las categorías en tres columnas parejas, una debajo de otra */
  .c-panel__rejilla { display: block; columns: 3; column-gap: 2rem; }
  .c-panel__grupo { break-inside: avoid; margin-bottom: 1.25rem; }
  .c-panel__cat { min-height: 0; padding-bottom: .45rem; margin-bottom: .35rem; border-bottom: 2px solid var(--color-line); }
  .c-panel__grupo li a { min-height: 0; padding-block: .3rem; font-size: .9375rem; }
  .c-nav__desplegable--abierto .c-panel { display: block; animation: c-baja .25s var(--curva); }
}
@keyframes c-baja { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- portada (hero) ---------- */
.c-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(30rem, 72svh, 44rem); padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--color-primary-deep); color: var(--color-on-primary); }
.c-hero__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.c-hero--foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 44, 87, .92) 0%, rgba(6, 44, 87, .78) 40%, rgba(6, 44, 87, .35) 75%, rgba(6, 44, 87, .2) 100%); }
@media (width < 48rem) { .c-hero--foto::before { background: rgba(6, 44, 87, .78); } }
.c-hero__rejilla { display: grid; gap: 2rem; align-items: center; }
.c-hero__texto { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; max-width: 46rem; }
.c-hero .c-h1, .c-hero .c-h2, .c-hero .c-h3, .c-hero .c-sub, .c-hero .c-lead, .c-hero .c-texto { color: var(--color-on-primary); }
.c-hero .c-h1 { font-size: var(--t-display); }
.c-hero .c-h1.c-mayus { font-size: calc(var(--t-display) * .8); letter-spacing: .01em; }
.c-hero .c-texto, .c-hero .c-lead { max-width: 40rem; font-size: 1.1875rem; line-height: 1.6; opacity: .95; }
.c-hero .c-acciones { margin-top: .75rem; }
.c-hero .c-btn--tel, .c-hero .c-btn--linea { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.c-hero .c-btn--tel:hover, .c-hero .c-btn--linea:hover { background: var(--color-on-primary); color: var(--color-primary-deep); }
.c-hero__media { min-width: 0; }
.c-hero__media img { width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--rounded-md); }
@media (width >= 60rem) { .c-hero__rejilla:has(.c-hero__media) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* datos bajo la portada: tarjetas blancas que montan sobre el borde de la foto */
.c-datos { position: relative; z-index: 2; margin-top: -3rem; }
.c-datos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (width >= 64rem) { .c-datos { margin-top: -3.75rem; } .c-datos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.c-datos__lista li { display: flex; align-items: center; gap: .9rem; min-width: 0; padding: 1.1rem; border-radius: var(--rounded-md);
  background: var(--color-surface); box-shadow: var(--sombra-alta); }
@media (width >= 64rem) { .c-datos__lista li { padding: 1.4rem 1.5rem; } }
@media (width < 30rem) { .c-datos__lista li { flex-direction: column; align-items: flex-start; gap: .6rem; } }
.c-datos__ico, .c-celda__ico { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--rounded-md);
  background: var(--color-tinte); color: var(--color-primary); }
.c-datos__ico .c-ico, .c-celda__ico .c-ico { width: 1.5rem; height: 1.5rem; }
.c-datos__txt { display: flex; flex-direction: column; min-width: 0; }
.c-datos__txt strong { color: var(--color-primary-deep); font-size: 1.0625rem; line-height: 1.3; }
.c-datos__txt > span { color: var(--color-muted); font-size: .875rem; line-height: 1.4; }
.c-datos__txt a { color: inherit; text-decoration: none; white-space: nowrap; }

/* cabecera de página interior (artículos, blog) */
.c-cabpag { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(18rem, 42svh, 26rem);
  padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--color-primary-deep); color: var(--color-on-primary); }
.c-cabpag__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.c-cabpag:has(.c-cabpag__fondo)::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 44, 87, .92) 0%, rgba(6, 44, 87, .75) 55%, rgba(6, 44, 87, .45) 100%); }
.c-cabpag__titulo { max-width: 28ch; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.c-cabpag__meta { margin-top: 1rem; font-size: var(--t-nota); opacity: .9; }
.c-cabpag a { color: var(--color-on-primary); }
.c-migas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: var(--t-nota); font-weight: 500; }
.c-migas a { display: inline-flex; align-items: center; min-height: 2rem; }

/* ---------- secciones ---------- */
.c-sec { padding-block: var(--sec); }
.c-sec--alt { background: var(--color-neutral); }
.c-sec__cab { display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 50rem; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center; }
.c-sec__cab > .c-h2::after { margin-inline: auto; }
.c-sec__cab .c-lead { margin-inline: auto; }
.c-fila { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.c-fila > * { min-width: 0; }
/* en las filas los títulos siguen el ancho de su columna: «departamentos» o «Revestimientos» no se parten */
.c-fila > * { container-type: inline-size; }
.c-fila .c-h2 { font-size: clamp(1.125rem, 9cqi, var(--t-titulo)); }
.c-fila .c-h3 { font-size: clamp(1rem, 8.5cqi, var(--t-sub)); }
@media (width >= 48rem) {
  .c-fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .c-fila--3, .c-fila--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}
.c-fila--tarjetas > * { height: 100%; padding: 1.75rem; border-radius: var(--rounded-md); background: var(--color-surface); box-shadow: var(--sombra); }
.c-fila--tarjetas .c-num { order: -1; }

/* foto con el texto al lado: la foto dentro del contenedor, con un bloque azul desplazado detrás */
.c-dividida { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.c-dividida__texto { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; container-type: inline-size; }
.c-dividida__texto .c-h2 { font-size: clamp(1.25rem, 8.5cqi, var(--t-titulo)); }
.c-dividida__media { position: relative; min-width: 0; padding: 0 1rem 1rem 0; }
.c-dividida__media::before { content: ""; position: absolute; right: 0; bottom: 0; width: 72%; height: 78%; z-index: 0;
  border-radius: var(--rounded-md); background: var(--color-primary); }
.c-dividida__media > * { position: relative; z-index: 1; }
.c-dividida__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rounded-md); }
.c-dividida__media .c-img + .c-img { margin-top: 1rem; }
.c-dividida__media .c-galeria { gap: .75rem; }
@media (width >= 60rem) {
  .c-dividida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .c-dividida--inv .c-dividida__media { order: -1; padding: 0 0 1rem 1rem; }
  .c-dividida--inv .c-dividida__media::before { right: auto; left: 0; }
}
.c-pila:has(> .c-dividida) { gap: clamp(4rem, 7vw, 6rem); }
.c-img { margin: 0; overflow: hidden; border-radius: var(--rounded-md); }
.c-img img { width: 100%; }
.c-img figcaption { margin-top: .5rem; color: var(--color-muted); font-size: var(--t-nota); }
.c-galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.c-galeria img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--curva); }
.c-galeria .c-img:hover img { transform: scale(1.04); }

/* servicios de la portada: tarjetas blancas */
.c-servicios { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.c-servicio { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rounded-md); background: var(--color-surface);
  box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s; }
.c-sec:not(.c-sec--alt) .c-servicio { border: 1px solid var(--color-line); }
.c-servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.c-servicio__foto { display: block; overflow: hidden; }
.c-servicio__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--curva); }
.c-servicio:hover .c-servicio__foto img { transform: scale(1.05); }
.c-servicio__cuerpo { display: flex; flex: 1; flex-direction: column; gap: .85rem; padding: 1.5rem; }
.c-servicio__titulo { font-size: 1.3125rem; line-height: 1.25; }
.c-servicio__titulo a { color: var(--color-primary); text-decoration: none; }
.c-servicio__titulo a:hover { color: var(--color-secondary); }
.c-servicio__lista { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.c-servicio__lista a { position: relative; display: flex; align-items: center; min-height: 2.25rem; padding-left: 1.1rem; color: var(--color-on-surface);
  font-size: .9688rem; text-decoration: none; }
.c-servicio__lista a::before, .c-pie .c-lista li::before { content: ""; position: absolute; left: .1rem; top: 50%; width: .4rem; height: .4rem;
  margin-top: -.2rem; border: solid var(--color-secondary); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.c-servicio__lista a:hover { color: var(--color-primary); }
.c-servicio__cuerpo > p { color: var(--color-muted); font-size: .9688rem; }
.c-servicio__mas { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: auto; color: var(--color-accent-hover);
  font-weight: 700; font-size: .875rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.c-servicio__mas:hover { color: var(--color-primary); }
.c-servicio__mas .c-ico { transition: transform .25s; }
.c-servicio__mas:hover .c-ico { transform: translateX(4px); }

/* tarjetas de servicios de las páginas internas (foto + título) */
.c-tarjetas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.c-tarjeta { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rounded-md); background: var(--color-surface);
  box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s; container-type: inline-size; }
.c-sec:not(.c-sec--alt) .c-tarjeta { border: 1px solid var(--color-line); }
.c-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.c-tarjeta .c-img { border-radius: 0; }
.c-tarjeta .c-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--curva); }
.c-tarjeta:hover .c-img img { transform: scale(1.05); }
.c-tarjeta__titulo { position: relative; padding: 1.1rem 1.25rem 1.25rem; font-size: clamp(1rem, 8cqi, 1.1875rem); line-height: 1.3; color: var(--color-primary); }
.c-tarjeta__titulo a { color: inherit; text-decoration: none; }
.c-tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.c-tarjeta { position: relative; }
.c-tarjeta__titulo a:focus-visible { outline: none; }
.c-tarjeta:has(a:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* datos del distrito (dirección, costo, visitas, cobertura): tarjetas con ícono */
.c-sec--celdas { background: var(--color-neutral); }
.c-celdas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.c-celda { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem; border-radius: var(--rounded-md);
  border-top: 3px solid var(--color-primary); background: var(--color-surface); box-shadow: var(--sombra); container-type: inline-size; }
.c-celdas .c-celda > :nth-child(2) { color: var(--color-primary-deep); font-size: clamp(1rem, 9cqi, 1.1875rem); line-height: 1.3; }
.c-celdas .c-texto { color: var(--color-muted); font-size: .9688rem; }

/* obras de la portada: una foto grande y dos más pequeñas */
.c-obras { display: grid; gap: 1rem; }
@media (width >= 60rem) { .c-obras { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; } .c-obra--1 { grid-row: 1 / 3; } }
.c-obra { position: relative; isolation: isolate; margin: 0; overflow: hidden; min-height: 17rem; border-radius: var(--rounded-md); color: var(--color-on-primary); }
.c-obra img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.c-obra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 44, 87, .85), rgba(6, 44, 87, 0) 60%); }
.c-obra:hover img { transform: scale(1.05); }
.c-obra figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
@media (width >= 60rem) { .c-obra--1 { min-height: 34rem; } }
.c-pila--sola { max-width: 52rem; }

/* ventajas */
.c-ventajas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.c-ventaja { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--rounded-md); border-left: 3px solid var(--color-accent);
  background: var(--color-neutral); container-type: inline-size; }
.c-sec--alt .c-ventaja { background: var(--color-surface); box-shadow: var(--sombra); }
.c-ventaja__titulo { font-size: clamp(1rem, 8.5cqi, 1.1875rem); font-weight: 700; line-height: 1.3; color: var(--color-primary-deep); }
.c-ventaja__texto { color: var(--color-muted); font-size: .9688rem; }

/* listas con visto */
.c-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.c-lista li { position: relative; padding-left: 1.6rem; }
.c-lista li::before { content: ""; position: absolute; left: .15rem; top: .32em; width: .45em; height: .8em;
  border: solid var(--color-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.c-lista a { display: inline-flex; align-items: center; min-height: 2rem; }

/* distritos: rejilla de enlaces con ícono de ubicación */
.c-sec--zonas { background: var(--color-neutral); }
.c-sec--zonas .c-h2 { text-align: center; }
.c-sec--zonas .c-h2::after { margin-inline: auto; }
.c-sec--zonas .c-contenedor > .c-sub, .c-sec--zonas .c-sec__cab { text-align: center; }
/* todas las listas de distritos forman una sola rejilla pareja (2 columnas en el celular) */
.c-zonas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); margin-top: 2rem; }
@media (width >= 48rem) { .c-zonas { gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); } }
.c-zonas > :not(.c-lista) { grid-column: 1 / -1; }
.c-zonas > .c-h2:first-child { margin-bottom: 1.25rem; }
.c-zonas .c-lista { display: contents; }
.c-zonas .c-lista li { padding: 0; }
.c-zonas .c-lista li::before { content: none; }
.c-zonas .c-lista a, .c-zonas .c-lista li:not(:has(a)) { display: flex; align-items: center; gap: .5rem; min-height: 3rem; height: 100%; padding: .55rem .8rem;
  border: 1px solid var(--color-line); border-radius: var(--rounded-md); background: var(--color-surface); color: var(--color-primary-deep);
  font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .2s, color .2s, box-shadow .2s, transform .2s var(--curva); }
.c-zonas .c-lista a::before, .c-zonas .c-lista li:not(:has(a))::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: var(--color-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.c-zonas .c-lista a:hover { border-color: var(--color-secondary); color: var(--color-primary); box-shadow: var(--sombra); transform: translateY(-2px); }

/* preguntas frecuentes junto a una foto */
.c-faq-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (width >= 60rem) { .c-faq-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.c-faq-split__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-faq-split .c-fila { grid-template-columns: 1fr; }
/* bloque de texto con título: centrado */
.c-intro { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 52rem; margin-inline: auto; text-align: center; }
.c-intro > .c-sec__cab { margin-bottom: 0; }
.c-intro .c-texto { margin-inline: auto; font-size: 1.125rem; }
.c-intro .c-sub { font-size: 1.0625rem; }
.c-faq { display: grid; gap: .75rem; }
.c-faq__item { border: 1px solid var(--color-line); border-radius: var(--rounded-md); background: var(--color-surface); }
.c-faq__item[open] { border-color: var(--color-secondary); box-shadow: var(--sombra); }
.c-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__q { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--color-primary-deep); }
.c-faq__item summary .c-ico { color: var(--color-secondary); transition: transform .3s; }
.c-faq__item[open] summary .c-ico { transform: rotate(180deg); }
.c-faq__r { padding: 0 1.25rem 1.25rem; color: var(--color-on-surface); }

/* bandas de color, banda con foto de fondo y cierre */
.c-banda { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); background: var(--color-primary);
  color: var(--color-on-primary); }
.c-banda .c-contenedor { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.c-banda .c-h2, .c-banda .c-h3, .c-banda .c-sub, .c-banda .c-lead, .c-banda .c-texto, .c-banda__titulo { color: var(--color-on-primary); }
.c-banda__titulo { max-width: 26ch; font-size: var(--t-titulo); font-weight: 700; line-height: 1.18; }
.c-banda .c-lead { max-width: 58ch; opacity: .95; }
.c-banda .c-btn--tel, .c-banda .c-btn--linea { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.c-banda .c-btn--tel:hover, .c-banda .c-btn--linea:hover { background: var(--color-on-primary); color: var(--color-primary); }
.c-banda__fondo { position: absolute; inset: 0; z-index: -2; }
.c-banda__fondo img { width: 100%; height: 100%; object-fit: cover; }
.c-banda--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 44, 87, .82); }
.c-banda--foto { min-height: clamp(22rem, 50svh, 30rem); display: flex; align-items: center; }
.c-banda--foto .c-contenedor { align-items: center; text-align: center; }
.c-banda--foto .c-acciones { justify-content: center; }
.c-banda--foto .c-h2::after { margin-inline: auto; }
/* banda azul sin foto: centrada, como las demás */
.c-banda--cta:not(.c-banda--cierre) .c-contenedor { align-items: center; text-align: center; }
.c-banda--cta:not(.c-banda--cierre) .c-acciones { justify-content: center; }
.c-banda--cta:not(.c-banda--cierre) .c-lead, .c-banda--cta:not(.c-banda--cierre) .c-texto { margin-inline: auto; }
.c-banda--cierre { background: var(--color-primary-deep); }
.c-banda--cierre.c-banda--foto { min-height: 0; }
.c-banda--cierre.c-banda--foto .c-contenedor { align-items: flex-start; text-align: left; }
.c-banda--cierre.c-banda--foto .c-acciones { justify-content: flex-start; }
.c-banda--cierre.c-banda--foto::before { background: linear-gradient(90deg, rgba(6, 44, 87, .95) 0%, rgba(6, 44, 87, .85) 55%, rgba(6, 44, 87, .6) 100%); }
.c-tira { display: none; }

/* cotizador */
.c-cotizador { display: grid; gap: .75rem; width: 100%; max-width: 56rem; margin-top: .5rem; }
@media (width >= 48rem) { .c-cotizador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; } }
.c-cotizador label { display: grid; gap: .35rem; font-size: var(--t-nota); font-weight: 600; }
.c-cotizador select { width: 100%; min-height: 3.25rem; padding: .7rem 1rem; border: 0; border-radius: var(--rounded-sm);
  background: var(--color-surface); color: var(--color-on-surface); font-size: 1rem; }

/* blog */
.c-posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.c-post { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rounded-md); background: var(--color-surface);
  box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s; }
.c-sec:not(.c-sec--alt) .c-post { border: 1px solid var(--color-line); }
.c-post:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.c-post__foto { display: block; overflow: hidden; }
.c-post__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--curva); }
.c-post:hover .c-post__foto img { transform: scale(1.05); }
.c-post__cuerpo { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.25rem 1.4rem 1.4rem; }
.c-post__titulo { font-size: 1.1875rem; line-height: 1.3; }
.c-post__titulo a { color: var(--color-primary-deep); text-decoration: none; }
.c-post__titulo a:hover { color: var(--color-primary); }
.c-post p { color: var(--color-muted); font-size: .9688rem; }
.c-post__mas { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; margin-top: auto; color: var(--color-accent-hover);
  font-weight: 700; font-size: .875rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.c-post__mas:hover { color: var(--color-primary); }
.c-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: 3rem; }
.c-paginacion__actual { color: var(--color-muted); font-weight: 600; }

/* artículo */
.c-articulo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.c-articulo__lado { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (width >= 64rem) {
  .c-articulo { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .c-articulo__lado { position: sticky; top: calc(var(--alto-cab) + 1.5rem); }
}
.c-prosa { min-width: 0; max-width: 72ch; font-size: 1.125rem; line-height: 1.75; }
.c-prosa > * + * { margin-top: 1.1em; }
.c-prosa h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); color: var(--color-primary); }
.c-prosa h3 { margin-top: 1.7em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem); font-weight: 600; color: var(--color-primary-deep); }
.c-prosa h4 { margin-top: 1.5em; font-size: 1.1875rem; font-weight: 600; }
.c-prosa ul, .c-prosa ol { padding-left: 1.3em; }
.c-prosa li + li { margin-top: .4em; }
.c-prosa figure { margin-inline: 0; }
.c-prosa img { margin-inline: auto; border-radius: var(--rounded-md); }
.c-prosa figcaption { margin-top: .6rem; color: var(--color-muted); font-size: var(--t-nota); }
.c-prosa blockquote { margin-inline: 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--color-secondary); border-radius: var(--rounded-sm); background: var(--color-neutral); }
.c-prosa table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.c-prosa th, .c-prosa td { padding: .75rem .85rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.c-prosa th { background: var(--color-neutral); color: var(--color-primary-deep); font-weight: 700; }
.c-prosa caption { padding-bottom: .5rem; text-align: left; color: var(--color-muted); font-size: var(--t-nota); }
.c-tabla, .c-prosa .wp-block-table { overflow-x: auto; }
.c-tabla table { min-width: 32rem; }
.c-prosa p:empty { display: none; }
.c-prosa .c-faq { margin-top: 1rem; }
.c-prosa .c-faq__q { font-size: 1.0625rem; margin: 0; }
.c-portada { margin: 0 0 1.75rem; }
.c-portada img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rounded-md); }
.c-nota { padding: 1.25rem 1.5rem; border-left: 4px solid var(--color-accent); border-radius: var(--rounded-sm); background: var(--color-neutral); }
.c-fuentes { font-size: var(--t-nota); color: var(--color-muted); }
.c-indice { padding: 1.5rem; border-radius: var(--rounded-md); background: var(--color-neutral); }
.c-indice__titulo { margin-bottom: .6rem; color: var(--color-primary); font-weight: 700; font-size: 1.0625rem; }
.c-indice ol, .c-indice ul { margin: 0; padding-left: 1.2em; font-size: var(--t-nota); }
.c-indice li + li { margin-top: .35rem; }
.c-indice a { color: var(--color-on-surface); }
.c-tarjeta-cta { padding: 1.75rem; border-radius: var(--rounded-md); background: var(--color-primary); color: var(--color-on-primary); }
.c-tarjeta-cta__titulo { margin-bottom: .6rem; font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.c-tarjeta-cta .c-acciones { margin-top: 1.25rem; }
.c-tarjeta-cta .c-btn { flex: 1 1 100%; }
.c-tarjeta-cta .c-btn--tel { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.c-tarjeta-cta .c-btn--tel:hover { background: var(--color-on-primary); color: var(--color-primary); }

/* ---------- pie ---------- */
.c-pie { background: var(--color-primary-deep); color: var(--color-on-primary); font-size: .9688rem; }
.c-pie a { color: var(--color-on-primary); text-decoration: none; }
.c-pie a:hover { color: var(--color-on-primary); text-decoration: underline; }
.c-pie__rejilla { display: grid; gap: 2.5rem 2rem; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (width >= 64rem) { .c-pie__rejilla { grid-template-columns: 1.35fr 1fr 1fr 1fr; } }
.c-pie__marca { display: flex; flex-direction: column; gap: 1rem; }
.c-pie__marca > p { opacity: .85; line-height: 1.6; }
.c-pie .c-logo { color: var(--color-on-primary); }
.c-pie .c-logo__texto { color: var(--color-on-primary); }
.c-pie__titulo { position: relative; margin-bottom: 1.25rem; padding-bottom: .75rem; font-size: 1.0625rem; font-weight: 700; }
.c-pie__titulo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--color-accent); }
.c-pie .c-lista { gap: .15rem; }
.c-pie .c-lista li { padding-left: 1.1rem; }
.c-pie .c-lista li::before { left: .05rem; }
.c-pie__contacto { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.c-pie__contacto li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.c-pie__contacto .c-ico { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: #8fbff0; }
.c-pie__contacto a { display: inline-flex; align-items: center; min-height: 1.75rem; }
.c-pie__legal { padding-block: 1.25rem 6rem; background: var(--color-primary-ink); font-size: .875rem; }
@media (width >= 64rem) { .c-pie__legal { padding-bottom: 1.25rem; } }
.c-pie__legal .c-contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.c-pie__legal a { display: inline-flex; align-items: center; min-height: 2rem; }
.c-pie__nombre { display: none; }

/* ---------- botón flotante de WhatsApp ---------- */
.c-wa { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-flotante); display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: var(--rounded-full); background: var(--color-whatsapp); color: var(--color-on-primary);
  box-shadow: 0 10px 28px rgba(6, 44, 87, .35); transition: transform .25s var(--curva); }
.c-wa .c-ico { width: 32px; height: 32px; }
.c-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-wa:hover, .c-wa:focus-visible { color: var(--color-on-primary); transform: scale(1.06); }
@media (width >= 64rem) and (hover: hover) {
  .c-wa span { right: 74px; width: auto; height: auto; clip: auto; overflow: visible; padding: .55rem .85rem; border-radius: var(--rounded-sm);
    background: var(--color-primary-deep); color: var(--color-on-primary); font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .c-wa:hover span, .c-wa:focus-visible span { opacity: 1; }
}

/* ---------- movimiento ---------- */
.c-anim .c-hero__fondo, .c-anim .c-cabpag__fondo { animation: c-asienta 6s ease-out both; }
@keyframes c-asienta { from { transform: scale(1.08); } to { transform: scale(1); } }
.c-anim .c-hero__texto > *, .c-anim .c-cabpag .c-contenedor > * { animation: c-sube .8s var(--curva) both; }
.c-anim .c-hero__texto > :nth-child(2), .c-anim .c-cabpag .c-contenedor > :nth-child(2) { animation-delay: .1s; }
.c-anim .c-hero__texto > :nth-child(3), .c-anim .c-cabpag .c-contenedor > :nth-child(3) { animation-delay: .2s; }
.c-anim .c-hero__texto > :nth-child(n+4) { animation-delay: .3s; }
.c-anim .c-datos__lista li { animation: c-sube .8s var(--curva) both; }
.c-anim .c-datos__lista li:nth-child(2) { animation-delay: .1s; }
.c-anim .c-datos__lista li:nth-child(3) { animation-delay: .2s; }
.c-anim .c-datos__lista li:nth-child(4) { animation-delay: .3s; }
@keyframes c-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* entrada de cada bloque al aparecer (solo si el script está activo: sin él, todo se ve) */
.c-anim [data-entra] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.c-anim [data-entra].c-visible { opacity: 1; transform: none; }

/* ---------- páginas propias (contacto, nosotros, servicios, legales) ---------- */
.ts-pagina { color: var(--color-on-surface); }
.ts-banda { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(20rem, 48svh, 28rem); padding: clamp(3rem, 6vw, 4.5rem) max(var(--gutter), calc((100vw - var(--contenedor)) / 2));
  background: var(--color-primary-deep); color: var(--color-on-primary); }
.ts-banda--foto { background: linear-gradient(90deg, rgba(6, 44, 87, .92) 0%, rgba(6, 44, 87, .75) 55%, rgba(6, 44, 87, .45) 100%),
  var(--ts-foto) center / cover no-repeat, var(--color-primary-deep); }
.ts-banda h1 { max-width: 24ch; margin: 0 0 1rem; color: var(--color-on-primary); font-size: min(var(--t-display), 9.5vw); line-height: 1.12; }
.ts-banda p { max-width: 50ch; font-size: 1.1875rem; line-height: 1.55; }
.ts-contenedor { width: min(calc(100% - var(--gutter) * 2), var(--contenedor)); margin-inline: auto; padding-block: var(--sec); }
.ts-contenedor h2 { margin-bottom: 1.25rem; font-size: var(--t-titulo); color: var(--color-primary); }
.ts-contenedor h3 { margin-bottom: .6rem; font-size: var(--t-sub); font-weight: 600; color: var(--color-primary-deep); }
.ts-contenedor p + p { margin-top: 1em; }
.ts-rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ts-tarjeta { padding: 1.75rem; border-radius: var(--rounded-md); background: var(--color-surface); box-shadow: var(--sombra); border: 1px solid var(--color-line); }
.ts-tarjeta h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); }
.ts-gris .ts-tarjeta { border-color: transparent; }
.ts-tarjeta ul { margin: .75rem 0 0; padding-left: 1.1rem; }
.ts-tarjeta li + li { margin-top: .35rem; }
.ts-tarjeta a { font-weight: 600; }
/* tarjetas de servicios (servicios y nosotros): título y enlaces sin subrayado, con flecha */
.ts-tarjeta h3 a { color: var(--color-primary); text-decoration: none; }
.ts-tarjeta h3 a:hover { color: var(--color-secondary); }
.ts-tarjeta h3 + ul { list-style: none; padding-left: 0; }
.ts-tarjeta h3 + ul li { position: relative; padding-left: 1.1rem; }
.ts-tarjeta h3 + ul li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .4rem; height: .4rem;
  border: solid var(--color-secondary); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.ts-tarjeta h3 + ul a { color: var(--color-on-surface); font-weight: 500; text-decoration: none; }
.ts-tarjeta h3 + ul a:hover { color: var(--color-primary); text-decoration: underline; }
/* «Cómo trabajamos»: los pasos como tarjetas numeradas */
.ts-gris > .ts-contenedor > ol { counter-reset: paso; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ts-gris > .ts-contenedor > ol > li { counter-increment: paso; padding: 1.5rem; border-radius: var(--rounded-md); background: var(--color-surface);
  box-shadow: var(--sombra); color: var(--color-primary-deep); font-weight: 600; line-height: 1.4; }
.ts-gris > .ts-contenedor > ol > li::before { content: counter(paso); display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  margin-bottom: .85rem; border-radius: var(--rounded-full); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.ts-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .8rem 1.5rem;
  border-radius: var(--rounded-sm); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; font-size: .9375rem;
  letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: background-color .25s, transform .25s var(--curva); }
.ts-boton:hover, .ts-boton:focus-visible { background: var(--color-accent-hover); color: var(--color-on-accent); transform: translateY(-2px); }
.ts-boton--azul { background: var(--color-on-primary); color: var(--color-primary-deep); }
.ts-boton--azul:hover, .ts-boton--azul:focus-visible { background: var(--color-neutral); color: var(--color-primary-deep); }
.ts-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ts-datos { list-style: none; margin: 0; padding: 0; }
.ts-datos li { padding: .85rem 0; }
.ts-datos li + li { border-top: 1px solid var(--color-line); }
.ts-datos a { font-weight: 600; }
.ts-gris { background: var(--color-neutral); }
.ts-centro { text-align: center; }
.ts-centro p { max-width: 60ch; margin-inline: auto; }
.ts-sub { color: var(--color-secondary); font-weight: 600; }
.ts-dos-col { display: grid; gap: 2.5rem; align-items: center; }
@media (width >= 56rem) { .ts-dos-col { grid-template-columns: 1fr 1fr; } }
.ts-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rounded-md); }
.ts-galeria { display: grid; gap: 1rem; }
.ts-galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-galeria--2 .ts-img { aspect-ratio: 1; }
.ts-galeria--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: 1.5rem; }
.ts-lista-check { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ts-lista-check li { position: relative; padding-left: 1.6rem; }
.ts-lista-check li::before { content: ""; position: absolute; left: .15rem; top: .3em; width: .45em; height: .8em;
  border: solid var(--color-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ts-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 1rem; }
.ts-cta { background: var(--color-primary); color: var(--color-on-primary); }
.ts-cta h2, .ts-cta p { color: var(--color-on-primary); }
.ts-fila { display: grid; gap: 2rem; align-items: center; margin-top: 2.5rem; }
@media (width >= 56rem) { .ts-fila { grid-template-columns: 1fr 1fr; } .ts-fila:nth-child(odd) > .ts-img { order: 2; } }
.ts-pasos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ts-pasos li { padding: 1.75rem 1.5rem; border-radius: var(--rounded-md); background: var(--color-surface); box-shadow: var(--sombra); }
.ts-pasos span { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; border-radius: var(--rounded-full);
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.ts-faq details { margin-top: .75rem; border: 1px solid var(--color-line); border-radius: var(--rounded-md); background: var(--color-surface); }
.ts-faq summary { min-height: 3.5rem; padding: 1rem 1.25rem; color: var(--color-primary-deep); font-weight: 600; cursor: pointer; }
.ts-faq details p { margin: 0; padding: 0 1.25rem 1.25rem; }
.ts-post { overflow: hidden; border-radius: var(--rounded-md); background: var(--color-surface); box-shadow: var(--sombra); }
.ts-post .ts-img { margin-bottom: .85rem; border-radius: 0; }
.ts-post > :not(.ts-img) { padding-inline: 1.25rem; }
.ts-post > :last-child { padding-bottom: 1.25rem; }
.ts-post h3 a { color: var(--color-primary-deep); text-decoration: none; }
.ts-form { display: grid; gap: 1rem; }
.ts-form label { display: block; margin-bottom: .35rem; font-weight: 600; }
.ts-form input[type=text], .ts-form input[type=tel], .ts-form input[type=email], .ts-form select, .ts-form textarea {
  width: 100%; min-width: 0; min-height: 3.25rem; padding: .75rem .9rem; border: 1px solid #9aa6b5; border-radius: var(--rounded-sm);
  background: var(--color-surface); color: var(--color-on-surface); font-size: 1rem; }
.ts-form input:focus, .ts-form select:focus, .ts-form textarea:focus { border-color: var(--color-secondary); }
.ts-form textarea { min-height: 8rem; resize: vertical; }
.ts-form .ts-check { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-nota); line-height: 1.5; }
.ts-form .ts-check input { width: 1.375rem; height: 1.375rem; margin-top: .1rem; flex: none; }
.ts-form .ts-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts-form .ts-dos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ts-form button { justify-self: start; border: 0; cursor: pointer; }
.ts-rejilla--arriba { align-items: start; }
.ts-mapa-caja { min-height: 20rem; overflow: hidden; border-radius: var(--rounded-md); background: var(--color-neutral); }
.ts-mapa { width: 100%; min-height: 20rem; }
.ts-zonas { margin-top: 1.5rem; text-align: left; }
.ts-zonas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.ts-zonas li a { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--color-line);
  border-radius: var(--rounded-md); background: var(--color-surface); color: var(--color-primary-deep); font-weight: 500; text-decoration: none; }
.ts-zonas li a:hover { border-color: var(--color-secondary); color: var(--color-primary); }
.ts-zonas p { margin: .75rem 0; color: var(--color-muted); }
.ts-nota { font-size: .875rem; color: var(--color-muted); }
.ts-legal h2 { margin-top: 2rem; }

/* ---------- movimiento reducido e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .c-anim [data-entra] { opacity: 1; transform: none; }
}
@media print {
  .c-topbar, .c-cabecera, .c-wa, .c-banda--cta, .c-articulo__lado { display: none; }
  .c-hero, .c-cabpag { min-height: 0; background: none; color: #000; }
}

/* página Servicios y «Nuestros servicios» de Nosotros: título centrado con su raya, sobre las tarjetas con foto */
.ts-contenedor > h2:has(+ .c-servicios) { margin-bottom: 2.5rem; text-align: center; }
.ts-contenedor > h2:has(+ .c-servicios)::after { content: ""; display: block; width: 3.5rem; height: 4px; margin: .9rem auto 0;
  border-radius: 2px; background: var(--color-accent); }

/* ---------- Nosotros ---------- */
/* portada corta con el texto centrado */
.ts-banda--centro { align-items: center; justify-content: center; min-height: clamp(18rem, 40svh, 24rem); text-align: center; }
.ts-banda--centro h1, .ts-banda--centro p { margin-inline: auto; }
.ts-banda--centro .ts-botones { justify-content: center; }
.ts-banda .c-migas { justify-content: center; color: var(--color-on-primary); }
.ts-banda .c-migas a { color: var(--color-on-primary); }
/* título de sección centrado con raya naranja */
.ts-titulo-raya::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .9rem; border-radius: 2px; background: var(--color-accent); }
.ts-centro .ts-titulo-raya::after, .ts-titulo-raya.ts-centro::after { margin-inline: auto; }
/* quiénes somos: foto vertical del equipo con un bloque azul detrás, y misión y visión con ícono */
.ts-quienes { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (width >= 56rem) { .ts-quienes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ts-quienes__foto { position: relative; margin: 0; padding: 0 1rem 1rem 0; max-width: 30rem; }
.ts-quienes__foto::before { content: ""; position: absolute; right: 0; bottom: 0; width: 70%; height: 75%; border-radius: var(--rounded-md); background: var(--color-primary); }
.ts-quienes__foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rounded-md); }
.ts-quienes__texto { display: grid; gap: 1.75rem; }
.ts-quienes__texto > .ts-sub { margin-bottom: -.75rem; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; }
.ts-mv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ts-mv h2 { margin-bottom: .5rem !important; font-size: 1.5rem !important; }
.ts-mv p { color: var(--color-muted); }
.ts-mv__ico, .ts-valores__ico { display: inline-grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--rounded-md);
  background: var(--color-tinte); color: var(--color-primary); }
.ts-mv__ico .c-ico, .ts-valores__ico .c-ico { width: 1.6rem; height: 1.6rem; }
/* por qué elegirnos: seis beneficios con ícono */
.ts-valores { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); margin: 2.5rem 0 0; padding: 0; list-style: none; }
.ts-valores li { display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: 1.5rem 1rem; border-radius: var(--rounded-md);
  background: var(--color-surface); box-shadow: var(--sombra); color: var(--color-primary-deep); font-weight: 600; line-height: 1.35; text-align: center; }
/* datos de la empresa en tarjetas con ícono */
.ts-datos-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 2.5rem 0 0; padding: 0; list-style: none; }
.ts-datos-rejilla li { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.1rem 1.25rem; border: 1px solid var(--color-line);
  border-radius: var(--rounded-md); background: var(--color-surface); line-height: 1.45; }
.ts-datos-rejilla li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ts-datos-rejilla strong { display: block; color: var(--color-primary-deep); }
.ts-datos-rejilla a { font-weight: 600; }
.ts-gris .ts-contenedor > .ts-titulo-raya + ol { margin-top: 2.5rem; }

/* ---------- servicios nuevos, refuerzos y distritos ---------- */
/* portada de un servicio sin foto propia: azul de marca con una retícula suave */
.c-hero--plano { min-height: clamp(22rem, 52svh, 30rem);
  background: radial-gradient(circle at 85% 20%, rgba(0, 108, 209, .45), transparent 55%),
              linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); }
.c-hero--plano::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.c-hero .c-migas { color: var(--color-on-primary); }
.c-hero .c-migas a { color: var(--color-on-primary); }
/* bloques de texto largo: a la izquierda, con medida cómoda */
.c-pila--texto { max-width: 52rem; }
.c-pila--texto > .c-h2::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .9rem; border-radius: 2px; background: var(--color-accent); }
.c-pila--texto .c-texto { max-width: none; }
.c-pila--texto .c-texto table { width: 100%; border-collapse: collapse; font-size: .9688rem; }
.c-pila--texto .c-texto th, .c-pila--texto .c-texto td { padding: .65rem .75rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.c-pila--texto .c-texto th { background: var(--color-neutral); color: var(--color-primary-deep); }
.c-texto .c-nota { padding: 1rem 1.25rem; border-left: 4px solid var(--color-accent); border-radius: var(--rounded-sm); background: var(--color-neutral); }
.c-sec--alt .c-texto .c-nota { background: var(--color-surface); }
.c-sec--fuentes { padding-block: 2.5rem; border-top: 1px solid var(--color-line); }
.c-sec--fuentes .c-fuentes, ul.c-fuentes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--color-muted); font-size: .875rem; }
ul.c-fuentes li + li { margin-top: .3rem; }
.c-cercanos { margin-top: 2.5rem; }
/* texto propio de cada distrito */
.c-sec--distrito { background: var(--color-surface); }
.c-distrito { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (width >= 64rem) { .c-distrito { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; }
  /* preguntas frecuentes: a todo el ancho solo si quedarían solas en su fila (secciones en número par) */
  .c-distrito > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 52rem; } }
/* foto recortada del equipo sobre un panel claro */
.c-img--equipo { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 5 / 4;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, var(--color-tinte) 55%, #cfe0f5 100%); }
.c-dividida__media .c-img--equipo img { width: 92%; height: auto; max-height: 94%; aspect-ratio: auto; object-fit: contain; object-position: bottom; border-radius: 0; }
/* séptima categoría (electricidad) en una fila propia: tarjeta horizontal */
@media (width >= 64rem) {
  .c-servicios > .c-servicio:nth-child(7):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .c-servicios > .c-servicio:nth-child(7):last-child .c-servicio__foto img { height: 100%; aspect-ratio: auto; }
}

/* video de fondo de la portada (lo activa el script; mientras tanto se ve la foto) */
.c-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.c-hero__video.c-listo { opacity: 1; }

/* carrusel de fondo de la portada: las fotos van en su propia capa (sus z-index no salen de ella) y se funden
   con un acercamiento lento; el script lo activa después de cargar la página */
.c-hero__capas { position: absolute; inset: 0; z-index: -2; overflow: hidden; isolation: isolate; }
.c-hero__capas .c-hero__fondo { z-index: 0; }
.c-hero--carrusel .c-hero__capas .c-hero__fondo { opacity: 0; transition: opacity 1.4s ease; animation: none; }
.c-hero--carrusel .c-hero__capas .c-hero__fondo.c-activa { opacity: 1; animation: c-acerca 8s linear both; }
.c-hero--pausado .c-hero__capas .c-hero__fondo.c-activa { animation-play-state: paused; }
@keyframes c-acerca { from { transform: scale(1); } to { transform: scale(1.07); } }
.c-hero__pausa { position: absolute; top: clamp(.75rem, 2.5vw, 1.5rem); right: clamp(.75rem, 3vw, 2rem); z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--rounded-full); background: rgba(6, 44, 87, .45); color: var(--color-on-primary); cursor: pointer;
  transition: background .2s; }
.c-hero__pausa:hover { background: rgba(6, 44, 87, .8); }
.c-hero__pausa:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.c-hero__pausa[hidden] { display: none; }
.c-hero__pausa .c-ico { width: 20px; height: 20px; }
.c-hero__pausa .c-ico--seguir, .c-hero__pausa[aria-pressed="true"] .c-ico--pausa { display: none; }
.c-hero__pausa[aria-pressed="true"] .c-ico--seguir { display: block; }