/* Baja Developers — hoja de estilos compartida. Extraida de index.html para que las subpaginas (/contacto, /avances, /nosotros, articulos) usen exactamente el mismo sistema visual en vez de copiarlo. Un solo lugar donde tocar paleta, tipografia y componentes. */ :root{ /* §7.2 — paleta Pacífico norte de Baja */ --profundo:#0B3A52; /* marca: fondos oscuros, titulares, footer */ --marea:#2C6E8F; /* único azul interactivo */ --marea-alta:#38849F; --marea-claro:#5BB8E0; /* solo para datos sobre fondo oscuro (gráfica de plusvalía) */ --niebla:#E3E8EA; /* fondo de página */ --arenisca:#C9BCA8; /* contrapeso cálido, superficies tranquilas */ --tinta:#0E1A20; /* texto */ --tinta-60:#5A6A72; /* texto secundario */ --linea:rgba(11,58,82,.15); --blanco:#fff; --wa:#25D366; /* §7.2 reservado EXCLUSIVAMENTE para WhatsApp */ --verde:#3ECF8E; /* indicador de estado; NO es el verde de WhatsApp */ --ambar:#B4762A; /* avisos de pendiente técnico (sobre claro) */ --ambar-luz:#E5A24B; /* mismo ámbar legible sobre fondo oscuro */ --radius:4px; /* §7.5 */ --pad:clamp(22px,4.6vw,96px); --nav-alto:66px; --font:'General Sans',system-ui,-apple-system,sans-serif; --serif:'Instrument Serif',Georgia,'Times New Roman',serif; /* solo acentos en itálica */ --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--tinta);background:var(--niebla);overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} /* Acento en Instrument Serif itálica: UNA palabra por título de sección. Es tipografía de display — nunca en párrafos, botones, hero ni datos. Va un punto más grande porque la serif pesa ópticamente menos que la General Sans en bold al mismo cuerpo, y sin tracking negativo. */ .acento{font-family:var(--serif);font-style:italic;font-weight:400; font-size:1.08em;letter-spacing:0} /* §7.3 — General Sans para display */ .display,h1,h2,h3,.brand{font-weight:700;letter-spacing:-.01em;text-wrap:balance} /* §7.4 — el registro: mono para toda la data */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* §8.6 — accesibilidad */ *:focus-visible{outline:3px solid var(--marea);outline-offset:2px} .hero *:focus-visible,.oscuro *:focus-visible,footer *:focus-visible,nav:not(.scrolled) *:focus-visible{outline-color:var(--blanco)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--profundo);color:#fff;padding:12px 20px;font-weight:600} .skip:focus{left:8px;top:8px} .wrap{max-width:1200px;margin:0 auto;width:100%} .section{padding:clamp(64px,8vw,104px) var(--pad)} .section.oscuro{background:var(--profundo);color:var(--blanco)} .section.arena{background:var(--arenisca)} .section.claro{background:var(--blanco)} .eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marea);display:block;margin-bottom:14px} .oscuro .eyebrow{color:var(--arenisca)} h2{font-size:clamp(28px,4vw,44px);line-height:1.06} .lede{color:var(--tinta-60);font-size:17px;line-height:1.6;margin-top:16px;max-width:60ch} .oscuro .lede{color:rgba(255,255,255,.75)} .head{max-width:760px;margin-bottom:52px} /* ---------- BOTONES (§7.2: un solo primario por pantalla) ---------- */ .btn{font-family:var(--font);font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:var(--radius); display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;transition:background .2s,color .2s,border-color .2s;white-space:nowrap} .btn-primario{background:var(--marea);color:#fff} .btn-primario:hover{background:var(--marea-alta)} .btn-contorno{background:transparent;color:var(--blanco);border:1.5px solid rgba(255,255,255,.6)} .btn-contorno:hover{border-color:#fff;background:rgba(255,255,255,.1)} /* el mismo boton de contorno, para secciones de fondo claro */ .btn-contorno-oscuro{background:transparent;color:var(--marea);border:1.5px solid var(--marea)} .btn-contorno-oscuro:hover{background:rgba(44,110,143,.10)} .btn-linea{background:transparent;color:var(--profundo);border:1.5px solid var(--profundo)} .btn-linea:hover{background:var(--profundo);color:#fff} .enlace{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--marea);border-bottom:1.5px solid currentColor;padding-bottom:3px} .enlace:hover{color:var(--profundo)} .oscuro .enlace{color:var(--arenisca)} .oscuro .enlace:hover{color:#fff} /* ---------- NAV (§5.1) ---------- */ /* Dos alturas: suelto sobre el hero, compacto en cuanto se baja (§5.1). La clase .scrolled la pone el JS pasando los 60px de scroll. */ nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between; padding:38px var(--pad);color:#fff;transition:background .3s,padding .3s,color .3s,box-shadow .3s} nav.scrolled, body.interior nav{background:var(--blanco);color:var(--tinta);padding:12px var(--pad);box-shadow:0 1px 0 var(--linea)} .brand{font-size:21px;text-transform:uppercase;white-space:nowrap;transition:font-size .3s} nav.scrolled .brand, body.interior nav .brand{font-size:18px} .nav-links{display:flex;gap:clamp(18px,2.6vw,38px);font-size:16px;font-weight:500;transition:gap .3s,font-size .3s} nav.scrolled .nav-links, body.interior nav .nav-links{gap:clamp(16px,2.2vw,32px);font-size:15px} .nav-links a{padding:6px 0;transition:color .2s} nav.scrolled .nav-links a:hover, body.interior nav .nav-links a:hover{color:var(--marea)} .nav-links a:hover{opacity:.75} .nav-right{display:flex;align-items:center;gap:20px} .lang{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em} .lang .sep{opacity:.4} .lang-btn{background:none;border:none;padding:2px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;color:inherit;opacity:.5;cursor:pointer;transition:opacity .2s} .lang-btn:hover{opacity:.85} .lang-btn.active{opacity:1;text-decoration:underline;text-underline-offset:4px} /* Contacto: botón outline, NUNCA primario — el nav va fijo sobre el hero, donde ya vive el primario "Ver desarrollos" (§7.2: un solo primario por pantalla). El color cambia con el fondo del nav. Con fondo blanco va en --marea, que ahí mide 5.65:1. Sobre la foto va en blanco, como el resto de los enlaces del nav: el botón cae en la esquina superior derecha, donde el velo del hero ya bajó a 0.33 sobre cielo claro, y ahí el azul de marca se hunde a 1.92:1 (invisible) mientras el blanco se sostiene en 6.6-7.6:1, igual que "Pagos" y "Noticias" que tiene al lado. */ .nav-contacto{font-size:15px;font-weight:600} .btn-nav{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; font-family:var(--font);font-weight:600;font-size:14.5px;padding:9px 20px; border-radius:var(--radius);border:1.5px solid currentColor;background:transparent; color:#fff;transition:background .2s,color .2s,border-color .2s,padding .3s} .btn-nav:hover{background:rgba(255,255,255,.16)} nav.scrolled .btn-nav, body.interior nav .btn-nav{color:var(--marea);padding:8px 18px} nav.scrolled .btn-nav:hover, body.interior nav .btn-nav:hover{background:rgba(44,110,143,.10)} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;position:relative;border:none;background:transparent;color:inherit} .burger span{width:22px;height:2px;background:currentColor;display:block;transition:background .2s} .burger[aria-expanded="true"]{color:var(--tinta)} .burger::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px} .menu-backdrop{position:fixed;inset:0;background:rgba(11,58,82,.5);z-index:98;opacity:0;pointer-events:none;transition:opacity .25s} .menu-backdrop.open{opacity:1;pointer-events:auto} .mobile-menu{position:fixed;top:0;right:-100%;width:min(320px,86vw);height:100vh;background:var(--blanco);z-index:99; padding:96px 30px 30px;display:flex;flex-direction:column;gap:2px;transition:right .3s ease} .mobile-menu.open{right:0} .mobile-menu a{font-weight:500;font-size:17px;color:var(--tinta);padding:14px 0;border-bottom:1px solid var(--linea)} @media(min-width:961px){.mobile-menu,.menu-backdrop{display:none}} /* ---------- TARJETAS DE ARTICULO ---------- Sustituyen al carrusel de graficas dentro de "por que invertir en Baja": la home solo anuncia el dato, el dato completo vive en su articulo. */ .art-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px} @media(max-width:760px){.art-mini{grid-template-columns:1fr}} .art-card{display:flex;flex-direction:column;gap:9px;padding:24px 24px 22px; border:1px solid var(--linea);border-radius:var(--radius);background:var(--blanco); color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s} .art-card:hover{border-color:var(--marea);transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,32,42,.07)} .art-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--marea)} .art-card h3{font-size:19px;line-height:1.28} .art-card p{color:var(--tinta-60);font-size:15px;line-height:1.6} .art-card .art-cta{margin-top:auto;padding-top:8px;font-weight:600;font-size:14.5px;color:var(--marea)} /* el cuerpo del articulo centra la grafica y le deja aire */ .art-cuerpo{max-width:1040px} /* ---------- CABECERA DE PAGINA INTERIOR ---------- Las subpaginas (/contacto, /avances, /nosotros, articulos) no llevan hero. Esta cabecera ocupa su lugar: deja aire bajo el nav fijo y presenta el titulo con la misma jerarquia eyebrow / h1 / lede de las secciones. */ .pag-cabecera{padding:calc(var(--nav-alto) + clamp(38px,5vw,64px)) var(--pad) clamp(30px,4vw,44px); background:var(--blanco);border-bottom:1px solid var(--linea)} .pag-cabecera.oscuro{background:var(--profundo);color:var(--blanco);border-bottom:0} .pag-cabecera.oscuro .lede{color:rgba(255,255,255,.72)} .pag-cabecera.oscuro .eyebrow{color:var(--arenisca)} .pag-cabecera h1{font-size:clamp(34px,5vw,58px);line-height:1.06;max-width:18ch} .pag-cabecera .lede{margin-top:18px} /* ---------- HERO (§5.2) ---------- */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);color:#fff;overflow:hidden} /* fondo unico con parallax: la capa mide 116% del hero y arranca 16% arriba, de modo que el desplazamiento maximo (0.16 x alto del hero) nunca deja hueco. Los dos numeros son el mismo numero: top:-V% y height:(100+V)%, con V igual a la VELOCIDAD del JS. Con menos altura aparece hueco al pie al hacer scroll; con mas, se desperdicia foto. Si se toca uno hay que tocar los tres. Esa banda de arranque sale del cielo: recorrido mas largo = mas movimiento pero menos cielo a la vista con la pagina arriba. A 0.16 se recorta el 16% superior de la foto en reposo, contra el 10% de antes. */ .hero-fondo{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-fondo img{position:absolute;left:0;top:-16%;width:100%;height:116%;object-fit:cover;object-position:right center; transform:translate3d(0,0,0);will-change:transform} /* VELO DEL HERO — horizontal, tres tramos segun el ancho (§5.2). La foto (3 FONDO TIJUANA) ya viene oscurecida por la izquierda, asi que el velo solo tiene que rematar: apagar los techos blancos que quedan dentro de la banda de texto y que el degradado quemado no alcanza a cubrir. Por eso es bastante mas claro que el .54 que pedia la foto anterior, que no traia degradado. Tres tramos y no uno porque el hero recorta por la izquierda (object-position:right, puesto para que se vea la bandera) y el degradado de la foto vive justo en ese lado. Cuanto mas angosta la ventana, mas degradado se pierde en el recorte y mas velo hace falta: ancho .42 .46 .48 .54 1440 4.85 / 4.77 — — — 1280 4.83 / 4.62 — — — 1250 4.79 / 4.55 — — — 1200 4.32 / 4.55 — — — 1150 4.32 / 4.39 ✗ — 5.18 / 5.26 — 1024 3.86 / 4.06 ✗ 4.37 / 4.59 — — 961 — 4.35 / 4.39 ✗ 4.63 / 4.68 — 768 3.26 / 3.14 ✗ — — 4.88 / 4.72 375 — — — 4.62 / 4.63 (titular / subtitulo; minimos AA 3:1 y 4.5:1) El corte de 1250px no es redondo a proposito: con .42 el subtitulo deja de cumplir alrededor de los 1170px, asi que 1200 dejaria solo 0.05 de margen. 1250 da margen real. Las paradas horizontales van en PIXELES: el bloque de texto mide lo mismo a cualquier ancho, la ventana no. En las ventanas angostas el ancho entero cae dentro del tramo plano, que es lo que hace falta porque ahi el texto ocupa toda la pantalla. El nav no lleva velo propio, por decision expresa. */ .hero-overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(to right, rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 650px,rgba(0,0,0,0) 1050px)} /* tramo intermedio: se pierde parte del degradado de la foto en el recorte */ @media(max-width:1249px){ .hero-overlay{background:linear-gradient(to right, rgba(0,0,0,.48) 0,rgba(0,0,0,.48) 650px,rgba(0,0,0,0) 1050px)} } /* movil y tablet: el recorte se come casi todo el degradado quemado */ @media(max-width:960px){ .hero-overlay{background:rgba(0,0,0,.54)} } .hero-body{position:relative;z-index:2;max-width:940px} /* titular a tres renglones: el ancho en ch es lo que fuerza el corte */ .hero h1{font-size:clamp(46px,5.6vw,80px);line-height:1;max-width:15ch} /* El titular cierra en serif: "Baja California" en Instrument Serif italica, las dos primeras lineas en General Sans. Misma familia y mismo gesto que .acento en los titulos de seccion, solo que aqui sostiene el renglon entero en vez de una palabra suelta. La italica no es decoracion: con las dos fuentes en redonda el salto de la sans geometrica a la serif se lee como un cambio de fuente a secas. La inclinacion lo convierte en un gesto deliberado y ademas es mas ancha que la redonda (79% del ancho de la sans contra 71%), asi que el tercer renglon llena mas y el bloque queda mejor equilibrado. Los tres valores salen de medir el trazo real de ambas fuentes a 200px (escaneo de pixeles y measureText coinciden), no de metricas nominales: fuente mayuscula B altura de x "Baja California" General Sans 700 143.6 107.6 1417 px Instrument Serif 400 italica 144.0 103.2 1126 px Instrument Serif 400 redonda 144.0 102.0 1012 px font-size 1.05em: las mayusculas de las dos fuentes ya miden practicamente lo mismo a igual cuerpo (hace falta 0.997 para igualarlas), asi que el ajuste no es por mayusculas sino por altura de x, que pide 1.043. Y manda la x: en "Baja California" hay dos mayusculas contra doce minusculas, o sea que la masa visual de la linea es minuscula. Con 1.05 la x queda clavada (108.4 contra 107.6) y las mayusculas 5% mas altas, que ademas compensa que el trazo de la serif es mas fino y pesa menos a la vista. Ojo al medir esta fuente: hay que forzar la carga de la variante concreta (document.fonts.load con el estilo exacto) antes de tomar metricas. Medida en frio devuelve valores de una cara sustituta y salen 10% de error. font-weight 400: Instrument Serif solo existe en 400. Sin declararlo hereda el 700 del h1 y el navegador se inventa un bold sintetico que engorda los trazos y arruina el contraste de la letra. letter-spacing 0: el h1 lleva -.01em, que le sienta bien a la sans y le cierra de mas los remates a la serif. line-height .952: el h1 usa el numero 1, que cada hijo recalcula sobre SU cuerpo — con 1.05em la tercera linea abriria una caja de 84px contra las de 80px de las otras dos y el bloque se descuadraria. 1/1.05 devuelve la caja a la altura de las demas y deja las tres lineas base a la misma distancia. */ .hero h1 .serif{font-family:var(--serif);font-style:italic;font-weight:400; font-size:1.05em;letter-spacing:0;line-height:.952} .hero .sub{font-size:clamp(16px,1.6vw,20px);font-weight:400;margin:20px 0 34px;max-width:44ch;color:#fff} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .btn-hero{padding:15px 46px;gap:14px;font-size:15.5px} .btn-hero .btn-flecha{font-size:17px;line-height:1;transition:transform .25s} .btn-hero:hover .btn-flecha{transform:translateX(4px)} /* §7.6 — una sola secuencia orquestada al cargar */ .hero-body>*{opacity:0;transform:translateY(14px);animation:entra .7s cubic-bezier(.2,.7,.3,1) forwards} .hero-body>*:nth-child(1){animation-delay:.1s} .hero-body>*:nth-child(2){animation-delay:.22s} .hero-body>*:nth-child(3){animation-delay:.34s} @keyframes entra{to{opacity:1;transform:none}} /* ---------- DESARROLLOS (§5.3) ---------- */ .dev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:36px} .vista-toggle{display:inline-flex;border:1.5px solid var(--linea);border-radius:var(--radius);overflow:hidden;background:var(--blanco)} .vista-btn{font-family:var(--font);font-weight:600;font-size:14px;padding:10px 20px;border:none;background:transparent;color:var(--tinta-60);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s} .vista-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} .vista-btn[aria-pressed="true"]{background:var(--profundo);color:#fff} .vista-btn:not([aria-pressed="true"]):hover{color:var(--profundo)} /* tres tarjetas verticales; el nombre y el estado van SOBRE la foto */ .dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)} @media(max-width:980px){.dev-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.dev-grid{grid-template-columns:1fr}} .dev-card{display:block;color:inherit} .dev-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--profundo);border-radius:var(--radius)} .dev-img>img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)} /* sombra inferior para que el nombre blanco se lea sobre cualquier foto */ .dev-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%)} .dev-estado{position:absolute;top:0;left:0;z-index:3;display:inline-flex;align-items:center;gap:8px; background:var(--profundo);color:#fff;font-family:var(--mono);font-weight:500;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;border-bottom-right-radius:22px} .dev-estado i{width:7px;height:7px;border-radius:50%;background:var(--verde);font-style:normal} .dev-estado.venta i{background:var(--marea-alta)} .dev-titulo{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end; justify-content:space-between;gap:16px;padding:clamp(20px,2vw,28px)} .dev-titulo h3{color:#fff;font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:.09em;text-transform:uppercase} .dev-flecha{color:#fff;font-size:20px;line-height:1;flex:none;opacity:0;transform:translateX(-6px); transition:opacity .3s,transform .3s} /* hover: acerca un poco la foto, saca la flecha y muestra el logo centrado */ .dev-velo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.45);opacity:0;transition:opacity .35s} .dev-velo img{width:auto;max-width:60%;max-height:26%;object-fit:contain} @media(hover:hover){ a.dev-card:hover .dev-velo{opacity:1} a.dev-card:hover .dev-img>img{transform:scale(1.04)} a.dev-card:hover .dev-flecha{opacity:1;transform:none} } a.dev-card:focus-visible .dev-velo, a.dev-card:focus-visible .dev-flecha{opacity:1;transform:none} /* mismo estado con teclado */ .dev-pie{padding-top:14px} .dev-meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-60)} /* En móvil la tarjeta vertical pedía 479px de alto cada una: tres seguidas eran casi 1.500px de scroll. La foto pasa a formato apaisado (4:3), que recorta ~250px por tarjeta sin tocar nada del escritorio. La etiqueta de estado y el nombre se ajustan al marco más bajo. */ @media(max-width:640px){ .dev-img{aspect-ratio:4/3} .dev-img::after{height:64%} .dev-estado{font-size:11px;padding:9px 16px;border-bottom-right-radius:18px} .dev-titulo{padding:16px 18px} .dev-titulo h3{font-size:18px} .dev-pie{padding-top:11px} } /* mapa */ .dev-mapa{display:none;border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;background:var(--blanco)} .dev-mapa.visible{display:block} #mapa{height:clamp(420px,52vh,560px);width:100%;background:var(--niebla)} .leaflet-popup-content-wrapper{border-radius:var(--radius)} .leaflet-popup-content{margin:14px 16px;font-family:var(--font)} .pop-nombre{font-weight:700;letter-spacing:.01em;font-size:16px;margin-bottom:2px;color:var(--tinta)} .pop-dato{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--marea);margin-bottom:8px} .pop-dir{font-size:13px;color:var(--tinta-60);line-height:1.45;margin-bottom:10px} .pin{background:var(--profundo);border:2px solid #fff;border-radius:50%;width:100%;height:100%;box-shadow:0 2px 6px rgba(11,32,42,.4)} .pin.preventa{background:var(--arenisca)} /* lista de espera (§5.3) */ .espera{margin-top:40px;background:var(--profundo);color:#fff;border-radius:var(--radius);padding:clamp(30px,4vw,44px); display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center} @media(max-width:820px){.espera{grid-template-columns:1fr;gap:24px}} .espera h3{font-size:24px;margin-bottom:8px} .espera p{color:rgba(255,255,255,.75);font-size:15px;max-width:46ch} .espera-form{display:flex;gap:10px;flex-wrap:wrap} .espera-form label{position:absolute;left:-9999px} .espera-form input{font-family:var(--font);font-size:15px;padding:13px 16px;min-width:250px;flex:1; border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius);background:rgba(255,255,255,.08);color:#fff} .espera-form input::placeholder{color:rgba(255,255,255,.55)} .espera-form input:focus{border-color:#fff;outline:none;background:rgba(255,255,255,.14)} .espera-form .btn{background:var(--arenisca);color:var(--tinta)} .espera-form .btn:hover{background:#DCD0BE} .aviso-pendiente{grid-column:1/-1;display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em; background:rgba(180,118,42,.18);border:1px solid rgba(201,188,168,.45);border-radius:var(--radius);padding:12px 14px;color:#F0DCC0} .aviso-pendiente.show{display:flex} /* ---------- NOSOTROS (§5.4) ---------- */ /* banner a sangre: foto de fondo, cita centrada y firma (§5.4) */ .nos-banner{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; min-height:clamp(330px,32vw,440px);padding:clamp(52px,5.5vw,74px) var(--pad);background:var(--profundo)} .nos-banner>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 30%} /* VELO DEL BANNER — plano. ATENCION antes de aclararlo: .54 es el PISO medido en el ancho mas exigente, no un valor elegido a ojo. El encuadre esta en "center 30%" para que se vea el cielo, y eso cumple la mitad visible del objetivo: la seccion la domina el cielo en vez del caserio. Pero el cielo es la parte MAS CLARA de la foto, asi que texto blanco encima necesita mas velo, no menos: el encuadre y el aclarado tiran en direcciones opuestas. Medido con este encuadre, pixel a pixel solo donde hay letras: cita nombre rol 1440px .52 4.27 5.41 4.53 pasa 768px .52 4.29 5.79 4.27 FALLA el rol 375px .52 4.27 4.38 4.35 FALLAN nombre y rol 768px .54 4.61 6.18 4.59 pasa 375px .54 4.59 4.71 4.67 pasa Y con los valores pedidos, a 1440px: .21 -> cita 1.65 nombre 2.21 rol 1.77 (ilegible) .35 -> cita 2.44 nombre 3.21 rol 2.62 (los tres fallan) O sea que el cambio de encuadre no permitio bajar el velo ni un punto: sigue en .54. Si hace falta que la foto se vea mas clara de verdad, el velo tiene que dejar de ser plano — concentrandolo detras del texto, las esquinas bajaban a .22 con la misma legibilidad. Minimos AA: 3:1 la cita (texto grande) y 4.5:1 el nombre y el rol. */ .nos-banner::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.54)} .nos-cuerpo{position:relative;z-index:2;max-width:920px;text-align:center;color:#fff} /* La cita del fundador va completa en Instrument Serif itálica (§5.4). Sube de cuerpo y de interlínea porque la serif es más estrecha y más ligera que la General Sans en 500. */ .nos-cita{font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(25px,3.2vw,44px);line-height:1.24;letter-spacing:0;text-wrap:balance} .nos-sep{display:block;width:28px;height:1.5px;background:rgba(255,255,255,.55);margin:clamp(26px,3.2vw,40px) auto} .nos-firma{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:#fff} .nos-firma b{display:block;font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.01em;color:#fff;text-transform:none;margin-bottom:5px} /* ---------- AVANCES: carrusel de un proyecto a la vez ---------- */ .av-carrusel{margin-bottom:26px} .av-visor{overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius)} .av-pista{display:flex;transition:transform .45s cubic-bezier(.2,.7,.3,1)} .av-panel{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1.15fr 1fr;background:rgba(255,255,255,.06)} @media(max-width:820px){.av-panel{grid-template-columns:1fr}} .av-foto{position:relative;aspect-ratio:16/10;background:rgba(255,255,255,.05);overflow:hidden} .av-foto img{width:100%;height:100%;object-fit:cover} .av-foto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px; font-family:var(--mono);font-size:12px;line-height:1.9;letter-spacing:.05em;color:rgba(255,255,255,.5);text-transform:uppercase} .av-info{padding:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;justify-content:center} .av-ciudad{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--arenisca);margin-bottom:10px} .av-info h3{font-size:clamp(26px,3vw,34px);margin-bottom:12px} .av-nota{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6;margin-bottom:28px} /* La obra se cuenta con foto fechada y etapa, no con un porcentaje: un "18%" no es verificable y el spec (§5.5) pide obra publicada y fechada. */ .av-fechafoto{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px; background:rgba(11,32,42,.72);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em; font-variant-numeric:tabular-nums;padding:6px 11px;border-radius:var(--radius)} .av-fechafoto i{width:6px;height:6px;border-radius:50%;background:var(--verde);font-style:normal} .av-etapa{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--arenisca);margin-bottom:10px} .av-controles{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .av-puntos{display:flex;gap:8px} .av-punto{width:30px;height:3px;border:none;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:background .25s,width .25s} .av-punto[aria-selected="true"]{background:#fff;width:44px} .av-flechas{display:flex;gap:10px} .av-flecha{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff; cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s} .av-flecha:hover{background:rgba(255,255,255,.12);border-color:#fff} .av-flecha svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* El margen superior era de cuando el FAQ colgaba debajo del carrusel de avances, dentro de esa misma seccion. Ahora es una seccion propia y ese margen se sumaba al padding de .section: 104 + 76 = 180px de azul muerto encima del titulo. */ .faq{margin:0 auto;max-width:920px;counter-reset:faq} .faq h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:30px;text-align:center} .faq details{border-bottom:1px solid rgba(255,255,255,.16);counter-increment:faq} .faq details:first-of-type{border-top:1px solid rgba(255,255,255,.16)} .faq summary{cursor:pointer;padding:20px 0;font-weight:700;font-size:16.5px;line-height:1.34;list-style:none;display:flex;gap:9px;align-items:flex-start; transition:color .18s ease} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:counter(faq) '.';flex:none;color:#fff} /* El marcador cambia de signo, no gira: '+' cerrado, '\2212' (signo menos, no guion) abierto. En IBM Plex Mono el menos tiene el mismo ancho y el mismo eje matematico que el mas, asi que el cambio no mueve nada de sitio. */ .faq summary::after{content:'+';margin-left:auto;padding-left:20px;font-family:var(--mono);font-size:20px;line-height:1.1;color:var(--arenisca);flex:none; transition:transform .18s cubic-bezier(.2,.7,.3,1)} .faq details[open] summary::after{content:'\2212'} .faq details p{padding:0 30px 22px 26px;color:rgba(255,255,255,.75);font-size:15.5px;line-height:1.65} /* Al pulsar: la fila cede un poco y el signo se encoge, para que el clic tenga respuesta antes de que se despliegue la respuesta. Es transform y opacidad, nada que provoque layout. */ .faq summary:active{color:var(--arenisca)} .faq summary:active::after{transform:scale(.86)} /* Al abrir: la respuesta entra desde arriba con un desvanecido corto.
no anima su propia altura de forma fiable entre navegadores, asi que se anima el parrafo, que es lo que el ojo sigue. */ @keyframes faq-abre{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .faq details[open] > p{animation:faq-abre .3s cubic-bezier(.2,.7,.3,1) both} /* movimiento reducido: la regla global apaga animaciones y transiciones, aqui solo se neutraliza el estado pulsado para que no quede encogido */ @media(prefers-reduced-motion:reduce){ .faq summary:active::after{transform:none} } /* ---------- POR QUÉ BAJA (§5.7) ---------- */ .baja-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} @media(max-width:900px){.baja-grid{grid-template-columns:1fr}} .baja-lista{display:flex;flex-direction:column;gap:22px;margin-top:30px} .baja-item{display:flex;gap:16px;align-items:flex-start} .baja-item .n{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--marea);flex:none;padding-top:3px;letter-spacing:.06em} .baja-item h5{font-size:17px;font-weight:700;letter-spacing:.01em;margin-bottom:5px} .baja-item p{color:var(--tinta-60);font-size:15px;line-height:1.6} .baja-visual{aspect-ratio:4/5;border-radius:var(--radius);background:var(--profundo);overflow:hidden} .baja-visual img{width:100%;height:100%;object-fit:cover} @media(max-width:900px){.baja-visual{aspect-ratio:16/10}} /* ---------- CARRUSEL DE GRÁFICAS (cierre de §5.7) ---------- Mismo patrón que el carrusel de avances: visor con overflow oculto, pista que se desplaza y controles de puntos + flechas. Hoy sólo hay una gráfica, así que el JS deja los controles ocultos; en cuanto se añada un segundo .gr-slide aparecen solos, sin tocar nada más. Las flechas van en versión clara porque esta sección es de fondo blanco. */ .gr-carrusel{margin-top:clamp(48px,6vw,76px)} /* .gr-marco envuelve solo la gráfica (sin los puntos) y es el marco de posicionamiento de las flechas: así quedan centradas sobre la gráfica. No lleva overflow:hidden — ese va en .gr-visor — para poder sacar las flechas al margen de página en pantallas anchas sin que se recorten. */ .gr-marco{position:relative} .gr-visor{overflow:hidden} .gr-pista{display:flex;transition:transform .45s cubic-bezier(.2,.7,.3,1)} /* Los slides son ítems flex en una misma fila, así que todos toman el alto del más alto (la de plusvalía) sin necesidad de fijar un número: el carrusel no cambia de altura al pasar de una a otra. La tarjeta más corta se centra dentro de ese espacio en vez de quedarse pegada arriba. */ .gr-slide{flex:0 0 100%;min-width:0;display:flex;align-items:center} .gr-slide > *{width:100%} .gr-controles{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px} .gr-puntos{display:flex;gap:8px} .gr-punto{width:30px;height:3px;border:none;padding:0;background:var(--linea);cursor:pointer;transition:background .25s,width .25s} .gr-punto[aria-selected="true"]{background:var(--profundo);width:44px} /* Flechas a los costados, centradas verticalmente sobre la gráfica. La banda no recibe clics (pointer-events:none) para no bloquear los tooltips de la gráfica de plusvalía; solo los botones son clicables. Van sobre tarjeta azul oscuro, así que se visten en claro con fondo semitransparente. */ .gr-flechas{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:4; display:flex;justify-content:space-between;padding:0 14px;pointer-events:none} /* Desde 1280px el margen de la página da de sobra (4.6vw ≥ 59px), así que las flechas salen fuera de la tarjeta y dejan de taparle datos. Ahí van sobre fondo blanco, así que cambian a la versión clara. */ @media(min-width:1280px){ .gr-flechas{left:-58px;right:-58px;padding:0} .gr-flecha{background:transparent;border-color:var(--linea);color:var(--profundo); -webkit-backdrop-filter:none;backdrop-filter:none} .gr-flecha:hover{background:rgba(11,58,82,.06);border-color:var(--marea)} } .gr-flecha{pointer-events:auto;width:46px;height:46px;border-radius:50%; border:1.5px solid rgba(255,255,255,.4);background:rgba(11,32,42,.55);color:#fff; cursor:pointer;display:flex;align-items:center;justify-content:center; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); transition:background .2s,border-color .2s} .gr-flecha:hover{background:rgba(11,32,42,.85);border-color:#fff} .gr-flecha svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} /* en móvil se encogen y opacan un poco más, pero siguen a los lados */ @media(max-width:640px){ .gr-flechas{padding:0 8px} .gr-flecha{width:36px;height:36px;background:rgba(11,32,42,.72)} .gr-flecha svg{width:15px;height:15px} } /* ---------- GRÁFICA 2: TIJUANA vs SAN DIEGO ---------- Prefijo ts- porque .sub, .track, .fill y .fuente son nombres demasiado genéricos y ya hay clases así en el sitio. La nota de fuente va en el
del
, igual que en la primera gráfica, para que no pueda separarse del gráfico. El color de la nota es #8AA5B3 (4.62:1 sobre --profundo); el #5b7d8f del archivo original se quedaba en 2.72:1. */ .ts-card{background:var(--profundo);color:#fff;border-radius:var(--radius); padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,40px) clamp(24px,3vw,32px)} .ts-card h3{font-size:clamp(20px,2.4vw,28px);line-height:1.15;margin-bottom:8px} .ts-sub{font-family:var(--mono);font-size:12.5px;color:#9FB8C6;margin-bottom:clamp(22px,3vw,30px)} .ts-figure{margin:0} .ts-barras{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,26px)} .ts-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;flex-wrap:wrap} .ts-ciudad{font-size:16px;font-weight:500;display:flex;align-items:center;gap:8px} .ts-precio{font-family:var(--mono);font-size:clamp(15px,1.6vw,19px);font-weight:500;font-variant-numeric:tabular-nums} .ts-precio i{font-style:normal;color:#9FB8C6;font-size:13px} .ts-pista{height:clamp(36px,4vw,44px);border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden} .ts-relleno{height:100%;border-radius:8px;display:flex;align-items:center;padding-left:16px;width:0; transition:width 1.1s cubic-bezier(.4,0,.2,1)} .ts-lbl{font-family:var(--mono);font-size:12px;color:#fff;white-space:nowrap} .ts-fila.tj .ts-relleno{background:linear-gradient(90deg,var(--marea),var(--marea-claro))} .ts-fila.sd .ts-relleno{background:linear-gradient(90deg,#8A7A5F,var(--arenisca))} /* la barra de Tijuana es ~16% del ancho: en móvil no cabe la etiqueta dentro, y el precio ya está arriba, así que se oculta en vez de recortarse */ @media(max-width:640px){.ts-lbl{display:none}} @media(prefers-reduced-motion:reduce){.ts-relleno{transition:none}} .ts-remate{margin-top:clamp(24px,3vw,30px);padding:clamp(18px,2.4vw,22px) clamp(18px,2.6vw,24px); background:rgba(91,184,224,.1);border:1px solid rgba(91,184,224,.3);border-radius:var(--radius); display:flex;align-items:center;gap:clamp(14px,2.4vw,20px);flex-wrap:wrap} .ts-mult{font-family:var(--mono);font-size:clamp(32px,4.2vw,44px);font-weight:500;color:var(--marea-claro);line-height:1} .ts-remate p{font-size:15px;line-height:1.45;color:#DFE8EC;flex:1;min-width:200px} .ts-remate p b{color:#fff;font-weight:500} .ts-fuente{font-family:var(--mono);font-size:10.5px;color:#8AA5B3;margin-top:20px;line-height:1.6} /* ---------- GRÁFICA DE PLUSVALÍA (cierre de §5.7) ---------- Prefijo pv- en todo: .eyebrow y .sub ya existen en el sitio. Colores sobre --profundo verificados contra AA: #8AA5B3 (nota de fuente y eje Y) 4.62:1 · #9FB8C6 (subtítulo) 5.78:1 #5BB8E0 (cifras destacadas) 5.33:1 La nota de fuente va en un
dentro del
del gráfico, para que no pueda separarse de él al reordenar la maqueta. */ .pv-card{background:var(--profundo);color:#fff;border-radius:var(--radius); margin:0;padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,40px) clamp(24px,3vw,32px)} .pv-card h3{font-size:clamp(20px,2.4vw,28px);line-height:1.15;margin-bottom:8px} .pv-sub{font-family:var(--mono);font-size:12.5px;color:#9FB8C6;margin-bottom:22px;line-height:1.5} .pv-figure{margin:0} .pv-chart-wrap{position:relative;width:100%} .pv-chart-wrap svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y} .pv-hit{fill:transparent;cursor:pointer} .pv-vline{stroke:#fff;stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none} .pv-cursor{opacity:0;pointer-events:none} .pv-tip{position:absolute;pointer-events:none;background:#fff;color:var(--tinta);border-radius:10px; padding:11px 13px;font-size:12.5px;opacity:0;transition:opacity .12s;box-shadow:0 8px 28px rgba(11,32,42,.32); min-width:186px;width:max-content;max-width:260px;transform:translate(-50%,-108%);z-index:3} .pv-tip .ty{font-family:var(--mono);font-size:11px;color:#566268;letter-spacing:.08em;margin-bottom:7px} .pv-tip .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:3px 0} .pv-tip .row .k{display:flex;align-items:center;gap:6px;font-size:12px} .pv-tip .row .v{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums} .pv-tip .sw{width:10px;height:10px;border-radius:2px;flex:none} .pv-tip .sublabel{color:#566268;padding-left:16px} .pv-legend{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap} .pv-legend div{display:flex;align-items:center;gap:8px;font-size:13.5px} .pv-swatch{width:14px;height:14px;border-radius:3px;flex:none} .pv-stat{margin-top:24px;padding-top:22px;border-top:1px solid #1C4A63;display:flex;gap:clamp(20px,4vw,34px);flex-wrap:wrap} .pv-stat b{font-family:var(--mono);font-size:clamp(20px,2.4vw,24px);font-weight:500;color:var(--marea-claro); display:block;line-height:1;font-variant-numeric:tabular-nums} .pv-stat span{font-size:12.5px;color:#9FB8C6;display:block;margin-top:6px} .pv-fuente{font-family:var(--mono);font-size:10.5px;color:#8AA5B3;margin-top:20px;line-height:1.55} @media(max-width:560px){ .pv-legend{gap:16px} .pv-stat{gap:18px} .pv-stat > div{min-width:44%} .pv-tip{min-width:0;max-width:min(230px,72vw);padding:9px 11px;font-size:11.5px} .pv-tip .row{gap:10px} .pv-tip .row .k{font-size:11px} .pv-tip .sublabel{padding-left:14px} } /* el trazo solo se anima si el usuario no pidió reducir movimiento */ @media(prefers-reduced-motion:no-preference){ .pv-draw{animation:pvDraw 1.7s ease forwards} } @keyframes pvDraw{to{stroke-dashoffset:0}} /* ---------- TRABAJAMOS CON (§5.8) ---------- */ .socios{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .socio-ph{flex:1 1 180px;max-width:230px;height:78px;border:1px dashed var(--linea);border-radius:var(--radius); display:flex;align-items:center;justify-content:center;text-align:center;padding:12px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-60);background:var(--blanco)} /* ---------- NOTICIAS: prensa + artículos en una sola lista ---------- */ .noticias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.noticias-grid{grid-template-columns:1fr;max-width:520px}} /* Tarjeta de nota, en formato editorial: foto arriba, y debajo la informacion en el orden en que se lee — medio y fecha, titular, entradilla y "leer mas". Sin caja ni borde alrededor: la foto va a sangre y una regla al pie separa una entrada de la siguiente, como en una portada de revista. Tampoco lleva etiqueta encima de la foto: en una nota de prensa el nombre del medio ya dice de donde viene, y en una nota propia no hay nada que aclarar. La linea de medio/fecha (.post-meta) SOLO va en notas de otros medios. En un articulo nuestro se omite por completo. */ .post{background:transparent;border:0;border-bottom:1px solid var(--linea); border-radius:0;padding-bottom:26px;display:flex;flex-direction:column} .post>a{display:flex;flex-direction:column;height:100%;color:inherit} .post-img{position:relative;aspect-ratio:4/3;background:var(--profundo);overflow:hidden; display:flex;align-items:center;justify-content:center;margin-bottom:20px} .post-img img{width:100%;height:100%;object-fit:cover} .post-img.logo{background:var(--blanco);border:1px solid var(--linea)} .post-img.logo img{width:auto;height:auto;max-width:58%;max-height:50%;object-fit:contain} .post-img .ph{font-family:var(--mono);font-size:11.5px;line-height:1.8;letter-spacing:.05em;text-transform:uppercase; color:rgba(255,255,255,.45);text-align:center;padding:20px} .post-body{display:flex;flex-direction:column;flex:1} /* MEDIO | FECHA — solo en notas de prensa */ .post-meta{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-60);margin-bottom:12px} .post-meta .sep{opacity:.45;padding:0 7px} .post-body h4{font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.24;margin-bottom:12px} /* el titular se subraya al pasar el raton, no antes */ .post>a:hover h4{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} .post-exc{color:var(--tinta-60);font-size:14.5px;line-height:1.6;margin-bottom:20px;flex:1} .post-cta{font-weight:600;font-size:14px;color:var(--marea)} .post>a:hover .post-cta{text-decoration:underline;text-underline-offset:3px} /* Entrada todavia sin pagina: no es un enlace, asi que tampoco debe comportarse como uno. Sin hover de borde y con la tarjeta atenuada, para que se lea como "anunciada" y no como "rota". */ .post-pendiente .post-img{opacity:.62} .post-pendiente .post-body h4, .post-pendiente .post-exc{opacity:.72} /* subtitulo dentro del indice del blog, entre rejas de tarjetas */ .not-sub{font-size:clamp(19px,2.2vw,23px);margin:clamp(44px,5vw,60px) 0 22px} /* el "ver todas" cierra la seccion, centrado bajo la reja */ .not-cta{display:inline-flex;margin:38px auto 0} #noticias .wrap{display:flex;flex-direction:column;align-items:flex-start} #noticias .wrap>.head,#noticias .wrap>.noticias-grid{width:100%} /* ---------- CONTACTO ---------- */ .cont-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,72px);align-items:start} @media(max-width:900px){.cont-grid{grid-template-columns:1fr}} .form-card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);padding:clamp(26px,3vw,36px)} .form-card h3{font-size:21px;margin-bottom:6px} .form-card .fsub{color:var(--tinta-60);font-size:14.5px;margin-bottom:24px} .campos{display:grid;gap:16px} .campo{display:flex;flex-direction:column;gap:7px} .campo label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--marea)} .campo input,.campo select{font-family:var(--font);font-size:15px;color:var(--tinta);border:1.5px solid var(--linea); border-radius:var(--radius);padding:12px 14px;background:var(--blanco);transition:border-color .2s;width:100%} .campo input::placeholder{color:#9AA7AE} .campo input:focus,.campo select:focus{border-color:var(--marea);outline:none} .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.fila{grid-template-columns:1fr}} .form-card .btn{width:100%;margin-top:6px} .form-nota{font-size:12.5px;color:var(--tinta-60);line-height:1.55;text-align:center} .aviso-claro{display:none;font-family:var(--mono);font-size:12.5px;line-height:1.55;letter-spacing:.02em; background:rgba(180,118,42,.1);border:1px solid rgba(180,118,42,.35);border-radius:var(--radius);padding:12px 14px;color:var(--ambar)} .aviso-claro.show{display:block} .contacto-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-top:40px;padding-top:36px;border-top:1px solid var(--linea)} .cd h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--marea);margin-bottom:10px} .cd p,.cd a{font-size:15.5px;line-height:1.6;color:var(--tinta)} .cd a:hover{color:var(--marea)} .pordef{font-family:var(--mono);font-size:12px;color:var(--ambar);letter-spacing:.03em} /* ---------- FOOTER (§5.12) ---------- */ /* ---------- pagina en construccion (pagos) ---------- */ .prox-solo{display:grid;place-items:center;text-align:center;background:var(--blanco); padding:calc(var(--nav-alto) + clamp(110px,19vh,200px)) var(--pad) clamp(110px,19vh,200px)} .prox-solo h1{font-size:clamp(31px,4.8vw,54px);line-height:1.1;letter-spacing:-.02em;max-width:15ch;margin:0 auto} /* ---------- páginas legales (aviso de privacidad) ---------- */ .legal{max-width:760px;counter-reset:legal} .legal .legal-fecha{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--tinta-60);padding-bottom:26px;border-bottom:1px solid var(--linea);margin:0} .legal h2{counter-increment:legal;font-size:clamp(20px,2.3vw,25px);line-height:1.22;letter-spacing:-.015em; margin:44px 0 16px;padding-top:26px;border-top:1px solid var(--linea)} .legal h2:first-of-type{margin-top:34px;padding-top:0;border-top:0} .legal h2::before{content:counter(legal,decimal-leading-zero);display:block;font-family:var(--mono); font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--marea);margin-bottom:9px} .legal p{color:var(--tinta-60);font-size:16px;line-height:1.72;margin-bottom:16px} .legal ul{list-style:none;margin:0 0 18px;padding:0} .legal li{position:relative;color:var(--tinta-60);font-size:16px;line-height:1.72;margin-bottom:10px;padding-left:22px} .legal li::before{content:'';position:absolute;left:2px;top:12px;width:7px;height:1px;background:var(--marea)} .legal strong,.legal b{color:var(--tinta);font-weight:600} .legal b.pordef{font-weight:500} .legal em{font-family:var(--serif);font-style:italic;font-size:1.06em} .legal a{color:var(--marea);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .legal a:hover{color:var(--tinta)} .legal .mono{font-size:14.5px;color:var(--tinta)} .legal .legal-nota{margin-top:44px;padding-top:22px;border-top:1px solid var(--linea); font-size:14px;color:var(--tinta-60)} footer{background:var(--profundo);color:#fff;padding:60px var(--pad) 28px} .foot-top{display:grid;grid-template-columns:1.5fr auto;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.15)} @media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:560px){.foot-top{grid-template-columns:1fr}} .foot-brand .brand{font-size:20px;display:inline-block;margin-bottom:14px} .foot-brand p{color:rgba(255,255,255,.65);font-size:14.5px;line-height:1.6;max-width:34ch;margin-bottom:20px} .socials{display:flex;gap:10px} .socials a{width:38px;height:38px;border-radius:var(--radius);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .2s} .socials a:hover{background:var(--marea)} .socials svg{width:16px;height:16px;fill:#fff} .foot-col h6{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--arenisca);margin-bottom:14px;font-weight:500} .foot-col a,.foot-col span{display:block;color:rgba(255,255,255,.65);font-size:14.5px;margin-bottom:10px;transition:color .2s} .foot-col a:hover{color:#fff} .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:rgba(255,255,255,.5);font-size:13px} .foot-bottom a{color:rgba(255,255,255,.5)} .foot-bottom a:hover{color:#fff} /* ---------- WHATSAPP (§5.13) ---------- */ .wa-float{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--wa); display:flex;align-items:center;justify-content:center;z-index:90;transition:transform .2s;box-shadow:0 4px 14px rgba(11,32,42,.3)} .wa-float:hover{transform:scale(1.06)} .wa-float svg{width:29px;height:29px;fill:#fff} @media(max-width:960px){ .nav-links,.nav-contacto{display:none} .burger{display:flex} } @media(max-width:520px){ /* el burger se sentia pegado a la esquina: mas aire por los cuatro lados. El gap va una sola vez (antes habia dos reglas .nav-right y la segunda, de 14px, ganaba y anulaba el ajuste). */ nav{padding-top:24px;padding-bottom:24px;padding-left:30px;padding-right:30px} nav.scrolled, body.interior nav{padding-top:12px;padding-bottom:12px} .nav-right{gap:22px} .brand{font-size:16px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important;transition:none!important} .hero-body>*{opacity:1;transform:none} .hero-fondo img{transform:none!important;will-change:auto} } /* en movil el parallax queda apagado (el JS tampoco lo engancha) */ @media(max-width:960px){ .hero-fondo img{transform:none!important;will-change:auto} }