/* ========================================================================== Bolvito Construcción — sistema visual Paleta: el verde oliva #40513B construye la identidad, el naranja #E67E22 llama a la acción, el verde medio #628141 es el trazo de todo lo dibujado y la crema #E5D9B6 da la banda cálida. Geometría recta, de estructura metálica: radios mínimos y líneas antes que sombras. ========================================================================== */ :root{ /* --- Marca ------------------------------------------------------------ */ --brand-green: #40513B; /* verde oliva: titulares, pie, secciones oscuras */ --green-mid: #628141; /* verde medio: trazos, marcos, cuadrícula */ --brand-orange: #E67E22; /* acento: acción, cifras, indicadores */ --orange-deep: #C4661A; /* presionado/hover del naranja (4.7:1 con tinta negra) */ --green-deep: #2F3C2B; /* presionado/hover del verde */ /* --- Neutros ---------------------------------------------------------- */ --white: #FFFFFF; --cream: #E5D9B6; /* banda alterna cálida */ --light: #F4F4F1; --gray: #D8D8D2; --dark: #242424; --black: #111111; /* --- Alias del sistema anterior -------------------------------------- Las reglas ya escritas siguen nombrando "concreto" y "pino"; aquí pasan a apuntar a la paleta de marca, así el cambio es de una sola pieza. */ --concrete: var(--white); --concrete-dim: var(--light); --block: var(--gray); --surface: var(--white); --pine: var(--brand-green); --pine-mid: #4B554A; /* texto secundario, 7.4:1 sobre blanco */ --pine-faint: #5C665B; /* texto terciario, 5.9:1 sobre blanco */ /* Verde propio de WhatsApp: el botón de WhatsApp lleva su color de siempre para que se reconozca el canal de un vistazo. No es color de marca. */ --wa: #25D366; --wa-deep: #16A94E; /* --- Tipografía ------------------------------------------------------- */ --font-display: "Special Gothic Expanded One", "Arial Black", Impact, sans-serif; --font-body: "Alata", "Helvetica Neue", Helvetica, Arial, sans-serif; /* --- Módulo ----------------------------------------------------------- */ --u: 8px; --gutter: 20px; --max: 1200px; --measure: 62ch; /* Esquinas rectas: nada de "soft UI". */ --r-photo: 4px; --r-ui: 2px; color-scheme: light; } *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--white); color:var(--dark); font-family:var(--font-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} /* --- Foco visible: grueso y de alto contraste, legible al sol ---------- */ :focus-visible{ outline:3px solid var(--brand-orange); outline-offset:3px; border-radius:1px; } .skip-link{ position:absolute;left:-9999px;top:var(--gutter);z-index:9999; background:var(--brand-green);color:#fff;padding:.8rem 1.1rem;text-decoration:none; } .skip-link:focus{left:var(--gutter)} /* ========================================================================== Tipografía Special Gothic Expanded One para los titulares: el ancho da masa, como un cimiento, y va en caja alta. Alata para todo lo que se lee seguido. ========================================================================== */ h1,h2,.heading-display{ font-family:var(--font-display); text-transform:uppercase; color:var(--brand-green); margin:0 0 .5em; font-weight:400; text-wrap:balance; } /* La expandida ocupa mucho más por carácter que una grotesca normal: los topes de clamp() van por debajo de los del manual para que el titular no se coma la columna. */ /* Interlínea algo más suelta que la del manual: en caja alta y en español las tildes de Á/Ó/Ñ suben por encima de la altura de mayúscula y con 0.95 chocan con la línea de arriba. */ h1{font-size:clamp(2rem,4.8vw,3.7rem);line-height:1.06;letter-spacing:-.03em} h2{font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.08;letter-spacing:-.02em} h3,h4{ font-family:var(--font-body); margin:0 0 .5em; line-height:1.2; color:var(--brand-green); text-wrap:balance; } h3{font-size:clamp(1.15rem,1.7vw,1.5rem)} h4{font-size:1rem} p{margin:0 0 1.05rem;max-width:var(--measure)} p:last-child{margin-bottom:0} .lead{ font-size:clamp(1.06rem,1.7vw,1.22rem); line-height:1.52; color:var(--pine-mid); max-width:56ch; } .small,.text-small{font-size:.875rem;line-height:1.5} .muted{color:var(--pine-mid)} /* Etiqueta de sección. Sentence case deliberado: las versales rastreadas son el gesto por defecto de cualquier plantilla. */ .eyebrow{ display:block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-orange); margin-bottom:.55rem; } /* --- Línea de nivel: la firma estructural de la página ----------------- Un filete con una marca de tope, como el hilo y la marca de nivel que se traza en obra. Encodea el inicio de una sección, no decora. */ .level-line{ --line:var(--gray); border:0;height:1px;position:relative;margin:0 0 clamp(28px,4vw,44px); /* Pintada como fondo, no como color: así se puede tensar de 0 a 100% sin escalar el elemento (y sin arrastrar la marca de tope con él). */ background:linear-gradient(var(--line),var(--line)) left center/100% 100% no-repeat; transition:background-size .8s cubic-bezier(.22,.61,.36,1) .2s; } .level-line::before{ content:"";position:absolute;left:0;top:-4px;width:3px;height:11px;background:var(--brand-orange); } /* ========================================================================== Primitivas de layout ========================================================================== */ .container{width:min(calc(100% - (var(--gutter) * 2)),var(--max));margin-inline:auto} .section{padding:clamp(56px,8vw,104px) 0} .section-sm{padding:clamp(40px,5vw,64px) 0} /* Banda clara: rompe el blanco corrido sin recurrir a otra caja. */ /* Misma hoja cuadriculada que la sección de servicios, ahora sobre la crema: el plano de fondo se dibuja encima del papel, no sobre un color plano. */ .alt-section{ background-color:var(--cream); background-image: repeating-linear-gradient(to right,rgba(98,129,65,.1) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(98,129,65,.1) 0 1px,transparent 1px 26px), repeating-linear-gradient(to right,rgba(98,129,65,.16) 0 1px,transparent 1px 130px), repeating-linear-gradient(to bottom,rgba(98,129,65,.16) 0 1px,transparent 1px 130px); } .alt-section > .container{position:relative;z-index:1} /* Hoja de dibujo: la misma cuadrícula de dos escalas que el bloque de la portada, en tinta en vez de blanco. Las tarjetas se trazan encima. */ .plano-section{ background-color:var(--white); background-image: repeating-linear-gradient(to right,rgba(98,129,65,.09) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(98,129,65,.09) 0 1px,transparent 1px 26px), repeating-linear-gradient(to right,rgba(98,129,65,.14) 0 1px,transparent 1px 130px), repeating-linear-gradient(to bottom,rgba(98,129,65,.14) 0 1px,transparent 1px 130px); } /* Dos secciones claras seguidas suman dos rellenos completos; la línea de nivel ya marca el corte, así que se recorta el de arriba. */ .section + .section, .section + .section-sm, .section-sm + .section{padding-top:clamp(34px,4vw,56px)} .section + .dark-section, .section-sm + .dark-section{padding-top:clamp(56px,8vw,104px)} .section-title{max-width:60ch;margin-bottom:clamp(28px,4vw,44px)} .section-title p{color:var(--pine-mid)} .stack{display:grid;gap:calc(var(--u) * 2)} .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 1.5)} .grid-2,.grid-3,.grid-4{display:grid;gap:clamp(18px,2.5vw,28px)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .cards-flex{display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,24px);justify-content:center} .cards-flex>*{flex:1 1 300px;max-width:calc(33.333% - 16px)} .visually-hidden{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important; margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important; white-space:nowrap!important;border:0!important } /* ========================================================================== Botones ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:48px;padding:.95rem 1.5rem; border:2px solid transparent;border-radius:var(--r-ui); font-family:var(--font-body);font-size:.95rem; text-transform:uppercase;letter-spacing:.04em; text-decoration:none;cursor:pointer; transition:background-color .2s ease,border-color .2s ease,color .2s ease; } /* Naranja de acción con tinta negra encima: el blanco sobre #E67E22 se queda en 2.85:1 y no pasa AA ni para texto grande; el negro llega a 6.6:1 y el naranja sigue siendo el que llama. */ .btn-primary{background:var(--brand-orange);color:var(--black);border-color:var(--brand-orange)} /* WhatsApp mantiene su verde: en Guatemala es el canal, y reconocerlo de un vistazo vale más que la coherencia cromática. Tinta negra encima, que da 9.5:1; el blanco sobre ese verde se queda en 1.98:1 y no pasa. */ .btn-wa{background:var(--wa);color:var(--black);border-color:var(--wa)} /* El manual manda verde en el hover, pero sobre una superficie verde el botón desaparece en el fondo. Se oscurece el propio naranja: sigue siendo el mismo botón, funciona sobre cualquier fondo y mantiene 4.66:1 con la tinta negra. */ .btn-primary:hover{background:var(--orange-deep);border-color:var(--orange-deep)} .btn-wa:hover{background:var(--wa-deep);border-color:var(--wa-deep)} .btn-outline,.btn-secondary{background:transparent;color:var(--brand-green);border-color:var(--brand-green)} .btn-outline:hover,.btn-secondary:hover{background:var(--brand-green);color:#fff} /* Sobre cualquier superficie oscura el contorno se invierte; si no, queda tinta oscura sobre fondo oscuro e invisible. */ .dark-section .btn-outline, .cta-panel .btn-outline, .page-hero .btn-outline, .hero-copy .btn-outline, .obras .btn-outline, .btn-light{color:#fff;border-color:rgba(255,255,255,.6);background:transparent} .dark-section .btn-outline:hover, .cta-panel .btn-outline:hover, .page-hero .btn-outline:hover, .hero-copy .btn-outline:hover, .obras .btn-outline:hover, .btn-light:hover{background:#fff;color:var(--brand-green);border-color:#fff} /* ========================================================================== Icono de WhatsApp Va como SVG inline con fill:currentColor, así el mismo glifo sirve sobre el verde (tinta oscura) y sobre el pie oscuro (tinta clara), sin segundo archivo. ========================================================================== */ .wa-icon{width:1.15em;height:1.15em;flex:none;fill:currentColor} .floating-wa .wa-icon{width:27px;height:27px} /* ========================================================================== Encabezado ========================================================================== */ .site-header{ position:sticky;top:0;z-index:1000; background:color-mix(in srgb,var(--white) 92%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--block); } .navbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--gutter)} .brand{display:flex;align-items:center;text-decoration:none} .brand{color:var(--pine)} .brand img{width:auto;height:34px} .nav-links{display:flex;align-items:center;gap:calc(var(--u) * .5)} .nav-links a{ text-decoration:none;font-size:.94rem; padding:.6rem .78rem;border-radius:var(--r-ui); color:var(--brand-green); transition:color .2s ease; } .nav-links a:hover{color:var(--brand-orange)} /* La página actual se marca con una barra de nivel, no con un relleno. */ .nav-links a[aria-current="page"]{ color:var(--brand-green);box-shadow:inset 0 -2px 0 var(--brand-orange);border-radius:0; } /* `.nav-links a` gana por especificidad al color del botón: sin esto el de WhatsApp de la barra queda con tinta verde sobre verde (4.3:1). */ .nav-links .btn-wa{color:var(--black)} .nav-links .btn{margin-left:calc(var(--u) * .75)} .nav-links .btn[aria-current="page"]{box-shadow:none} .menu-toggle{ display:none;align-items:center;justify-content:center; min-height:46px;min-width:46px; border:2px solid var(--brand-green);background:transparent;border-radius:var(--r-ui);color:var(--brand-green); font-size:1.1rem;cursor:pointer; } /* ========================================================================== Hero — inicio Dos bloques a sangre que se encuentran en una costura central: la misma figura que el propio isotipo. El texto del bloque verde se alinea con el contenedor del resto de la página sin recurrir a 100vw (que incluye la barra de scroll y desalinearía la portada respecto a lo de abajo). ========================================================================== */ /* Alto de pantalla descontando el encabezado pegajoso. min-height, no height: si el contenido necesita más (móvil en horizontal, texto grande), crece. */ .hero{padding:0;overflow:clip;min-height:calc(100vh - var(--header-h,73px))} @supports (height:100svh){ .hero{min-height:calc(100svh - var(--header-h,73px))} } .hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:inherit} .hero-copy{ position:relative;z-index:2; background:var(--brand-green);color:#fff; display:flex;align-items:center;justify-content:flex-end; padding:clamp(48px,6.5vw,104px) 0 clamp(48px,6.5vw,104px) var(--gutter); } /* La mitad del contenedor: así el borde izquierdo del texto cae justo sobre la línea del contenedor y el derecho respira antes de la costura. */ .hero-copy-in{ width:min(100%,calc(var(--max) / 2)); padding-right:clamp(24px,3vw,56px); } /* El fondo del bloque es un tablero de dibujo: papel cuadriculado y, encima, los planos de una casa que se dibujan solos y se van relevando —planta, alzado y armado de zapata y columna—. Es lo que hace el cliente, en bucle. */ .hero-copy::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 1px,transparent 1px 130px), repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 130px); } .hero-plan{position:absolute;inset:clamp(18px,3vw,44px);z-index:0;pointer-events:none} .plan-dib{ position:absolute;inset:0;width:100%;height:100%; fill:none;stroke:#fff;stroke-width:1.7; stroke-linecap:butt;stroke-linejoin:miter; opacity:.2; } /* Raya y punto: el trazo con que se marca un eje. Su patrón ocupa stroke-dasharray, que es lo que usa el trazado, así que los ejes entran con opacidad en vez de dibujarse. */ .plan-dib .ejes{stroke-width:1;stroke-dasharray:9 4 2 4;opacity:0} .plan-dib .globos circle{stroke-width:1;stroke-dasharray:none} .plan-dib text{ fill:#fff;stroke:none; font-family:var(--font-body);font-size:13px; text-anchor:middle;dominant-baseline:central; } .plan-dib path[pathLength]{stroke-dasharray:1;stroke-dashoffset:0;opacity:0} .hero-plan .d1 .a path{animation:dib0a 30s linear 1.2s infinite backwards} .hero-plan .d1 .b path{animation:dib0b 30s linear 1.2s infinite backwards} .hero-plan .d1 .ejes{animation:dib0e 30s linear 1.2s infinite backwards} .hero-plan .d2 .a path{animation:dib1a 30s linear 1.2s infinite backwards} .hero-plan .d2 .b path{animation:dib1b 30s linear 1.2s infinite backwards} .hero-plan .d2 .ejes{animation:dib1e 30s linear 1.2s infinite backwards} .hero-plan .d3 .a path{animation:dib2a 30s linear 1.2s infinite backwards} .hero-plan .d3 .b path{animation:dib2b 30s linear 1.2s infinite backwards} .hero-plan .d3 .ejes{animation:dib2e 30s linear 1.2s infinite backwards} /* Fuera de pantalla no hay nada que mirar: se paran los bucles, tablero y carrusel. La especificidad tiene que superar a la de las reglas que declaran el atajo `animation`, porque el atajo reinicia play-state a running. */ .hero.is-parked .hero-plan .plan-dib *, .has-js .hero.is-live.is-parked .hero-shot{animation-play-state:paused} @keyframes dib0a{ 0.0%{opacity:1;stroke-dashoffset:1} 10.0%{opacity:1;stroke-dashoffset:0} 28.0%{opacity:1;stroke-dashoffset:0} 33.33%{opacity:0;stroke-dashoffset:0} 33.4%{opacity:0;stroke-dashoffset:1} 100%{opacity:0;stroke-dashoffset:1} } @keyframes dib0b{ 5.0%{opacity:1;stroke-dashoffset:1} 15.0%{opacity:1;stroke-dashoffset:0} 28.0%{opacity:1;stroke-dashoffset:0} 33.33%{opacity:0;stroke-dashoffset:0} 33.4%{opacity:0;stroke-dashoffset:1} 100%{opacity:0;stroke-dashoffset:1} } @keyframes dib0e{ 1.5%{opacity:1} 28.0%{opacity:1} 33.33%{opacity:0} 100%{opacity:0} } @keyframes dib1a{ 0%{opacity:0;stroke-dashoffset:1} 33.32%{opacity:0;stroke-dashoffset:1} 33.33%{opacity:1;stroke-dashoffset:1} 43.33%{opacity:1;stroke-dashoffset:0} 61.33%{opacity:1;stroke-dashoffset:0} 66.66%{opacity:0;stroke-dashoffset:0} 66.73%{opacity:0;stroke-dashoffset:1} 100%{opacity:0;stroke-dashoffset:1} } @keyframes dib1b{ 0%{opacity:0;stroke-dashoffset:1} 33.32%{opacity:0;stroke-dashoffset:1} 38.33%{opacity:1;stroke-dashoffset:1} 48.33%{opacity:1;stroke-dashoffset:0} 61.33%{opacity:1;stroke-dashoffset:0} 66.66%{opacity:0;stroke-dashoffset:0} 66.73%{opacity:0;stroke-dashoffset:1} 100%{opacity:0;stroke-dashoffset:1} } @keyframes dib1e{ 0%{opacity:0} 33.32%{opacity:0} 34.83%{opacity:1} 61.33%{opacity:1} 66.66%{opacity:0} 100%{opacity:0} } @keyframes dib2a{ 0%{opacity:0;stroke-dashoffset:1} 66.66%{opacity:0;stroke-dashoffset:1} 66.67%{opacity:1;stroke-dashoffset:1} 76.67%{opacity:1;stroke-dashoffset:0} 94.67%{opacity:1;stroke-dashoffset:0} 100.0%{opacity:0;stroke-dashoffset:0} } @keyframes dib2b{ 0%{opacity:0;stroke-dashoffset:1} 66.66%{opacity:0;stroke-dashoffset:1} 71.67%{opacity:1;stroke-dashoffset:1} 81.67%{opacity:1;stroke-dashoffset:0} 94.67%{opacity:1;stroke-dashoffset:0} 100.0%{opacity:0;stroke-dashoffset:0} } @keyframes dib2e{ 0%{opacity:0} 66.66%{opacity:0} 68.17%{opacity:1} 94.67%{opacity:1} 100.0%{opacity:0} } .hero-copy-in{position:relative;z-index:1} .hero-title{line-height:1.16;color:#fff} .hero-copy h1{margin-bottom:.42em} .hero-copy .lead{margin-bottom:1.9rem;max-width:32ch;color:#D7DCD5} .hero-line{display:block} .hero-mark{position:relative;display:inline-block} /* La franja sube por encima de la altura de mayúscula a propósito: la Ñ va en blanco y su tilde se sale de la caja alta, así que si el naranja no llega hasta ahí la tilde queda en verde sobre verde y la palabra pierde la eñe. */ .hero-mark::before{ content:"";position:absolute;z-index:-1; left:-.1em;right:-.1em; top:-.085em;bottom:.01em; background:var(--brand-orange); transform:scaleX(1);transform-origin:left center; } /* La palabra se pinta al paso de la franja: el degradado de dos topes va del blanco al verde del bloque, así que lo que aún no ha pasado no se ve. */ .hero-mark > span{ background-image:linear-gradient(to right,#fff 50%,var(--brand-green) 50%); background-size:200% 100%; background-position:0 0; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .hero-mark > span{-webkit-background-clip:text;background-clip:text;color:transparent} } /* Detrás de la marca pasan seis obras reales, en el orden en que se levanta una casa: trazo, muros, armado de losa, fundición, cocina y terraza terminadas. El carrusel cuenta el arco del oficio, no rellena. */ .hero-media{ margin:0;position:relative;z-index:1;isolation:isolate;overflow:hidden; background:var(--brand-green); display:grid;place-items:center; padding:clamp(40px,5vw,88px) var(--gutter); } .hero-shots{position:absolute;inset:0;z-index:-2} .hero-shot{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0; filter:grayscale(.4) contrast(1.04); } .hero-shot:first-child{opacity:1} /* El velo es lo que deja que la marca mande: la foto queda de fondo, legible como textura, sin competir con el isotipo. */ .hero-media::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(165deg,rgba(17,17,17,.62),rgba(64,81,59,.8)); } .bc-logo{width:min(100%,520px);height:auto;display:block;position:relative} .bc-b,.bc-c,.bc-word{fill:#fff} /* --- Entrada de portada ------------------------------------------------ Un solo arranque orquestado, todo en la misma dirección (izquierda a derecha, como un hilo de tiza que se suelta). Sin JS no se esconde nada. */ .has-js .hero-line, .has-js .hero-copy .lead, .has-js .hero-copy .cluster{opacity:0;translate:0 20px} .has-js .hero-mark::before{transform:scaleX(0)} .has-js .hero-mark > span{background-position:100% 0} .hero-line{transition:opacity .7s ease,translate .7s cubic-bezier(.22,.61,.36,1)} .hero-line:first-child{transition-delay:.16s} .hero-line:last-child{transition-delay:.28s} .hero-copy .lead{transition:opacity .7s ease .92s,translate .7s cubic-bezier(.22,.61,.36,1) .92s} .hero-copy .cluster{transition:opacity .7s ease 1.04s,translate .7s cubic-bezier(.22,.61,.36,1) 1.04s} .hero-mark::before{transition:transform .62s cubic-bezier(.16,.84,.34,1) .72s} .hero-mark > span{transition:background-position .62s cubic-bezier(.16,.84,.34,1) .72s} .has-js .hero.is-live .hero-line, .has-js .hero.is-live .hero-copy .lead, .has-js .hero.is-live .hero-copy .cluster{opacity:1;translate:0 0} /* El isotipo se levanta por hiladas —steps(), no un barrido continuo: así se lee como block que se va asentando— y el logotipo aparece después con el mismo hilo de tiza que traza las secciones. */ .bc-hiladas{transform-box:fill-box;transform-origin:50% 100%} .bc-hilo{transform-box:fill-box;transform-origin:0 50%} .has-js .bc-hiladas{transform:scaleY(0)} .has-js .bc-hilo{transform:scaleX(0)} .has-js .hero.is-live .bc-hiladas{animation:bc-hiladas .8s steps(7,end) .2s forwards} .has-js .hero.is-live .bc-hilo{animation:bc-hilo .62s cubic-bezier(.22,.61,.36,1) .95s forwards} @keyframes bc-hiladas{to{transform:scaleY(1)}} @keyframes bc-hilo{to{transform:scaleX(1)}} /* Seis fotos, cinco segundos cada una, encadenadas: el ciclo entero dura 30s y cada una entra cuando la anterior aún no ha terminado de irse. Empieza a los 1.7s, cuando el isotipo ya se ha levantado del todo. */ .has-js .hero.is-live .hero-shot{ animation:hero-shot 30s linear infinite; opacity:0; } .has-js .hero.is-live .hero-shot:nth-child(1){animation-delay:1.7s} .has-js .hero.is-live .hero-shot:nth-child(2){animation-delay:6.7s} .has-js .hero.is-live .hero-shot:nth-child(3){animation-delay:11.7s} .has-js .hero.is-live .hero-shot:nth-child(4){animation-delay:16.7s} .has-js .hero.is-live .hero-shot:nth-child(5){animation-delay:21.7s} .has-js .hero.is-live .hero-shot:nth-child(6){animation-delay:26.7s} @keyframes hero-shot{ 0%{opacity:0;scale:1.06} 3%{opacity:1} 16%{opacity:1} 19%{opacity:0} 20%,100%{opacity:0;scale:1} } .has-js .hero.is-live .hero-mark::before{transform:scaleX(1)} .has-js .hero.is-live .hero-mark > span{background-position:0 0} /* ========================================================================== Alcance — los seis servicios en tarjeta Cada tarjeta lleva su marca de nivel arriba, la misma firma de la sección: la retícula se lee como seis tramos medidos, no como seis cajas sueltas. ========================================================================== */ .svc-grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,24px); } /* Sin borde CSS: el marco SVG es el borde, y por eso puede trazarse. Sobre el blanco de la página la tarjeta ES su marco, así que dibujarlo equivale a levantar la tarjeta. Esquinas rectas, como pide el manual. */ /* Sin fondo propio: la cuadrícula se ve a través, así que la tarjeta no se posa sobre el plano, se dibuja en él. */ .svc-card{ position:relative; display:flex;flex-direction:column;align-items:flex-start;gap:.65rem; background:transparent; padding:clamp(20px,2.4vw,28px); } /* El marco son cuatro filetes de fondo, uno por lado, que se pueden alargar por separado. Con SVG habría hecho falta non-scaling-stroke para no deformar el trazo al estirar el rect, y eso resuelve stroke-dasharray en espacio de pantalla: pathLength deja de aplicar y el trazado nunca se cierra. */ /* Algo más de tinta que la cuadrícula: el trazo de la tarjeta tiene que leerse encima del papel, no confundirse con él. */ .svc-card{--marco:rgba(98,129,65,.55)} .svc-card::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 1px,1px 100%,100% 1px,1px 100%; } .svc-card:hover{--marco:var(--brand-orange)} .svc-card::before{ content:"";position:absolute;top:-1px;left:clamp(20px,2.4vw,28px); width:3px;height:11px;background:var(--brand-orange); } /* El icono se dibuja con trazo, no con relleno: mismo lenguaje de línea que la marca de nivel y las juntas de block. */ .svc-icon{ width:48px;height:48px;flex:none; display:grid;place-items:center; background:transparent; border:1px solid rgba(98,129,65,.55);border-radius:0; margin-bottom:.15rem; } .svc-icon svg{ width:27px;height:27px; fill:none;stroke:var(--green-mid);stroke-width:1.6; stroke-linecap:square;stroke-linejoin:miter; } .svc-card h3,.svc-card p,.svc-card .btn,.svc-icon{position:relative;z-index:1} .svc-card h3{margin:0;font-size:clamp(1.1rem,1.6vw,1.25rem)} .svc-card p{margin:0;color:var(--pine-mid);font-size:.94rem} .svc-card .btn{ margin-top:auto;padding-top:.68rem;padding-bottom:.68rem; min-height:44px;font-size:.9rem; } .scope-more{margin-top:calc(var(--u) * 3.5)} /* ========================================================================== Proceso — esto sí es una secuencia, así que la numeración se gana ========================================================================== */ .process{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,26px); } .process-item{position:relative;padding-top:calc(var(--u) * 3.5)} /* El hilo continuo que atraviesa las cuatro etapas. */ .process-item::before{ content:"";position:absolute;top:0;left:0;right:calc(-1 * clamp(16px,2.5vw,26px)); height:1px;background:var(--block); } .process-item:last-child::before{right:0} .process-item::after{ content:"";position:absolute;top:-3px;left:0;width:3px;height:9px;background:var(--brand-orange); } .process-num{ display:block;font-size:.82rem;color:var(--brand-orange); text-transform:uppercase;letter-spacing:.06em; margin-bottom:calc(var(--u) * 1.5);font-variant-numeric:tabular-nums; } .process-item h3{margin-bottom:.35em} .process-item p{font-size:.94rem;color:var(--pine-mid)} /* ========================================================================== Proceso — panel fijo y etapas que pasan por delante La foto se queda quieta mientras las cuatro etapas la recorren: cada una se lleva el turno y la imagen cambia por fundido. El hilo de la izquierda marca por dónde vas, que es el mismo gesto de nivel de todo el sitio. ========================================================================== */ .proceso{ position:relative;z-index:1; display:grid;grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px);align-items:start; } .proceso-vista{position:sticky;top:calc(var(--header-h,73px) + clamp(20px,3vw,44px))} .proceso-marco{ position:relative;margin:0;overflow:hidden; aspect-ratio:4/5;border-radius:var(--r-photo); background:var(--concrete-dim); } .proceso-foto{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;scale:1.04; transition:opacity .75s ease,scale 1.4s cubic-bezier(.22,.61,.36,1); } .proceso-foto.is-active{opacity:1;scale:1} /* --- Lienzo: el plano ocupa toda la sección y se traza con el scroll ----- Se queda pegado mientras recorres la sección, así que el dibujo entero está siempre a la vista mientras se levanta. `--p` va de 0 a 1 según cuánto has avanzado por la sección, y de ahí sale el stroke-dashoffset de cada trazo. */ .alt-section{position:relative;overflow:clip} /* Se queda clavado en el centro de la pantalla mientras recorres la sección: nada de parallax, el plano no se mueve, solo se va trazando. Alto real (no el truco de alto 0) y margen negativo para no ocupar sitio en el flujo. */ .proceso-lienzo{ --lienzo-alto:calc(100vh - var(--header-h,73px)); position:sticky;top:var(--header-h,73px); height:var(--lienzo-alto); margin-bottom:calc(-1 * var(--lienzo-alto)); z-index:0;pointer-events:none; display:grid;place-items:center; } .proceso-lienzo svg{ width:100%;height:100%; fill:none;stroke:var(--green-mid);stroke-width:2; stroke-linecap:butt;stroke-linejoin:miter; opacity:.28; } .proceso-lienzo .guia{stroke-width:1.2;opacity:.72} /* Sin dash por defecto: si no hay JS el plano se ve entero y dibujado. El punteado lo pone app.js con la longitud real de cada trazo. */ .proceso-lienzo [pathLength]{stroke-dasharray:none} .proceso-col{position:relative;z-index:1} /* --- Las etapas -------------------------------------------------------- *//* --- Las etapas -------------------------------------------------------- */ .proceso-pasos{ list-style:none;margin:0;padding:0 0 0 clamp(26px,3.4vw,48px); position:relative; } /* El hilo completo, apagado, y encima el tramo recorrido. */ .proceso-pasos::before, .proceso-pasos::after{content:"";position:absolute;left:0;top:0;width:2px} .proceso-pasos::before{bottom:0;background:var(--gray)} .proceso-pasos::after{ height:var(--avance,0%);background:var(--brand-green); transition:height .7s cubic-bezier(.22,.61,.36,1); } /* La etapa en curso no se marca bajando la opacidad de las demás: atenuar el texto lo dejaba sobre 2:1 de contraste. Se cambia de color entre dos tonos que sí pasan (7.4:1 y 5.9:1), y el peso lo llevan el nodo y el hilo. */ .proceso-paso{ position:relative;z-index:1; padding:clamp(28px,4vw,52px) 0; min-height:clamp(180px,32vh,300px); } .proceso-paso h3{color:var(--pine-mid);transition:color .45s ease} .proceso-paso.is-active h3{color:var(--brand-green)} .proceso-etapa{transition:color .45s ease} /* La marca de cada etapa sobre el hilo. */ .proceso-paso::before{ content:"";position:absolute; left:calc(-1 * clamp(26px,3.4vw,48px) - 5px); top:calc(clamp(28px,4vw,52px) + .35em); width:12px;height:12px; background:var(--cream);border:2px solid var(--gray); transition:background-color .45s ease,border-color .45s ease,scale .45s cubic-bezier(.22,.61,.36,1); scale:.7; } .proceso-paso.is-active::before{background:var(--brand-orange);border-color:var(--brand-orange);scale:1} /* Sobre la crema el naranja en texto pequeño se queda en 2:1. La etapa en curso se marca con una etiqueta naranja de tinta negra (6.6:1) en vez de con texto naranja: mismo acento, y sí se lee. El relleno lo llevan las dos para que no salte la maqueta al cambiar de etapa. */ .proceso-etapa{ display:inline-block;font-size:.82rem;color:var(--pine-mid); text-transform:uppercase;letter-spacing:.06em; font-variant-numeric:tabular-nums;margin-bottom:calc(var(--u) * 1.2); padding:.24em .62em;margin-left:-.62em; background:transparent; transition:background-color .45s ease,color .45s ease; } .proceso-paso.is-active .proceso-etapa{background:var(--brand-orange);color:var(--black)} .proceso-paso h3{margin:0 0 .4em;font-size:clamp(1.3rem,2.4vw,1.75rem)} .proceso-paso p{margin:0;color:var(--pine-mid);max-width:44ch} /* ========================================================================== Tarjetas ========================================================================== */ .card{ background:var(--surface); border:1px solid var(--block); border-radius:var(--r-photo); overflow:hidden; display:flex;flex-direction:column; } .card img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--concrete-dim)} .card-body{padding:clamp(18px,2.4vw,24px);display:grid;gap:.6rem;align-content:start} .card-body h2,.card-body h3{margin:0} .card-body p{margin:0;color:var(--pine-mid);font-size:.95rem} .card .btn{margin-top:auto;align-self:start} .service-card .btn{margin-top:.4rem} /* La cifra que sostiene la página: iba enterrada en una frase corrida y es el argumento más fuerte que tienen. Va en la display, en naranja, y gira al entrar con la misma rueda que las cifras del legado. */ .dato-destacado{ display:flex;align-items:center;gap:clamp(18px,3vw,38px); margin:0 0 clamp(30px,4vw,48px); padding-top:clamp(18px,2.4vw,26px); border-top:2px solid var(--brand-orange); max-width:46rem; } .dato-cifra{ margin:0;flex:none; font-family:var(--font-display); font-size:clamp(3.2rem,7vw,5.4rem);line-height:.9; color:var(--brand-orange);font-variant-numeric:tabular-nums; } .dato-texto{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--pine-mid);max-width:30ch} /* Las tarjetas de proyecto siguen el mismo gesto que servicios y valores: la tarjeta se levanta trazando su marco, no desvaneciéndose. Sobre la hoja de plano no llevan fondo propio, así se ve la cuadrícula a través. */ .work-card{ position:relative;background:transparent;border:0;border-radius:0; overflow:visible; --marco:rgba(98,129,65,.55); } .work-card::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(var(--marco),var(--marco)),linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)),linear-gradient(var(--marco),var(--marco)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 1px,1px 100%,100% 1px,1px 100%; } .work-card:hover{--marco:var(--brand-orange)} .work-card > *{position:relative;z-index:1} .work-card img{border-radius:0} .work-card .card-body{gap:.5rem;padding:clamp(18px,2.2vw,24px)} .work-card h3{margin:0;font-size:clamp(1.05rem,1.7vw,1.3rem)} .work-card .card-body p{margin:0;font-size:.92rem;color:var(--pine-mid)} .work-card .btn{margin-top:.5rem;justify-self:start} /* Entrada: marco, foto que se destapa de izquierda a derecha y texto detrás. */ .work-card::after{ animation:svc-marco .62s cubic-bezier(.35,.7,.4,1) calc(var(--i,0) * 70ms) both; } .has-js .work-card::after{background-size:0 1px,1px 0,0 1px,1px 0;animation:none} .has-js .work-card.is-in::after{ animation:svc-marco .62s cubic-bezier(.35,.7,.4,1) calc(var(--i,0) * 70ms) both; } .work-card img{transition:clip-path .6s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 70ms + .22s)} .work-card .card-body > *{ opacity:0;translate:0 12px; transition:opacity .38s ease calc(var(--i,0) * 70ms + .42s), translate .38s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 70ms + .42s); } .has-js .work-card img{clip-path:inset(0 100% 0 0)} .has-js .work-card.is-in img{clip-path:inset(0 0 0 0)} .work-card.is-in .card-body > *{opacity:1;translate:0 0} html:not(.has-js) .work-card .card-body > *{opacity:1;translate:0} @media (prefers-reduced-motion:reduce){ .has-js .work-card::after{background-size:100% 1px,1px 100%,100% 1px,1px 100%;animation:none} .has-js .work-card img{clip-path:none} .work-card .card-body > *{opacity:1;translate:0;transition:none} } /* ========================================================================== Trabajos en inicio — la fotografía manda ========================================================================== */ .work-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);list-style:none;margin:0;padding:0} .work-feature a{display:grid;gap:.85rem;text-decoration:none} .work-feature img{ width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-photo); background:var(--concrete-dim); } .work-feature h3{margin:0} .work-feature p{margin:0;font-size:.92rem;color:var(--pine-mid)} /* Igual que en el pie: el hover cambia el color, no subraya. */ .work-feature a:hover h3{color:var(--brand-orange)} /* ========================================================================== Obras entregadas — el fondo es la obra que estás mirando Cada proyecto trae su foto: al elegirlo cambia el fondo de toda la sección, se abre su ficha y el mapa nombra la aldea. Los tres están en el mismo municipio, así que el mapa marca San Jerónimo y lo que cambia es el rótulo. ========================================================================== */ .obras{position:relative;isolation:isolate;overflow:clip;color:#fff} .obras-fondo{position:absolute;inset:0;z-index:-2} .obras-foto{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;scale:1.05; filter:grayscale(.3); transition:opacity .8s ease,scale 1.6s cubic-bezier(.22,.61,.36,1); } .obras-foto.is-active{opacity:1;scale:1} /* Velo: la foto se ve, pero manda el texto. */ .obras::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(175deg,rgba(64,81,59,.93),rgba(17,17,17,.9)); } .obras .section-title h2, .obras .titulo-sube{color:#fff} .obras .section-title .lead{color:#D7DCD5} .obras-grid{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,72px);align-items:start; } /* --- Mapa ---------------------------------------------------------------- */ .obras-mapa{margin:0;position:sticky;top:calc(var(--header-h,73px) + clamp(20px,3vw,44px))} .obras-mapa svg{width:100%;height:auto;display:block;max-width:360px} .mapa-pais{fill:rgba(229,217,182,.06);stroke:var(--cream);stroke-width:1.6;stroke-linejoin:round} .mapa-pin{fill:var(--brand-orange)} .mapa-halo{fill:none;stroke:var(--brand-orange);stroke-width:2;opacity:.55;transform-box:fill-box;transform-origin:center} .obras-mapa figcaption{ margin-top:clamp(14px,2vw,22px);font-size:.95rem;color:#C3CBC1;max-width:26ch; } .obras-aldea{ display:block;color:#fff;font-size:1.1rem; transition:opacity .4s ease,translate .4s cubic-bezier(.22,.61,.36,1); } .obras-mapa.is-cambiando .obras-aldea{opacity:0;translate:0 6px} .obras-mapa.is-cambiando .mapa-halo{scale:1.5;opacity:0} /* --- Lista de obras ------------------------------------------------------ */ .obras-lista{list-style:none;margin:0;padding:0;counter-reset:obra} .obra{border-top:1px solid rgba(229,217,182,.28)} .obra:last-child{border-bottom:1px solid rgba(229,217,182,.28)} .obra h3{margin:0;font-size:inherit} /* Cada obra necesita alto propio para que el scroll la recorra; sin plegado no hay saltos de maqueta mientras la banda decide cuál manda. */ .obra{padding:clamp(24px,3.4vw,44px) 0;min-height:clamp(200px,34vh,320px)} .obra-tit{ display:flex;align-items:baseline;gap:clamp(14px,2vw,26px); margin:0 0 1rem; color:#B9C2B6;transition:color .45s ease; } .obra.is-active .obra-tit{color:#fff} .obra-num{ font-size:.82rem;color:#93A08F;transition:color .45s ease; font-variant-numeric:tabular-nums;flex:none; } .obra.is-active .obra-num{color:var(--brand-orange)} .obra-nom{ font-family:var(--font-display);text-transform:uppercase; font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.1;letter-spacing:-.01em; } /* La ficha siempre está abierta: lo que cambia con el scroll es quién manda, no la altura. Atenuar el texto inactivo lo dejaría bajo mínimos de contraste, así que se cambia de tono entre dos que sí pasan. */ .obra-panel p{margin:0 0 1.1rem;color:#AEB8AC;max-width:52ch;transition:color .45s ease} .obra.is-active .obra-panel p{color:#E2E6E0} .obra-datos{ display:flex;flex-wrap:wrap;gap:.4rem clamp(20px,3vw,42px); margin:0 0 1.3rem;padding-bottom:.2rem; } .obra-datos div{display:grid;gap:.1rem} .obra-datos dt{font-size:.78rem;color:#93A08F;text-transform:uppercase;letter-spacing:.06em;transition:color .45s ease} .obra.is-active .obra-datos dt{color:var(--brand-orange)} .obra-datos dd{margin:0;font-size:.94rem;color:#D7DCD5;transition:color .45s ease} .obra.is-active .obra-datos dd{color:#fff} .obra-panel .btn{margin-bottom:clamp(20px,2.6vw,30px)} .obras .scope-more{margin-top:clamp(30px,4vw,48px)} /* ========================================================================== Legado — la plomada del padre El oficio se hereda como se hereda una línea en obra: con la plomada, que es lo único que traslada una vertical verdadera de arriba abajo. El hilo baja desde sus palabras hasta los años de trabajo, y solo entonces giran las cifras. Es memoria, así que va callado: sin adornos, sin color de más. ========================================================================== */ .legado-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} /* La sección es una hoja de plano: cuadrícula de dos escalas sobre el verde, y encima la cita se rotula palabra a palabra, como se letrea un plano a mano. Las cifras entran después, con sus marcas de cota. */ /* Especificidad por encima de .dark-section: su atajo `background` reinicia background-image y se llevaría la cuadrícula por delante. */ .dark-section.legado{ background-color:var(--brand-green); background-image: repeating-linear-gradient(to right,rgba(229,217,182,.055) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(229,217,182,.055) 0 1px,transparent 1px 26px), repeating-linear-gradient(to right,rgba(229,217,182,.09) 0 1px,transparent 1px 130px), repeating-linear-gradient(to bottom,rgba(229,217,182,.09) 0 1px,transparent 1px 130px); } .legado-hoja{max-width:62rem} /* Cada palabra se rotula en orden, con su turno escrito en --w. */ .pal{ display:inline-block; opacity:0;translate:0 .22em; transition:opacity .28s ease calc(var(--w,0) * 30ms + var(--w0,0ms)), translate .34s cubic-bezier(.3,.9,.4,1) calc(var(--w,0) * 30ms + var(--w0,0ms)); } .cta-panel h2{--w0:520ms} .is-in .pal{opacity:1;translate:0 0} .legado-palabra{position:relative;padding-left:clamp(26px,3.2vw,50px)} .plomada{position:absolute;left:0;top:.5em;bottom:-1.5rem;width:2px} /* El hilo baja tensándose desde el punto de arriba. */ .plomada::before{ content:"";position:absolute;inset:0; background:rgba(64,81,59,.32); transform:scaleY(0);transform-origin:top; transition:transform 1.1s cubic-bezier(.3,.72,.3,1) .15s; } /* La pesa: cono apuntando abajo, que cae con el hilo y se asienta. */ .plomada::after{ content:"";position:absolute;left:50%;top:0; width:12px;height:17px;margin-left:-6px; background:var(--brand-green); clip-path:polygon(0 0,100% 0,100% 44%,50% 100%,0 44%); transition:top 1.1s cubic-bezier(.3,.72,.3,1) .15s; } .has-js .legado-texto.is-in .plomada::before{transform:scaleY(1)} .has-js .legado-texto.is-in .plomada::after{top:100%} .legacy-quote{ margin:0 0 1.1rem; font-size:clamp(1.25rem,2.3vw,1.75rem); line-height:1.34;max-width:32ch;color:var(--brand-green); } .legacy-quote p{margin:0;max-width:none} .legado-nota{color:var(--pine-mid);max-width:46ch;margin:0} /* Sobre superficie oscura, la tinta se invierte. */ .dark-section .plomada::before{background:rgba(229,217,182,.42)} .dark-section .plomada::after{background:var(--cream)} .dark-section .legacy-quote{color:#fff} .dark-section .legado-nota{color:#C3CBC1} .legacy-facts{ display:flex;flex-wrap:wrap;gap:clamp(18px,3.2vw,42px); margin:calc(var(--u) * 4.5) 0 0;padding-top:calc(var(--u) * 2.5); border-top:1px solid rgba(255,255,255,.22); } .legacy-facts div{position:relative;display:grid;gap:.15rem} /* Marca de cota sobre el filete: acota cada dato como en una acotación. */ .legacy-facts div::before{ content:"";position:absolute;left:0;top:calc(-1 * var(--u) * 2.5 - 1px); width:2px;height:11px;background:var(--brand-orange); opacity:0;transition:opacity .45s ease 2.1s; } .legado-texto.is-in .legacy-facts div::before{opacity:1} .legacy-facts dt{font-size:.84rem;color:#C3CBC1;order:2;margin-top:.5rem} .legacy-facts dd{ margin:0;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem); color:var(--brand-orange);line-height:1;font-variant-numeric:tabular-nums; } /* --- Cifras: cada dígito da una vuelta y aterriza en el suyo -------------- */ .cifra{display:inline-flex;line-height:1} .cifra-col{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom} .cifra-tira{ display:block; transition:transform 1.15s cubic-bezier(.22,.7,.3,1); } .cifra-tira i{display:block;height:1em;line-height:1;font-style:normal} @media (prefers-reduced-motion:reduce){ .plomada::before{transform:scaleY(1);transition:none} .plomada::after{top:100%;transition:none} .cifra-tira{transition:none} } /* ========================================================================== Secciones oscuras ========================================================================== */ .dark-section{background:var(--brand-green);color:#fff} .dark-section p{color:#D7DCD5} .dark-section h2,.dark-section h3{color:#fff} .dark-section .eyebrow{color:var(--brand-orange)} .dark-section .card{color:var(--pine);border-color:transparent} /* Los párrafos de tarjetas blancas dentro de una sección oscura conservan el gris legible; sin esto heredan el gris claro pensado para el fondo oscuro. */ .dark-section .card p,.dark-section .photo-step p{color:var(--pine-mid)} .dark-section .card h2,.dark-section .card h3{color:var(--brand-green)} .dark-section .level-line{--line:rgba(255,255,255,.3)} .dark-section .level-line::before{background:var(--brand-orange)} /* ========================================================================== Llamado a la acción ========================================================================== */ /* Fotografía de obra con velo verde encima: la jerarquía del manual es foto -> titular -> mensaje -> acción, y el velo es lo que deja leer el titular sin apagar la estructura de la imagen. */ .cta-panel{ position:relative;isolation:isolate;overflow:hidden; color:#fff;border-radius:var(--r-photo); padding:clamp(36px,5vw,68px); display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,44px);flex-wrap:wrap; background:var(--brand-green); } .cta-panel img{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;object-position:right center; } .cta-panel::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(64,81,59,.95) 34%,rgba(64,81,59,.55)); } .cta-panel h2{margin-bottom:.3em;max-width:18ch;color:#fff} .cta-panel p{color:#E2E6E0;margin:0;max-width:44ch} /* Cierre del juego de planos: el recuadro se traza en el sentido de las agujas —igual que las tarjetas de servicio—, después se rotula el titular palabra a palabra y al final aterriza la acción. El marco son cuatro filetes de fondo en ::before, porque ::after ya lleva el velo de la foto. */ .cta-panel::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; border-radius:var(--r-photo); background-image: linear-gradient(var(--brand-orange),var(--brand-orange)), linear-gradient(var(--brand-orange),var(--brand-orange)), linear-gradient(var(--brand-orange),var(--brand-orange)), linear-gradient(var(--brand-orange),var(--brand-orange)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 2px,2px 100%,100% 2px,2px 100%; } @keyframes cta-marco{ 0%{background-size:0 2px,2px 0,0 2px,2px 0} 28%{background-size:100% 2px,2px 0,0 2px,2px 0} 52%{background-size:100% 2px,2px 100%,0 2px,2px 0} 78%{background-size:100% 2px,2px 100%,100% 2px,2px 0} 100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%} } .has-js .cta-panel::before{background-size:0 2px,2px 0,0 2px,2px 0} .has-js .cta-panel.is-in::before{animation:cta-marco 1s cubic-bezier(.35,.7,.4,1) both} .cta-panel p, .cta-panel .cluster{ opacity:0;translate:0 14px; transition:opacity .55s ease,translate .55s cubic-bezier(.22,.61,.36,1); } .cta-panel p{transition-delay:1.05s} .cta-panel .cluster{transition-delay:1.25s} .has-js .cta-panel.is-in p, .has-js .cta-panel.is-in .cluster{opacity:1;translate:0 0} @media (prefers-reduced-motion:reduce){ .has-js .cta-panel::before{background-size:100% 2px,2px 100%,100% 2px,2px 100%;animation:none} .cta-panel p,.cta-panel .cluster{opacity:1;translate:0 0;transition:none} } /* ========================================================================== Pie Tres columnas: marca, navegación y un solo bloque de contacto donde el icono hace de etiqueta, así no hace falta un rótulo por dato. Escala compacta: el pie es contenido secundario y no compite con la página. ========================================================================== */ .footer{ background:var(--brand-green);color:#fff; padding:clamp(44px,5vw,64px) 0 24px; font-size:.9rem;line-height:1.5; } .footer-grid{display:grid;grid-template-columns:1.5fr .8fr 1.25fr;gap:clamp(28px,4vw,56px)} .footer h3{ font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; margin:0 0 .85rem;color:var(--brand-orange); } .footer p{color:#C3CBC1;margin:0;max-width:38ch} .footer a{text-decoration:none;color:#D7DCD5;transition:color .2s ease} .footer a:hover{color:var(--brand-orange)} /* Versión en blanco del logotipo: sobre el verde del pie no hace falta ningún filtro. */ .footer-brand img{width:230px;height:auto;margin-bottom:1.1rem} /* Redes: solo icono, así que cada enlace lleva su aria-label. Caja de 44px para que sea cómodo de tocar en móvil. */ .footer-redes{ list-style:none;margin:1.4rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:.55rem; } .footer-redes a{ display:grid;place-items:center; width:44px;height:44px; border:1px solid rgba(229,217,182,.3); border-radius:var(--r-ui); color:#D7DCD5; transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .footer-redes a:hover{ color:var(--black); background:var(--brand-orange); border-color:var(--brand-orange); } .red-icon{width:19px;height:19px;fill:currentColor} .footer-nav{display:grid;gap:.45rem;align-content:start} .footer-nav a{justify-self:start} .footer-contact ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .footer-contact li{display:flex;align-items:flex-start;gap:.6rem;color:#C3CBC1} .footer-contact a{flex:1} .ct-icon{ width:1.05em;height:1.05em;flex:none;fill:var(--brand-orange); margin-top:.22em; } .footer-bottom{ margin-top:clamp(28px,3.5vw,40px);padding-top:18px; border-top:1px solid rgba(255,255,255,.2); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.82rem;color:#A9B3A7; } /* ========================================================================== WhatsApp flotante ========================================================================== */ .floating-wa{ position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:999; width:56px;height:56px;border-radius:50%; background:var(--wa);color:var(--black); display:grid;place-items:center;text-decoration:none; border:2px solid var(--wa-deep); } .floating-wa:hover{background:var(--wa-deep);border-color:var(--wa-deep)} /* ========================================================================== Páginas internas ========================================================================== */ /* Como en .dark-section: el atajo `background` reinicia background-image, así que la cuadrícula se declara con más especificidad. */ .page-hero{background:var(--pine);color:#fff;padding:clamp(48px,6vw,84px) 0} .page-hero.page-hero{ background-color:var(--brand-green); background-image: repeating-linear-gradient(to right,rgba(229,217,182,.055) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(229,217,182,.055) 0 1px,transparent 1px 26px), repeating-linear-gradient(to right,rgba(229,217,182,.09) 0 1px,transparent 1px 130px), repeating-linear-gradient(to bottom,rgba(229,217,182,.09) 0 1px,transparent 1px 130px); } .page-hero p{color:#D7DCD5} /* Los titulares llevan el verde de marca por defecto; sobre el verde del hero interior hay que devolverlos al blanco o desaparecen. */ .page-hero h1,.page-hero h2,.page-hero h3{color:#fff} .page-hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem)} .page-hero-grid{display:grid;grid-template-columns:1fr .78fr;gap:clamp(28px,4vw,48px);align-items:center} .page-hero img{border-radius:var(--r-photo);aspect-ratio:16/10;object-fit:cover} .page-hero .btn{margin-top:1.4rem} .service-grid,.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,28px)} .notice{ border:1px solid var(--block);border-left:3px solid var(--pine); background:var(--surface);color:var(--pine-mid); padding:16px 20px;border-radius:var(--r-ui);font-size:.94rem; } .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px)} /* Mismo gesto que las tarjetas de servicio: el marco se traza en el sentido de las agujas y la tarjeta aparece al dibujarse, no al desvanecerse. */ .stat,.value{ position:relative;background:transparent;border:0;border-radius:0; padding:clamp(20px,2.5vw,28px); --marco:rgba(98,129,65,.55); } .stat::after,.value::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(var(--marco),var(--marco)),linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)),linear-gradient(var(--marco),var(--marco)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 1px,1px 100%,100% 1px,1px 100%; animation:svc-marco .62s cubic-bezier(.35,.7,.4,1) calc(var(--i,0) * 70ms) both; } .dark-section .stat,.dark-section .value{--marco:rgba(229,217,182,.4)} .has-js .stat::after,.has-js .value::after{background-size:0 1px,1px 0,0 1px,1px 0;animation:none} .has-js .stat.is-in::after,.has-js .value.is-in::after{ animation:svc-marco .62s cubic-bezier(.35,.7,.4,1) calc(var(--i,0) * 70ms) both; } .stat > *,.value > *{position:relative;z-index:1} .stat > *,.value > *{ opacity:0;translate:0 12px; transition:opacity .38s ease calc(var(--i,0) * 70ms + .34s), translate .38s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 70ms + .34s); } .stat.is-in > *,.value.is-in > *{opacity:1;translate:0 0} html:not(.has-js) .stat > *,html:not(.has-js) .value > *{opacity:1;translate:0} .stat strong{ display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem); color:var(--brand-orange);line-height:1.05;margin-bottom:.3rem;font-variant-numeric:tabular-nums; } /* Dato que no es cifra: no puede llevar el mismo cuerpo que un número o parte la retícula al envolver. */ .stat strong.stat-texto{font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.1} .stat > span{font-size:.88rem;color:var(--pine-mid)} /* Cinco valores: retícula fija para que no quede ninguno huérfano al envolver. */ .values{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)} .value{grid-column:span 2} /* Los dos últimos se centran en vez de quedar sueltos a la izquierda. */ .value:nth-child(4){grid-column:2 / span 2} .value{transition:background-color .3s ease} /* Los valores llevan la display en caja alta, no la de lectura: es una sección de declaración y con Alata normal quedaba sosa. El cuerpo va medido para que "RESPONSABILIDAD" —la palabra más larga— quepa sin partirse en la columna. */ .value h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(.8rem,1.02vw,.96rem); letter-spacing:.005em;line-height:1.16; margin-bottom:.7em;transition:color .3s ease; } /* El icono se traza solo, igual que los de servicios: mismo lenguaje de línea que la plomada, el hilo y los planos. */ .value-ico{ display:grid;place-items:center; width:44px;height:44px;margin-bottom:.9rem; border:1px solid var(--marco); } .value-ico svg{ width:24px;height:24px; fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:square;stroke-linejoin:miter; } .value-ico svg path{stroke-dasharray:1;stroke-dashoffset:0} .dark-section .value-ico{color:var(--cream)} .value:hover .value-ico,.value:focus-within .value-ico{border-color:var(--brand-orange)} /* Secuencia por tarjeta: se traza el marco, se dibuja el icono, se rotula el título palabra a palabra, baja la regla y entra la frase. */ .has-js .value-ico{opacity:0;scale:.92} .has-js .value-ico svg path{stroke-dashoffset:1} .value-ico{ transition:opacity .24s ease calc(var(--i,0) * 70ms + .28s), scale .32s cubic-bezier(.34,1.3,.64,1) calc(var(--i,0) * 70ms + .28s), border-color .25s ease; } .value-ico svg path{ transition:stroke-dashoffset .4s ease calc(var(--i,0) * 70ms + .34s); } .has-js .value.is-in .value-ico{opacity:1;scale:1} .has-js .value.is-in .value-ico svg path{stroke-dashoffset:0} /* El título lo levanta el rotulado, no el desvanecido del bloque. */ .value h3{--w0:calc(var(--i,0) * 70ms + .46s)} .has-js .value > h3{opacity:1;translate:0} .has-js .value > p{ transition-delay:calc(var(--i,0) * 70ms + .7s); } /* La regla se traza de izquierda a derecha al pasar por encima o al enfocar: el mismo gesto de hilo del resto del sitio, aquí como respuesta al usuario. */ .value-regla{ display:block;height:2px;margin:0 0 .7em; background:var(--brand-orange); transform:scaleX(0);transform-origin:left center; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .value:hover,.value:focus-within{background:rgba(229,217,182,.05);--marco:var(--brand-orange)} .value:hover .value-regla, .value:focus-within .value-regla{transform:scaleX(1)} .dark-section .value:hover h3{color:var(--brand-orange)} /* Entra escalonada con la tarjeta, justo después de que se cierre el marco. */ .has-js .value.is-in .value-regla{ transform:scaleX(1); transition-delay:calc(var(--i,0) * 70ms + .62s); } .has-js .value.is-in:hover .value-regla{transition-delay:0s} .dark-section .value h3{color:#fff} .dark-section .value p{color:#fff} .dark-section .stat > span{color:#C3CBC1} /* Cuerpo grande: la frase de cada valor es el mensaje, no un pie de foto. */ .value p{margin:0;font-size:clamp(1.4rem,1.7vw,1.6rem);line-height:1.25;color:var(--pine-mid)} /* El mismo mapa de Inicio, con tinta oscura porque aquí el fondo es claro. */ /* El mapa manda en la sección: el texto se queda en una columna estrecha y el país ocupa el resto. Las rutas salen de la base hacia cada región para que se vea de un golpe que se cubre el país entero. */ .cobertura-grid{ display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(26px,4vw,60px);align-items:center; } .cobertura-mapa{margin:0;display:grid;gap:clamp(14px,2vw,20px);justify-items:start} .cobertura-mapa svg{width:100%;max-width:none;height:auto;display:block} /* Las rutas se trazan hacia afuera, una detrás de otra. */ .ruta{ fill:none;stroke:var(--brand-orange);stroke-width:1.5;stroke-linecap:round; opacity:.75; stroke-dasharray:1;stroke-dashoffset:0; } .ruta[style]{pathLength:1} .destino{fill:var(--brand-orange)} .has-js .ruta{stroke-dashoffset:1} .has-js .destino{opacity:0;scale:.4;transform-box:fill-box;transform-origin:center} .ruta{transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.4,1) var(--d,0ms)} .destino{transition:opacity .3s ease var(--d,0ms),scale .38s cubic-bezier(.34,1.5,.64,1) var(--d,0ms)} .has-js .cobertura-mapa.is-in .ruta{stroke-dashoffset:0} .has-js .cobertura-mapa.is-in .destino{opacity:1;scale:1} @media (prefers-reduced-motion:reduce){ .has-js .ruta{stroke-dashoffset:0} .has-js .destino{opacity:1;scale:1} } .cobertura-mapa .mapa-pais{fill:rgba(98,129,65,.07);stroke:var(--green-mid);stroke-width:1.6} .cobertura-mapa figcaption{font-size:.95rem;color:var(--pine-mid)} .cobertura-mapa .obras-aldea{display:block;color:var(--brand-green);font-size:1.1rem} /* --- Contacto --------------------------------------------------------- */ .contact-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(24px,3vw,36px);align-items:start} .contact-list{display:grid;gap:12px} .contact-item{padding:clamp(18px,2.2vw,22px);background:var(--surface);border:1px solid var(--block);border-radius:var(--r-photo)} .contact-item h3{margin-bottom:.3em;font-size:1.02rem} .contact-item p{margin:0;color:var(--pine-mid)} .contact-item .btn{margin-top:.9rem} .form-card{padding:clamp(24px,3vw,34px)} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .field{display:grid;gap:7px} .field.full{grid-column:1/-1} label{font-size:.92rem;color:var(--brand-green)} input,select,textarea{ width:100%;min-height:48px; border:1px solid var(--gray);border-radius:var(--r-ui); background:var(--white);padding:.9rem 1rem; } input:focus,select:focus,textarea:focus{border-color:var(--brand-orange)} textarea{min-height:150px;resize:vertical} [aria-invalid="true"]{border-color:#9d2b2b} .field-error{font-size:.85rem;color:#9d2b2b;min-height:1.25em} .form-status{ display:none;margin-top:18px;padding:15px 18px;border-radius:var(--r-ui); background:var(--surface);border:1px solid var(--block);border-left:3px solid var(--wa-deep); } .form-status.is-visible{display:block} /* --- Detalle de trabajo ----------------------------------------------- */ /* El encabezado queda fijo: un ancla sin margen aterriza debajo de el. */ :target{scroll-margin-top:calc(var(--header-h,73px) + 24px)} .breadcrumbs{font-size:.9rem;margin-bottom:22px;color:var(--pine-mid)} .breadcrumbs a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--block)} .breadcrumbs a:hover{box-shadow:inset 0 -1px 0 var(--pine)} .detail-hero{display:grid;gap:clamp(22px,3vw,32px)} .detail-cover img{ border-radius:var(--r-photo);max-height:620px;width:100%;object-fit:cover;background:var(--concrete-dim); } .photo-step{ margin:0;color:var(--pine);background:var(--surface); border:1px solid var(--block);border-radius:var(--r-photo); overflow:hidden;display:flex;flex-direction:column; } .photo-step img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--concrete-dim)} .photo-step figcaption{padding:clamp(16px,2vw,20px)} .photo-step .step-num{ display:block;font-size:.8rem;font-weight:700;color:var(--pine-faint); margin-bottom:.45rem;font-variant-numeric:tabular-nums; } .photo-step strong{display:block;color:var(--brand-green);margin-bottom:.3rem} .photo-step p{margin:0;font-size:.93rem;color:var(--pine-mid)} .project-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,22px)} .project-steps img{border-radius:var(--r-photo);aspect-ratio:4/3;object-fit:cover} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .gallery-grid img{border-radius:var(--r-photo);aspect-ratio:4/3;object-fit:cover} /* --- Corte de obra del hero de Servicios --------------------------------- */ /* En lugar de una foto, el corte de una vivienda donde cada sistema que ofrecemos se dibuja en el orden real en que se construye. */ .hero-servicios{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center} .hero-corte{margin:0;display:grid;gap:clamp(14px,2vw,22px)} .hero-corte svg{width:100%;height:auto;display:block} .hero-corte path,.hero-corte circle{ fill:none;stroke:var(--cream);stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; } .corte-suelo{stroke:rgba(229,217,182,.45);stroke-width:1} .capa-pintura .brochazo{stroke:var(--brand-orange);stroke-width:9;opacity:.4;stroke-linecap:butt} /* Cada sistema entra en su turno; el trazo se dibuja, no aparece. */ .hero-corte .capa > *{--paso:520ms} .has-js .hero-corte .capa > *{ stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset .8s cubic-bezier(.4,.5,.3,1) calc(var(--n,0) * 520ms + .25s); } .has-js .hero-corte.is-in .capa > *{stroke-dashoffset:0} .has-js .corte-suelo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease} .has-js .hero-corte.is-in .corte-suelo{stroke-dashoffset:0} /* La leyenda es la de un plano: se enciende el renglon cuando su capa entra. */ .capa-leyenda{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem clamp(14px,2vw,26px); } .capa-leyenda li{ display:flex;align-items:baseline;gap:.6rem; font-size:clamp(.88rem,1.15vw,.98rem);color:var(--cream); opacity:.28;transition:opacity .45s ease calc(var(--n,0) * 520ms + .45s); } .has-js .hero-corte.is-in .capa-leyenda li{opacity:1} html:not(.has-js) .capa-leyenda li{opacity:1} .capa-num{ font-family:var(--font-display);font-size:.72rem;letter-spacing:.04em; color:var(--brand-orange);flex:none;font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion:reduce){ .has-js .hero-corte .capa > *, .has-js .corte-suelo{stroke-dashoffset:0;transition:none} .capa-leyenda li{opacity:1;transition:none} } /* --- Ficha de la obra --------------------------------------------------- */ /* Las migas sobre el hero verde: el mismo gesto que en el pie, solo color. */ .page-hero .breadcrumbs{color:#C4CEC0;margin-bottom:16px} .page-hero .breadcrumbs a{color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.4)} .page-hero .breadcrumbs a:hover{color:var(--brand-orange);box-shadow:inset 0 -1px 0 var(--brand-orange)} .detalle-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,56px);align-items:start; } /* Los datos de la obra se trazan como las tarjetas de servicio: el marco primero, el dato después. Es una ficha técnica, no una tarjeta decorada. */ .ficha-obra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);margin:0} .ficha-dato{position:relative;padding:clamp(16px,2vw,22px);--marco:rgba(98,129,65,.55)} .ficha-dato::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 1px,1px 100%,100% 1px,1px 100%; } .ficha-dato > *{position:relative;z-index:1} .ficha-dato dt{ font-family:var(--font-display);text-transform:uppercase; font-size:.7rem;letter-spacing:.05em;color:var(--brand-orange);margin-bottom:.7em; } .ficha-dato dd{margin:0;font-size:1.02rem;line-height:1.35;color:var(--pine-mid)} .has-js .ficha-dato::after{background-size:0 1px,1px 0,0 1px,1px 0;animation:none} .has-js .ficha-obra.is-in .ficha-dato::after{ animation:svc-marco .56s cubic-bezier(.35,.7,.4,1) calc(var(--i,0) * 80ms) both; } .ficha-dato > *{opacity:0;translate:0 10px; transition:opacity .45s ease calc(var(--i,0) * 80ms + .3s),translate .45s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 80ms + .3s)} .ficha-obra.is-in .ficha-dato > *{opacity:1;translate:0 0} html:not(.has-js) .ficha-dato > *{opacity:1;translate:0} /* --- Ubicación de la obra ---------------------------------------------- */ .ubicacion-grid{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,60px);align-items:center; } .mapa-obra{margin:0;display:grid;gap:clamp(12px,1.8vw,18px);justify-items:center} .mapa-obra svg{width:100%;max-width:340px;height:auto;display:block;overflow:visible} .mapa-obra .mapa-pais{fill:rgba(98,129,65,.07);stroke:var(--green-mid);stroke-width:1.6;stroke-linejoin:round} .mapa-obra figcaption{text-align:center;font-size:.95rem;color:var(--pine-mid)} .mapa-obra .obras-aldea{ display:block;font-family:var(--font-display);text-transform:uppercase; font-size:clamp(.9rem,1.3vw,1.05rem);color:var(--brand-green);margin-bottom:.25em; } /* El país se dibuja, la mira de replanteo lo cruza y el punto cae encima: el orden con el que se ubica una obra antes de trazarla. */ .mapa-obra .mapa-pais, .mapa-obra .mapa-mira line{stroke-dasharray:1;stroke-dashoffset:0} .has-js .mapa-obra .mapa-pais{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.4,.5,.3,1)} .has-js .mapa-obra.is-in .mapa-pais{stroke-dashoffset:0} .mapa-obra .mapa-mira line{stroke:var(--brand-orange);stroke-width:1;opacity:.5} .has-js .mapa-obra .mapa-mira line{stroke-dashoffset:1;transition:stroke-dashoffset .6s ease var(--d,0ms)} .has-js .mapa-obra.is-in .mapa-mira line{stroke-dashoffset:0} .mapa-obra .mapa-pin{fill:var(--brand-orange)} .mapa-obra .mapa-halo{fill:none;stroke:var(--brand-orange);stroke-width:2;opacity:.55} .mapa-obra .mapa-pin,.mapa-obra .mapa-halo{transform-box:fill-box;transform-origin:center} .has-js .mapa-obra .mapa-pin{scale:0;transition:scale .5s cubic-bezier(.3,1.5,.5,1) 1.5s} .has-js .mapa-obra.is-in .mapa-pin{scale:1} .has-js .mapa-obra .mapa-halo{opacity:0} .has-js .mapa-obra.is-in .mapa-halo{animation:mapa-pulso 2.6s ease-out 1.7s infinite} @keyframes mapa-pulso{ 0%{scale:.4;opacity:.65} 70%{scale:1.6;opacity:0} 100%{scale:1.6;opacity:0} } /* --- Video -------------------------------------------------------------- */ .dark-section.video-obra{ background-image: repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 26px); } .video-grid{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px);align-items:center; } .video-grid.is-portrait-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)} .video-datos{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem} .video-datos li{display:grid;gap:.15rem} .video-datos span{ font-family:var(--font-display);text-transform:uppercase; font-size:.7rem;letter-spacing:.05em;color:var(--brand-orange); } .video-datos strong{font-weight:400;color:#fff;font-size:1.05rem;font-variant-numeric:tabular-nums} .video-frame{ position:relative;overflow:hidden; background:var(--green-deep);max-width:900px;margin-inline:auto;width:100%; /* Sobre blanco el marco va en verde; sobre la seccion oscura, en hueso. */ --marco:rgba(98,129,65,.55); } .dark-section .video-frame{--marco:rgba(229,217,182,.45)} .video-frame video{display:block;width:100%;aspect-ratio:16/9;background:var(--green-deep)} /* Video grabado en vertical: marco angosto para que no quede embuzonado. */ .video-frame.is-portrait{max-width:380px} .video-frame.is-portrait video{aspect-ratio:9/16} /* El marco se traza igual que el de las tarjetas, y las marcas de esquina son las de registro de un plano. */ .video-frame::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; background-image: linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)), linear-gradient(var(--marco),var(--marco)); background-repeat:no-repeat; background-position:left top,right top,right bottom,left bottom; background-size:100% 1px,1px 100%,100% 1px,1px 100%; } .has-js .video-frame::after{background-size:0 1px,1px 0,0 1px,1px 0;animation:none} .has-js .video-frame.is-in::after{animation:svc-marco .7s cubic-bezier(.35,.7,.4,1) .15s both} .video-esq{ position:absolute;width:14px;height:14px;z-index:4;pointer-events:none; border:0 solid var(--brand-orange);opacity:0;transition:opacity .4s ease .75s; } .video-frame.is-in .video-esq{opacity:1} .video-esq:nth-of-type(1){top:9px;left:9px;border-top-width:2px;border-left-width:2px} .video-esq:nth-of-type(2){top:9px;right:9px;border-top-width:2px;border-right-width:2px} .video-esq:nth-of-type(3){bottom:9px;right:9px;border-bottom-width:2px;border-right-width:2px} .video-esq:nth-of-type(4){bottom:9px;left:9px;border-bottom-width:2px;border-left-width:2px} .video-frame.is-playing .video-esq{opacity:0;transition-delay:0s} /* La tapa cubre los controles nativos hasta que se pulsa; sin JS no existe, para que el