html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #1F2937; font-family: Poppins, system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: Poppins, system-ui, sans-serif; }
/* arquitectura de grillas: tramos que dividen exacto la cantidad de celdas,
   así ninguna fila queda a medias con espacio muerto al costado */
[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-cols="hero"], [data-cols="split"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
/* galería: 3 x 2 en escritorio, 2 columnas en tablet, 1 en móvil */
[data-cols="galeria"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { [data-cols="galeria"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { [data-cols="galeria"] { grid-template-columns: minmax(0, 1fr); } }
/* tarjeta de foto de la galería "Cómo se ve un trabajo" (único uso de <figure> en el sitio) */
figure { margin: 0; background: #FFFFFF; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.08); }
figcaption { padding: 22px 24px; }
/* recorte cuadrado: la foto llena la caja sin deformarse y el zoom queda contenido */
.marco-1x1 { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; }
.marco-1x1 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
@media (hover: hover) { figure:hover .marco-1x1 img { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .marco-1x1 img { transition: none; } }
@media (max-width: 1120px) {
  [data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* las dos columnas aguantan hasta que el ancho real no da; al apilarse,
   la foto del hero pasa de retrato a banda para no ocupar media pantalla */
@media (max-width: 860px) {
  [data-cols="hero"], [data-cols="split"] { grid-template-columns: minmax(0, 1fr); gap: 40px !important; }
  [data-cols="hero"] > div:last-child { aspect-ratio: 16 / 9 !important; max-height: 340px; }
}
@media (max-width: 820px) {
  [data-cols="3"], [data-cols="2"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  [data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
}
/* entradas al hacer scroll: el estado visible es declarado y .entrando sólo decora */
.js-anim [data-reveal] > * { opacity: 0; transform: translateY(18px); }
.js-anim [data-reveal].vis > * { opacity: 1; transform: none; }
.js-anim [data-reveal].vis.entrando > * { animation: pasoIn .6s cubic-bezier(.22,.68,.32,1) both; }
.js-anim [data-reveal].vis.entrando > *:nth-child(1) { animation-delay: 0s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(2) { animation-delay: .07s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(3) { animation-delay: .14s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(4) { animation-delay: .21s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(5) { animation-delay: .28s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(6) { animation-delay: .35s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(7) { animation-delay: .42s; }
.js-anim [data-reveal].vis.entrando > *:nth-child(8) { animation-delay: .49s; }

/* respuesta al puntero: sólo donde hay hover real */
figure img, [data-reveal] img { transition: transform .5s cubic-bezier(.22,.68,.32,1); }
@media (hover: hover) {
  figure:hover img { transform: scale(1.045); }
  figure:hover { transform: translateY(-3px); }
}
@media (hover: none) {
  [data-paso]:hover, figure:hover { transform: none; }
}
/* respuesta al toque y al clic */
a, summary, [data-paso], figure { -webkit-tap-highlight-color: transparent; }
a:active { transform: translateY(1px) scale(.988); }
summary:active { transform: scale(.985); }
details[open] summary span:last-child { transform: rotate(180deg); }
/* preguntas frecuentes: tarjeta, encabezado y respuesta */
#preguntas details { background: #FFFFFF; border-radius: 16px; padding: 4px 28px; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 10px 26px rgba(17,24,39,.07); }
#preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 600; color: #111827; }
#preguntas details p { margin: 0; padding: 0 0 22px; font-size: 16px; line-height: 1.75; font-weight: 300; color: #4B5563; max-width: 70ch; }
#preguntas summary span:last-child { display: inline-block; color: #C2440F; font-weight: 400; font-size: 22px; transition: transform .25s ease; }

/* móvil */
@media (max-width: 560px) {
  body { font-size: 15px; }
  header { padding: 12px 16px !important; }
  header img { height: 26px !important; }
  .marquesina { font-size: 13px; }
  nav a, summary { min-height: 44px; }
  /* el panel se mide contra el header, no contra el botón: hoja de borde a borde */
  .menu { position: static !important; }
  .menu nav { left: 16px !important; right: 16px !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
  section > div { padding-top: 60px !important; padding-bottom: 60px !important; }
  figure figcaption { padding: 20px 20px !important; }
  [data-paso] { padding: 26px 22px !important; }
  article { padding: 28px 22px !important; }
}
/* barra de urgencias: marquesina en bucle de derecha a izquierda */
.marquesina .pista { animation: correr 26s linear infinite; }
.marquesina:hover .pista { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* menú compacto */
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary { list-style: none; cursor: pointer; }
.menu[open] > summary { background: #FFF4EF; color: #C2440F; }
@media (min-width: 1121px) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .marquesina .pista { animation: none; } }
/* pasos de "Cómo trabajamos": entran escalonados al llegar al viewport */
.js-anim [data-paso] { opacity: 0; transform: translateY(24px); }
/* el estado visible es declarado, no el destino de una animación */
.js-anim [data-paso].vis { opacity: 1; transform: none; }
.js-anim [data-paso].vis.entrando { animation: pasoIn .7s cubic-bezier(.22,.68,.32,1) both; animation-delay: var(--d, 0s); }
/* tarjeta de paso en "Cómo trabajamos" */
[data-paso] { background: #F8F9FA; border-radius: 18px; padding: 32px; position: relative; overflow: hidden; }
.barra { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #F26944; border-radius: 0 3px 3px 0; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #FFF4EF; color: #C2440F; font-size: 16px; font-weight: 500; }
[data-paso] .num { transition: transform .3s cubic-bezier(.22,.68,.32,1), background-color .3s ease, color .3s ease; }
[data-paso]:hover { transform: translateY(-4px); }
[data-paso]:hover .num { transform: scale(1.08) rotate(-4deg); background: #C2440F; color: #fff; }
.js-anim [data-paso] .barra { transform: scaleX(0); transform-origin: left; }
.js-anim [data-paso].vis .barra { transform: scaleX(1); }
.js-anim [data-paso].vis.entrando .barra { animation: pasoBarra .8s cubic-bezier(.22,.68,.32,1) both; animation-delay: calc(var(--d, 0s) + .18s); }
@keyframes pasoIn { to { opacity: 1; transform: translateY(0); } }
@keyframes pasoBarra { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-paso], .js-anim [data-paso].vis.entrando { opacity: 1; transform: none; animation: none; }
  .js-anim [data-paso] .barra, .js-anim [data-paso].vis.entrando .barra { transform: scaleX(1); animation: none; }
}
/* por debajo de 1120px el nav de anclas se oculta: quedan logo, Instagram y WhatsApp
   en una sola fila, así la barra pegada no se come el viewport */
@media (max-width: 1120px) {
  header nav a[href^="#"] { display: none !important; }
  .menu nav a[href^="#"] { display: block !important; }
  header { padding: 14px 20px !important; }
}
* { box-sizing: border-box; }
a { color: #C2440F; text-decoration: none; }
a:hover { color: #B93C11; }
section[id] { scroll-margin-top: 210px; }
@media (max-width: 820px) {
  section > div { padding-left: 20px !important; padding-right: 20px !important; }
  section[aria-labelledby] > div { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (min-width: 1120px) { section[id] { scroll-margin-top: 130px; } }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
:focus-visible { outline: 2px solid #C2440F; outline-offset: 3px; border-radius: 12px; }
::selection { background: #FFE0D4; color: #1F2937; }
/* pulso neón del dato de urgencia */
.neon24 { animation: neon24 2.4s ease-in-out infinite; }
@keyframes neon24 {
  0%, 100% { text-shadow: 0 0 0 rgba(242,105,68,0), 0 0 10px rgba(242,105,68,.28); }
  50% { text-shadow: 0 0 2px rgba(242,105,68,.55), 0 0 22px rgba(242,105,68,.5); }
}
@media (prefers-reduced-motion: reduce) { .neon24 { animation: none; } }
/* bandas con foto de fondo: velo blanco al 85% para no perder legibilidad */
.banda-foto { position: relative; background-size: cover; background-position: center; }
.banda-foto::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.banda-foto > div { position: relative; z-index: 1; }
/* cierre: texto y QR en dos columnas, tira blanca a lo ancho */
@media (max-width: 780px) {
  .cierre-cols { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
  .cierre-cols h2, .cierre-cols img { margin-left: auto !important; margin-right: auto !important; }
}

/* tarjetas de "Servicios" */
.card-servicio { background: #FFFFFF; border-radius: 18px; padding: 36px 32px; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.07); }
.card-servicio:hover { box-shadow: 0 2px 4px rgba(31,41,55,.05), 0 18px 44px rgba(31,41,55,.1); transform: translateY(-3px); }
.icon-servicio { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #FFF4EF; }

/* estadísticas y badges de confianza del hero */
.card-stat { background: #FFFFFF; border-radius: 18px; padding: 20px 28px; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 12px 32px rgba(17,24,39,.08); }
.badge-trust { margin: 0; background: #F8F9FA; border-radius: 14px; padding: 18px 22px; font-size: 14px; font-weight: 500; color: #4B5563; }

/* enlaces de zona de cobertura */
.item-zona { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FFFFFF; border-radius: 16px; padding: 26px 28px; color: #1F2937; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 10px 26px rgba(17,24,39,.07); }
.item-zona:hover { box-shadow: 0 2px 4px rgba(31,41,55,.05), 0 16px 36px rgba(31,41,55,.09); transform: translateY(-2px); }

/* enlaces de navegación (header de escritorio y menú compacto) */
.nav-link { color: #4B5563; padding: 9px 14px; border-radius: 10px; white-space: nowrap; }
.nav-link:hover { background: #F3F4F6; color: #1F2937; }
.menu-link { display: block; padding: 13px 18px; color: #1F2937; font-size: 16px; font-weight: 400; }
.menu-link:hover { background: #FFF4EF; color: #C2440F; }