/* ELEJEM · Etapa 11 · Pulido visual de la web pública (24/10/2026)
   Solo estilo, cargado el último. No cambia textos, enlaces, formularios ni scripts.
   Criterio (Taste Skill, reglas de la casa adaptadas a la marca negro + oro):
   - fuera etiquetas pequeñas en mayúsculas sobre los titulares (eyebrows) y numeraciones decorativas
   - titulares en dos líneas cuando cabe, sin <br> forzados, tracking menos apretado
   - sin tarjetas con icono arriba: servicios como lista grande; sin cajas de 1px ni líneas finas decorativas
   - sin vidrio ni sombras en reposo; superficies separadas por un escalón de tono
   - texto corrido en tinta plena, nada legible por debajo de 13px
   - los efectos "futuro" del hero (malla, trazas de corriente, destello) se conservan; se quitan brillos sueltos */

:root {
  --paper: #f3f2ef;          /* hueso neutro en lugar de crema amarillenta */
  --paper-2: #e9e7e2;        /* escalón de tono para separar superficies */
  --muted: #464950;          /* gris de apoyo con contraste suficiente */
  --line: rgba(17, 19, 24, .10);
}
body { background: var(--paper); }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* ---------- 1. Etiquetas sobre titulares: fuera ---------- */
.section-kicker, .hero .eyebrow, .service-hero .eyebrow, .service-dark .mini-label { display: none !important; }
.legal-hero .section-kicker { display: none !important; }

/* ---------- 2. Titulares: medida amplia, dos líneas, tracking natural ---------- */
.about-copy h2, .section-heading h2, .process h2, .brands-heading h2, .contact h2,
.service-intro h2, .includes-copy h2, .faq-heading h2, .ev-showcase-heading h2, .work-video-heading h2,
.service-intro-copy h2, .heritage-copy h2, .industrial-coordination-copy h2 {
  letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
}
.hero h1, .hero h2 { letter-spacing: -.045em; line-height: .98; font-size: clamp(2.6rem, 6.4vw, 6.6rem); max-width: none; }
.service-hero h1 { letter-spacing: -.04em; }
@media (min-width: 1025px) {
  .section-heading { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
  .about-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(3rem, 6vw, 6rem); }
}
@media (max-width: 720px) {
  .about-copy h2, .section-heading h2, .process h2, .brands-heading h2, .contact h2,
  .service-intro h2, .includes-copy h2, .faq-heading h2, .ev-showcase-heading h2, .work-video-heading h2,
  .service-intro-copy h2, .heritage-copy h2, .industrial-coordination-copy h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero h1, .hero h2 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
}

/* Palabra de acento del hero: oro de marca plano, sin degradado ni barrido animado */
.hero h1 em, .hero h2 em, .service-hero h1 em {
  background: none !important; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--gold) !important; animation: none !important;
}

/* ---------- 3. Texto corrido en tinta plena y tamaños mínimos legibles ---------- */
.about-copy > p:not(.section-kicker):not(.lead), .section-heading > p, .service-card p,
.brands-heading p:last-child, .heritage-copy > p, .industrial-coordination-copy > p { color: #2c2e33; }
.section-heading > p { font-size: 1.05rem; }
.utility-bar { font-size: .8125rem; border-bottom: 0; }
.header-call small { font-size: .8125rem; }
.technical-card span, .technical-card p, .sector-card p, .brand-disclaimer, .contact-direct small,
.process-steps p, .service-card p, .about-list p, .footer-col a, .site-footer p, .site-footer small { font-size: max(.8125rem, 1em); }
.sector-card p { font-size: .875rem; color: rgba(255,255,255,.86); }
.brand-disclaimer { font-size: .8125rem; color: #5b5e65; }
.text-link { text-transform: none; letter-spacing: 0; font-size: .95rem; }

/* Botones: planos y en minúscula de frase, esquinas rectas decididas una vez */
.button { text-transform: none; letter-spacing: .005em; font-size: .95rem; border-radius: 0; }
.button-primary::before { display: none; }
.button { transition: transform .2s var(--ease), background-color .2s, color .2s; }
.button:active { transform: translateY(1px) scale(.99); }

/* ---------- 4. Franja de compromisos: frases, no tarjetas ---------- */
.trust-strip { border: 0 !important; background: var(--paper-2); }
.trust-item { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.trust-item > span { display: none !important; }
.trust-item strong { font-size: 1.05rem; }
.trust-item p { color: #3a3d43; font-size: .9rem; }

/* ---------- 5. Sobre ELEJEM ---------- */
.about-list { border: 0; padding: 0; }
.about-list p { font-size: .95rem; }
.about-image-wrap::before { display: none; }
.technical-card {
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--ink) !important; border: 0 !important;
}
.technical-card span { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 700; }
.technical-card p { color: #c9cbd0; }

/* ---------- 6. Servicios: lista grande en lugar de rejilla de tarjetas con icono ---------- */
.services-grid { grid-template-columns: 1fr !important; border: 0 !important; gap: 0; }
.service-card, .service-card.service-featured {
  grid-column: auto !important; min-height: 0 !important; display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px; align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.2rem, 2.4vw, 2.4rem) !important;
  border: 0 !important; background: transparent; box-shadow: none !important; transform: none !important;
}
.service-card:nth-child(odd):not(.service-dark) { background: var(--paper); }
.service-card::before { display: none !important; }
.service-card:hover { background: var(--paper-2) !important; }
.service-card .service-icon, .service-card > span { display: none !important; }
.service-card h3, .service-featured h3 { margin: 0 !important; font-size: clamp(1.5rem, 2.4vw, 2.25rem) !important; letter-spacing: -.03em; }
.service-card:not(.service-dark) p { padding-right: 0 !important; font-size: 1rem; line-height: 1.6; max-width: 58ch; }
.service-card > a:not(.button) {
  position: relative !important; inset: auto !important; grid-column: 3; justify-self: end;
  width: 48px; height: 48px; opacity: 1 !important; transform: none !important; border: 0; background: var(--ink); color: #fff;
}
.service-card:hover > a:not(.button) { background: var(--gold); color: var(--ink); }
.service-card { position: relative !important; }
/* el enlace cubre toda la fila (como antes), anclado a la fila y no a la flecha */
.service-card > a:not(.button)::after { position: absolute; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2; }
.service-card > a:not(.button) svg { transition: transform .25s var(--ease); }
.service-card:hover > a:not(.button) svg { transform: translateX(3px); }
.service-dark { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto !important; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.service-dark, .service-dark:hover { background: var(--ink) !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.service-dark p { color: #d0d2d6; font-size: 1rem; }
.service-dark .button { margin: 0 !important; align-self: center; }
@media (max-width: 720px) {
  .service-card, .service-card.service-featured, .service-dark { grid-template-columns: minmax(0, 1fr) 48px !important; row-gap: .6rem; padding: 1.5rem 1.1rem !important; }
  .service-card h3 { grid-column: 1; }
  .service-card:not(.service-dark) p { grid-column: 1; grid-row: 2; }
  .service-card > a:not(.button) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .service-dark { grid-template-columns: 1fr !important; }
  .service-dark .button { justify-self: start; margin-top: .6rem !important; }
}

/* ---------- 7. Sectores: composición sin huecos; la foto de grúa en vertical, sin el rótulo ---------- */
@media (min-width: 1025px) {
  .sector-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 340px;
    grid-template-areas: "ev ev ho cr" "an na lo cr" "ba ba ba cr";
  }
  .sector-grid > .sector-card:nth-child(1) { grid-area: ev; }
  .sector-grid > .sector-card:nth-child(2) { grid-area: ho; }
  .sector-grid > .sector-card:nth-child(3) { grid-area: an; }
  .sector-grid > .sector-card:nth-child(4) { grid-area: na; }
  .sector-grid > .sector-card:nth-child(5) { grid-area: lo; }
  .sector-grid > .sector-card:nth-child(6) { grid-area: ba; }
  .sector-grid > .sector-card:nth-child(7) { grid-area: cr; }
  .sector-grid > .sector-card { grid-column: auto; }
}
.sector-crane img { object-position: center top; }
.sector-card h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }

/* ---------- 8. Marcas: logotipos en un tono, color al pasar ---------- */
.brand-marquee { border-block: 0; background: var(--paper); }
.brand-chip { border-right: 0; background: transparent; }
.brand-chip img { filter: grayscale(1) contrast(1.1); opacity: .72; transition: filter .3s, opacity .3s; }
.brand-chip:hover img { filter: none; opacity: 1; }
.brands .fx-wire, .brands-heading .fx-wire { margin-inline: auto; background: var(--gold); width: 64px; }

/* ---------- 9. Datos: cifras grandes sin cajas ni brillo ---------- */
.fact-grid { border: 0 !important; gap: 0; }
.fact { border: 0 !important; min-height: 0; padding: 2rem 1.6rem; background: var(--paper); }
.fact-grid { gap: .75rem !important; }
.fact strong::after { display: none; }
.fact span { text-transform: none; letter-spacing: 0; font-size: .95rem; color: #3a3d43; font-weight: 600; }

/* ---------- 10. Líneas decorativas, vidrio y halos ---------- */
.fx-wire { display: none !important; }
.scroll-progress span { box-shadow: none; background: var(--gold); }
.work-video-stage { box-shadow: none; }
.status-dot { box-shadow: none; }
.slide-controls button, .hero-ui button { -webkit-backdrop-filter: none; backdrop-filter: none; }
.process-steps li, .process-steps li:last-child { border: 0; }
.process-steps li + li { margin-top: .4rem; }
.process-steps li { padding: 1.6rem 1.4rem; background: rgba(255,255,255,.035); }
.process-steps p { color: #c9cbd0; font-size: .95rem; }
.process-steps > li > span { border: 0; background: rgba(244,178,35,.14); }
.contact-direct, .contact-direct > * { border: 0 !important; }
.contact-direct > * { padding: .95rem 0; }
.contact-direct small { color: #a7aab0; font-size: .8125rem; }
.contact-copy > p:not(.section-kicker) { color: #c9cbd0; }
.contact-glow { display: none; }

/* Cinta del hero: separador discreto en vez de rombos, texto algo mayor */
.hero-ticker i { font-size: 0 !important; width: 4px; height: 4px; background: currentColor; opacity: .55; border-radius: 50%; display: inline-block; vertical-align: middle; }
.hero-ticker span { letter-spacing: .02em; font-size: 1.05rem; font-weight: 600; }

/* Glifos decorativos (✦) en pies de foto de páginas de servicio: fuera */
.certificate-photo-grid figcaption > span, .ev-showcase figcaption > span { display: none !important; }

/* Movimiento: se respeta la preferencia del sistema */
@media (prefers-reduced-motion: reduce) { .button, .service-card > a:not(.button) svg { transition: none; } }

/* ---------- 11. Pie: legible, sin títulos diminutos en mayúsculas ---------- */
.footer-column h2 { text-transform: none; letter-spacing: -.01em; font-size: 1rem; }
.footer-column a, .footer-column span { color: #b9bcc2; font-size: .875rem; }

/* Cabecera y pie sin filetes: la cabecera fija ya se separa por su fondo */
.site-header { border-bottom-color: transparent !important; }
.footer-bottom { border-top: 0 !important; }
.footer-bottom { font-size: .8125rem; color: #9a9da4; }

/* Navegación, barra móvil y metadatos del vídeo a tamaño legible */
.desktop-nav > a, .desktop-nav summary, .client-nav-link { font-size: .875rem; }
.menu-button em { font-size: .8125rem; letter-spacing: .04em; }
.work-video-meta span { font-size: .8125rem; letter-spacing: .02em; text-transform: none; }
.footer-status, .back-top { font-size: .8125rem; }
.ux-mobilebar a { font-size: .8125rem; }

/* ======================= Páginas de servicio ======================= */
/* Titulares de sección con la misma escala en todas las páginas */
main .section h2:not(.client-request-card h2):not(.form-shell h2) {
  font-size: clamp(2.1rem, 3.6vw, 3.6rem); letter-spacing: -.035em; line-height: 1.02;
}
@media (max-width: 720px) { main .section h2:not(.client-request-card h2):not(.form-shell h2) { font-size: clamp(1.6rem, 7vw, 2.2rem); } }
.real-panels-heading > p, .includes-copy > p:not(.technical-caption) { color: #c9cbd0; }

/* Tipos de solución: ficha técnica en dos columnas, sin icono arriba ni cajas de 1px */
.solution-grid, .panel-alert-grid { border: 0 !important; gap: clamp(.75rem, 1.4vw, 1rem); }
@media (min-width: 1025px) { .solution-grid, .panel-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.solution-card, .panel-alert-card {
  min-height: 0 !important; border: 0 !important; background: var(--paper); padding: clamp(1.6rem, 2.6vw, 2.4rem) !important;
  transform: none !important; box-shadow: none !important;
}
.panel-alerts .panel-alert-card, .services .solution-card { background: var(--paper); }
.solution-card > svg, .solution-card > span, .panel-alert-card > .alert-icon, .panel-alert-card > strong { display: none !important; }
.solution-card h3, .panel-alert-card h3 { margin: 0 0 .7rem !important; font-size: clamp(1.4rem, 2vw, 1.85rem) !important; }
.solution-card p, .panel-alert-card p { color: #2c2e33; font-size: 1rem; max-width: 52ch; }
.solution-card small { text-transform: none; letter-spacing: 0; font-size: .875rem; color: #5b5e65; font-weight: 600; padding-top: 1.1rem; }
.solution-card:hover, .panel-alert-card:hover { background: var(--ink) !important; color: #fff; }
.solution-card:hover small { color: #c9cbd0; }
.panel-safety-note strong { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.panel-safety-note > a { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.service-inline-cta { border-top: 0; }

/* Barras doradas decorativas sobre tarjetas: fuera */
.industrial-application-card > span, .certificate-check > span, .certificate-outcome > span { display: none !important; }

/* Insignia y detalle de la galería: sin sombra flotante en reposo */
.includes-badge, .includes-detail, .panel-media-motion { box-shadow: none !important; }
.includes-badge span { text-transform: none; letter-spacing: 0; font-size: .875rem; }

/* Lista técnica en secciones oscuras: separación por espacio, no por filetes */
.technical-list, .technical-list li { border: 0 !important; }
.technical-list li { padding: .85rem 0; }
.technical-list span { color: #c2c5cb; font-size: .9rem; }

/* Pies de foto de galerías reales: sin rótulos en mayúsculas diminutas */
.real-panel-copy span, .real-panels figcaption span, .includes-gallery figcaption span { text-transform: none; letter-spacing: 0; font-size: .875rem; }

/* FAQ: filas por tono, botón +/- relleno */
.faq-item { border-bottom: 0 !important; }
.faq-item + .faq-item { margin-top: .4rem; }
.faq-item summary { padding: 1.3rem 1.2rem; background: var(--paper); }
.faq-item p { padding: 1rem 1.2rem 1.4rem; color: #2c2e33; }
.faq-item summary span { border: 0; background: var(--paper-2); }

/* Servicios relacionados */
.related-card { border: 0 !important; box-shadow: none !important; }
.real-panel-card { border: 0 !important; }
.real-panel-card figcaption { border-top: 0 !important; }
.real-panel-card figcaption > span { display: none; }
.real-panel-card p { color: #c9cbd0; }
.real-panels-note { color: #a7aab0; font-size: .8125rem; }

/* Tamaños mínimos y rótulos en minúscula de frase en páginas de servicio */
.service-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.7rem); max-width: none; line-height: 1; }
@media (max-width: 720px) { .service-hero h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); } }
.panel-safety-note h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.breadcrumb, .breadcrumb a, .breadcrumb span { font-size: .8125rem; }
main small, main figcaption, .technical-caption, .real-panel-media > span, .related-card span {
  font-size: max(.8125rem, 1em); text-transform: none; letter-spacing: .005em;
}
main small, main figcaption, .technical-caption { font-size: .8125rem; }
.heritage-image > span { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
.reform-showcase, .panel-showcase { background: var(--paper); }
.heritage-renewal, .panel-renewal, .industrial-coordination { background: var(--paper-2); }
.reform-points, .reform-points li, .panel-regulation, .faq-list, .related-services { border-top: 0 !important; border-bottom: 0 !important; }

/* Datos: tres cifras reales (se retiró "100% compromiso técnico"); tres columnas iguales,
   y en móvil filas con la cifra a la izquierda y su explicación al lado */
.fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.fact strong { font-size: clamp(2.6rem, 4.4vw, 4rem); }
@media (max-width: 720px) {
  .fact-grid { grid-template-columns: 1fr !important; }
  .fact { flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 1.1rem; min-height: 0 !important; padding: 1.2rem 1.1rem !important; }
  .fact strong { flex: 0 0 3.2rem; font-size: 2.6rem; }
  .fact span { margin-top: 0 !important; font-size: 1rem !important; }
}
