/* ========================================================================== Estudio Jurídico Le Bihan --------------------------------------------------------------------------- · Escala proporcional (escala.md): 1rem = 16px en la MacBook Pro 14" (1512) y en el iPhone de 440. Todo en rem, salvo hairlines, 44px táctiles y media queries. · Tamaños de texto dentro de la escala de la skill (design-system.md): H1 4rem · H2 ≤ 2.6rem · cuerpo 17px · volantas 12px. Mobile: título ≈ 34px. · Estructura de la referencia Winslow: inicio a pantalla completa con las puntas de abajo redondeadas, header más ancho que el contenido, márgenes amplios, filas de áreas con texto y foto. · Colores medidos sobre el original de «Brochure Editorial Estudio Le Bihan» (la tapa es un degradé de #54010A a #820219; franjas coral #F87A8B). ========================================================================== */ :root{ --vw: min(1vw, 19.2px); /* bordó más saturado (pedido de la cliente, 06/10): saturación ×1,82 y luz +0,07 en el lab */ --sangre: #5B0010; /* bordó del brochure, más saturado a pedido de la cliente (06/10: saturación ×1,82, luz +0,07 en el lab) · crema encima 13.1:1 */ --sangre-luz: #820219; /* donde le da la luz · crema encima 10.62:1 */ --sangre-osc: #54010A; --carmesi: #AD012D; /* números y acentos sobre crema · 8.86:1 */ --coral: #F87A8B; /* acento sobre bordó · 6.75:1 (sobre la luz 5.28:1) */ --crema: #F8F3EF; /* casi blanco, cálido: el beige de antes envejecía el sitio · sobre bordó 15.8:1 */ --crema-2: #EFE7E1; --rosa-hoja: #F2E7E3; /* hsl(18 38% 92%), elegido en el laboratorio · suave encima 5.3:1, títulos 9.2:1 */ --tinta: #930328; /* títulos sobre crema · 10.88:1 */ --texto: #3A2B28; /* texto sobre crema */ --suave: #6B5550; /* secundario sobre crema · 6.27:1 */ --rosa-suave: #C9A29A; /* secundario sobre bordó · 7.56:1 */ --linea: rgba(147,3,40,.16); --linea-clara: rgba(239,225,213,.18); --degrade: radial-gradient(130% 110% at 85% 0%, var(--sangre-luz) 0%, var(--sangre) 55%, var(--sangre-osc) 100%); /* LA SERIF ESTÁ EN UN SOLO LUGAR. Libre Bodoni (Impallari Type, Rosario): una Bodoni pensada para pantalla, elegida en el laboratorio del 05/10 */ --serif: 'Libre Bodoni', Georgia, serif; --sans: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif; --margen: 16rem; /* márgenes del contenido (Tomás los pidió más amplios dos veces, 05/10) */ --margen-nav: 4.5rem; /* el header va más ancho que el contenido (Tomás pidió el logo y el botón un poco más al centro) */ --nav-h: 5.5rem; --radio: 2.5rem; /* las puntas del inicio y del cierre */ --radio-foto: 1.25rem; --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.7,0,.2,1); --inicio: 1.95s; } html{ font-size:calc(var(--vw) * 100 / 94.5); } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--crema); color:var(--texto); font:300 1.0625rem/1.65 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img,svg{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } h1,h2,h3,p,ul,ol{ margin:0; } ul,ol{ padding:0; list-style:none; } b{ font-weight:inherit; } em{ font-style:normal; } /* sin cursivas en todo el sitio (pedido de Tomás): el queda sólo como énfasis semántico */ button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } ::selection{ background:var(--tinta); color:var(--crema); } .saltar{ position:fixed; left:1rem; top:-5rem; z-index:100; min-height:48px; display:inline-flex; align-items:center; padding:0 1.125rem; background:var(--tinta); color:var(--crema); } .saltar:focus{ top:1rem; } :focus-visible{ outline:2px solid var(--carmesi); outline-offset:4px; } .hero :focus-visible, .cierre :focus-visible, .menu :focus-visible{ outline-color:var(--coral); } .contenedor{ padding-inline:var(--margen); } /* Texto que el cliente todavía no confirmó: subrayado punteado para que no se publique por error */ /* .borrador y .pendiente marcan en el HTML lo que el cliente todavía no confirmó; no se ven (pedido de Tomás) */ /* ---------- piezas ---------- */ .marca-seccion{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:1.5rem; font:400 .75rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--suave); } .marca-seccion em{ font:300 1.0625rem/1 var(--serif); letter-spacing:0; color:var(--carmesi); } .pildora{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3rem; padding:0 1.5rem; border-radius:100px; border:1px solid currentColor; font:400 .9375rem/1 var(--sans); letter-spacing:.01em; transition:background-color .3s, color .3s, border-color .3s, transform .2s; } .pildora span{ transition:transform .35s var(--ease-out); } .pildora:hover span{ transform:translateX(.25rem); } .pildora:active{ transform:translateY(1px); } .pildora--llena{ background:var(--crema); color:var(--sangre); border-color:var(--crema); } .pildora--llena:hover{ background:#fff; border-color:#fff; } .enlace{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; align-self:flex-start; font:400 .9375rem/1 var(--sans); color:var(--carmesi); border-bottom:1px solid rgba(173,1,45,.35); transition:border-color .3s; } .enlace span{ transition:transform .35s var(--ease-out); } .enlace:hover{ border-color:var(--carmesi); } .enlace:hover span{ transform:translateX(.25rem); } /* palabras con máscara: suben cuando el título entra (las arma el JS) */ .pal{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; } .pal > span{ display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i,0) * 45ms); } .is-in .pal > span{ transform:none; } .js [data-revela]{ opacity:0; transform:translateY(1rem); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d,0ms); } .js [data-revela].is-in{ opacity:1; transform:none; } /* ========================================================================== APERTURA ========================================================================== */ .apertura{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:var(--sangre) var(--degrade); color:var(--crema); clip-path:inset(0 0 0 0); animation:telon .75s var(--ease-io) 1.2s forwards; } .sin-apertura .apertura{ display:none; } .sin-apertura{ --inicio:.1s; } .apertura__in{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; } .apertura__logo{ width:17rem; height:auto; fill:currentColor; overflow:visible; } .apertura__sup{ animation:aparecer .7s var(--ease-out) .55s both; } .apertura__logo .l2{ transform-box:fill-box; translate:0 115%; animation:subir-letra .9s var(--ease-out) both; animation-delay:calc(.08s + var(--i) * 60ms); } .apertura__linea{ display:block; width:6rem; height:1px; background:var(--coral); transform:scaleX(0); animation:linea .7s var(--ease-out) .6s forwards; } .apertura__lugar{ font:400 .75rem/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--rosa-suave); animation:aparecer .7s var(--ease-out) .75s both; } @keyframes telon{ to{ clip-path:inset(0 0 100% 0); visibility:hidden; } } @keyframes subir-letra{ to{ translate:0 0; } } @keyframes linea{ to{ transform:scaleX(1); } } @keyframes aparecer{ from{ opacity:0; transform:translateY(.5rem); } } .espera .apertura, .espera .apertura *, .espera .hero *{ animation-play-state:paused !important; } /* ---------- TAPA con contraseña (hasta que el sitio sea público) ---------- La apertura corre igual pero no levanta el telón; al final aparece el campo. Al entrar, el JS agrega .abre y saca .tapa. */ .tapa, .tapa body{ overflow:hidden; } .tapa .apertura{ animation:none; } .tapa .hero *{ animation-play-state:paused !important; } .apertura.abre{ animation:telon .75s var(--ease-io) forwards; } .tapa__form{ display:none; } .tapa .tapa__form{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:1.75rem; width:min(20rem, 80vw); animation:aparecer .8s var(--ease-out) 1.5s both; } .tapa__etiqueta span{ display:block; } .tapa__etiqueta{ font:400 .6875rem/1.7 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-suave); text-align:center; } .tapa__fila{ display:flex; width:100%; border:1px solid rgba(239,225,213,.3); border-radius:100px; background:rgba(239,225,213,.06); transition:border-color .3s; } .tapa__fila:focus-within{ border-color:var(--coral); } .tapa__fila input{ flex:1; min-width:0; min-height:3rem; padding:0 1.25rem; border:0; background:none; color:var(--crema); font:300 1rem/1 var(--sans); letter-spacing:.04em; } .tapa__fila input::placeholder{ color:var(--rosa-suave); } .tapa__fila input:focus{ outline:none; } .tapa__boton{ flex:none; width:3rem; min-height:3rem; border:0; border-radius:100px; background:var(--crema); color:var(--sangre); font:400 1.125rem/1 var(--sans); cursor:pointer; margin:-1px; transition:background-color .3s; } .tapa__boton:hover{ background:#fff; } .tapa__aviso{ min-height:1.2em; font:400 .8125rem/1.2 var(--sans); color:var(--coral); } .tapa__fila.is-error{ animation:sacudir .4s var(--ease-out); } @keyframes sacudir{ 25%{ transform:translateX(-.5rem); } 50%{ transform:translateX(.4rem); } 75%{ transform:translateX(-.2rem); } } /* ========================================================================== HEADER: más ancho que el contenido. Claro sobre el inicio; al pasarlo, sólido. ========================================================================== */ .nav{ position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--margen-nav); color:var(--crema); transition:color .4s, transform .45s var(--ease-out), height .45s var(--ease-out); } .nav::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; /* vidrio del color del inicio: los elementos siguen en crema (sobre el blanco queda ≈ #66363B: crema encima ≈ 7:1) */ background:rgba(91,0,16,.8); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--linea-clara); border-radius:0 0 1.5rem 1.5rem; } /* las puntas de abajo redondeadas */ .nav.is-solido{ height:4.5rem; } .nav.is-solido::before{ opacity:1; } .nav__logo{ display:flex; align-items:center; min-height:48px; justify-self:start; } .nav__logo svg{ width:8.5rem; height:auto; fill:currentColor; } .nav__links{ position:relative; display:flex; gap:2.5rem; } .nav__links a{ display:inline-flex; align-items:center; min-height:44px; font:400 .75rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:.85; transition:opacity .3s; } .nav__links a:hover{ opacity:1; } /* la sección en la que estás se marca sólo con el subrayado (sin bold, pedido de Tomás), separado del texto */ .nav__links a.is-actual{ opacity:1; } .nav__marca{ position:absolute; left:0; bottom:.375rem; width:0; height:1px; background:currentColor; opacity:0; pointer-events:none; transition:transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s; } .nav__marca.is-visible{ opacity:1; } .nav__cta{ justify-self:end; display:inline-flex; align-items:center; min-height:44px; padding:0 1.25rem; border:1px solid currentColor; border-radius:100px; font:400 .875rem/1 var(--sans); transition:background-color .3s, color .3s; } .nav__cta:hover{ background:var(--crema); color:var(--sangre); border-color:var(--crema); } .nav__boton{ display:none; } .menu{ position:fixed; inset:0; z-index:45; display:flex; flex-direction:column; justify-content:space-between; padding:calc(var(--nav-h) + 1.5rem) var(--margen-nav) 2rem; background:var(--sangre) var(--degrade); color:var(--crema); overflow-y:auto; clip-path:inset(0 0 100% 0); transition:clip-path .65s var(--ease-io); } .menu[hidden]{ display:none; } .menu.is-abierto{ clip-path:inset(0 0 0 0); } .menu__item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; min-height:3.75rem; padding:.5rem 0; border:0; border-bottom:1px solid var(--linea-clara); background:none; color:inherit; text-align:left; font:300 1.5rem/1.2 var(--sans); letter-spacing:.005em; cursor:pointer; } /* menú en Jost (pedido de Tomás) */ /* «Áreas de práctica» se despliega con las seis áreas (mismo + que «Ver los servicios») */ .menu__abrir i{ position:relative; flex:none; width:1.5rem; height:1.5rem; border:1px solid currentColor; border-radius:50%; } .menu__abrir i::before, .menu__abrir i::after{ content:''; position:absolute; left:50%; top:50%; width:.6rem; height:1px; background:currentColor; translate:-50% -50%; transition:rotate .45s var(--ease-out); } .menu__abrir i::after{ rotate:90deg; } .menu__abrir[aria-expanded="true"] i::after{ rotate:0deg; } .menu__areas{ padding:.5rem 0 .75rem; border-bottom:1px solid var(--linea-clara); } .menu__areas a{ display:flex; align-items:center; min-height:44px; padding-left:1rem; font:300 1.0625rem/1.3 var(--sans); color:var(--rosa-suave); } .menu__cta{ margin-top:2rem; width:100%; } /* ========================================================================== 01 · INICIO: pantalla completa, puntas de abajo redondeadas ========================================================================== */ .hero{ position:sticky; top:0; z-index:0; height:100svh; min-height:42rem; overflow:hidden; isolation:isolate; color:var(--crema); background:var(--sangre); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--nav-h) var(--margen) 9rem; } .hero__fondo{ position:absolute; inset:0; z-index:-1; animation:aparecer-fondo 1.6s var(--ease-out) var(--inicio) both; } .hero__fondo picture, .hero__fondo img{ width:100%; height:100%; } .hero__fondo img{ object-fit:cover; object-position:60% 50%; animation:acercar 2.4s var(--ease-out) var(--inicio) both; } /* el velo es el degradé del brochure: más luz arriba a la derecha, más profundo abajo (crema encima ≥ 5.6:1) */ .hero__fondo::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 85% 0%, rgba(130,2,25,.55), rgba(130,2,25,0) 60%), linear-gradient(180deg, rgba(84,1,10,.66) 0%, rgba(91,0,16,.7) 45%, rgba(84,1,10,.9) 100%); } @keyframes aparecer-fondo{ from{ opacity:0; } } /* al subir la hoja, el inicio se desenfoca y se oscurece de a poco. Es una copia ya desenfocada que gana opacidad (--p la pone el JS de 0 a 1): animar la opacidad es barato; animar un blur(), no. */ .hero__difuso{ position:absolute; inset:-4%; opacity:var(--p,0); background:linear-gradient(rgba(84,1,10,.5), rgba(84,1,10,.5)), url('../img/fotos/inicio-ancho-960.webp') 60% 50%/cover; filter:blur(1.25rem); } .hero__texto, .hero__marcas{ opacity:calc(1 - var(--p,0) * 1.25); } .hero__texto{ translate:0 calc(var(--p,0) * -2.5rem); } /* LA HOJA: todo lo que sigue al inicio; sube por encima con las puntas redondeadas */ .hoja{ position:relative; z-index:1; background:var(--crema); /* arranca justo debajo del inicio: arriba de todo no asoma. Del color de las áreas por detrás: las puntas redondeadas del cierre no dejan ver un cuadradito de otro color */ border-radius:var(--radio) var(--radio) 0 0; box-shadow:0 -2rem 4rem -2rem rgba(46,0,12,.45); } @keyframes acercar{ from{ transform:scale(1.08); } } .hero__texto{ display:flex; flex-direction:column; align-items:center; gap:1.75rem; max-width:58rem; } .hero__texto > *{ animation:subir .95s var(--ease-out) both; animation-delay:calc(var(--inicio) + var(--d,0s)); } .hero__texto > :nth-child(1){ --d:.1s; } .hero__texto > :nth-child(2){ --d:.2s; } .hero__texto > :nth-child(3){ --d:.4s; } @keyframes subir{ from{ opacity:0; transform:translateY(1.5rem); } } .hero__sello{ display:inline-flex; align-items:center; padding:.5rem 1.1rem; border-radius:100px; border:1px solid rgba(239,225,213,.3); background:rgba(239,225,213,.07); font:400 .8125rem/1 var(--sans); letter-spacing:.02em; } .hero__titulo{ font:300 4rem/1.05 var(--serif); letter-spacing:-.02em; text-wrap:balance; } .hero__acciones{ display:flex; gap:.75rem; margin-top:.5rem; } .hero__marcas{ position:absolute; left:var(--margen); right:var(--margen); bottom:2rem; display:grid; grid-template-columns:13rem 1fr; gap:2rem; align-items:center; padding-top:1.5rem; border-top:1px solid var(--linea-clara); text-align:left; animation:aparecer 1s var(--ease-out) calc(var(--inicio) + .6s) both; } .hero__marcas-titulo{ font:400 .75rem/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--rosa-suave); } .cinta{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cinta__tira{ display:flex; width:max-content; animation:cinta 40s linear infinite; } .cinta:hover .cinta__tira{ animation-play-state:paused; } @keyframes cinta{ to{ transform:translateX(-50%); } } /* la tira está duplicada (gotchas E2) */ .cinta__tira li{ flex:none; padding:0 2.25rem; font:400 .9375rem/2.5rem var(--sans); letter-spacing:.04em; color:var(--rosa-suave); } /* ========================================================================== EL ESTUDIO ========================================================================== */ .estudio{ padding-block:8rem 7rem; background:var(--rosa-hoja); /* fondos invertidos (05/10): el estudio en rosa, las áreas en crema */ border-radius:var(--radio) var(--radio) 0 0; position:sticky; z-index:0; min-height:100svh; display:flex; flex-direction:column; justify-content:center; } /* min-height: al quedar quieto ocupa la pantalla entera; si fuera más bajo, arriba quedaría una franja vacía */ /* queda quieto al completarse (el JS le pone el top) y las áreas suben por encima */ .estudio__fila{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5rem; align-items:end; } .estudio__titulo{ font:300 2.5rem/1.14 var(--serif); letter-spacing:-.015em; color:var(--tinta); text-wrap:balance; max-width:18em; } .estudio__cuerpo{ color:var(--suave); text-wrap:pretty; padding-bottom:.3rem; } .enfoque{ display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem; margin-top:6.5rem; } .enfoque__icono{ display:block; width:3.5rem; height:3.5rem; margin-bottom:2rem; fill:none; stroke:var(--carmesi); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; } .enfoque span{ display:block; padding-top:1.25rem; border-top:1px solid var(--linea); font:400 .75rem/1 var(--sans); letter-spacing:.16em; color:var(--carmesi); } .enfoque b{ display:block; margin-top:1rem; font:300 1.75rem/1.1 var(--serif); letter-spacing:-.01em; color:var(--tinta); } /* ========================================================================== ÁREAS: una fila por área ========================================================================== */ .areas{ position:relative; z-index:1; padding-block:4rem 7rem; background:var(--crema); border-radius:var(--radio) var(--radio) 0 0; box-shadow:0 -1.75rem 3.5rem -2rem rgba(91,0,16,.24); } /* opción C del laboratorio; sombra entre la del lab y la más leve */ .areas__cabeza{ margin-bottom:3rem; } .areas__titulo{ font:300 2.625rem/1.1 var(--serif); letter-spacing:-.015em; color:var(--tinta); max-width:16em; } .fila{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:5rem; align-items:end; padding-block:2.5rem; border-top:1px solid var(--linea); scroll-margin-top:calc(var(--nav-h) + 1rem); } .fila__texto{ display:flex; flex-direction:column; gap:1rem; padding-bottom:.25rem; } .fila__num{ font:400 .75rem/1 var(--sans); letter-spacing:.16em; color:var(--carmesi); } .fila__nombre{ font:300 1.75rem/1.15 var(--serif); letter-spacing:-.01em; color:var(--tinta); text-wrap:balance; } .fila__bajada{ font:300 1.1875rem/1.4 var(--serif); color:var(--texto); max-width:22em; text-wrap:balance; margin-bottom:.5rem; } .fila__foto{ position:relative; aspect-ratio:4/3.1; border-radius:var(--radio-foto); overflow:hidden; background:var(--crema-2); } .fila__foto > img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.6s var(--ease-out); } .js .fila__foto{ clip-path:inset(8% 5% 8% 5% round var(--radio-foto)); transition:clip-path 1.3s var(--ease-io); } .js .fila__foto.is-in{ clip-path:inset(0 0 0 0 round var(--radio-foto)); } .fila__foto.is-in > img{ transform:none; } /* marco: detrás de cada foto asoma un bloque con el degradé bordó del contacto, corrido abajo a la derecha (idea del lab D de patrones) */ .fila::after{ content:''; grid-column:2; grid-row:1; align-self:end; aspect-ratio:4/3.1; border-radius:var(--radio-foto); transform:translate(1.5rem, 1.5rem); background:var(--sangre) var(--degrade); } .fila__foto{ grid-column:2; grid-row:1; z-index:1; box-shadow:0 1.25rem 2.5rem -1.5rem rgba(91,0,16,.35); } /* Ver los servicios (sólo Societario: es la única área con su lista) */ .ver-mas{ display:inline-flex; align-items:center; gap:.75rem; min-height:44px; align-self:flex-start; font:400 .9375rem/1 var(--sans); color:var(--carmesi); } .ver-mas i{ position:relative; width:1.375rem; height:1.375rem; border:1px solid currentColor; border-radius:50%; } .ver-mas i::before, .ver-mas i::after{ content:''; position:absolute; left:50%; top:50%; width:.55rem; height:1px; background:currentColor; translate:-50% -50%; transition:rotate .45s var(--ease-out); } .ver-mas i::after{ rotate:90deg; } .ver-mas[aria-expanded="true"] i::after{ rotate:0deg; } .desplegable{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease-out); } .desplegable.is-abierto{ grid-template-rows:1fr; } .desplegable__in{ overflow:hidden; min-height:0; } .servicios{ counter-reset:s; } .servicios li{ counter-increment:s; display:grid; grid-template-columns:2rem 1fr; align-items:baseline; padding:.7rem 0; border-top:1px solid var(--linea); font-size:1rem; color:var(--texto); } .servicios li::before{ content:counter(s, decimal-leading-zero); font:400 .75rem/1 var(--sans); color:var(--carmesi); } /* ========================================================================== CIERRE: contacto + pie sobre el degradé del brochure, puntas de arriba redondeadas ========================================================================== */ /* el tramo (estudio + áreas) se queda quieto cuando muestra su final y el cierre sube por encima, como la hoja y las áreas. El top lo pone el JS: lo que le falta al tramo para tocar el borde de abajo (negativo, porque es más alto que la pantalla) */ .tramo{ position:sticky; z-index:0; } .cierre{ position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; background:var(--sangre) var(--degrade); color:var(--crema); border-radius:var(--radio) var(--radio) 0 0; padding-block:7rem 0; box-shadow:0 -2rem 4rem -2rem rgba(46,0,12,.45);} .cierre > .contenedor{ flex:1; display:flex; flex-direction:column; } /* a pantalla completa: así sube lo suficiente y el pie queda abajo */ .cierre .marca-seccion{ color:var(--rosa-suave); } .cierre .marca-seccion em{ color:var(--coral); } .cierre__cabeza{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; } .cierre__cabeza .marca-seccion{ grid-column:1 / -1; margin-bottom:0; } .cierre__titulo{ font:300 2.625rem/1.1 var(--serif); letter-spacing:-.015em; } .cierre__datos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--linea-clara); } .cierre__datos li{ display:flex; flex-direction:column; gap:.6rem; } .cierre__datos span{ font:400 .75rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--coral); } .cierre__datos a, .cierre__datos p{ font:300 1.125rem/1.4 var(--sans); letter-spacing:.01em; } /* en Jost, como los rótulos (pedido de Tomás) */ .cierre__datos a{ align-self:flex-start; min-height:44px; background:linear-gradient(currentColor,currentColor) left 85%/0 1px no-repeat; transition:background-size .5s var(--ease-out); } .cierre__datos a:hover{ background-size:100% 1px; } /* el formulario va en una hoja crema sobre el bordó (opción B del laboratorio) */ .consulta{ display:grid; grid-template-columns:1.6fr 1.5rem 1fr 1fr; gap:1.25rem; align-items:end; margin-top:3.5rem; padding:3.5rem; border-radius:1.5rem; background:var(--crema); color:var(--texto); box-shadow:0 2rem 4rem -2rem rgba(46,0,12,.6); } /* columnas: tema · aire · dos campos. Las cajas se apoyan abajo, así las de una misma fila quedan a la misma altura */ .consulta__tema{ grid-area:1 / 1; } .consulta__otro{ grid-area:2 / 1; } .consulta__nombre{ grid-area:1 / 3; } .consulta__correo{ grid-area:1 / 4; } .consulta__telefono{ grid-area:2 / 3; } .consulta__mensaje{ grid-area:3 / 3 / 4 / 5; } .consulta__pie{ grid-area:4 / 3 / 5 / 5; } .consulta__pregunta{ margin-bottom:.75rem; font:300 1.75rem/1.15 var(--serif); letter-spacing:-.01em; color:var(--tinta); } .caja{ display:flex; flex-direction:column; gap:.5rem; } .caja span{ font:400 .75rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--carmesi); } .caja input, .caja select, .caja textarea{ width:100%; min-height:3rem; padding:.7rem 1rem; border:1px solid rgba(147,3,40,.2); border-radius:.75rem; background:#fff; color:var(--texto); font:300 1.0625rem/1.4 var(--sans); resize:vertical; transition:border-color .3s, box-shadow .3s; } .caja input:focus, .caja select:focus, .caja textarea:focus{ outline:none; border-color:var(--carmesi); box-shadow:0 0 0 3px rgba(173,1,45,.12); } .caja select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.75rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23AD012D' stroke-width='1.25'/%3E%3C/svg%3E") right 1.1rem center no-repeat; } .caja select.is-vacio{ color:var(--suave); } .caja select option{ color:var(--texto); } .consulta__otro[hidden]{ display:none; } /* desplegable del tema con el estilo del sitio (lo arma el JS sobre el