/* ══════════════════════════════════════════════════════ CCP · SISTEMA DEL SITIO Piezas que viven en más de una página: header de interior, barra de redes, galería, equipo, blog, formularios, y los pilares 3 y 6 del brief. Carga siempre DESPUÉS de base.css. ══════════════════════════════════════════════════════ */ /* El header de una interior nace sólido y ocupa lugar: sin hero que lo sostenga, no puede flotar encima del texto. */ .hd.nace-solido{position:sticky;transition:none} .hd-nav a.es,.hd.solid .hd-nav a.es{color:var(--rojo)} .hd-nav a.es::after{width:100%;background:var(--rojo)} /* ══ BARRA DE REDES ══ Rescatada de ccparquitectura.cl/nuevo/. Pastilla vertical al borde derecho; el nombre no se desliza, se descubre con clip. */ .redes{ position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:70; display:flex;flex-direction:column;gap:2px; background:rgba(255,255,255,.84);backdrop-filter:blur(10px); border:1px solid var(--linea);border-radius:999px;padding:9px 7px; box-shadow:0 4px 24px rgba(20,20,20,.07); } .redes a{ width:37px;height:37px;border-radius:50%;position:relative; display:grid;place-items:center;color:var(--gris); transition:color .25s var(--e),background .25s var(--e); } .redes a svg{width:19px;height:19px;fill:currentColor} .redes a:hover{color:var(--rojo);background:rgba(227,6,19,.07)} .redes a+a::before{ content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%); width:14px;height:1px;background:var(--linea); } .redes .nom{ position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%); font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:#fff;white-space:nowrap; background:var(--tinta);border-radius:999px;padding:6px 12px;pointer-events:none; clip-path:inset(0 0 0 100%);opacity:0; transition:clip-path .34s cubic-bezier(.2,.85,.25,1),opacity .2s; } .redes a:hover .nom,.redes a:focus-visible .nom{clip-path:inset(0 0 0 0);opacity:1} @media (max-width:900px){ .redes{right:8px;padding:6px 4px} .redes a{width:33px;height:33px} .redes a svg{width:17px;height:17px} .redes .nom{display:none} } /* ══ CABECERA DE PÁGINA INTERIOR ══ */ .cab{padding:clamp(48px,8vh,88px) 0 clamp(26px,4vh,44px);border-bottom:1px solid var(--linea)} .cab .display{margin-bottom:14px} .cab .lede{max-width:56ch} .cab-fila{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} .seccion{padding:clamp(56px,9vh,110px) 0} .seccion--hueso{background:var(--hueso)} /* ══ GALERÍA DE OBRAS ══ 🔴 UNA FILA = UNA OBRA. Las dos fotos de cada casa viajan juntas: la 01 y la 02, en ese orden. Esa regla manda sobre todo lo demas. 🔴 COMPOSICION MEDIDA EN amasr.com.ar/villas (19-09-2026): dentro de la fila las dos NO son simetricas — una ANCHA 2:1 y una CUADRADA 1:1, y el lado de la ancha SE INVIERTE fila a fila. Ahi son 843px + 417px con 8px de separacion sobre 1354 de ancho; aca es lo mismo en proporcion: grilla de 3 columnas, la ancha toma 2. La diferencia con la referencia: alla cada fila son DOS proyectos distintos, aca la fila entera es UNA obra. Por eso la alternancia va por fila completa, nunca partiendo una pareja. El margen blanco entre fotos es parte de la composicion: separa sin despegar, y es lo que hace que se lean como galeria y no como una tira continua. */ .gal{ display:grid; /* 🔴 TRES columnas iguales: la ancha ocupa dos, la cuadrada una. Con `2fr 1fr` la proporcion quedaba atada al lado y al invertir la fila la ancha caia en la columna estrecha y se deformaba. */ grid-template-columns:repeat(3,1fr); /* 🔴 `dense`: en las filas invertidas la cuadrada va en la col 1, a la IZQUIERDA de la ancha que el DOM coloco antes. Sin `dense` la grilla no retrocede y la manda una fila mas abajo, partiendo la pareja. Con `dense` rellena ese hueco y quedan juntas. */ grid-auto-flow:row dense; gap:var(--gap-gal,10px); } .ob{position:relative;overflow:hidden;background:var(--hueso);display:block} /* ── LA COMPOSICION ALTERNADA ── 🔴 El lado lo decide `data-lado` en el HTML, NO un :nth-child. Probadas y descartadas cuatro variantes de CSS puro: `nth-child` con grid-column partia la fila en dos alturas, `direction:rtl` no afecta la colocacion de la grilla, y `order` reordena la galeria entera y separa las parejas. Con el atributo, cada obra dice donde va su foto ancha y la grilla no tiene que adivinar nada. `grid-column` explicito en AMBAS celdas: dar columna a una sola dejaba a la otra buscando hueco y la mandaba una fila abajo. */ .ob[data-lado="izq"][data-pos="a"]{grid-column:1 / span 2;aspect-ratio:2/1} .ob[data-lado="izq"][data-pos="b"]{grid-column:3 / span 1;aspect-ratio:1/1} .ob[data-lado="der"][data-pos="a"]{grid-column:2 / span 2;aspect-ratio:2/1} .ob[data-lado="der"][data-pos="b"]{grid-column:1 / span 1;aspect-ratio:1/1} .ob img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)} .ob::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.64)); opacity:0;transition:opacity .42s var(--e); } .ob-txt{ position:absolute;left:22px;bottom:18px;z-index:2;color:#fff; opacity:0;transform:translateY(10px); transition:opacity .42s var(--e),transform .42s var(--e); } .ob-txt .cat{ font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.2em; text-transform:uppercase;opacity:.86;display:block;margin-bottom:5px; } .ob-txt .nom{font-family:"Aboreto",serif;font-size:clamp(17px,2vw,24px);display:block} .ob:hover img{transform:scale(1.04)} .ob:hover::after,.ob:hover .ob-txt{opacity:1;transform:none} .ob:active{transform:scale(.99)} .ob[hidden]{display:none} /* píldoras de filtro, flotantes sobre la galería */ /* Van ARRIBA de la galeria: flotando abajo tapaban la obra, que es justo lo que la pagina viene a mostrar. */ .filtros{ display:flex;gap:9px;justify-content:center;flex-wrap:wrap; padding:0 0 clamp(22px,3.5vh,36px); } .fl{ font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.16em; text-transform:uppercase;padding:11px 20px;border-radius:999px; background:rgba(255,255,255,.92);backdrop-filter:blur(10px); border:1px solid var(--linea);cursor:pointer;color:var(--gris); box-shadow:0 3px 16px rgba(20,20,20,.09); } .fl:hover{color:var(--tinta);border-color:var(--tinta)} .fl.on{background:var(--tinta);color:#fff;border-color:var(--tinta)} .fl:active{transform:scale(.95)} /* ══ LOS 3 SERVICIOS ══ */ .srv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px)} .srv-i{padding-top:26px;border-top:1px solid var(--tinta)} .srv-i .n{ font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.2em; color:var(--rojo);display:block;margin-bottom:14px; } .srv-i h3{font-family:"Aboreto",serif;font-size:clamp(18px,2.1vw,25px);line-height:1.25;margin-bottom:12px} .srv-i p{font-size:14.5px;color:var(--gris);margin:0} /* ══ EQUIPO Y COLABORADORES ══ */ .equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,42px)} .per figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--hueso)} .per img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--e),transform 1.1s var(--e)} .per:hover img{filter:grayscale(0);transform:scale(1.03)} .per h3{font-family:"Aboreto",serif;font-size:clamp(16px,1.8vw,20px);margin:16px 0 4px} .per p{font-size:13px;color:var(--gris);margin:0} .per .vacio{ width:100%;height:100%;display:grid;place-items:center; color:var(--gris);font-family:"DM Sans",sans-serif;font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;text-align:center; padding:20px;border:1px dashed var(--linea);line-height:1.9; } /* ══ BLOG ══ */ .notas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.4vw,46px)} .nota{display:block;border-bottom:1px solid var(--linea);padding-bottom:26px} .nota figure{margin:0 0 18px;overflow:hidden;aspect-ratio:16/10;background:var(--hueso)} .nota img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)} .nota:hover img{transform:scale(1.04)} .nota .meta{ font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--gris);display:flex;gap:12px;margin-bottom:10px; } .nota h3{font-family:"Aboreto",serif;font-size:clamp(17px,2vw,23px);line-height:1.28;margin-bottom:10px} .nota p{font-size:14.5px;color:var(--gris);margin:0 0 14px} /* ══ MODELO 3D · acceso con clave ══ */ .acceso{ max-width:430px;margin:0 auto;padding:clamp(30px,5vh,48px); border:1px solid var(--linea);background:var(--hueso); } .campo{margin-bottom:20px} .campo label{ display:block;font-family:"DM Sans",sans-serif;font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:8px; } .campo input,.campo textarea,.campo select{ width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--linea); background:none;font:inherit;font-size:15px;color:var(--tinta); transition:border-color .3s var(--e); } .campo textarea{resize:vertical;min-height:110px} .campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--tinta)} .aviso{ margin-top:20px;padding:14px 16px;font-size:13.5px;line-height:1.6; background:rgba(227,6,19,.055);border-left:2px solid var(--rojo);color:var(--tinta); } /* ══ FORMULARIO ══ */ .form-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:start} .dos{display:grid;grid-template-columns:1fr 1fr;gap:20px} .datos p{font-size:14.5px;color:var(--gris);margin:0 0 10px;line-height:1.7} .datos a{color:var(--gris);transition:color .3s var(--e)} .datos a:hover{color:var(--rojo)} /* ══════════════════════════════════════════════════════ PILARES DEL BRIEF · 3 letras vivas · 6 feedback háptico ══════════════════════════════════════════════════════ */ .viva{display:inline-block} .viva .ch{ display:inline-block; transform:translate3d(0,var(--dy,0),0) scale(var(--sc,1)); transition:transform .5s var(--e); will-change:transform; } .viva.entra .ch{opacity:0;animation:chIn .72s var(--e) forwards;animation-delay:calc(var(--i) * 24ms)} @keyframes chIn{ from{opacity:0;transform:translate3d(0,.45em,0)} to{opacity:1;transform:translate3d(0,0,0)} } .btn,.card,.ms,.ob,.fl,.nota{ transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .35s var(--e), color .35s var(--e),border-color .35s var(--e); } .btn:active{transform:scale(.955)} .card:active,.ms:active{transform:scale(.988)} .btn{position:relative;overflow:hidden;isolation:isolate} .btn::after{ content:"";position:absolute;z-index:-1; left:var(--mx,50%);top:var(--my,50%);width:0;height:0; border-radius:50%;background:rgba(255,255,255,.26); transform:translate(-50%,-50%); transition:width .55s var(--e),height .55s var(--e),opacity .55s var(--e); } .btn-s::after{background:rgba(20,20,20,.1)} .btn:hover::after{width:300px;height:300px} .btn:active::after{width:360px;height:360px;opacity:.5;transition-duration:.18s} .card{perspective:900px} .card .card-img{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--e);will-change:transform; } .card:hover .card-img{transition-duration:.16s} @media (prefers-reduced-motion:reduce){ .viva .ch{transition:none!important;animation:none!important;transform:none!important;opacity:1!important} .card .card-img{transform:none!important} .btn::after{display:none} } @media (hover:none){.card .card-img{transform:none!important}} /* ══ RESPONSIVE ══ */ @media (max-width:900px){ .srv,.equipo{grid-template-columns:1fr;gap:30px} .notas{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr;gap:38px} /* Tablet: se mantiene la composicion alternada, pero la fila entera baja de altura para que la ancha no domine tanto la pantalla. */ .gal{--gap-gal:8px} } @media (max-width:620px){ /* 🔴 En telefono la composicion alternada NO cabe: la cuadrada quedaria de 100px. La pareja se apila, primero la 01 y debajo la 02, ambas en 3:2 — se mantiene el orden, que es lo que cuenta la obra. Se anulan las columnas del escritorio con !important porque las reglas de `data-lado` son mas especificas. */ .gal{grid-template-columns:1fr;--gap-gal:8px} .ob[data-lado][data-pos]{grid-column:1 / -1!important;aspect-ratio:3/2} .dos{grid-template-columns:1fr} .cab-fila{flex-direction:column;gap:10px} } /* la palabra es indivisible: el salto cae entre palabras */ .viva .pal{display:inline-block;white-space:nowrap} /* ══════════════════════════════════════════════════════ HERO DE PÁGINA INTERIOR · banda de foto a ancho completo Del lenguaje de amasr: la imagen dice el rubro antes que el texto. Título abajo-izquierda, etiqueta debajo. ══════════════════════════════════════════════════════ */ .heroP{ position:relative;min-height:clamp(320px,46vh,460px); display:flex;align-items:flex-end;overflow:hidden;background:var(--carbon); } .heroP-img{position:absolute;inset:0} .heroP-img img{width:100%;height:100%;object-fit:cover} .heroP::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.66) 100%); } .heroP .wrap{position:relative;z-index:2;padding-block:clamp(30px,5vh,54px)} .heroP h1{color:#fff} .heroP .tag{color:rgba(255,255,255,.88);margin:14px 0 0} .heroP .tag::before{color:#fff} .heroP .lede{color:rgba(255,255,255,.9);margin-top:12px} /* ══ BLOG · el orden de PuroPlano ══ */ /* filtros con contador, en píldora */ .cats{display:flex;gap:9px;flex-wrap:wrap;padding:clamp(26px,4vh,40px) 0 clamp(18px,3vh,30px)} .cat-b{ display:inline-flex;align-items:center;gap:9px; font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;padding:10px 17px;border-radius:999px; background:#fff;border:1px solid var(--linea);cursor:pointer;color:var(--gris); } .cat-b .n{ font-size:9.5px;letter-spacing:0;padding:2px 7px;border-radius:999px; background:var(--hueso);color:var(--gris); } .cat-b:hover{color:var(--tinta);border-color:var(--tinta)} .cat-b.on{background:var(--tinta);color:#fff;border-color:var(--tinta)} .cat-b.on .n{background:rgba(255,255,255,.2);color:#fff} .cat-b:active{transform:scale(.96)} /* la grilla: destacada a 2/3 arriba, el resto de a 3 */ .blogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)} .art{ display:flex;flex-direction:column; border:1px solid var(--linea);background:#fff;overflow:hidden; } .art figure{margin:0;overflow:hidden;aspect-ratio:16/10;background:var(--hueso)} .art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)} .art:hover img{transform:scale(1.045)} .art-txt{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;flex:1} .art .meta{ font-family:"DM Sans",sans-serif;font-size:9.5px;letter-spacing:.17em; text-transform:uppercase;color:var(--gris); display:flex;align-items:center;gap:10px;margin-bottom:11px; } .art .meta .c{color:var(--rojo)} .art .meta .sep{width:1px;height:10px;background:var(--linea)} .art h3{ font-family:"Aboreto",serif;font-size:clamp(15.5px,1.5vw,19px); line-height:1.32;margin-bottom:10px; } .art p{font-size:13.5px;color:var(--gris);line-height:1.65;margin:0 0 16px} .art .leer{ margin-top:auto;font-family:"DM Sans",sans-serif;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--tinta); border-bottom:1px solid var(--tinta);align-self:flex-start;padding-bottom:3px; transition:color .3s var(--e),border-color .3s var(--e); } .art:hover .leer{color:var(--rojo);border-color:var(--rojo)} /* destacada: ocupa 2 columnas y se parte en foto | texto */ .art--dest{grid-column:span 2;flex-direction:row} .art--dest figure{flex:0 0 46%;aspect-ratio:auto} .art--dest .art-txt{padding:clamp(22px,2.6vw,34px);justify-content:center} .art--dest h3{font-size:clamp(19px,2.3vw,27px)} .art--dest p{font-size:14.5px} .art--dest .sello{ position:absolute;top:14px;left:14px;z-index:3; font-family:"DM Sans",sans-serif;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;background:var(--tinta);color:#fff;padding:7px 13px; } .art--dest{position:relative} .art[hidden]{display:none} @media (max-width:980px){ .blogrid{grid-template-columns:repeat(2,1fr)} .art--dest{grid-column:span 2} } @media (max-width:700px){ .blogrid{grid-template-columns:1fr} .art--dest{grid-column:span 1;flex-direction:column} .art--dest figure{flex:none;aspect-ratio:16/10} } /* ══════════════════════════════════════════════════════ MODELO 3D · visor de fondo + popup de acceso encima ══════════════════════════════════════════════════════ */ .visor{ position:relative;height:calc(100svh - 74px);min-height:520px; overflow:hidden;background:var(--carbon); } .visor-fondo{position:absolute;inset:0} .visor-fondo img,.visor-fondo iframe,.visor-fondo canvas{ width:100%;height:100%;object-fit:cover;border:0;display:block; } .visor::after{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse at center,rgba(10,10,10,.28) 0%,rgba(10,10,10,.74) 100%); } /* leyenda abajo, para que el fondo se entienda como demostración */ .visor-pie{ position:absolute;left:0;right:0;bottom:0;z-index:3; padding:0 var(--pad) clamp(20px,3vh,32px);color:#fff; } .visor-pie .tag{color:rgba(255,255,255,.82);margin:0} .visor-pie .tag::before{color:#fff} /* el popup */ .pop{ position:absolute;inset:0;z-index:4; display:grid;place-items:center;padding:var(--pad); } .pop-caja{ width:100%;max-width:412px;background:rgba(255,255,255,.97); backdrop-filter:blur(16px);padding:clamp(28px,4vh,40px); box-shadow:0 24px 70px rgba(0,0,0,.34); animation:popIn .6s var(--e) both; } @keyframes popIn{ from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} } .pop-caja h2{ font-family:"Aboreto",serif;font-size:clamp(20px,2.4vw,27px); line-height:1.22;margin:10px 0 8px; } .pop-caja .sub{font-size:14px;color:var(--gris);margin:0 0 26px;line-height:1.6} .pop-caja .btn{width:100%;text-align:center;justify-content:center} .pop-pie{ margin:20px 0 0;font-size:12.5px;color:var(--gris);line-height:1.7;text-align:center; } .pop-pie a{border-bottom:1px solid var(--linea)} .pop-pie a:hover{color:var(--rojo);border-color:var(--rojo)} @media (prefers-reduced-motion:reduce){.pop-caja{animation:none}} @media (max-width:620px){ .visor{height:auto;min-height:0} .visor-fondo{position:relative;height:42vh;min-height:250px} .pop{position:relative;inset:auto;padding:clamp(26px,5vh,40px) var(--pad)} .visor::after{display:none} .visor-pie{display:none} .pop-caja{box-shadow:none;border:1px solid var(--linea);background:#fff} } /* ══════════════════════════════════════════════════════ BARRIDO DE ENTRADA DE LA GALERÍA Medido en amasr/villas: no es un fade ni un deslizamiento. Es un clip-path que se corre de izquierda a derecha, como una cortina que descubre la foto: inset(-1px 100% -100px -1px) → inset(-1px -1px -100px) Los -1px y -100px evitan que se vea el borde del recorte. Dentro de la fila los dos items entran ESCALONADOS, no juntos: el segundo arranca ~0,22s después del primero. ══════════════════════════════════════════════════════ */ /* 🔴 El clip-path va en la IMAGEN, no en el . Recortar el propio .ob a cero de ancho lo deja sin área visible y el IntersectionObserver lo da por fuera de pantalla: nunca disparaba y las filas de abajo se quedaban sin barrer. El enlace conserva su caja; lo que se descubre es la foto de adentro. */ .ob img{ clip-path:inset(-1px 100% -100px -1px); transform:scale(1.06); transition:clip-path 1.15s cubic-bezier(.33,.06,.16,1) var(--d,0s), transform 1.5s cubic-bezier(.22,.61,.36,1) var(--d,0s); } .ob.entro img{clip-path:inset(-1px -1px -100px);transform:scale(1)} .ob.entro:hover img{transform:scale(1.04)} @media (prefers-reduced-motion:reduce){ .ob img{clip-path:none!important;transform:none!important;transition:none!important} } /* ══════════════════════════════════════════════════════ INTRO DE BIENVENIDA Fondo oscuro + la animación del logo + "BIENVENIDO A". Al terminar, el fondo se disuelve y el logo de la animación queda EXACTAMENTE donde está el del hero: el logo no se mueve, se mueve todo lo demás. La medida sale del video (frame a los 4,0 s): el logo queda centrado al 50%/50% ocupando el 41% del ancho. Por eso el hero usa ese mismo ancho y centro, y el video se escala con el mismo criterio. ══════════════════════════════════════════════════════ */ .intro-v{ position:fixed;inset:0;z-index:200;background:#000; display:grid;place-items:center;overflow:hidden; } /* 🔴 EL TAMAÑO LO MANDA EL LOGO DEL HERO, no el video. El logo ocupa el 41% del ancho del frame (medido en el fotograma de los 4,0 s). Para que en pantalla quede del mismo porte que .hero-mark —min(190px,34vw)— el video se dibuja a 190/0.41 = 463px de ancho. Por eso NO va a pantalla completa con cover: va chico y centrado sobre el fondo negro. */ .intro-v video{ width:min(463px, 83vw); height:auto; display:block; /* ⚠️ MEDIDO con el saludo oculto, que es la única forma de leer el logo solo: a 463px de ancho su centro cae en cy=500 y el del hero está en 450, así que se sube 1px. El factor es proporcional al ancho para que el calce se mantenga en cualquier pantalla. */ transform:translateY(calc(min(463px, 83vw) * 0.0021)); /* El negro del video no es exactamente #000 y se recorta contra el fondo. screen funde el cuadro: lo negro desaparece y solo queda el trazo blanco del logo. */ mix-blend-mode:screen; } /* el cierre: el fondo se va, el logo se queda */ .intro-v.cierra{ animation:introFuera .95s cubic-bezier(.4,0,.2,1) forwards; } @keyframes introFuera{ to{opacity:0;visibility:hidden} } /* mientras la intro corre, el fondo no se puede scrollear */ body.intro-activa{overflow:hidden} /* El logo del hero: SIN el movimiento de entrada cuando viene de la intro — tiene que parecer que ya estaba ahí. */ .hero-mark.fijo{animation:none;opacity:1;transform:translate(-50%,-50%)} @media (prefers-reduced-motion:reduce){ .intro-v{animation:none!important} .intro-v{display:none} } /* ══ PÁGINAS LEGALES ══ Texto largo de lectura seria. Medida de línea acotada a 74ch: más ancho que eso y el ojo pierde el renglón al volver. */ .legal{max-width:74ch;margin:0 auto;font-size:16px;line-height:1.75;color:var(--tinta)} .legal h2{ font-family:"Aboreto",serif;font-size:clamp(18px,2.1vw,23px); font-weight:400;line-height:1.3; margin:clamp(34px,4.6vh,52px) 0 12px; padding-top:clamp(20px,2.6vh,28px);border-top:1px solid var(--linea); } .legal h2:first-of-type{border-top:0;padding-top:0;margin-top:clamp(18px,2.4vh,26px)} .legal p{margin:0 0 15px;color:var(--gris)} .legal p > em{ font-family:"DM Sans",sans-serif;font-style:normal; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris); } .legal strong{color:var(--tinta);font-weight:600} .legal ul{margin:0 0 17px;padding-left:20px;color:var(--gris)} .legal li{margin-bottom:9px} .legal li::marker{color:var(--rojo)} .legal a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px} .legal a:hover{color:var(--rojo)} /* ══ TEXTO DE LA SECCIÓN "CCP ARQUITECTURA" EN MÓVIL ══ 🔴 La barra flotante de redes ocupa desde x=339 de 390. Achicar la tipografia NO sirve: al reflujar, la palabra que queda al final cambia y siempre hay alguna bajo la barra. Lo que corresponde es reservarle el carril: 54px de margen derecho al texto, y ninguna linea llega nunca a pisarla. */ @media (max-width:620px){ .intro-txt .display, .intro-txt .lede{padding-right:54px} } /* ══ VISOR 3D EMBEBIDO EN LA PORTADA ══ 🔴 El visor manda en esta seccion: ocupa MEDIA PORTADA de alto (60vh, con techo de 620px) y se lleva la columna ancha de la grilla. Antes iba en 4:3 dentro de media columna y la casa salia diminuta: no se distinguian los materiales, que es justo lo que viene a mostrar. Sin borde, sin sombra, sin radio: el visor ya tiene fondo blanco y debe leerse como parte del papel de la pagina, no como una caja. Lo que parecia "el cuadrado" era el recorte del iframe cortando el modelo, no un borde: se arregla dandole aire, no quitando bordes. */ /* Se declaran las dos formas: `:has()` para el caso general y una clase propia como respaldo, porque `:has()` no existe en navegadores algo viejos y ahi la seccion volveria a 1fr 1fr. */ .intro-grid--visor, .intro-grid:has(.intro-visor){grid-template-columns:0.85fr 1.15fr} .intro-visor{ position:relative; height:clamp(400px,60vh,620px); width:100%; } .intro-visor iframe{ position:absolute;inset:0;width:100%;height:100%; border:0;display:block;background:transparent; } @media (max-width:900px){ /* Apilado: el visor pasa a ancho completo y gana altura, porque ya no compite con el texto por el espacio horizontal. */ .intro-grid--visor, .intro-grid:has(.intro-visor){grid-template-columns:1fr} .intro-visor{height:clamp(360px,52vh,520px)} } @media (max-width:620px){ .intro-visor{height:min(66vh,440px)} } /* ══════════════════════════════════════════════════════════════ FICHA DE OBRA (obra-.html) 🔴 TODO en una fila: nombre a la izquierda, datos a la derecha. 🔴 La galeria es UNA sola seccion blanca — renders y planos juntos, en la misma grilla del resto del sitio (ancha + cuadrada, alternando), dentro del .wrap con su margen a los costados. Dos intentos anteriores fallaron: uno invento dos columnas con la memoria al lado, otro separo los planos en su propia banda. Esto replica la referencia y el lenguaje que ya tiene el sitio. ══════════════════════════════════════════════════════════════ */ .obra-cab{padding:clamp(96px,13vh,150px) 0 clamp(14px,2vh,22px)} /* 🔴 La galeria arranca pegada a la cabecera: entre la memoria cerrada y la primera foto habia 117px de blanco (36 del cierre de cabecera + 81 del padding de seccion) y la pagina se leia rota en dos. */ .obra-cab + .seccion{padding-top:clamp(20px,3vh,34px)} .obra-tit{ display:flex;align-items:baseline;justify-content:space-between; gap:clamp(12px,2.4vw,32px);flex-wrap:wrap; padding-bottom:clamp(13px,1.8vh,18px); } .obra-tit h1{margin:0;font-size:clamp(24px,3.2vw,42px);line-height:1.1} .obra-datos{ display:flex;flex-wrap:wrap;align-items:center; font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--gris);margin:0; } .obra-datos > span{ display:inline-flex;align-items:center;gap:5px; padding:0 clamp(8px,1vw,13px);white-space:nowrap; } .obra-datos > span + span{border-left:1px solid var(--linea)} /* 🔴 12px: el icono acompaña al texto, no lo reemplaza. A 21px eran bloques y a 14 seguian pesando mas que el dato. Se alinean con la mayuscula, no con la linea base. */ .obra-datos .esp svg{ width:12px;height:12px;flex:0 0 12px; fill:var(--rojo);position:relative;top:-.5px; } /* ── Memoria desplegable ── */ .memoria{border-top:1px solid var(--linea);padding-top:clamp(13px,1.8vh,17px)} .memoria summary{ list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px; font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--gris);transition:color .2s var(--e); } .memoria summary::-webkit-details-marker{display:none} .memoria summary::before{content:"→";color:var(--rojo);font-size:12px;line-height:1} .memoria[open] summary::before{content:"—"} .memoria summary:hover{color:var(--tinta)} .memoria-txt{padding:clamp(16px,2.2vh,22px) 0 0;max-width:76ch} .memoria-txt p{margin:0 0 14px;color:var(--gris);line-height:1.85;font-size:15px} .memoria-txt p:first-child{color:var(--tinta)} @media (max-width:620px){ .obra-tit{flex-direction:column;align-items:flex-start;gap:11px} /* La fila se reparte en varias lineas: la primera de cada una no debe arrastrar el separador. */ .obra-datos > span{padding:0 9px 0 0} .obra-datos > span + span{padding-left:9px} .memoria-txt p{font-size:14.5px} } /* ── Las tarjetas de servicio, en VIDEO ── 🔴 La caja se adapta al VIDEO, no al reves (Claudio, 21-09-2026). Las animaciones son 16:9 y la tarjeta era 3:4 vertical: con `object-fit:cover` se recortaba el 60% de la animacion y la seccion se rompia. Medido: caja 367x489 (0.75) contra video 1280x720 (1.78). Los videos van sobre FONDO BLANCO, lineas negras y grises con acentos dorados, para que se fundan con la pagina en vez de ser tres bloques oscuros. */ /* 🔴 23-09-2026 · Se quitaron las reglas de los videos: la seccion "Que hacemos" volvio a IMAGENES 3/4 en blanco y negro (Claudio). Solo queda el titulo que reacciona en rojo junto con la imagen. */ .card h3{transition:color .28s var(--e)} .card:hover h3{color:var(--rojo)} /* ── El modelo 3D al entrar a una obra (22-09-2026) ── 🔴 Claudio: al abrir una ficha lo PRIMERO es el modelo. Los planos ya no se publican (se recrean con IA); el visor se mira y no se descarga. Es el mismo visor de la portada con ?modelo=. Va a ancho de .wrap y en 16:9, que es el encuadre con que el visor fija su camara; en telefono se estira a 4:3 para que la casa no quede como una franja. */ .obra-visor-sec{padding:0 0 clamp(20px,3vh,34px)} .obra-visor{ position:relative;aspect-ratio:16/9;width:100%; background:var(--hueso,#f4f2ef);overflow:hidden; } .obra-visor iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} @media (max-width:760px){ .obra-visor{aspect-ratio:4/3} } /* ═══ "QUÉ HACEMOS": la seccion de las 3 imagenes (23-09-2026) ═══ 🔴 El traslape con "Ves tu casa antes de que exista" tenia DOS causas encadenadas: 1. `.serv` no tenia padding superior (con los videos, bajos, no se notaba; con las imagenes 3/4 si). 2. La fila de la grilla se fijaba en 270px —la suma del texto— sin contar la imagen: los hijos median 420+37+25=482 y la caja 270, asi que todo se desbordaba encima de la seccion siguiente. Medido con getComputedStyle, no a ojo. La cura: FLEX en vez de grid. Flex mide el alto real de sus hijos; la grilla, con la imagen en position:relative, no lo hacia. */ .serv{padding-top:clamp(72px,11vh,132px)} .serv-grid{ display:flex; gap:clamp(14px,2vw,26px); align-items:flex-start; } .serv-grid > .card{ flex:1 1 0; min-width:0; /* sin esto, flex no deja encoger y se desborda */ display:block; height:auto; } .card .card-img{ width:100%; height:clamp(300px,30vw,430px); /* 3/4 sobre el ancho de columna */ aspect-ratio:auto; padding-top:0; position:relative; overflow:hidden; } .card .card-img img{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover; } @media (max-width:860px){ .serv-grid{flex-direction:column} .card .card-img{height:clamp(260px,52vw,380px)} } /* ═══════════════════════════════════════════════════════════════ CUERPO DE ARTICULO DEL BLOG (movido aca el 23-09-2026) Vivia en el de cada .html del v2. Al pasar el blog a WordPress ese