/* ==========================================================
   Montoya · estilos del sitio
   Depende de tokens.css (colores, tipografía, espaciado, botones).
   Las páginas futuras (servicios/*.html) reutilizan este archivo.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--amarillo); color: var(--on-amarillo); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip-link:focus { left: var(--space-4); }

.eyebrow { color: var(--verde-profundo); margin-bottom: var(--space-2); }
.section--dark .eyebrow, .cta-final .eyebrow { color: var(--amarillo); }

/* ---------- Botones extra ---------- */
.btn { min-height: 44px; justify-content: center; }
.btn--lg { padding: var(--space-4) var(--space-5); font-size: .9375rem; }
.btn--oscuro { background: var(--tinta); color: var(--crema); }
.btn--whatsapp-claro { background: var(--verde-gota); color: var(--tinta); }

/* ---------- Barra superior ---------- */
.topbar { background: var(--tinta); color: var(--crema); font-size: var(--fs-small); }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.topbar__claim { color: var(--verde-gota); font-size: var(--fs-label-sm); }
.topbar__tel { color: var(--amarillo); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 767px) { .topbar__claim { display: none; } .topbar__inner { justify-content: center; } }

/* ---------- Encabezado ---------- */
.header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-3); }
.header__logo img { height: 40px; width: auto; }
.nav { display: flex; gap: var(--space-6); margin-inline: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--verde-profundo); }
.header__cta { display: flex; gap: var(--space-3); }
.header__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }

@media (max-width: 959px) {
  .header__logo img { height: 34px; }
  .header__toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-4) var(--space-4); }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Secciones ---------- */
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--white { background: var(--surface-raised); }
.section--dark { background: var(--tinta); color: var(--crema); }
.section__head { margin-bottom: var(--space-6); }
@media (min-width: 960px) { .section { padding-block: var(--space-9); } }

/* ---------- Problemas ---------- */
.problemas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.problema { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.problema span { font-size: var(--fs-small); color: var(--ink-muted); }
.problema:hover { border-color: var(--amarillo); box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .problemas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .problemas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Pasos ---------- */
.pasos { list-style: none; display: grid; gap: var(--space-5); }
.pasos li { border-top: 4px solid var(--amarillo); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.paso__num { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 2rem; line-height: 1; }
.pasos p { color: var(--ink-muted); font-size: var(--fs-small); }
@media (min-width: 640px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Segmentos ---------- */
.segmentos { display: grid; gap: var(--space-5); }
.segmento { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.segmento .label { color: var(--ink-muted); }
.segmento p:last-child { color: var(--ink-muted); font-size: var(--fs-small); }
@media (min-width: 768px) { .segmentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Cobertura ---------- */
.cobertura { display: grid; gap: var(--space-5); align-items: center; }
.cobertura p:not(.eyebrow) { color: var(--ink-muted); margin-top: var(--space-3); }
.provincias { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 960px) { .cobertura { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: var(--space-5); }
.faq__lista details { border-bottom: 1px solid var(--line); }
.faq__lista summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); font-weight: 600; font-size: 1.0625rem; min-height: 44px; }
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.faq__lista details[open] summary::after { content: "−"; }
.faq__lista details p { padding-bottom: var(--space-4); color: var(--ink-muted); }
@media (min-width: 960px) { .faq { grid-template-columns: 1fr 1.6fr; gap: var(--space-8); } }

/* ---------- CTA final ---------- */
.cta-final { background: var(--amarillo); color: var(--on-amarillo); padding-block: var(--space-8); }
.cta-final__inner { display: grid; gap: var(--space-5); align-items: center; }
.cta-final h2 { font-size: var(--fs-h1); margin-bottom: var(--space-2); }
.cta-final__acciones { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-final .telefono { color: var(--on-amarillo); text-decoration: none; font-size: clamp(2.25rem, 1.8rem + 2vw, 2.75rem); }
.cta-final__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-final .btn--whatsapp { background: #1E7A34; color: #FFFFFF; }
@media (min-width: 960px) { .cta-final__inner { grid-template-columns: 1.4fr 1fr; } .cta-final__acciones { align-items: flex-end; } }

/* ---------- Pie ---------- */
.footer { background: var(--tinta); color: var(--crema); padding-block: var(--space-8) var(--space-5); font-size: var(--fs-small); }
.footer a, .footer__link { color: var(--crema); text-decoration: none; }
.footer a:hover, .footer__link:hover { color: var(--amarillo); }
.footer__grid { display: grid; gap: var(--space-6); }
.footer__marca img { width: 220px; height: auto; margin-bottom: var(--space-3); }
.footer__marca p { color: #A9AC9F; }
.footer__titulo { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-label-sm); color: var(--amarillo); margin-bottom: var(--space-3); }
.footer ul { list-style: none; display: grid; gap: var(--space-2); }
.footer__link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.footer__legal { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid #2E322A; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: #A9AC9F; font-size: .8125rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; } }
@media (max-width: 959px) { .footer { padding-bottom: calc(var(--space-5) + 72px); } }

/* ---------- Barra fija móvil ---------- */
.barra-movil { display: none; }
@media (max-width: 959px) {
  .barra-movil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--tinta); box-shadow: 0 -4px 16px rgba(18,20,16,.2); }
  .barra-movil .btn { min-height: 48px; }
}

/* ---------- Aviso de cookies ---------- */
.cookies { position: fixed; z-index: 60; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: 520px; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(18,20,16,.18); padding: var(--space-4); display: grid; gap: var(--space-3); font-size: var(--fs-small); }
.cookies[hidden] { display: none; }
.cookies__btns { display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 959px) { .cookies { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Páginas legales ---------- */
.legal { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
.legal__nav { display: flex; flex-direction: column; gap: var(--space-1); align-self: start; }
.legal__nav a { padding: var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.legal__nav a:hover { background: var(--surface-raised); }
.legal__doc { max-width: 72ch; display: flex; flex-direction: column; gap: var(--space-4); }
.legal__doc section { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 100px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.legal__doc h3 { font-size: 1.125rem; margin-top: var(--space-2); }
.legal__fecha { color: var(--ink-muted); font-size: var(--fs-small); }
.legal__datos { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-5); display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.legal__datos dt { color: var(--ink-muted); }
.legal__datos dd { margin: 0; font-weight: 600; }
@media (max-width: 559px) { .legal__datos { grid-template-columns: 1fr; } .legal__datos dd { margin-bottom: var(--space-2); } }
@media (min-width: 960px) { .legal { grid-template-columns: 240px 1fr; gap: var(--space-8); } .legal__nav { position: sticky; top: 100px; } }

/* ---------- Añadidos: topbar horario, trabajos, mapa ---------- */
.topbar__right { display: flex; align-items: center; gap: var(--space-5); }
.topbar__horario { color: var(--crema); }
@media (max-width: 767px) { .topbar__horario { display: none; } }

.section__head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.link-claro { color: var(--verde-gota); font-weight: 600; }
.link-claro:hover { color: var(--amarillo); }
.trabajos__nota { margin-top: var(--space-5); color: #A9AC9F; font-size: var(--fs-small); }

.cobertura__texto { display: flex; flex-direction: column; gap: var(--space-4); }
.cobertura__texto p:not(.eyebrow) { margin-top: 0; }
.mapa { margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.mapa svg { width: 100%; max-width: 520px; height: auto; }
.mapa__pais { fill: var(--amarillo); stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.mapa__puntos circle { fill: var(--tinta); stroke: var(--surface-raised); stroke-width: 3; }
.mapa__base path { fill: var(--verde-profundo); } .mapa__base circle { fill: var(--surface-raised); }
.mapa figcaption { color: var(--ink-muted); }

/* ==========================================================
   v3 · sitio más ancho, hero con foto, servicios con imagen,
   carruseles de trabajos y testimonios
   ========================================================== */
:root { --container: 1400px; }

/* ---------- Hero con imagen de fondo ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--tinta); color: var(--crema); min-height: clamp(560px, 78vh, 760px); display: flex; align-items: center;
  /* Respaldo sin foto: arcos de tubería de la marca */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500'%3E%3Cpath d='M90 560V300a80 80 0 0 1 160 0V560M250 300a80 80 0 0 1 160 0V420' fill='none' stroke='%23FFC20E' stroke-opacity='.18' stroke-width='40'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -40px bottom -60px; background-size: min(720px, 70vw) auto; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,20,16,.94) 0%, rgba(18,20,16,.82) 42%, rgba(18,20,16,.35) 75%, rgba(18,20,16,.15) 100%); }
.hero__inner { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-8); }
.hero__inner > * { max-width: 680px; }
.hero .eyebrow { color: var(--amarillo); margin-bottom: 0; }
.hero .display { color: var(--crema); }
.hero__accent { color: var(--amarillo); }
.hero .lead { color: #D9D8CE; }
.hero__badges { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); font-size: var(--fs-small); font-weight: 500; }
.hero__badges li { display: flex; align-items: center; gap: var(--space-2); }
.hero__badge-icono { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--amarillo); color: var(--amarillo); display: grid; place-items: center; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 1100px) { .hero__badges { grid-template-columns: repeat(4, max-content); } .hero__inner > .hero__badges { max-width: none; } }
@media (max-width: 767px) { .hero { min-height: 0; } .hero::after { background: rgba(18,20,16,.82); } .hero__cta .btn { flex: 1 1 100%; } }

.section__intro { color: var(--ink-muted); margin-top: var(--space-3); max-width: 60ch; }
.section--dark .section__intro { color: #A9AC9F; }

/* ---------- Familias con imagen ---------- */
.familias { display: grid; gap: var(--space-5); }
.familia { background: var(--surface); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 100px; transition: box-shadow .2s, transform .2s; }
.familia:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.familia:target { outline: 3px solid var(--amarillo); }
.familia__media { position: relative; aspect-ratio: 16 / 10; background: var(--amarillo-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500'%3E%3Cpath d='M90 560V300a80 80 0 0 1 160 0V560M250 300a80 80 0 0 1 160 0V420' fill='none' stroke='%23FFC20E' stroke-width='40'/%3E%3C/svg%3E") no-repeat center bottom / 70% auto; }
.familia__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.familia__body { position: relative; padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.familia__icono { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--amarillo); color: var(--on-amarillo); display: grid; place-items: center; margin-top: -26px; border: 4px solid var(--surface); box-sizing: content-box; }
.familia ul { padding-left: 1.1em; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.6; display: grid; gap: var(--space-1); }
.familia__acciones { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-4); font-weight: 600; }
@media (min-width: 640px) { .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .familias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Carrusel genérico (scroll-snap + flechas) ---------- */
.carrusel { display: flex; flex-direction: column; gap: var(--space-5); }
.carrusel__track { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--space-1); }
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__track:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 4px; }
.carrusel__item { scroll-snap-align: start; min-width: 0; }
.carrusel__controles { display: flex; justify-content: flex-end; gap: var(--space-3); }
.carrusel__btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: var(--crema); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.carrusel__btn:hover:not(:disabled) { background: var(--amarillo); border-color: var(--amarillo); color: var(--on-amarillo); }
.carrusel__btn:disabled { opacity: .3; cursor: default; }
@media (min-width: 640px) { .carrusel__track { grid-auto-columns: calc((100% - var(--space-5)) / 2); } }
@media (min-width: 1100px) { .carrusel__track { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); } }

/* ---------- Tarjetas de trabajos realizados ---------- */
.trabajo { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.trabajo__img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: #2E322A; }
.trabajo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.trabajo:hover .trabajo__img img { transform: scale(1.03); }
.trabajo figcaption { display: flex; flex-direction: column; font-size: var(--fs-small); color: #A9AC9F; }
.trabajo figcaption strong { color: var(--crema); }
@media (prefers-reduced-motion: reduce) { .trabajo__img img { transition: none; } }

/* ---------- Testimonios ---------- */
.testimonio { margin: 0; height: 100%; background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.testimonio__estrellas { align-self: flex-start; background: var(--tinta); color: var(--amarillo); padding: 2px var(--space-3); border-radius: var(--radius-pill); letter-spacing: .15em; font-size: 1rem; }
.testimonio blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.6; flex-grow: 1; }
.testimonio figcaption { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.testimonio figcaption > span:last-child { display: flex; flex-direction: column; color: var(--ink-muted); }
.testimonio figcaption strong { color: var(--ink); }
.testimonio__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--amarillo); color: var(--on-amarillo); display: grid; place-items: center; font-family: var(--font-label); font-weight: 600; letter-spacing: .06em; }

/* ==========================================================
   v4 · ajustes responsive
   ========================================================== */
/* Mapa: el iframe traía width="600" fijo y desbordaba la página en móvil */
.cobertura { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .cobertura { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mapa { padding: var(--space-3); }
.mapa iframe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-md); }

/* Pie: el correo largo no parte línea en pantallas de 320 px */
.footer__grid { grid-template-columns: minmax(0, 1fr); }
.footer a { overflow-wrap: anywhere; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; } }

/* Áreas táctiles mínimas de 44 px en enlaces sueltos */
.topbar__tel, .familia__wa, .familia__ver, .link-claro { display: inline-flex; align-items: center; min-height: 44px; }
.topbar__inner { padding-block: 0; }
/* El enlace "Ver servicio" debe seguir oculto mientras no exista la página */
.familia__ver[hidden] { display: none; }

/* Pie: enlaces con más área táctil en móvil */
@media (max-width: 767px) { .footer ul a, .footer__link { display: inline-block; padding-block: 6px; } .footer ul { gap: 0; } }

/* Encabezado 960–1279 px: logo + 6 enlaces + 2 botones necesitan ~1250 px; el logo se aplastaba
   y el botón de WhatsApp se salía de la pantalla.
   En ese rango se usa el menú hamburguesa y se mantienen los botones. */
.header__logo { flex: none; }
.nav a { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1279px) {
  .header__toggle { display: inline-flex; order: 3; margin-left: 0; }
  .header__cta { order: 2; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-6) var(--space-4); }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
}

/* Pantallas angostas (≤ 419 px): menos apretado */
@media (max-width: 419px) {
  .hero__badges { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .problema { padding: var(--space-3); }
  .problemas { gap: var(--space-2); }
}
@media (min-width: 1280px) { .nav { gap: var(--space-5); } }
/* Trabajos: 3 por vista desde 900 px (con 2 las fotos 4:5 quedaban de ~600 px de alto) */
@media (min-width: 900px) { #trabajos .carrusel__track { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); } }
/* Legal: el correo largo en la tabla de datos y en el texto desbordaba en móvil */
.legal { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .legal { grid-template-columns: 240px minmax(0, 1fr); } }
.legal__doc, .legal__datos dd { overflow-wrap: anywhere; min-width: 0; }
.legal__datos { grid-template-columns: max-content minmax(0, 1fr); }
@media (max-width: 559px) { .legal__datos { grid-template-columns: minmax(0, 1fr); } }