/* ────────────────────────────────────────────────────────────── Escaba — sistema visual compartido. Se carga en las OCHO páginas, la última dentro del ``, para que sus reglas ganen a las que cada página lleva escritas dentro. Dos partes: 1. Las piezas que el sitio repetía a mano y habían divergido (botones, etiquetas de sección, migas, datos de contacto). 2. El cotizador: el modal y el formulario que `cotizador.js` pinta, iguales en todo el sitio. Regla al tocar esto: si algo se repite en más de una página, se declara AQUÍ. Volver a escribirlo dentro de una página es cómo se llegó a tener tres botones principales distintos. ────────────────────────────────────────────────────────────── */ /* ══ Piezas compartidas del sitio ══════════════════════════════ Vivían escritas a mano dentro de cada página y habían divergido. Aquí se declaran UNA vez, para las ocho. */ /* ── Botones ── Medido antes de tocar nada: el botón principal tenía TRES formas distintas (DM Sans 13/500 en la portada, Oswald 12/600 en tres páginas, Oswald 13/500 en otras dos) y —lo más visible— dos páginas lo pintaban BLANCO mientras las otras cuatro lo pintaban azul, estando las seis sobre el MISMO fondo navy. El secundario existía con tres nombres para el mismo botón: `.btn-secondary`, `.btn-outline` y `.btn-ghost`. El idioma que se adopta es el de la barra de navegación, que era lo único ya idéntico en las ocho páginas: DM Sans, versalitas, píldora. */ .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .sost-cta-btn, .nav-cta, .nm-cta{ font-family:'DM Sans',-apple-system,sans-serif; font-weight:500; letter-spacing:.06em; text-transform:uppercase; border-radius:100px; line-height:1; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; white-space:nowrap; transition:background-color .3s, color .3s, border-color .3s, opacity .3s; } .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .sost-cta-btn{ font-size:13px; padding:14px 32px; } .nav-cta, .nm-cta{ font-size:12px; padding:10px 22px; } /* Principal: el mismo relleno en las seis páginas que lo usan. */ .btn-primary{ background:#2B4D69; color:#fff; border:1px solid transparent; } .btn-primary:hover{ background:#0C213F; color:#fff; } /* Secundario: los tres nombres, un solo botón. */ .btn-secondary, .btn-outline, .btn-ghost{ background:transparent; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.25); } .btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,.55); } /* Sostenibilidad vive sobre el azul medio, no sobre el navy: ahí el relleno claro sí es lo correcto y solo se unifica su tipografía. */ .sost-cta-btn{ background:#fff; color:#0C213F; border:1px solid #fff; } .sost-cta-btn:hover{ background:transparent; color:#fff; } /* ── Alineación del hero ── El hero de las páginas de producto está centrado (`text-align:center`), pero la fila de etiquetas es un contenedor flex y `text-align` no manda dentro de un flex: sus 900 px de caja tenían 457 px de contenido pegados a la izquierda, con el título y los botones centrados justo encima y debajo. */ .hero-badges{ justify-content:center; flex-wrap:wrap; } /* Los dos botones del hero: centrados y, cuando no caben, que caigan uno sobre otro con el MISMO ancho en vez de quedar descolgados. */ .hero-btns, .hero-ctas{ flex-wrap:wrap; justify-content:center; } @media (max-width:560px){ .hero-btns, .hero-ctas{ flex-direction:column; align-items:center; } .hero-btns > *, .hero-ctas > *{ width:100%; max-width:280px; } } /* ── Barra superior en móvil ── Las ocho páginas ESCONDÍAN «Cotizar» por debajo de 900 px y dejaban solo el botón de menú. Se deja visible a propósito —es la acción principal, y la campaña de correos llega sobre todo a móviles— pero pegado al menú: la barra reparte sus piezas con `space-between` y el botón quedaba flotando en mitad de la pantalla. El punto de ruptura es el MISMO que usa el sitio (900 px). Con uno distinto habría una franja de anchos donde el menú aún se ve y el botón ya se ha ido al borde. */ @media (max-width:900px){ .nav-cta{ display:inline-flex; margin-left:auto; } .nav-burger{ margin-left:14px; } } /* ── Etiqueta de sección ── Tenía tres tipografías distintas (DM Mono, DM Sans y Oswald) y cinco tamaños. Se unifica la FORMA; el color se deja a cada sección, que unas van sobre fondo oscuro y otras sobre claro. El segundo selector no es adorno: varias páginas la declaran ACOTADA a su sección (`.sost-hero-text .s-label`, `.solar-text .s-label`…), y eso pesa más que una clase suelta. `[class] .s-label` iguala ese peso y, al cargarse esta hoja después, gana. La rayita `::before` y el `gap` de cada página siguen intactos. Y el `display` sí se toca aquí, al revés que en las migas: dos páginas la declaraban `flex` a secas, o sea en bloque y ocupando los 900 px de la columna, con su texto pegado a la izquierda mientras el título de al lado estaba centrado. `inline-flex` hace que la caja mida lo que mide el texto, y entonces el `text-align` del hero vuelve a colocarla: centrada donde la sección está centrada, a la izquierda donde no. */ .s-label, [class] .s-label{ font-family:'DM Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; } /* ── Migas de pan ── Dos páginas las tenían con enlaces y tres como texto plano (no se podía volver atrás). Ya son enlaces en las cinco; esto las deja además con el mismo aspecto, se llamen `.breadcrumb` o `.hero-breadcrumb`. ⚠️ Aquí NO se toca el `display`. Se probó con `flex` y fue un error: las migas viven dentro de un hero centrado con `text-align:center`, y un contenedor flex ignora esa propiedad — el rastro se pegaba a la izquierda mientras el título, la entradilla y los botones seguían centrados. Dejándolo como texto en línea, cada página lo alinea como siempre lo hizo. */ .breadcrumb a, .hero-breadcrumb a{ color:inherit; text-decoration:none; opacity:.75; transition:opacity .25s; } .breadcrumb a:hover, .hero-breadcrumb a:hover{ opacity:1; text-decoration:underline; } .breadcrumb span, .hero-breadcrumb span{ opacity:.4; margin:0 .35em; } /* ── Datos de contacto de la sección de cotizar ── Tres páginas los publicaban con una dirección vaga y dos no los tenían. Los rellena `cotizador.js`. */ .ecz-contacto, .ecz-contacto *{ /* Sin esto, el `text-transform` de la página deja los correos y la dirección GRITANDO en mayúsculas. */ text-transform:none; } .ecz-contacto{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.8rem; font-size:14px; line-height:1.5; } .ecz-contacto a, .ecz-contacto span{ color:#2B4D69; text-decoration:none; display:flex; align-items:flex-start; gap:.55rem; } .ecz-contacto a::before, .ecz-contacto span::before{ content:'→'; font-size:.8rem; opacity:.45; line-height:1.6; flex:none; } .ecz-contacto a:hover{ color:#0C213F; text-decoration:underline; } .ecz-contacto span{ color:rgba(12,33,63,.6); } /* Cada página trae sus propias reglas globales (varias ponen TODO el texto en mayúsculas y repintan los `button`). El componente declara lo suyo explícitamente para verse IGUAL en las ocho — que es justo lo que se venía perdiendo. */ .ecz-panel, .ecz-panel *, .ecz-form, .ecz-form *, .ecz-gracias, .ecz-gracias *{ text-transform:none; letter-spacing:normal; box-sizing:border-box; } /* Las dos piezas que SÍ van en mayúsculas, a propósito. El resto de su tipografía (el `letter-spacing`) lo recuperan sus propias reglas más abajo, que ganan por especificidad y por orden. */ .ecz-campo label, .ecz-panel .ecz-eyebrow{ text-transform:uppercase; } /* La entrada y la salida NO son simétricas, a propósito: abrir se siente mejor lento y con freno (`cubic-bezier(.16,1,.3,1)`), cerrar tiene que quitarse de en medio rápido. Por eso cada estado declara su propia transición en vez de compartir una. */ .ecz-overlay{ position:fixed; inset:0; z-index:9000; background:rgba(12,33,63,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s; } .ecz-overlay.abierto{ opacity:1; visibility:visible; transition:opacity .4s ease, visibility .4s; } .ecz-panel{ position:fixed; inset:0; z-index:9001; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain; padding:clamp(16px,4vw,48px) clamp(16px,4vw,48px) 60px; visibility:hidden; transition:visibility .24s; } .ecz-panel.abierto{ visibility:visible; transition:visibility .1s; } /* Lo que se mueve es la CAJA, no el panel: el panel es la zona de scroll y animarlo entero hacía saltar la barra en pantallas cortas. */ .ecz-caja{ width:100%; max-width:980px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(12,33,63,.45); display:grid; grid-template-columns:1fr; margin:auto; opacity:0; transform:translateY(20px) scale(.985); transition:opacity .2s ease, transform .24s cubic-bezier(.4,0,1,1); } .ecz-panel.abierto .ecz-caja{ opacity:1; transform:none; transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1); } /* Quien pide menos movimiento en su sistema no recibe ninguno. */ @media (prefers-reduced-motion:reduce){ .ecz-overlay, .ecz-panel, .ecz-caja, .ecz-overlay.abierto, .ecz-panel.abierto .ecz-caja{ transition-duration:.01ms; } .ecz-caja{ transform:none; } } @media(min-width:900px){ .ecz-caja{ grid-template-columns:.85fr 1.15fr; } } /* ── Columna izquierda: contexto ── */ .ecz-lado{ background:#0C213F; color:#fff; padding:clamp(26px,3.4vw,42px); display:flex; flex-direction:column; gap:22px; } .ecz-lado .ecz-eyebrow{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); } .ecz-lado h3{ font-family:'Oswald',sans-serif; font-weight:300; font-size:clamp(23px,2.6vw,31px); line-height:1.15; margin:0; } .ecz-lado h3 b{ font-weight:600; } .ecz-lado p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); margin:0; } .ecz-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; } .ecz-pasos li{ display:flex; gap:12px; font-size:14px; color:rgba(255,255,255,.8); } .ecz-pasos .n{ font-family:'DM Mono',monospace; font-size:11px; color:rgba(255,255,255,.42); padding-top:2px; flex:none; } .ecz-sello{ margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-family:'DM Mono',monospace; font-size:11.5px; letter-spacing:.03em; color:rgba(255,255,255,.5); line-height:1.9; } .ecz-sello a{ color:rgba(255,255,255,.8); text-decoration:none; } .ecz-sello a:hover{ color:#fff; } @media(max-width:899px){ .ecz-lado{ gap:16px; } .ecz-pasos, .ecz-sello{ display:none; } } /* ── Columna derecha: formulario ── */ /* El acolchado y el anclaje del botón de cerrar viven en el CONTENEDOR, no en el `
`: así el MISMO formulario sirve dentro del modal y dentro de la sección de contacto de una página, sin heredar de ahí un margen que en el otro sitio sobra. */ .ecz-lado-form{ position:relative; padding:clamp(24px,3.2vw,42px); } .ecz-form{ margin:0; } .ecz-cerrar{ position:absolute; top:14px; right:16px; width:38px; height:38px; border:none; border-radius:50%; background:#F0F2F2; color:#0C213F; font-size:19px; line-height:1; cursor:pointer; transition:background .25s; } .ecz-cerrar:hover{ background:#d8dadc; } .ecz-form h4{ font-family:'Oswald',sans-serif; font-weight:400; font-size:20px; margin:0 0 4px; color:#0C213F; padding-right:44px; } .ecz-form .ecz-sub{ font-size:14px; color:rgba(12,33,63,.6); margin:0 0 22px; } .ecz-campo{ margin-bottom:15px; } .ecz-campo label{ display:block; font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#2B4D69; margin-bottom:6px; } .ecz-campo input, .ecz-campo select, .ecz-campo textarea{ width:100%; font-family:'DM Sans',-apple-system,sans-serif; font-size:15px; font-weight:300; color:#0C213F; background:#fff; border:1px solid #d8dadc; border-radius:7px; padding:11px 13px; transition:border-color .25s; } .ecz-campo textarea{ resize:vertical; min-height:74px; } .ecz-campo input:focus, .ecz-campo select:focus, .ecz-campo textarea:focus{ outline:none; border-color:#2B4D69; } .ecz-campo select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%232B4D69' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; } .ecz-fila{ display:grid; grid-template-columns:1fr 1fr; gap:13px; } @media(max-width:520px){ .ecz-fila{ grid-template-columns:1fr; } } .ecz-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .ecz-enviar{ width:100%; font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500; letter-spacing:.06em; padding:15px 30px; border-radius:100px; border:none; cursor:pointer; background:#0C213F; color:#fff; margin-top:6px; transition:background .3s, opacity .3s; } .ecz-enviar:hover{ background:#2B4D69; } .ecz-enviar:disabled{ opacity:.55; cursor:default; } .ecz-aviso{ font-size:12px; color:rgba(12,33,63,.5); margin:12px 0 0; line-height:1.5; } .ecz-error{ display:none; margin-top:13px; font-size:13.5px; color:#B3261E; background:#FDECEA; border-left:3px solid #B3261E; padding:10px 13px; border-radius:4px; } /* ── El mismo formulario, dentro de una página ── Las secciones de contacto que ya existían son `flex` con `gap`, y eso sumaba al margen de cada campo: se neutraliza volviendo el formulario a flujo normal. */ .ecz-form.ecz-inline{ display:block; padding:0; gap:0; } .ecz-form.ecz-inline h4, .ecz-form.ecz-inline .ecz-sub{ display:none; } /* ── Gracias ── */ .ecz-gracias{ display:none; text-align:center; padding:30px 6px; } .ecz-gracias.visible{ display:block; } .ecz-gracias .ecz-tick{ width:54px; height:54px; border-radius:50%; background:#2B4D69; color:#fff; display:flex; align-items:center; justify-content:center; font-size:25px; margin:0 auto 20px; } /* El color va explícito: sin él hereda el del título de la sección que lo hospeda, y en las páginas de producto ese título es BLANCO — el «¡Gracias!» quedaba invisible sobre fondo claro. */ .ecz-gracias h4{ font-family:'Oswald',sans-serif; font-weight:400; font-size:22px; margin:0 0 10px; padding:0; color:#0C213F; } .ecz-gracias p{ font-size:14.5px; color:rgba(12,33,63,.65); max-width:34ch; margin:0 auto 22px; } .ecz-wa{ display:inline-block; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; letter-spacing:.06em; padding:13px 28px; border-radius:100px; border:1px solid #2B4D69; color:#2B4D69; text-decoration:none; transition:background .3s, color .3s; } .ecz-wa:hover{ background:#2B4D69; color:#fff; } body.ecz-bloqueado{ overflow:hidden; }