/* Mobile layout shared by every page. Desktop compositions stay in their source sheets. */
.home-touch-hint { display: none; }
.mobile-nav-intro, .mobile-nav-bottom, .mobile-mega-heading { display: none; }
#clientes .brand-ribbons { width: 100%; overflow: hidden; }
#clientes .brand-ribbon, #clientes .brand-ribbon-bottom {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  width: max-content; gap: 16px; margin-top: 0;
  will-change: transform;
}
#clientes .brand-ribbon img, #clientes .brand-ribbon-top img, #clientes .brand-ribbon-bottom img {
  flex: 0 0 210px; width: 210px; max-width: none; height: 115px; aspect-ratio: auto;
  object-fit: contain;
}
#clientes .ref-stories {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; overscroll-behavior-inline: contain;
}
#clientes .ref-stories::-webkit-scrollbar { display: none; }
#clientes .ref-story { flex: 0 0 clamp(190px,21vw,260px); scroll-snap-align: start; }
#conocenos .team-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
#conocenos .team-carousel-controls > button {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid #4277a7; border-radius: 50%; background: #06172b;
  color: #c8e5ff; font: 30px/1 Arial,sans-serif;
}
#conocenos .team-carousel-dots { display: flex; gap: 7px; margin: 0; }
#conocenos .team-carousel-dots button { width: 11px; height: 11px; }
#contactos #quote-form .field-error {
  display: block; margin: -8px 0 13px 4px; color: #ff9c9c;
  font: 500 12px/1.35 Poppins,Arial,sans-serif;
}
#contactos #quote-form :is(input,select,textarea)[aria-invalid="true"] {
  border-color: #ff5b78; background: #29101b;
  box-shadow: 0 0 0 2px #ff5b7838,0 0 20px #ff335522;
}
#contactos #quote-form .form-status {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 11px;
  font: 600 13px/1.45 Poppins,Arial,sans-serif;
}
#contactos #quote-form .form-status[data-state="error"] { border: 1px solid #ff5b78; background: #431323; color: #ffbdc9; }
#contactos #quote-form .form-status[data-state="sending"] { border: 1px solid #4289d2; background: #0a2544; color: #b4d8ff; }
#contactos #quote-form .form-status[data-state="success"] { border: 1px solid #27bc93; background: #06362d; color: #a5f5dc; }
#contactos #quote-form .quote-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (min-width: 761px) and (hover: hover) {
  #inicio .photo-card:hover .photo-label,
  #inicio .photo-card:focus-visible .photo-label {
    inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; padding: 8px 16px;
    color: #fff; text-align: center; text-shadow: 0 2px 12px #000;
    font-size: clamp(13px,1.35vw,21px); line-height: 1.15;
  }
  #inicio .photo-card:hover .photo-label svg,
  #inicio .photo-card:focus-visible .photo-label svg {
    width: clamp(30px,3vw,42px); height: clamp(30px,3vw,42px);
    min-width: clamp(30px,3vw,42px);
  }
  #inicio .photo-card:hover .photo-label span:after,
  #inicio .photo-card:focus-visible .photo-label span:after {
    content: 'Haz clic para abrir el servicio'; display: block;
    margin-top: 5px; color: #c6e4ff;
    font: 500 clamp(10px,.8vw,12px)/1.3 Poppins,Arial,sans-serif;
    letter-spacing: 0; text-transform: none;
  }
}
@media (max-width: 760px) {
  html { scroll-behavior: smooth; }
  body { min-width: 0; overflow-x: clip; }
  .utility { display: none; }
  header,
  body:has(#conocenos:not([hidden])) header {
    position: sticky; top: 0; width: 100%; height: 72px; min-height: 72px;
    padding: 9px 5%; margin: 0; align-items: center; justify-content: space-between;
    background: #03070d; border-bottom: 1px solid #1d3149;
    transition: box-shadow .3s ease,background .3s ease;
  }
  header.header-scrolled { background: #030a16f2; box-shadow: 0 9px 26px #000b,0 1px 0 #1b65a744; backdrop-filter: blur(14px); }
  header > .brand,
  body:has(#conocenos:not([hidden])) header > .brand {
    display: block; width: 165px; height: 50px; flex: none;
  }
  header .mobile-toggle {
    display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: 1px solid #335476; border-radius: 12px;
    background: linear-gradient(145deg,#122238,#050b14); color: #e9f5ff;
    font: 26px/1 Arial,sans-serif; box-shadow: inset 0 1px #ffffff16;
  }
  header .mobile-toggle[aria-expanded="true"] { border-color: #4aa7ff; background: #123c6a; }
  header nav,
  body:has(#conocenos:not([hidden])) header nav {
    display: none; position: fixed; left: 0; right: 0; top: 72px;
    width: 100vw; max-width: none; height: calc(100dvh - 72px); min-height: 0; flex: none;
    margin: 0; padding: 25px 6% max(25px,env(safe-area-inset-bottom)); z-index: 25;
    flex-direction: column; align-items: stretch; gap: 0;
    border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(ellipse at 85% 15%,#0b4d8d77,transparent 55%),
                radial-gradient(ellipse at 0 95%,#07346399,transparent 55%),#030914;
    box-shadow: none;
  }
  header nav.mobile-open,
  body:has(#conocenos:not([hidden])) header nav.mobile-open { display: flex; }
  header nav a,
  body:has(#conocenos:not([hidden])) header nav a {
    display: flex; align-items: center; min-height: 58px; padding: 11px 12px;
    border: 0; border-bottom: 1px solid #41608066; border-radius: 0;
    font: 500 clamp(17px,4.5vw,21px)/1.25 Poppins,Arial,sans-serif;
  }
  header nav a[data-nav-number]:before {
    content: attr(data-nav-number); width: 38px; flex: none;
    color: #60b5fa; font: 600 11px/1 Poppins,Arial,sans-serif;
  }
  header nav a[data-nav-number]:after {
    content: '↗'; margin-left: auto; color: #91b9d9; font-size: 18px;
  }
  header nav a[aria-current="page"] {
    background: linear-gradient(90deg,#0e4a86a8,transparent); color: #fff;
    text-decoration: none; border-left: 2px solid #4cb5ff;
  }
  .mobile-nav-intro { display: grid; gap: 8px; margin: 0 0 20px; }
  .mobile-nav-intro span, .mobile-mega-heading p {
    color: #69b9fa; font: 700 10px/1.3 Poppins,Arial,sans-serif; letter-spacing: .24em;
  }
  .mobile-nav-intro strong, .mobile-mega-heading strong {
    max-width: 300px; color: #fff; font: 500 clamp(24px,7vw,34px)/1.15 Quedora,Poppins,sans-serif;
  }
  .mobile-nav-bottom {
    display: grid; gap: 11px; margin-top: auto; padding: 30px 0 0;
  }
  .mobile-nav-bottom > span { color: #bdcede; font-size: 13px; }
  header nav .mobile-nav-bottom a {
    justify-content: space-between; min-height: 52px; padding: 12px 18px;
    border: 1px solid #49a6ff; border-radius: 14px;
    background: linear-gradient(120deg,#0872d5,#073b74);
    font: 600 14px/1.3 Poppins,Arial,sans-serif; box-shadow: 0 10px 30px #006aca44;
  }
  header nav .nav-services { width: 100%; display: flex; gap: 5px; }
  header nav .nav-services a { flex: 1; }
  header nav .nav-services #services-toggle {
    width: 48px; height: 52px; min-width: 48px; margin: 0; padding: 0;
    border: 1px solid #315377; border-radius: 10px; background: #0e2540;
    font-size: 22px; text-align: center;
  }
  .nav-backdrop { inset: 72px 0 0; z-index: 19; background: #01050dcc; backdrop-filter: blur(5px); }
  header .mega {
    position: fixed; left: 0; right: 0; top: 72px; transform: none;
    width: 100vw; max-width: none; height: calc(100dvh - 72px); max-height: none;
    min-height: 0; padding: 25px 6% max(25px,env(safe-area-inset-bottom)); z-index: 26;
    border: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(ellipse at 90% 10%,#10539177,transparent 56%),#030914;
  }
  header .mega:before { display: none; }
  .mobile-mega-heading { position: relative; z-index: 1; display: grid; gap: 9px; margin-bottom: 24px; }
  .mobile-mega-heading button {
    justify-self: start; min-height: 42px; padding: 0; border: 0; background: none;
    color: #94cfff; font: 600 12px/1.2 Poppins,Arial,sans-serif;
  }
  .mobile-mega-heading p { margin: 10px 0 0; }
  header .mega .ref-service-row { grid-template-columns: 1fr; gap: 10px; max-width: none; }
  header .mega .ref-service-choice,
  header .mega .ref-service-choice:nth-child(even) {
    display: flex; align-items: center; gap: 16px; min-height: 76px;
    padding: 10px 14px; transform: none; text-align: left;
    border: 1px solid #305374; border-radius: 14px;
    background: linear-gradient(110deg,color-mix(in srgb,var(--accent) 16%,#091725),#06111e 75%);
  }
  header .mega .hex-icon { width: 48px; height: 54px; min-width: 48px; margin: 0; color: var(--accent); }
  header .mega .hex-icon svg { width: 28px; height: 28px; }
  header .mega .ref-service-choice .mega-label {
    width: auto; margin: 0; white-space: normal; text-align: left;
    font: 600 14px/1.3 Poppins,Arial,sans-serif;
  }
  header .mega .mega-see-more {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 48px; margin: 18px 0 0; padding: 10px;
    border: 1px solid #45759f; border-radius: 12px; font-size: 13px;
  }

  .page { min-height: 0; padding-left: 5%; padding-right: 5%; }
  .page h1, .page h2, .page h3, .page p { overflow-wrap: break-word; }
  .button { min-height: 44px; }

  /* Home cards use a true two-column grid at phone widths. */
  #inicio { padding: 24px 5% 35px; }
  #inicio .intro { min-height: 350px; }
  #inicio .home-video-layer { height: 540px; }
  #inicio h1 { font-size: clamp(27px,7vw,36px); line-height: 1.17; letter-spacing: .015em; }
  #inicio .intro-copy { max-width: 32rem; font-size: 14px; line-height: 1.55; }
  #inicio .actions { gap: 9px; }
  #inicio .actions .button { flex: 1 1 145px; max-width: 210px; min-height: 46px; padding: 9px 10px; font-size: 11px; }
  #inicio .home-touch-hint {
    display: block; margin: 0 auto 10px; color: #9fbad6;
    font: 500 12px/1.4 Poppins,Arial,sans-serif; text-align: center;
  }
  #inicio .home-grid {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,160px) 150px; gap: 10px;
    width: 100%; margin: 0 auto 45px;
  }
  #inicio .photo-card,
  #inicio .photo-card.camera,
  #inicio .photo-card.fire,
  #inicio .photo-card.alarm,
  #inicio .photo-card.fence,
  #inicio .photo-card.access {
    min-width: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
    border-radius: 13px;
  }
  #inicio .photo-card.camera { grid-column: 1; grid-row: 1; }
  #inicio .photo-card.fire { grid-column: 2; grid-row: 1; }
  #inicio .photo-card.alarm { grid-column: 1; grid-row: 2; }
  #inicio .photo-card.fence { grid-column: 2; grid-row: 2; }
  #inicio .photo-card.access { grid-column: 1 / -1; grid-row: 3; }
  #inicio .photo-card .crop img,
  #inicio .photo-card.camera .crop img,
  #inicio .photo-card.fire .crop img,
  #inicio .photo-card.access .crop img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    max-width: 100%; object-fit: cover; object-position: center;
    transform: none; mask-image: none; filter: brightness(.65) saturate(.8);
  }
  #inicio .photo-card:before { display: none; }
  #inicio .photo-label,
  #inicio .photo-card:hover .photo-label,
  #inicio .photo-card:focus-visible .photo-label {
    inset: auto 9px 12px; display: flex; align-items: center; justify-content: flex-start;
    gap: 6px; padding: 0; font: 600 11px/1.25 Poppins,Arial,sans-serif;
    text-align: left; text-shadow: 0 1px 5px #000;
  }
  #inicio .photo-label svg,
  #inicio .photo-card:hover .photo-label svg,
  #inicio .photo-card:focus-visible .photo-label svg {
    display: block; width: 26px; height: 26px; min-width: 26px; margin: 0;
  }
  #inicio .home-trust { margin: 0 auto 28px; padding: 30px 16px 36px; }
  #inicio .trust-heading { padding: 0; }
  #inicio .trust-grid { gap: 24px 12px; margin-top: 28px; }
  #inicio .trust-grid article svg { width: 38px; height: 38px; margin-bottom: 8px; }
  #inicio .trust-grid h3 { font-size: 12px; }

  /* About: keep the team, heading and trust block in separate flow areas. */
  #conocenos { padding-top: 32px; }
  #conocenos .about-grid { display: flex; flex-direction: column; gap: 22px; }
  #conocenos .about-copy { order: 0; width: 100%; padding: 0; text-align: left; }
  #conocenos .about-copy h1 { font-size: clamp(27px,7vw,34px); letter-spacing: .045em; }
  #conocenos .about-copy > p:not(.eyebrow) { max-width: none; margin: 0 0 15px; font-size: 14px; line-height: 1.6; }
  #conocenos .values { gap: 10px; margin-top: 26px; }
  #conocenos .values article { min-height: 0; padding: 18px 15px; }
  #conocenos .values h2 { font-size: 16px; }
  #conocenos .values p { font-size: 12px; line-height: 1.5; }
  #conocenos .team { order: 1; width: 100%; height: 390px; min-height: 390px; margin: 0 auto; padding-top: 78px; overflow: hidden; }
  #conocenos .team-photo { height: 290px; object-fit: contain; object-position: center bottom; }
  #conocenos .team-carousel-controls { bottom: 0; }
  #conocenos .team { padding-bottom: 42px; }
  #conocenos .about-trust {
    margin: 20px auto 35px; padding: 35px 17px 40px;
    border: 1px solid #17446f; border-radius: 22px;
    background: linear-gradient(155deg,#071d36,#01070f 65%,#052957);
  }
  #conocenos .about-trust:before, #conocenos .about-trust:after { display: none; }
  #conocenos .trust-heading { position: relative; z-index: 2; padding: 0; }
  #conocenos .trust-heading h2 { font-size: clamp(24px,6vw,30px); line-height: 1.2; }
  #conocenos .trust-heading p { font-size: 14px; line-height: 1.5; }
  #conocenos .trust-grid { position: relative; z-index: 2; gap: 24px 12px; margin-top: 30px; }
  #conocenos .trust-grid h3 { font-size: 11px; }
  #conocenos .trust-grid p { font-size: 11px; }
  #conocenos .about-globe { padding-top: 45px; }
  #conocenos .globe-visual { margin-bottom: 20px; }
  #conocenos .globe-actions button { min-height: 44px; }

  /* Service selection and the five detail pages. */
  #servicios { min-height: 0; padding: 45px 5% 90px; }
  #servicios .intro { margin-bottom: 24px; }
  #servicios h1 { font-size: clamp(28px,7vw,38px); line-height: 1.23; letter-spacing: .035em; }
  #servicios .intro-copy { font-size: 14px; line-height: 1.5; }
  #servicios .ref-service-row {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px; max-width: 500px; margin: 28px auto 0;
  }
  #servicios .ref-service-choice,
  #servicios .ref-service-choice:nth-child(4),
  #servicios .ref-service-choice:nth-child(5) {
    grid-column: auto; min-height: 140px; margin: 0; padding: 14px 8px;
    border: 1px solid #263b50; border-radius: 15px;
    background: linear-gradient(145deg,#101c2a,#05090e);
  }
  #servicios .ref-service-choice:nth-child(5) { grid-column: 1 / -1; min-height: 115px; }
  #servicios .ref-service-choice .hex-icon { width: 58px; height: 68px; margin: 0 auto 8px; }
  #servicios .ref-service-choice .hex-icon svg { width: 31px; height: 31px; }
  #servicios .ref-service-choice > span:last-child { max-width: none; font: 600 11px/1.3 Poppins,Arial,sans-serif; letter-spacing: 0; }
  #servicios .wedge { height: 80px; opacity: .4; }
  .service-detail { padding: 25px 5% 58px; }
  .service-detail .ref-detail-top { margin-bottom: 45px; }
  .service-detail .ref-detail-top h2 { font-size: clamp(22px,6vw,28px); line-height: 1.25; letter-spacing: .04em; }
  .service-detail .ref-detail-top > p { font-size: 13px; line-height: 1.5; }
  .service-detail .ref-detail-top .ref-service-row {
    display: flex; gap: 8px; width: calc(100% + 5vw); max-width: none;
    margin: 20px 0 0; padding: 3px 5vw 10px 0;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  }
  .service-detail .ref-detail-top .ref-service-choice {
    flex: 0 0 100px; min-width: 100px; min-height: 106px; padding: 10px 4px;
    scroll-snap-align: start; border: 1px solid #2a3948; border-radius: 11px;
    background: #0c131c;
  }
  .service-detail .ref-detail-top .ref-service-choice.selected { border-color: var(--service-accent); }
  .service-detail .ref-detail-top .ref-service-choice .hex-icon { width: 42px; height: 49px; margin: 0 auto 7px; }
  .service-detail .ref-detail-top .ref-service-choice svg { width: 25px; height: 25px; }
  .service-detail .ref-detail-top .ref-service-choice > span:last-child { font: 500 10px/1.25 Poppins,Arial,sans-serif; }
  .service-detail .ref-detail-peak { display: none; }
  .service-detail .service-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 12px; font-size: 12px; }
  .service-detail .service-hero { gap: 18px; }
  .service-detail .service-hero h1 { font-size: clamp(26px,7vw,34px); line-height: 1.18; letter-spacing: .035em; }
  .service-detail .service-lead { font-size: 14px; line-height: 1.6; }
  .service-detail .service-hero .button { min-height: 44px; font-size: 12px; }
  .service-detail .service-main-photo { margin: 20px 0 0; border-radius: 16px; }
  .service-detail .service-main-photo img { aspect-ratio: 1.5; }
  .service-detail .service-benefits { gap: 10px; margin: 24px 0; }
  .service-detail .service-benefits article { padding: 18px; border-radius: 13px; }
  .service-detail .service-benefits h2 { font-size: 16px; }
  .service-detail .service-benefits p { font-size: 13px; line-height: 1.5; }
  .service-detail .service-scope { gap: 12px; }
  .service-detail .service-scope h2 { font-size: 18px; }
  .service-detail .service-scope p, .service-detail .service-scope li { font-size: 13px; line-height: 1.55; }
  .service-detail .ref-example-heading h2 { font-size: 24px; }
  .service-detail .ref-application-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,220px); gap: 10px; }
  .service-detail .ref-application:nth-child(n) { grid-column: auto; grid-row: auto; }
  .service-detail .ref-application h3 { font-size: 13px; }
  .service-detail .ref-application .application-copy { font-size: 11px; }
  .service-detail .service-faq summary { min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.45; }
  .service-detail .service-faq details p { font-size: 13px; line-height: 1.55; }

  /* Projects and client stories. */
  #proyectos { padding: 38px 5% 65px; }
  #proyectos .ref-project-title h1 { font-size: clamp(26px,7vw,34px); line-height: 1.25; }
  #proyectos .ref-project-title p { font-size: 14px; }
  #proyectos .work-filters { width: 100%; margin-bottom: 25px; }
  #proyectos .work-filters button { min-height: 44px; }
  #proyectos .model2-project-strips,
  #proyectos.fence-selected .model2-project-strips {
    width: 100%; max-width: 100%; margin: 0; gap: 10px;
  }
  #proyectos .model2-project-track,
  #proyectos .model2-project-track:nth-child(2) {
    display: flex; gap: 12px; width: 100%; padding: 0 0 12px;
    overflow-x: auto; overflow-y: hidden; mask-image: none;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
  }
  #proyectos .model2-project-track .project-card,
  #proyectos.fence-selected .model2-project-track .project-card {
    flex: 0 0 min(74vw,290px); width: min(74vw,290px); min-width: 0;
    padding-bottom: 32px; scroll-snap-align: start;
  }
  #proyectos .model2-project-track .project-card h2 { white-space: normal; overflow: visible; font-size: 15px; }
  #proyectos .model2-project-track .project-card p { font-size: 12px; }
  #proyectos .model2-project-track .project-consult { opacity: 1; pointer-events: auto; font-size: 12px; }
  #proyectos.category-selected .model2-project-strips { width: 100%; }
  #proyectos .ref-category-title { width: 100%; }
  #proyectos .project-gallery-dialog { width: calc(100vw - 18px); max-height: 90dvh; padding: 22px 15px; overflow-y: auto; }
  #proyectos .project-gallery-main { display: flex; flex-direction: column; gap: 8px; }
  #proyectos .project-gallery-photo { order: -1; min-height: 220px; }
  #proyectos .project-gallery-photo img { height: 200px; }
  #proyectos .project-gallery-copy h2 { font-size: 23px; }
  #proyectos .project-gallery-facts { gap: 10px; }
  #clientes { padding: 38px 5% 70px; }
  #clientes .intro h1 { font-size: clamp(27px,7vw,36px); line-height: 1.15; }
  #clientes .brand-subtitle { font-size: 16px; line-height: 1.35; }
  #clientes .intro p { font-size: 14px; line-height: 1.55; }
  #clientes .brand-ribbons { overflow: hidden; margin-bottom: 34px; }
  #clientes .brand-ribbon { width: max-content; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
  #clientes .brand-ribbon-bottom { margin-top: 5px; }
  #clientes .brand-ribbon img,
  #clientes .brand-ribbon-top img,
  #clientes .brand-ribbon-bottom img {
    flex: 0 0 140px; width: 140px; max-width: none; height: 80px; aspect-ratio: auto;
  }
  #clientes .ref-stories { gap: 10px; }
  #clientes .ref-story { flex-basis: 165px; }
  #clientes .ref-featured-card { grid-template-rows: auto auto; }
  #clientes .ref-featured-card > img { width: min(100%,360px); height: 260px; }
  #clientes .ref-featured-card > div { margin: -8px 0 0; padding: 28px 22px; }
  #clientes .ref-featured-card blockquote { font-size: 20px; line-height: 1.45; }

  /* Contact and support controls need comfortable tap targets. */
  #contactos { min-height: 0; padding: 40px 5% 70px; }
  #contactos .contact-heading { margin-bottom: 35px; }
  #contactos .contact-heading h1 { font-size: clamp(29px,7vw,38px); line-height: 1.17; }
  #contactos .contact-heading p { font-size: 16px; line-height: 1.4; }
  #contactos .contact-grid { gap: 26px; }
  #contactos .contact-details h2 { font-size: 25px; }
  #contactos .contact-details p:not(.eyebrow) { font-size: 14px; line-height: 1.5; }
  #contactos .contact-details .contact-phone { font-size: 29px; }
  #contactos #quote-form { padding: 23px 18px; border: 1px solid #1e3448; border-radius: 20px; }
  #contactos #quote-form input,
  #contactos #quote-form select,
  #contactos #quote-form textarea { min-height: 48px; padding: 11px 13px; font-size: 16px; }
  #contactos .contact-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #contactos .contact-actions button { width: 100%; min-height: 46px; font-size: 13px; }
  #asistencia { padding: 38px 5% 65px; }
  #asistencia .assistance-hero { padding-bottom: 35px; }
  #asistencia .assistance-hero h1 { font-size: clamp(26px,7vw,34px); line-height: 1.2; }
  #asistencia .assistance-choice { flex: 1; min-height: 110px; padding: 8px; font-size: 11px; line-height: 1.3; letter-spacing: 0; }
  #asistencia .assistance-choice .hex-icon { width: 56px; height: 64px; }
  #asistencia .assistance-faq { padding: 18px 0 0; }
  #asistencia .assistance-faq summary { min-height: 48px; font-size: 15px; line-height: 1.45; }
  #asistencia .assistance-faq details p { font-size: 13px; line-height: 1.55; }

  /* Common footer. */
  .site-footer { padding: 12px 4% 18px; }
  .footer-panel { border-radius: 16px; }
  .footer-identity, .footer-nav, .footer-end { padding-left: 18px; padding-right: 18px; }
  .footer-identity { gap: 8px; padding-top: 20px; padding-bottom: 18px; }
  .footer-identity .brand, body:has(#inicio:not([hidden])) .footer-identity .brand { width: 135px; height: 44px; }
  .site-footer .footer-identity, body:has(#inicio:not([hidden])) .site-footer .footer-identity { padding: 16px 18px; gap: 6px; }
  .site-footer .footer-identity > div { min-width: 0; }
  .footer-identity .eyebrow { margin: 0; }
  .site-footer .footer-identity h2 { font-size: 17px; line-height: 1.25; margin: 2px 0 0; }
  .site-footer .footer-identity p:last-child { display: none; }
  .footer-identity > .button { width: 100%; margin: 0; }
  .site-footer .footer-nav, body:has(#inicio:not([hidden])) .site-footer .footer-nav { padding: 13px 18px; }
  .footer-tabs { gap: 6px; margin-bottom: 13px; }
  .footer-tabs button { min-width: 0; min-height: 44px; padding: 8px 3px; font-size: 12px; }
  .site-footer .footer-links, body:has(#inicio:not([hidden])) .site-footer .footer-links {
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-height: 0;
  }
  .site-footer .footer-links > div:nth-child(3) { grid-column: 1 / -1; }
  .footer-links h3 { margin-bottom: 3px; }
  .site-footer .footer-links a { min-height: 29px; padding: 4px 0; font-size: 11px; line-height: 1.35; }
  .site-footer .footer-links p { margin: 5px 0; font-size: 11px; }
  .footer-socials { flex-wrap: wrap; justify-content: center; }
  .footer-socials a, .footer-socials button,
  body:has(#inicio:not([hidden])) .footer-socials a,
  body:has(#inicio:not([hidden])) .footer-socials button {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px;
  }
  .site-footer .footer-end { justify-content: center; padding: 12px 18px; gap: 8px; }
  .footer-end > span { font-size: 9px; }
  .support-chat { max-height: 92dvh; }
}

@media (max-width: 360px) {
  header > .brand, body:has(#conocenos:not([hidden])) header > .brand { width: 145px; }
  header .mega .ref-service-row { grid-template-columns: 1fr; }
  header .mega .ref-service-choice { min-height: 58px; }
  #inicio .home-grid { grid-template-rows: repeat(2,145px) 135px; gap: 8px; }
  #inicio .photo-label { font-size: 10px; }
  #conocenos .values { grid-template-columns: 1fr; }
  #proyectos .model2-project-track .project-card,
  #proyectos.fence-selected .model2-project-track .project-card { flex-basis: 82vw; width: 82vw; }
}

@media (max-width: 760px) {
  #inicio .home-grid .photo-card:hover:not(.mouse-preview):not(.is-preview) .crop img,
  #inicio .home-grid .photo-card:focus-visible:not(.mouse-preview):not(.is-preview) .crop img { opacity: 1; }
  #inicio .photo-card:hover .crop, #inicio .photo-card:focus-visible .crop { transform: none; }
  #inicio .photo-card:is(.is-preview,.mouse-preview) {
    border-color: var(--card-accent); background: #000;
    box-shadow: 0 0 8px color-mix(in srgb,var(--card-accent) 75%,transparent),
                0 0 22px color-mix(in srgb,var(--card-accent) 35%,transparent);
  }
  #inicio .photo-card:is(.is-preview,.mouse-preview):before { display: block; opacity: 1; }
  #inicio .home-grid .photo-card:is(.is-preview,.mouse-preview) .crop img { opacity: 0; }
  #inicio .photo-card:is(.is-preview,.mouse-preview) .photo-label {
    inset: 0; flex-direction: column; justify-content: center; gap: 8px;
    padding: 10px; text-align: center; text-shadow: none;
    font-size: clamp(13px,3.5vw,17px);
  }
  #inicio .photo-card:is(.is-preview,.mouse-preview) .photo-label svg {
    width: 38px; height: 38px; min-width: 38px; color: var(--card-accent);
  }
  #inicio .photo-card.is-preview .photo-label span:after {
    content: 'Toca de nuevo para abrir'; display: block;
    margin-top: 8px; color: #c6d8eb;
    font: 500 10px/1.25 Poppins,Arial,sans-serif; text-transform: none;
  }
  #inicio .photo-card.mouse-preview .photo-label span:after {
    content: 'Haz clic para abrir'; display: block;
    margin-top: 8px; color: #c6d8eb;
    font: 500 10px/1.25 Poppins,Arial,sans-serif; text-transform: none;
  }
}