:root{--header-height:69px;--ink:#121212;--video-position:50% 50%;font-family:"Urbanist",Arial,sans-serif;color:var(--ink);background:#111}
nav a { text-decoration: none; }
.clients { min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: center; padding: 64px 0; background: #fff; color: #14141a; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.clients-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 7vw; margin-bottom: 32px; }
.clients h2 { margin: 0; text-align: center; font-size: clamp(31.2px, 3.48vw, 52.8px); line-height: 1.2; font-weight: 700; }
.clients-window { overflow-x: auto; scrollbar-width: thin; }
.clients-track { display: flex; width: max-content; }
.clients-group { display: flex; align-items: center; flex-shrink: 0; gap: 56px; padding: 16px 56px 16px 0; margin: 0; list-style: none; }
/* El ancho sigue al logo recortado: el gap queda entre imágenes, no entre cajas vacías. */
.clients-group li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: auto; height: 148.8px; }
.clients-group img { display: block; height: auto; width: auto; max-width: 228px; max-height: var(--client-height, 110.4px); object-fit: contain; }
/* Compensación óptica para marcas compactas, conservando su proporción. */
.clients-group img[data-original$="/lala-100.png"],
.clients-group img[data-original$="/heineken-mexico-seeklogo.png"],
.clients-group img[data-original$="/efi%CC%81caz.png"] { --client-height: 144px; }
.clients-group img[data-original$="/li-ning-seeklogo.png"] { max-width: 194.94px; --client-height: 94.392px; --client-height-mobile: 73.872px; }
.clients.is-animated .clients-window { overflow: hidden; }
.clients.is-animated .clients-track { animation: clients-scroll 150s linear infinite; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .clients { padding: 44px 0; }
  .clients-group { gap: 36px; padding-right: 36px; }
  .clients-group li { height: 117.6px; }
  .clients-group img { max-width: 177.6px; max-height: var(--client-height-mobile, 86.4px); }
  .clients-group img[data-original$="/li-ning-seeklogo.png"] { max-width: 151.848px; }
  .clients-group img[data-original$="/lala-100.png"],
  .clients-group img[data-original$="/heineken-mexico-seeklogo.png"],
  .clients-group img[data-original$="/efi%CC%81caz.png"] { --client-height-mobile: 112.8px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients.is-animated .clients-track { animation: none; }
  .clients.is-animated .clients-window { overflow-x: auto; }
  .clients-group[aria-hidden=true] { display: none; }
}
html.contact-page { scroll-snap-type: none; background: #fff; }
.contact-page body { background: #fff; }
.quote-layout { width: min(1180px, 86%); margin: auto; min-height: calc(100svh - var(--header-height) - 80px); padding: 72px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.quote-eyebrow { color: #e45499; font-size: 18px; font-weight: 700; margin: 0 0 28px; }
.quote-intro { min-width: 0; text-align: left; container-type: inline-size; }
.quote-intro h1 { margin: 0 0 22px; font-size: clamp(20px, 8.8cqi, 46px); font-weight: 700; line-height: 1.18; }
.quote-description { margin: 0; font-size: clamp(18px, 1.65vw, 23px); line-height: 1.6; color: #727272; }
.quote-email { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 36px; text-decoration: none; font-size: clamp(16px, 5.6cqi, 30px); font-weight: 700; }
.quote-email svg { flex: 0 0 auto; width: clamp(26px, 7cqi, 38px); height: auto; }
.quote-email span { max-width: 100%; overflow-wrap: anywhere; }
.quote-form { display: grid; gap: 22px; min-width: 0; }
.quote-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.quote-field { min-width: 0; }
.quote-field label { display: block; font-size: 14px; color: #555; margin-bottom: 8px; }
.quote-field input, .quote-field textarea { width: 100%; min-width: 0; border: 1px solid #e5e5e5; border-radius: 0; padding: 17px; background: #fff; color: #171717; font: 400 17px/1.45 'Urbanist', Arial, sans-serif; }
.quote-field textarea { resize: vertical; min-height: 180px; }
.quote-field input::placeholder, .quote-field textarea::placeholder { color: #858585; opacity: 1; }
.quote-field :focus-visible { outline: 2px solid #f34b9a; outline-offset: 2px; }
.quote-form .contact-button { margin: 0; justify-self: start; border: 0; cursor: pointer; font-weight: 700; }
.quote-form-note { margin: 0; color: #686868; font-size: 14px; line-height: 1.5; }
.quote-form-note:empty { display: none; }
@media (max-width: 767px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr); padding: 48px 0; gap: 42px; }
}
@media (max-width: 480px) { .quote-form-row { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.privacy-link { font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.privacy-link:hover, .privacy-link:focus-visible { color: #f34b9a; }
html.privacy-page { scroll-snap-type: none; background: #fff; }
.privacy-page body { background: #fff; }
.privacy-content { max-width: 1000px; margin: 0 auto; padding: 44px 28px 48px; font-size: 16px; line-height: 1.55; color: #252525; }
.privacy-content h1 { margin: 0 0 24px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 700; }
.privacy-content h2 { margin: 24px 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.privacy-content p { margin: 0 0 12px; }
.privacy-content ul { margin: 0 0 12px; padding-left: 24px; }
.privacy-content a { overflow-wrap: anywhere; text-underline-offset: 3px; }
.privacy-content .privacy-updated { margin-top: 28px; font-size: 14px; color: #555; }
.pop-gallery.stands-gallery { max-width: 1000px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stands-gallery .pop-tile { aspect-ratio: 16 / 9; background: transparent; }
.stands-gallery .pop-tile img { object-fit: cover; }
@media (max-width: 600px) { .pop-gallery.stands-gallery { max-width: 480px; grid-template-columns: minmax(0, 1fr); } }
.pop-gallery.promotional-gallery { max-width: 1440px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.promotional-gallery .pop-tile { grid-column: span 3; aspect-ratio: 3 / 2; background: transparent; }
.promotional-gallery .pop-tile:nth-child(n+5) { grid-column: span 4; aspect-ratio: 2 / 1; }
.promotional-gallery .pop-tile img { object-fit: cover; }
@media (min-width: 1001px) {
  .events-gallery.promotional-gallery .pop-tile { grid-column: span 4; aspect-ratio: 2 / 1; }
  .events-gallery.promotional-gallery .pop-tile:nth-child(n+4) { grid-column: span 6; aspect-ratio: 2.5 / 1; }
}
@media (max-width: 1000px) {
  .pop-gallery.promotional-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotional-gallery .pop-tile, .promotional-gallery .pop-tile:nth-child(n+5) { grid-column: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) { .pop-gallery.promotional-gallery { grid-template-columns: minmax(0, 1fr); } }
/* Diez imágenes, cinco columnas: dos filas en escritorio. */
.pop-gallery.mupi-gallery { max-width: 1600px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mupi-gallery .pop-tile { aspect-ratio: 3 / 4; background: transparent; }
.mupi-gallery .pop-tile img { object-fit: cover; }
@media (max-width: 1000px) { .pop-gallery.mupi-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pop-gallery.mupi-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
/* El footer independiente es un destino válido al terminar de recorrer la galería. */
body > .contact-footer { scroll-snap-align: end; scroll-snap-stop: normal; }
html.service-page { scroll-snap-type: y proximity; }
.mupi-subtitle { margin: 14px auto 0; max-width: 900px; font-size: clamp(18px, 2vw, 28px); line-height: 1.4; font-weight: 400; }
.mupi-services-wrap { max-width: 1040px; margin: 0 auto 32px; }
.pop-services.mupi-services { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; gap: 8px 20px; }
.pop-services.mupi-services li { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.pop-showcase { min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); background: #fff; padding: clamp(36px, 5vh, 64px) 7vw; color: #14141a; }
.pop-heading { text-align: center; }
.pop-heading h1 { margin: 0; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.15; font-weight: 700; }
.pop-divider { height: 5px; width: 96px; background: #f34b9a; margin: 26px auto 22px; }
.pop-services-scroll { max-width: 1180px; margin: 0 auto 32px; overflow-x: auto; padding: 4px 0 12px; }
.pop-services { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(5, max-content); justify-content: center; column-gap: 20px; row-gap: 10px; width: max-content; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; }
.pop-services li { white-space: nowrap; }
.pop-services-scroll .pop-services { display: flex; gap: 20px; }
.pop-services-scroll .pop-services + .pop-services { margin-top: 10px; }
.pop-services li::before { content: '•'; color: #f34b9a; margin-right: 10px; }
.pop-gallery { max-width: 1280px; margin: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pop-tile { margin: 0; overflow: hidden; aspect-ratio: 1.12; background: #eee; }
.pop-gallery.pop-mosaic { display: flex; flex-direction: column; gap: 2px; }
.pop-mosaic-row { display: grid; gap: 2px; min-width: 0; }
.pop-mosaic .pop-tile { min-width: 0; min-height: 0; aspect-ratio: auto; background: transparent; }
@media (max-width: 1000px) {
  .pop-gallery.pop-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pop-mosaic-row { display: contents; }
  .pop-mosaic .pop-tile { aspect-ratio: 1; }
  .pop-mosaic .pop-tile img { object-fit: contain; }
}
@media (max-width: 600px) {
  .pop-gallery.pop-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pop-tile img, .pop-image-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.pop-image-placeholder { padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: #f0f0f1; color: #606069; font-size: 15px; }
.pop-image-placeholder > span:first-child { font-size: 12px; letter-spacing: .15em; color: #93939b; }
.pop-tile:nth-child(even) .pop-image-placeholder { background: #e7e7e9; }
@media (hover: hover) and (pointer: fine) {
  .pop-tile:hover img, .pop-tile:hover .pop-image-placeholder { transform: scale(1.035); filter: brightness(1.04); }
}
.pop-showcase.is-entering .pop-heading { animation: slide-content-in 850ms cubic-bezier(.22, 1, .36, 1) both; }
.pop-showcase.is-entering .pop-gallery { animation: slide-content-in 850ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
@media (max-width: 1000px) { .pop-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pop-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pop-image-placeholder { padding: 12px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .pop-showcase.is-entering .pop-heading, .pop-showcase.is-entering .pop-gallery { animation: none; }
  .pop-tile:hover img, .pop-tile:hover .pop-image-placeholder { transform: none; }
}
/* Colores muestreados del logotipo del elefante, sin el fondo negro. */
#navigation li:nth-child(1) { --menu-hover: #00a5cc; }
#navigation li:nth-child(2) { --menu-hover: #ba1f78; }
#navigation li:nth-child(3) { --menu-hover: #2aaa5c; }
#navigation li:nth-child(4) { --menu-hover: #e36e33; }
#navigation li:nth-child(5) { --menu-hover: #3e4795; }
#navigation li:nth-child(6) { --menu-hover: #e4c021; }
#navigation li > a, #navigation li > span { transition: color .22s ease; }
#navigation li:hover > a, #navigation li:hover > span,
#navigation li > a:focus-visible { color: var(--menu-hover); }
.contact { min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); background: #fff; color: #161616; display: flex; flex-direction: column; font-family: 'Urbanist', Arial, sans-serif; }
.contact-content { width: min(1180px, 86%); margin: auto; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-content: center; padding: 64px 0; }
.contact-eyebrow { margin: 0 0 12px; font: 500 14px/1.4 'Urbanist', Arial, sans-serif; color: #d93686; }
.contact h2 { margin: 0 0 20px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 400; line-height: 1.2; }
.contact-email { font-weight: 700; display: flex; align-items: center; gap: 16px; font-size: clamp(18px, 1.8vw, 28px); text-decoration: none; }
.contact-email svg { flex-shrink: 0; }
.contact-email span { min-width: 0; overflow-wrap: anywhere; }
.contact-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 28px; padding: 15px 20px; background: #f34b9a; color: #fff; text-decoration: none; font: 400 14px/1.3 'Urbanist', Arial, sans-serif; transition: background .2s; }
.contact-button:hover { background: #c92576; }
.branch-map { width: 100%; min-height: 220px; aspect-ratio: 3 / 1; background: #f0f1f2; box-shadow: 0 18px 34px #0000000c; display: grid; place-items: center; }
.map-placeholder { text-align: center; padding: 24px; color: #555; line-height: 1.6; }
.map-placeholder span { font-size: 14px; color: #737373; }
.branch-map iframe { width: 100%; height: 100%; min-height: 220px; border: 0; }
.contact-footer { background: #363636; color: #fff; padding: 18px 7%; }
.contact-footer > .footer-inner { max-width: 1240px; min-height: 36px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto; align-items: center; gap: 0; font-size: 14px; line-height: 1.5; }
.contact-footer > .footer-inner { position: relative; }
.footer-certifications { grid-column: 4; display: flex; align-items: center; gap: 14px; }
.footer-iso { display: block; width: 44px; height: 36px; object-fit: contain; }
.footer-esr { display: block; width: 72px; height: 36px; object-fit: contain; }
.footer-copyright { color: #ededed; padding-right: 24px; }
.footer-inner > .privacy-link { grid-column: 2; }
.footer-inner > .footer-socials { grid-column: 6; }
.privacy-pending { font-family: "Urbanist", Arial, sans-serif; font-size: 12px; font-weight: 400; }
.footer-socials { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.social-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ddd; border-radius: 1px; background: #fff; color: #17171b; opacity: 1; }
.social-button { text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.social-button:hover, .social-button:focus-visible { background-color: #f34b9a; border-color: #f34b9a; transform: translateY(-3px); }
.social-button[href="https://m.facebook.com/codigosmckei/"]:hover,
.social-button[href="https://m.facebook.com/codigosmckei/"]:focus-visible { background-color: #1877f2; border-color: #1877f2; }
@media (prefers-reduced-motion: reduce) {
  .social-button:hover, .social-button:focus-visible { transform: none; }
}
.contact.is-entering .contact-info { animation: slide-content-in 850ms cubic-bezier(.22, 1, .36, 1) both; }
.contact.is-entering .contact-branch { animation: slide-content-in 850ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
@media (max-width: 767px) {
  .contact-content { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 48px 0; }
  .contact-footer > .footer-inner { grid-template-columns: minmax(0, auto) minmax(8px, 1fr) auto minmax(8px, 1fr) auto; gap: 20px 0; }
  .footer-copyright { grid-column: 1 / -1; padding-right: 0; }
  .footer-inner > .privacy-link { grid-column: 1; }
  .footer-certifications { grid-column: 3; gap: 8px; }
  .footer-iso { width: 30px; height: 25px; }
  .footer-esr { width: 50px; height: 25px; }
  .footer-inner > .footer-socials { grid-column: 5; }
  .footer-socials { gap: 8px; }
  .social-button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact.is-entering .contact-info, .contact.is-entering .contact-branch { animation: none; }
}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.header{position:sticky;top:0;z-index:10;background:#fff;border-top:1px solid #272727}.header-inner{max-width:1180px;height:calc(var(--header-height) - 1px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px}/* El PNG contiene márgenes transparentes: encuadramos el logo con 20 píxeles de margen de seguridad por lado, sin modificar el original. */.brand{display:block;position:relative;flex-shrink:0;width:clamp(114px,10vw,140px);aspect-ratio:870/143;overflow:hidden}.brand img{position:absolute;display:block;width:220.6897%;max-width:none;height:auto;left:-58.7356%;top:-331.4685%}nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(24px,3.4vw,50px)}nav li{font-family:"Urbanist",Arial,sans-serif;font-size:14px;font-weight:400;white-space:nowrap;color:#444}nav [aria-disabled]{cursor:default}.menu-toggle{display:none}.hero{height:calc(100vh - var(--header-height));height:calc(100svh - var(--header-height));min-height:280px;position:relative;overflow:hidden;background:#171717}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--video-position);opacity:0;transition:opacity .3s}.hero.has-video .hero-video{opacity:1}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,8vw,130px);color:#fff;background:radial-gradient(ellipse at 90% 90%,#343434 0,transparent 60%),#171717}.placeholder-kicker{font-size:12px;letter-spacing:.3em;margin-bottom:30px}.placeholder-title{font-weight:400;font-size:clamp(38px,5.8vw,88px);line-height:1.08;letter-spacing:-.045em}.placeholder-note{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.17em;margin-top:42px;color:#bcbcbc}.placeholder-note span{width:28px;height:1px;background:#aaa}.hero-index{position:absolute;bottom:32px;right:5vw;font-size:10px;letter-spacing:.15em;color:#aaa}.has-video .placeholder,.has-video .hero-index{display:none}:focus-visible{outline:2px solid #555;outline-offset:6px}
@media(min-width:1600px){.header-inner{max-width:none;width:82%}nav ul{gap:3.4vw}}
@media(max-width:1280px){.header-inner{margin-inline:5vw}}
@media(max-width:1000px){:root{--header-height:68px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;border:0;background:none;cursor:pointer}.menu-toggle span{display:block;width:23px;height:1px;background:#161616;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:16px 6vw 30px;max-height:calc(100svh - var(--header-height));overflow:auto;border-top:1px solid #eee;box-shadow:0 15px 20px #0001}nav.is-open{display:block}nav ul{align-items:stretch;flex-direction:column;gap:0}nav li{font-size:16px;padding:18px 0;border-bottom:1px solid #eee}.placeholder{padding:8vw}.hero-index{bottom:24px;right:8vw}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Transiciones entre las secciones de la portada. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}
.hero, .about, .methods, .contact, .pop-showcase { scroll-snap-align: start; scroll-snap-stop: always; }
/* Los paneles más altos que la pantalla conservan su desplazamiento interno natural. */
@media (max-width: 767px), (max-height: 600px) {
  html { scroll-snap-type: y proximity; }
}
.about.is-entering .about-intro { animation: slide-content-in 850ms cubic-bezier(.22, 1, .36, 1) both; }
.about.is-entering .about-details { animation: slide-content-in 850ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes slide-content-in {
  from { opacity: 0; transform: translateY(45px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .about.is-entering .about-intro, .about.is-entering .about-details { animation: none; }
}
.about {
  --about-image: url('./assets/home-2.jpeg');
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  scroll-margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.8vw;
  padding: clamp(56px, 8vh, 100px) 3.9vw;
  color: #fff;
  background-color: #292929;
  /* La capa oscura afecta solo al fondo; el texto mantiene su brillo. */
  background-image: linear-gradient(rgb(0 0 0 / 56%), rgb(0 0 0 / 56%)), var(--about-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Urbanist', Arial, sans-serif;
}
.about h1, .about h2 {
  margin: 0;
  font-family: 'Urbanist', Arial, sans-serif;
  font-size: clamp(22.4px, 2.664vw, 51.2px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}
.about p {
  margin: 0;
  font-size: clamp(16px, 1.664vw, 32px);
  line-height: 1.5;
}
.about-divider {
  width: 51.5%;
  height: 4px;
  margin: clamp(24px, 2.7vw, 40px) 0 clamp(24px, 2.3vw, 34px);
  border: 0;
  border-radius: 2px;
  background: #dedede;
}
.about-details { display: grid; gap: clamp(32px, 3.6vw, 54px); }
.about-details h2 { margin-bottom: clamp(22px, 2.3vw, 34px); }
.methods {
  --methods-spacing: clamp(48px, 7vh, 88px);
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding: var(--methods-spacing) 6.7vw;
  background: #51a784;
  color: #fff;
}
.methods h2 {
  margin: 0 0 var(--methods-spacing);
  text-align: center;
  font: 500 clamp(28px, 2.9vw, 48px)/1.2 'Urbanist', Arial, sans-serif;
  letter-spacing: -.035em;
}
.methods-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, max-content);
  align-content: space-between;
  column-gap: 4.5vw;
  row-gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.methods-grid li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  font: 400 clamp(18px, 1.94vw, 32px)/1.35 'Urbanist', Arial, sans-serif;
  overflow-wrap: break-word;
}
.method-icon { display: block; width: clamp(44px, 4.2vw, 64px); aspect-ratio: 1; flex-shrink: 0; }
/* Títulos y menú en Urbanist Bold. */
.about h1, .about h2, .methods h2, .contact h2,
.contact-eyebrow, .placeholder-title, nav li { font-weight: 700; }
.method-icon img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.1); }
.method-icon img[src$="/efectos3d.png"] { transform: scale(1.32); }
.methods.is-entering h2 { animation: slide-content-in 850ms cubic-bezier(.22, 1, .36, 1) both; }
.methods.is-entering .methods-grid { animation: slide-content-in 850ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
@media (min-width: 601px) and (max-width: 1000px) {
  .methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: max-content; }
}
@media (max-width: 600px) {
  .methods { --methods-spacing: 48px; padding: var(--methods-spacing) 7vw; }
  .methods-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; gap: 28px; }
  .methods-grid li { font-size: 18px; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .methods.is-entering h2, .methods.is-entering .methods-grid { animation: none; }
}
@media (max-width: 767px) {
  .about { grid-template-columns: 1fr; gap: 40px; padding: 56px 7vw; }
  .about h1, .about h2 { font-size: clamp(21.6px, 4.64vw, 32px); }
  .about p { font-size: clamp(16px, 2.64vw, 18.4px); line-height: 1.6; }
  .about-details { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) { html.service-page { scroll-snap-type: none; } }

/* En pantallas pequeñas mostramos todo el video, incluidos sus textos. */
@media (max-width: 1000px) {
  .hero-video { object-fit: contain; object-position: center; }
}

/* Panel móvil de navegación, compartido por todas las páginas. */
@media (max-width: 1000px) {
  html.menu-open, html.menu-open body { overflow: hidden; }
  .header::before { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / 68%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
  .menu-open .header::before { opacity: 1; visibility: visible; }
  #navigation { display: block; position: fixed; inset: 0 0 0 auto; width: 90vw; height: 100vh; height: 100dvh; max-height: none; padding: max(100px, env(safe-area-inset-top)) 6.5vw max(32px, env(safe-area-inset-bottom)); background: #121316; border: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s; }
  #navigation.is-open { transform: translateX(0); visibility: visible; }
  #navigation ul { align-items: stretch; gap: clamp(20px, 3.3vh, 36px); }
  #navigation li { padding: 0; border: 0; text-align: right; white-space: normal; color: #fff; font-size: clamp(20px, 5.5vw, 38px); line-height: 1.25; }
  #navigation li > a, #navigation li > span { display: block; padding: 6px 0; overflow-wrap: break-word; }
  .menu-toggle { position: relative; z-index: 2; }
  .menu-toggle[aria-expanded=true] { position: fixed; top: max(14px, env(safe-area-inset-top)); right: calc(6.5vw - 10px); }
  .menu-toggle[aria-expanded=true] span { width: 28px; height: 2px; background: #ccc; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-open :focus-visible { outline-color: #fff; outline-offset: 3px; }
}