.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{text-transform:none;font-style:normal;text-decoration:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}}
/* Start custom CSS *//*
  SKY AUTOWORKS — CSS GLOBAL COMPARTIDO
  ------------------------------------------------------
  Dónde pegarlo en Elementor:
  Elementor > Ajustes del sitio (Site Settings) > Fondo y tipografía... en
  realidad ve directo a: Elementor > Ajustes del sitio > "CSS personalizado"
  (Custom CSS) — si no lo ves, necesitas Elementor Pro, o puedes pegarlo en
  Apariencia > Personalizar > CSS adicional (funciona igual, es CSS puro).

  Esto reemplaza el <style> que antes iba repetido dentro de cada página.
  Se carga UNA sola vez para todo el sitio (Inicio, Servicios, Nosotros,
  Contacto, header y footer) — mejor para el desempeño que repetirlo 4 veces.

  Cada página ahora solo necesita su HTML (sin <style>, sin doctype, sin
  head/body) dentro del widget "HTML" de Elementor.

  Nota técnica: unifiqué el CSS de las 4 páginas. Donde una clase tenía
  valores distintos según la página (el fondo de la cabecera interna en
  Servicios, la sección "Proceso" en Inicio vs Servicios, y el bloque CTA
  de Contacto), usé .elementor-kit-5es con #id / .clase para que cada página
  mantenga su estilo exacto sin duplicar el CSS completo. Por eso:
  - servicios.html tiene 2 ids nuevos: id="page-servicios" e
    id="proceso-servicios" (no afectan contenido ni SEO).
  - El id="contacto" NO sirve para diferenciar el CTA de Contacto, porque
    Inicio y Servicios TAMBIÉN usan id="contacto" en su propia sección de
    cita (para que el botón "Agendar cita" del menú funcione en cada
    página). Por eso la página de Contacto usa además la clase
    ".cta-contacto" — solo esa página la tiene.
*/

:root {
  --navy:    #16152d;
  --navy2:   #1e1d3d;
  --blue:    #37a9e1;
  --white:   #ffffff;
  --off:     #F4F6F9;
  --gray:    #45505c;
  --gray2:   #9ca3af;
  --green:   #25D366;
  --gold:    #C8A84B;
  --fh:      'Syne', sans-serif;
  --fb:      'Montserrat', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--white); color: var(--navy); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.brief { display: none; }

/* ── SECCIONES BASE ── */
.sec { padding: 88px 60px; }
.sec.dark { background: var(--navy); }
.sec.soft { background: var(--off); }
.sec.dark.bg-marcas {
  background:
    linear-gradient(rgba(13,42,74,0.9), rgba(13,42,74,0.94)),
    url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c8928c18b33f337a69e44d_64022691b8cedd7864e7d7da_sky-autoworks-reparacion-de-frenos%2520para%2520vehiculos%2520-puerto-rico%2520-%2520Taller%2520de%2520mecanica%2520automotriz.jpeg') center/cover no-repeat;
}
.sec.dark.bg-proceso {
  background:
    linear-gradient(rgba(13,42,74,0.9), rgba(13,42,74,0.94)),
    url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c8928fdb3f8ea7b2d08945_64022682a423537adf24949f_skyautoworks%2520-servicio-de-cambio-de-aceite-y-filtro-puerto-rico%2520-%2520Taller%2520de%2520mecanica%2520automotriz.jpeg') center/cover no-repeat;
}
.sec.dark.bg-contacto {
  background:
    linear-gradient(rgba(13,42,74,0.9), rgba(13,42,74,0.94)),
    url('https://cdn.prod.website-files.com/63b4b1737e2c701f5ef3611c/640229f8d6a55e3e8f2344b5_skyautoworks%20-puerto%20rico%20-%20preguntas%20y-respuestas%20-%20Taller%20de%20mecanica%20automotriz.jpg') center/cover no-repeat;
}

/* ── TIPOGRAFÍA / COMPONENTES COMUNES ── */
.tag { font-size: 14px; font-weight: 600; color: var(--blue); letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tag::before { content: ''; width: 18px; height: 1.5px; background: var(--blue); }
.tag.light { color: rgba(255,255,255,0.78); }
.tag.light::before { background: rgba(255,255,255,0.4); }
.tag.center { justify-content: center; }
.tag.center::before { display: none; }
.h2 { font-family: var(--fh); font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; color: var(--navy); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 12px; }
.h2.white { color: var(--white); }
.h2 em { color: var(--blue); font-style: normal; }
.sub { font-size: 18px; font-weight: 300; color: var(--gray); line-height: 1.8; max-width: 560px; }
.sub.white { color: rgba(255,255,255,0.92); font-size: 19px; }
.hdr { margin-bottom: 48px; }
.hdr.center { text-align: center; }
.hdr.center .sub { margin: 12px auto 0; }

/* ── HERO (Inicio) ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--navy); overflow: hidden; display: flex; flex-direction: column; }
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c701f5ef3611c/640229f8d6a55e3e8f2344b5_skyautoworks%20-puerto%20rico%20-%20preguntas%20y-respuestas%20-%20Taller%20de%20mecanica%20automotriz.jpg');
  background-position: center 35%;
  background-size: cover; background-position: center right;
  opacity: 0.75;
}
.hero-ov {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,42,74,0.94) 0%, rgba(13,42,74,0.8) 32%, rgba(13,42,74,0.28) 68%, rgba(13,42,74,0.02) 100%),
    linear-gradient(0deg, rgba(13,42,74,0.6) 0%, transparent 32%);
}
.hero-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); z-index: 3; }
.hero-inner { position: relative; z-index: 5; padding: 72px 60px 80px; width: 100%; flex: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.eyebrow-dash { width: 20px; height: 1.5px; background: var(--blue); }
.eyebrow-txt { font-size: 12px; font-weight: 500; color: var(--blue); letter-spacing: 0.16em; text-transform: uppercase; }
.hero-h1 { font-family: var(--fh); font-size: clamp(46px, 6.5vw, 76px); font-weight: 700; color: var(--white); line-height: 0.97; letter-spacing: -0.025em; margin-bottom: 12px; }
.hero-h1 em { color: var(--blue); font-style: normal; }
.hero-tagline { font-family: var(--fh); font-size: clamp(17px, 2vw, 24px); font-weight: 500; color: rgba(255,255,255,0.88); letter-spacing: -0.01em; margin-bottom: 20px; }
.hero-p { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.8; max-width: 490px; margin-bottom: 34px; }
.hero-p strong { color: rgba(255,255,255,0.75); font-weight: 500; }

/* Botones */
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.btn-p {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #37a9e1 0%, #5fc9f0 100%); color: var(--white);
  font-size: 15px; font-weight: 600; padding: 15px 24px; border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(55,169,225,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(55,169,225,0.38); }
.btn-p svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-s {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--white);
  font-size: 15px; font-weight: 600; padding: 15px 24px; border-radius: 8px;
  border: 2px solid var(--green);
  box-shadow: 0 4px 18px rgba(37,211,102,0.3);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-s:hover { background: #1fb955; border-color: #1fb955; transform: translateY(-2px); }
.btn-s svg { width: 18px; height: 18px; fill: var(--white); flex-shrink: 0; }
.micro { font-size: 12px; color: rgba(255,255,255,0.8); letter-spacing: 0.04em; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; }
.micro::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* Stats */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0.5px solid rgba(255,255,255,0.09); padding-top: 26px; width: 100%; margin-top: 52px; }
.hs { padding: 0 32px; border-right: 0.5px solid rgba(255,255,255,0.07); }
.hs:first-child { padding-left: 0; }
.hs:last-child { border-right: none; }
.hs-n { font-family: var(--fh); font-size: 34px; font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -0.02em; }
.hs-n em { color: var(--blue); font-style: normal; font-size: 24px; }
.hs-l { font-size: 11px; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; line-height: 1.5; }
.stars { color: #F5A623; font-size: 12px; letter-spacing: 1px; }

/* ── PÁGINAS INTERNAS: CABECERA (Servicios / Nosotros) ── */
.page-hero { position: relative; background: var(--navy); overflow: hidden; }
.page-hero-bg {
  position: absolute; inset: 0;
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c701f5ef3611c/63ffdb47eb83487a6d3f4ec4_skyautoworks%20-%20Taller%20de%20mecanica%20automotriz%20-contacto.jpg');
  background-size: cover; background-position: center 30%;
  opacity: 0.8;
}
/* Servicios usa una foto distinta en su cabecera */
#page-servicios .page-hero-bg {
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c8928c18b33f337a69e44d_64022691b8cedd7864e7d7da_sky-autoworks-reparacion-de-frenos%2520para%2520vehiculos%2520-puerto-rico%2520-%2520Taller%2520de%2520mecanica%2520automotriz.jpeg');
}
/* Páginas de servicio individual — cada una con su propia foto de cabecera */
#page-svc-aceite .page-hero-bg {
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c890584e9cbe17b52f8807_640386b04b57260c067bd0b6_skyautoworks%2520-cambio%2520de%2520aceite%2520y%2520filtro%2520-%2520carolina%2520PR%2520-Taller%2520de%2520mecanica%2520Automotriz.jpeg');
}
#page-svc-frenos .page-hero-bg {
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c890598d13dfa0dbf61745_6403871b401121ddff793859_skyautoworks%2520-servicio%2520reparacion-de-frenos%2520-%2520Taller%2520de%2520mecanica%2520Automotriz.jpeg');
}
#page-svc-ac .page-hero-bg {
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c8905b7962315b236cc4aa_64038759ae6845003b7783b1_skyautoworks%2520-reparaci%25C3%25B3n%2520de%2520aire%2520acondicionado%2520para%2520vehiculos%2520-%2520Taller%2520de%2520mecanica%2520Automotriz.jpeg');
}
#page-svc-flotas .page-hero-bg {
  background-image: url('https://cdn.prod.website-files.com/63b4b1737e2c7068ebf3612a/69c8905cdb3f8ea7b2cf4931_640387a0a05a6b73af47f429_skyautoworks%2520-servicio%2520corporativo%2520de%2520mantenimiento%2520de%2520flotas%2520-%2520Taller%2520de%2520mecanica%2520automotriz.jpeg');
}

/* ── CONTENIDO LEGAL (Términos y condiciones / Política de privacidad) ── */
.legal-wrap { max-width: 820px; margin: 0 auto; }
.legal-h2 { font-family: var(--fh); font-size: 24px; font-weight: 700; color: var(--navy); margin: 34px 0 12px; }
.legal-h2:first-child { margin-top: 0; }
.legal-h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--navy); margin: 20px 0 8px; }
.legal-p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 14px; }
.legal-list { margin: 0 0 14px 20px; padding: 0; }
.legal-list li { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 6px; }
.page-hero-ov {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,42,74,0.95) 0%, rgba(13,42,74,0.82) 45%, rgba(13,42,74,0.4) 100%),
    linear-gradient(0deg, rgba(13,42,74,0.55) 0%, transparent 45%);
}
.page-hero-inner { position: relative; z-index: 5; padding: 130px 60px 60px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; }
.breadcrumb a { color: rgba(255,255,255,0.75); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span { color: rgba(255,255,255,0.3); }
.breadcrumb .current { color: var(--white); font-weight: 500; }
.page-hero-h1 { font-family: var(--fh); font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; color: var(--white); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-hero-h1 em { color: var(--blue); font-style: normal; }
.page-hero-p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.7); max-width: 560px; line-height: 1.75; }

/* ── SERVICIOS (grid, Inicio + Servicios) ── */
.srv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.srv-card { background: var(--white); border: 0.5px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.srv-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 10px 36px rgba(55,169,225,0.09); }
.srv-img { height: 176px; overflow: hidden; background: var(--navy2); display: flex; align-items: center; justify-content: center; }
.srv-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.srv-card:hover .srv-img img { transform: scale(1.05); }
.srv-body { padding: 20px; }
.srv-tag { font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.srv-name { font-family: var(--fh); font-size: 25px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.2; }
.srv-txt { font-size: 15px; color: var(--gray); line-height: 1.65; margin-bottom: 18px; }
.srv-lnk { font-size: 15px; font-weight: 600; color: var(--blue); background: rgba(55,169,225,0.1); border: 1px solid rgba(55,169,225,0.25); border-radius: 8px; padding: 11px 18px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s, color 0.2s; }
.srv-card:hover .srv-lnk { background: var(--blue); color: var(--white); }

/* ── MARCAS + CARRUSEL (solo Inicio) ── */
.brands { display: flex; flex-wrap: wrap; margin-top: 0; }
.brand { flex: 1; min-width: 120px; padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-right: 0.5px solid rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.06); transition: background 0.2s; }
.brand:hover { background: rgba(55,169,225,0.07); }
.brand-n { font-family: var(--fh); font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; transition: color 0.2s; }
.brand:hover .brand-n { color: var(--white); }
.brand-s { font-size: 10px; color: rgba(255,255,255,0.18); text-transform: uppercase; letter-spacing: 0.07em; }
.brands-foot { margin-top: 28px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.75); }
.brands-foot a { color: rgba(55,169,225,0.7); }
.brands-carousel-wrap {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.brands-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0; width: max-content; animation: scroll-brands 32s linear infinite; }
.brands-track:hover { animation-play-state: paused; }
@keyframes scroll-brands { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.brand-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 40px; border-right: 0.5px solid rgba(255,255,255,0.06); flex-shrink: 0; min-width: 160px; transition: background 0.2s; cursor: default; }
.brand-item:hover { background: rgba(55,169,225,0.07); }
.brand-item svg { opacity: 0.6; transition: opacity 0.25s; }
.brand-item:hover svg { opacity: 0.95; }
.brand-item-name { font-size: 11px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }

/* ── QUIÉNES SOMOS (solo Nosotros) ── */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.who-img { border-radius: 12px; overflow: hidden; height: 440px; }
.who-img img { width: 100%; height: 100%; object-fit: cover; }
.who-p { font-size: 15px; color: var(--gray); line-height: 1.85; margin-bottom: 16px; }

/* ── POR QUÉ ESCOGERNOS (Inicio + Nosotros) ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.why-img { position: relative; border-radius: 12px; overflow: hidden; height: 480px; }
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.why-img-ov { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(22,21,45,0.25) 0%, transparent 60%); }
.why-badge { position: absolute; bottom: 22px; left: 22px; background: rgba(22,21,45,0.9); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 13px 17px; backdrop-filter: blur(10px); }
.why-badge-n { font-family: var(--fh); font-size: 26px; font-weight: 700; color: var(--white); line-height: 1; }
.why-badge-s { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 2px; }
.why-items { display: flex; flex-direction: column; gap: 14px; }
.wi { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--off); border-radius: 10px; border: 0.5px solid #e5e7eb; transition: border-color 0.25s, transform 0.2s; }
.wi:hover { border-color: var(--blue); transform: translateX(4px); }
.wi-ic { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; background: rgba(55,169,225,0.09); border: 0.5px solid rgba(55,169,225,0.18); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.wi-t { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.wi-d { font-size: 13px; color: var(--gray); line-height: 1.6; }

/* ── PROCESO (Inicio, valores por defecto) ── */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.proc::before { content: ''; position: absolute; top: 30px; left: 10%; right: 10%; height: 0.5px; background: rgba(255,255,255,0.08); }
.ps { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; position: relative; z-index: 1; }
.ps-num { width: 60px; height: 60px; border-radius: 50%; background: var(--navy2); border: 0.5px solid rgba(55,169,225,0.25); display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 22px; font-weight: 700; color: var(--blue); margin-bottom: 14px; transition: background 0.2s; }
.ps:hover .ps-num { background: rgba(55,169,225,0.12); }
.ps-t { font-family: var(--fh); font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.ps-d { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.6; }
/* Servicios usa un espaciado ligeramente distinto en su "Proceso" */
#proceso-servicios { gap: 24px; }
#proceso-servicios .ps { padding: 0 6px; }
#proceso-servicios .ps-t { margin-bottom: 8px; }
#proceso-servicios .ps-d { font-size: 13px; line-height: 1.7; }

/* ── GALERÍA (solo Inicio) ── */
.gal { columns: 3; column-gap: 10px; }
.gi { break-inside: avoid; margin-bottom: 10px; border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; }
.gi img { width: 100%; height: auto; display: block; filter: brightness(0.82); transition: transform 0.5s, filter 0.3s; }
.gi:hover img { transform: scale(1.05); filter: brightness(0.55); }
.gi-lbl { position: absolute; bottom: 14px; left: 14px; opacity: 0; transition: opacity 0.3s; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: 0.07em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.gi-lbl::before { content: ''; width: 14px; height: 1px; background: var(--blue); }
.gi:hover .gi-lbl { opacity: 1; }

/* ── TESTIMONIOS + GOOGLE (Inicio, Nosotros, Contacto) ── */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tc2 { background: var(--white); border: 0.5px solid #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.25s, box-shadow 0.25s; }
.tc2:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.05); }
.tc2-stars { font-size: 14px; color: #F5A623; margin-bottom: 12px; }
.tc2-q { font-size: 14px; color: var(--gray); line-height: 1.75; font-style: italic; margin-bottom: 18px; position: relative; padding-left: 16px; }
.tc2-q::before { content: '"'; position: absolute; left: 0; top: -2px; font-size: 28px; color: var(--blue); font-style: normal; line-height: 1; }
.tc2-auth { display: flex; align-items: center; gap: 10px; border-top: 0.5px solid #f3f4f6; padding-top: 14px; }
.tc2-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.tc2-av img { width: 100%; height: 100%; object-fit: cover; }
.tc2-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.tc2-sub { font-size: 11px; color: var(--gray2); }
.tc2-g { margin-left: auto; font-size: 16px; font-weight: 700; color: #4285F4; }
.g-badge { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; padding: 18px; background: var(--off); border-radius: 10px; border: 0.5px solid #e5e7eb; }
.g-stars { font-size: 20px; color: #F5A623; letter-spacing: 2px; }
.g-txt { font-size: 14px; color: var(--gray); }
.g-txt strong { color: var(--navy); font-size: 17px; }
.g-logo { font-size: 17px; font-weight: 700; letter-spacing: -0.5px; }
.g-logo span:nth-child(1){color:#4285F4} .g-logo span:nth-child(2){color:#EA4335} .g-logo span:nth-child(3){color:#FBBC05} .g-logo span:nth-child(4){color:#4285F4} .g-logo span:nth-child(5){color:#34A853} .g-logo span:nth-child(6){color:#EA4335}

/* ── EQUIPO (Inicio + Nosotros) ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tm { background: var(--white); border: 0.5px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: transform 0.25s; }
.tm:hover { transform: translateY(-4px); }
.tm-photo { height: 250px; overflow: hidden; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s; }
.tm:hover .tm-photo img { transform: scale(1.04); }
.tm-body { padding: 18px; }
.tm-name { font-family: var(--fh); font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.tm-role { font-size: 12px; color: var(--blue); font-weight: 500; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.tm-exp { font-size: 12px; color: var(--gray); line-height: 1.6; }

/* ── FAQ (Inicio + Servicios) ── */
.faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.faq-img { border-radius: 12px; overflow: hidden; height: 380px; }
.faq-img img { width: 100%; height: 100%; object-fit: cover; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq { border: 0.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--navy); transition: background 0.2s; }
.faq-q:hover { background: var(--off); }
.faq-ch { font-size: 15px; color: var(--blue); transition: transform 0.2s; flex-shrink: 0; }
.faq.open .faq-ch { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 20px 18px; font-size: 16px; color: var(--gray); line-height: 1.75; }
.faq.open .faq-a { display: block; }
.faq.open .faq-q { color: var(--blue); background: rgba(55,169,225,0.03); }

/* ── CTA + FORMULARIO (Inicio, Servicios, Nosotros — valores por defecto) ── */
.cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.cta-h { font-family: var(--fh); font-size: clamp(32px, 3.8vw, 50px); font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; }
.cta-h em { color: var(--blue); font-style: normal; }
.cta-d { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.8; margin-bottom: 28px; }
.cta-info { display: flex; flex-direction: column; gap: 12px; }
.cii { display: flex; align-items: center; gap: 12px; }
.cii-ic { width: 34px; height: 34px; border-radius: 8px; background: rgba(55,169,225,0.1); border: 0.5px solid rgba(55,169,225,0.18); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(--blue); }
.cii-t { font-size: 12px; color: rgba(255,255,255,0.75); }
.cii-v { font-size: 14px; font-weight: 500; color: var(--white); }
.cii-v a { color: var(--white); }
.cii-v a:hover { color: var(--blue); }
.contact-alt { display: flex; gap: 10px; margin-top: 4px; }
.contact-alt a { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: background 0.2s; color: #fff; }
.contact-alt a:hover { background: rgba(255,255,255,0.2); }
.contact-alt a[aria-label="WhatsApp"] { background: var(--green); border-color: var(--green); }
.contact-alt a[aria-label="WhatsApp"]:hover { background: #1fb955; border-color: #1fb955; }
.contact-alt a[aria-label="WhatsApp"] svg { fill: #fff !important; }
.map-lnk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 22px; }
.map-lnk:hover { text-decoration: underline; }
/* Formulario */
.form { background: var(--white); border-radius: 14px; padding: 30px; }
.form-h { font-family: var(--fh); font-size: 23px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-s { font-size: 15px; color: var(--gray); margin-bottom: 24px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fl { font-size: 12px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; }
.form input.fi, .form textarea.fi, .form .fi {
  width: 100% !important;
  padding: 14px 15px !important;
  border: 1px solid #e2e4e8 !important;
  border-radius: 8px !important;
  font-family: var(--fb) !important;
  font-size: 16px !important;
  color: var(--navy) !important;
  background: #f4f5f7 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s;
}
.form .fi::placeholder { color: #c3c7cd !important; opacity: 1; }
.form .fi:focus { border-color: var(--blue) !important; }
.form .fta { resize: vertical !important; min-height: 100px !important; }
.form .fb, .form button.fb {
  width: 100% !important;
  padding: 17px !important;
  background: linear-gradient(135deg, #37a9e1 0%, #5fc9f0 100%) !important;
  color: var(--white) !important;
  font-family: var(--fb) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: opacity 0.2s;
  box-shadow: 0 4px 18px rgba(55,169,225,0.25);
}
.form .fb:hover { opacity: 0.88; }
.fn { font-size: 13px; color: var(--gray2); text-align: center; margin-top: 10px; }
.fn a { color: var(--green); }

/* Contacto usa un CTA más compacto y alineado arriba (solo esa página trae la clase .cta-contacto) */
.cta-contacto .cta-d { color: rgba(255,255,255,0.72); line-height: 1.85; margin-bottom: 24px; }
.cta-contacto .cta-info { margin-bottom: 22px; }
.cta-contacto .cta-layout { align-items: start; }

/* ── MAPA (solo Contacto) ── */
.map-wrap { border-radius: 14px; overflow: hidden; border: 0.5px solid #e5e7eb; box-shadow: 0 10px 32px rgba(0,0,0,0.06); }
.map-wrap iframe { width: 100%; height: 420px; display: block; border: 0; }
.map-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); margin-top: 16px; }
.map-open:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sec { padding: 68px 32px; }
  .nav { padding: 14px 28px; }
  .hero-inner { padding: 60px 32px 68px; }
  .page-hero-inner { padding: 110px 32px 48px; }
  .srv-grid, .test-grid { grid-template-columns: 1fr 1fr; }
  .why-grid, .who-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-img, .who-img { height: 300px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .cta-layout { grid-template-columns: 1fr; gap: 36px; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-img { display: none; }
  #proceso-servicios { grid-template-columns: 1fr 1fr; gap: 28px; }
  #proceso-servicios::before { display: none; }
}
@media (max-width: 768px) {
  .nav { padding: 12px 18px; }
  .hero-inner { padding: 40px 18px 52px; }
  .page-hero-inner { padding: 90px 18px 40px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hs { border-right: none; padding: 0; }
  .btns { flex-direction: column; }
  .btn-p, .btn-s { justify-content: center; padding: 17px 24px; font-size: 16px; }
  .sec { padding: 52px 20px; }
  .srv-grid, .test-grid, .team-grid, .proc { grid-template-columns: 1fr; gap: 20px; }
  .proc::before { display: none; }
  .gal { columns: 2; }
  .frow { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
  .form-h { font-size: 22px; }
  .fi, .fb { font-size: 16px; }
  .brands { flex-wrap: wrap; }
  .brand { min-width: 50%; }
  .map-wrap iframe { height: 280px; }

  /* Legibilidad móvil: texto más grande, mensajes más cortos, mejor contraste */
  .full { display: none !important; }
  .brief { display: block !important; }
  :root { --gray: #45505c; }
  body { font-size: 17px; }
  .page-hero-ov { background: linear-gradient(180deg, rgba(13,42,74,0.92) 0%, rgba(13,42,74,0.88) 100%); }

  /* Hero móvil: foto visible + contenido abajo (mismo criterio que las landings) */
  .hero-bg { opacity: 1; background-position: center 30%; }
  .hero-ov { background: linear-gradient(180deg, rgba(13,42,74,0.30) 0%, rgba(13,42,74,0.18) 36%, rgba(13,42,74,0.62) 68%, rgba(13,42,74,0.96) 100%); }
  .hero-inner { display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-h1 { font-size: clamp(34px, 9.5vw, 46px); line-height: 1.08; }
  .hero-tagline, .micro { display: none; }
  .hero-stats { margin-top: 34px; padding-top: 22px; }
  .hero-p, .cta-d { font-size: 18px; line-height: 1.7; margin-bottom: 26px; color: rgba(255,255,255,0.88); }
  .hero-p strong { color: #fff; }
  .page-hero-p { font-size: 17px; color: rgba(255,255,255,0.85); }
  .sub { font-size: 19px; }
  .who-p { font-size: 17px; line-height: 1.75; }
  .micro { font-size: 14px; white-space: normal; color: rgba(255,255,255,0.82); }
  .wi-t { font-size: 17px; }
  .wi-d { font-size: 16px; line-height: 1.65; }
  .wi { padding: 18px 20px; }
  .why-items { gap: 16px; }
  .ps-t { font-size: 19px; }
  .ps-d { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.85); }
  .ps { margin-bottom: 8px; }
  .srv-name { font-size: 23px; }
  .srv-txt { font-size: 16px; line-height: 1.65; }
  .tc2-q { font-size: 16px; }
  .tm-exp { font-size: 15px; }
  .faq-q { font-size: 17px; padding: 18px 20px; }
  .faq-a { font-size: 16px; padding: 0 20px 18px; }
  .cii-t { font-size: 14px; color: rgba(255,255,255,0.75); }
  .cii-v { font-size: 16px; }
  .h2 { line-height: 1.15; }
  .hdr { margin-bottom: 36px; }
  .cta-contacto .cta-d { color: rgba(255,255,255,0.88); }
}/* End custom CSS */