/* ═══════════════════════════════════════════════════════════════════════════ recorrido.css — todo lo que sigue después de la puerta (spec/10). Se enlaza en el , antes de «¿qué te trae?»: no bloquea el pintado del hero. Gramática: el arco es el sistema (fotos, tarjetas, bordes de sección); cada sección tiene su propio fondo y su propio movimiento; nada nace invisible. El movimiento lo pone recorrido.js SOLO si hay GSAP y no hay movimiento reducido: sin eso, esto es una página quieta y completa. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --oro:#D9B27C; /* el oro viejo de los rituales, sobre noche */ --linea-clara:rgba(247,241,232,.22); --sombra-suave:0 30px 60px -34px rgba(42,38,34,.45); --arco:999px 999px 0 0; --borde-arco:clamp(46px, 7vw, 110px); /* cuánto se curva el borde de arriba de una sección */ } /* El título de sección: la palabra en cursiva es la que carga el sentido */ .trae h2 em,.ceremonias h2 em,.practica h2 em,.equipos h2 em,.arte h2 em, .talleres h2 em,.tanis h2 em,.centro h2 em,.viene h2 em,.contacto h2 em{ font-style:italic; font-weight:500; color:var(--lila-hondo); } .ceremonias h2 em,.equipos h2 em,.tanis h2 em{ color:var(--lila) } .cabeza{ display:grid; gap:var(--e2); max-width:46rem } .cabeza h2{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; letter-spacing:-.015em } .cabeza__bajada{ font-size:clamp(1.125rem, 1.6vw, 1.3125rem); line-height:1.6 } .cabeza--centro{ margin-inline:auto; text-align:center; justify-items:center } .cabeza--centro .cabeza__bajada{ margin-inline:auto } /* Una sección que entra con el borde de arriba en arco, montada sobre la anterior */ .ceremonias,.practica,.arte,.tanis,.contacto,.equipos,.talleres,.centro{ position:relative; isolation:isolate; } .ceremonias,.arte,.tanis,.talleres{ margin-top:calc(var(--borde-arco) * -1); border-radius:50% 50% 0 0 / var(--borde-arco) var(--borde-arco) 0 0; padding-top:calc(var(--borde-arco) + var(--e5)); } /* Oscuros: botones, etiquetas y foco en claro */ .ceremonias,.equipos,.tanis,.meditacion{ color:var(--crema) } .ceremonias .etiqueta,.equipos .etiqueta,.tanis .etiqueta,.meditacion .etiqueta{ color:var(--lila) } .ceremonias .boton,.equipos .boton,.tanis .boton,.meditacion .boton{ background:var(--crema); color:var(--noche) } .ceremonias .boton:hover,.equipos .boton:hover,.tanis .boton:hover,.meditacion .boton:hover{ background:var(--lila); color:var(--noche) } .ceremonias a:not(.boton),.equipos a:not(.boton),.tanis a:not(.boton){ color:var(--crema) } .ceremonias :focus-visible,.equipos :focus-visible,.tanis :focus-visible,.meditacion :focus-visible{ outline-color:var(--lila) } .ceremonias .pendiente,.equipos .pendiente,.tanis .pendiente,.meditacion .pendiente{ color:var(--crema); border-color:var(--crema) } /* Botón con flecha que se asoma */ .boton{ transition:background .2s, color .2s, transform .2s } .boton:active{ transform:translateY(1px) } /* Pastillas de datos: lo esencial, de un vistazo */ .chips{ display:flex; flex-wrap:wrap; gap:10px } .chips li{ padding:.55em 1.1em; border-radius:var(--r-pildora); border:1px solid var(--linea-clara); font-size:.9375rem; line-height:1.3; } .etiquetas{ display:flex; flex-wrap:wrap; gap:10px } .etiquetas li{ padding:.6em 1.15em; border-radius:var(--r-pildora); background:rgba(247,241,232,.07); border:1px solid var(--linea-clara); font-size:.9375rem; } .etiquetas li span{ opacity:.7 } .etiquetas--tinta li{ background:var(--crema); border-color:transparent; color:var(--tinta) } /* Desplegables: lo largo, plegado pero visible sin JS */ .plegable{ border-block:1px solid var(--linea-clara); max-width:46rem } .plegable summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--e2); min-height:56px; cursor:pointer; list-style:none; font-weight:700; } .plegable summary::-webkit-details-marker{ display:none } .plegable summary::after{ content:""; flex:none; width:12px; height:12px; margin-right:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; rotate:45deg; translate:0 -3px; transition:rotate .25s; } .plegable[open] summary::after{ rotate:225deg; translate:0 3px } .plegable__cuerpo{ display:grid; gap:var(--e2); padding-bottom:var(--e3) } .plegable--suave{ border-color:rgba(42,38,34,.18) } /* ── 1 · ¿Qué te trae? ────────────────────────────────────────────────────── */ .trae{ background:var(--crema); padding-block:var(--e6) calc(var(--e7) + var(--borde-arco)) } .trae__entrada{ max-width:30ch; font:500 clamp(1.6rem, 3.3vw, 2.75rem)/1.28 var(--display); letter-spacing:-.005em; } .trae__entrada .palabra{ transition:none } .trae__titulo{ margin-top:var(--e4); max-width:16ch; font:500 clamp(2.6rem, 6.4vw, 5.6rem)/.98 var(--display); letter-spacing:-.02em; } .trae__pregunta{ margin-top:var(--e6); margin-bottom:var(--e4); font:700 .8125rem/1.4 var(--texto); letter-spacing:.3em; text-transform:uppercase; color:var(--lila-hondo); } .puertas{ display:grid; gap:var(--e5) var(--e4) } @media (min-width:900px){ .puertas{ grid-template-columns:repeat(3,1fr); align-items:start } .puertas li:nth-child(2){ margin-top:var(--e6) } .puertas li:nth-child(3){ margin-top:calc(var(--e6) / 2) } } .puerta{ display:grid; gap:var(--e1); color:var(--tinta); text-decoration:none } .puerta__arco{ position:relative; display:block; aspect-ratio:4 / 5; margin-bottom:var(--e2); border-radius:var(--arco); overflow:hidden; background:var(--pared); box-shadow:var(--sombra-suave); } .puerta__arco img{ width:100%; height:100%; object-fit:cover; scale:1.02; transition:scale .9s cubic-bezier(.2,.7,.2,1); } .puerta__arco--obra{ background:var(--noche); display:grid; place-items:center } .puerta__arco--obra img{ width:84%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:50% } .puerta:hover .puerta__arco img{ scale:1.08 } .puerta__numero{ font:italic 500 1.25rem/1 var(--display); color:var(--lila-hondo) } .puerta__titulo{ font:500 clamp(1.75rem, 2.4vw, 2.25rem)/1.1 var(--display); text-wrap:balance } .puerta__linea{ color:var(--tinta-suave); max-width:32ch } .puerta__ir{ display:inline-flex; gap:.5em; margin-top:var(--e1); font-weight:700; color:var(--lila-hondo); text-decoration:underline; text-underline-offset:.3em; text-decoration-color:transparent; transition:text-decoration-color .2s; } .puerta:hover .puerta__ir{ text-decoration-color:currentColor } .puerta__ir span{ transition:translate .25s } .puerta:hover .puerta__ir span{ translate:4px 0 } /* ── 2 · Ceremonias ──────────────────────────────────────────────────────── */ .ceremonias{ background: radial-gradient(60% 40% at 85% 8%, rgba(106,75,143,.35), transparent 70%), radial-gradient(50% 35% at 10% 60%, rgba(46,74,58,.35), transparent 70%), var(--noche); padding-bottom:var(--e7); overflow:hidden; } .ceremonias__geometria{ position:absolute; z-index:-1; pointer-events:none; width:min(1100px, 130vw); height:auto; right:-30%; top:-6%; color:var(--oro); opacity:.16; } .ceremonias .cabeza{ margin-bottom:var(--e6) } .bodas{ display:grid; gap:var(--e3); align-items:end; margin-bottom:var(--e5) } @media (min-width:900px){ .bodas{ grid-template-columns:1.1fr .9fr; gap:var(--e5) } } .bodas__texto{ display:grid; gap:var(--e2) } .bodas__texto h3,.otros h3,.camino h3{ font-size:clamp(1.9rem, 3vw, 2.6rem); font-weight:500 } .rituales__guia{ margin-bottom:var(--e3); font:700 .8125rem/1.4 var(--texto); letter-spacing:.3em; text-transform:uppercase; color:var(--oro); } .rituales{ display:grid; grid-auto-flow:column; grid-auto-columns:min(76vw, 320px); gap:var(--e3); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-bottom:var(--e3); margin-inline:calc(var(--e2) * -1); padding-inline:var(--e2); scrollbar-width:thin; scrollbar-color:var(--linea-clara) transparent; } @media (min-width:1024px){ .rituales{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; margin-inline:0; padding-inline:0; gap:var(--e5) var(--e4) } .rituales .ritual:nth-child(3n+2){ translate:0 var(--e5) } } .ritual{ scroll-snap-align:start; display:grid; gap:6px; align-content:start } .ritual__foto{ margin:0 0 var(--e2); aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--arco); background:#2a2640; box-shadow:0 40px 70px -40px rgba(0,0,0,.7); } .ritual__foto img{ width:100%; height:112%; object-fit:cover; translate:0 -6% } .ritual__nombre{ font:500 clamp(1.6rem, 2.2vw, 2rem)/1.1 var(--display) } .ritual__precio{ font:500 1.375rem/1.2 var(--display); color:var(--oro) } .ritual__linea{ font-size:1rem; line-height:1.55; opacity:.86; max-width:30ch } .ceremonias .plegable{ margin-top:var(--e6) } .otros{ margin-top:var(--e7); display:grid; gap:var(--e5) } .otros__cabeza{ display:grid; gap:var(--e3) } @media (min-width:900px){ .otros__cabeza{ grid-template-columns:.8fr 1.2fr; align-items:center } } .otros__par{ display:grid; gap:var(--e4) } @media (min-width:900px){ .otros__par{ grid-template-columns:1fr 1fr } } .umbral-tarjeta{ display:grid; grid-template-columns:minmax(120px, .7fr) 1fr; gap:var(--e3); align-items:center; padding:var(--e3); border-radius:var(--r-tarjeta); background:linear-gradient(160deg, rgba(247,241,232,.08), rgba(247,241,232,.02)); border:1px solid rgba(247,241,232,.12); } @media (max-width:560px){ .umbral-tarjeta{ grid-template-columns:1fr } .umbral-tarjeta__foto{ max-width:220px } } .umbral-tarjeta__foto{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:var(--arco) } .umbral-tarjeta__texto{ display:grid; gap:var(--e1) } .umbral-tarjeta h4{ font:500 1.9rem/1.1 var(--display) } .umbral-tarjeta p{ font-size:1rem } .umbral-tarjeta__nota{ color:var(--oro); font-weight:700 } .otros__tambien{ font:700 .8125rem/1.4 var(--texto); letter-spacing:.3em; text-transform:uppercase; color:var(--oro); margin-bottom:calc(var(--e3) * -1) } .camino{ margin-top:var(--e7); display:grid; gap:var(--e4); justify-items:start } .camino__trayecto{ position:relative; width:100% } .camino__pasos{ display:grid; gap:var(--e4); counter-reset:none } .camino__pasos li{ display:grid; gap:var(--e1); font-size:1.0625rem; line-height:1.55; padding-left:64px; position:relative } .camino__pasos strong{ display:block; font:500 1.6rem/1.15 var(--display) } .camino__num{ position:absolute; left:0; top:0; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--noche); border:1px solid var(--oro); color:var(--oro); font:500 1.375rem/1 var(--display); } .camino__linea{ display:none } .camino__pasos::before{ /* en celular, la línea baja por la izquierda */ content:""; position:absolute; left:22px; top:46px; bottom:0; width:1px; background:var(--linea-clara); } @media (min-width:900px){ .camino__pasos{ grid-template-columns:repeat(4,1fr); gap:var(--e4) } .camino__pasos::before{ display:none } .camino__pasos li{ padding-left:0; padding-top:72px } .camino__linea{ display:block; position:absolute; left:23px; right:0; top:3px; width:calc(100% - 23px); height:40px; overflow:visible } .camino__linea path{ fill:none; stroke:var(--oro); stroke-width:1.2; opacity:.7; vector-effect:non-scaling-stroke } } .camino__fuera{ max-width:52ch; opacity:.9 } /* ── La franja: los nombres de los rituales avanzan con el scroll ─────────── */ .franja{ background:var(--lila); overflow:hidden; padding-block:clamp(18px, 3vw, 34px); position:relative; z-index:2 } .franja__texto{ max-width:none; white-space:nowrap; will-change:transform; font:italic 500 clamp(2.2rem, 6vw, 5rem)/1 var(--display); color:var(--noche); letter-spacing:-.01em; } /* ── 3 · Yoga y meditación ───────────────────────────────────────────────── */ .practica{ background:var(--pared); padding-block:var(--e7) 0 } .practica__apertura{ display:grid; gap:var(--e5); align-items:center } @media (min-width:900px){ .practica__apertura{ grid-template-columns:1fr 1.05fr } } .practica__texto{ display:grid; gap:var(--e2) } .practica__texto h2{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; letter-spacing:-.015em; max-width:13ch } .practica__texto p:not(.etiqueta){ font-size:1.1875rem } .collage{ position:relative } .collage img{ display:block } .collage--yoga{ aspect-ratio:1 / .92; max-width:620px; width:100%; justify-self:center } .collage__pieza{ position:absolute; overflow:hidden; box-shadow:var(--sombra-suave) } .collage__pieza img{ width:100%; height:100%; object-fit:cover } .collage--yoga .collage__pieza--arco{ right:0; top:0; width:74%; height:88%; border-radius:var(--arco) } .collage--yoga .collage__pieza--circulo{ left:0; bottom:0; width:42%; aspect-ratio:1; border-radius:50%; border:clamp(6px, 1vw, 10px) solid var(--pared); z-index:2; } .collage__hoja{ position:absolute; width:34%; height:auto; right:-9%; bottom:-6%; z-index:3; rotate:18deg; pointer-events:none } .collage__sol{ position:absolute; left:8%; top:4%; width:30%; aspect-ratio:1; border-radius:50%; background:var(--sol); z-index:-1 } .practica__sub{ margin-top:var(--e7); margin-bottom:var(--e3); font-size:clamp(1.9rem, 3vw, 2.6rem); font-weight:500 } .semana{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px } @media (min-width:900px){ .semana{ grid-template-columns:repeat(4,1fr); gap:var(--e2) } } .dia{ display:grid; gap:8px; align-content:start; padding:var(--e3) var(--e3) var(--e4); border-radius:24px 24px 6px 6px; background:var(--crema); } .dia__nombre{ font:700 .8125rem/1.4 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-suave) } .dia__clase{ font:500 clamp(1.5rem, 2.2vw, 1.9rem)/1.15 var(--display) } .dia__clase strong{ font-weight:600; margin-right:.25em } .dia__clase--meditacion{ color:var(--lila-hondo) } .dia--doble{ background:linear-gradient(170deg, var(--crema) 55%, #efe4f6) } .semana__nota{ margin-top:var(--e2); font-size:1rem; color:var(--tinta-suave) } .precios{ margin-top:var(--e5); display:grid; gap:var(--e2) } @media (min-width:720px){ .precios{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1024px){ .precios{ grid-template-columns:1.25fr 1fr 1fr 1fr } } .precio{ display:grid; gap:6px; align-content:start; padding:var(--e3); border-radius:var(--r-tarjeta); border:1px solid rgba(42,38,34,.14) } .precio__nombre{ font-weight:700 } .precio__cifra{ font:500 clamp(2.6rem, 4vw, 3.4rem)/1 var(--display); letter-spacing:-.02em } .precio__cifra--palabra{ font-size:clamp(2rem, 3vw, 2.5rem) } .precio__linea{ font-size:1rem; color:var(--tinta-suave) } .precio--principal{ background:var(--lila-hondo); border-color:transparent; color:var(--crema) } .precio--principal .precio__linea{ color:var(--crema); opacity:.9 } .practica__acciones{ margin-top:var(--e5); display:grid; gap:var(--e4); justify-items:start; padding-bottom:var(--e7) } .practica__acciones .plegable{ width:100% } .practica .lista li::before{ color:var(--lila-hondo) } .meditacion{ background: radial-gradient(45% 60% at 20% 50%, rgba(195,168,220,.35), transparent 70%), var(--lila-hondo); padding-block:var(--e7); border-radius:50% 50% 0 0 / var(--borde-arco) var(--borde-arco) 0 0; } .meditacion__rejilla{ display:grid; gap:var(--e5); align-items:center } @media (min-width:900px){ .meditacion__rejilla{ grid-template-columns:.9fr 1.1fr } } .meditacion__texto{ display:grid; gap:var(--e2) } .meditacion__texto h3{ font-size:clamp(2rem, 3.6vw, 3rem); font-weight:500; line-height:1.08 } .meditacion__texto h4{ margin-top:var(--e2); font:600 1.5rem/1.2 var(--display) } .respira{ display:grid; justify-items:center; gap:var(--e3); text-align:center } .respira__circulo{ --s:1; position:relative; display:grid; place-items:center; width:min(68vw, 300px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer; background:radial-gradient(circle at 40% 35%, #f3ebfa, var(--lila) 62%, #a98bc8); color:var(--noche); box-shadow:0 0 0 14px rgba(195,168,220,.16), 0 0 0 30px rgba(195,168,220,.08), 0 40px 80px -30px rgba(0,0,0,.5); transform:scale(var(--s)); transition:transform 4s cubic-bezier(.45,.05,.35,1); } .respira__circulo:focus-visible{ outline:3px solid var(--crema); outline-offset:8px } .respira__circulo.exhala{ transition-duration:6s } .respira__texto{ font:500 clamp(1.5rem, 3vw, 2rem)/1.1 var(--display); max-width:8ch } .respira__ayuda{ font-size:.9375rem; opacity:.85; max-width:30ch } /* ── 4 · Para empresas y familias ────────────────────────────────────────── */ .equipos{ background:var(--selva); padding-block:var(--e7) } .equipos::after{ /* un sol del mural, a lo lejos */ content:""; position:absolute; z-index:-1; right:-10vw; top:-20%; width:min(60vw, 620px); aspect-ratio:1; border-radius:50%; background:var(--hoja); opacity:.55; } .equipos__rejilla{ display:grid; gap:var(--e5); align-items:center } @media (min-width:900px){ .equipos__rejilla{ grid-template-columns:1.25fr .75fr } } .equipos__texto{ display:grid; gap:var(--e2); justify-items:start } .equipos__texto h2{ font-size:clamp(2.2rem, 4.6vw, 3.8rem); line-height:1.04; letter-spacing:-.015em; max-width:14ch } .equipos__cotiza{ opacity:.85 } .equipos__lista{ display:grid; gap:var(--e2) } .equipos__lista li{ display:flex; gap:var(--e2); align-items:center; padding:var(--e2) var(--e3); border-radius:var(--r-pildora); background:rgba(247,241,232,.08); border:1px solid rgba(247,241,232,.16); font:500 1.3rem/1.2 var(--display); } .equipos__icono{ font-size:1.4rem; color:var(--salvia) } /* ── 5 · Arte sagrado ────────────────────────────────────────────────────── */ .arte{ background:var(--crema); padding-bottom:var(--e7) } .arte__apertura{ display:grid; gap:var(--e5); align-items:center; margin-bottom:var(--e6) } @media (min-width:900px){ .arte__apertura{ grid-template-columns:1fr 1fr } } .arte__texto{ display:grid; gap:var(--e2) } .arte__texto h2{ font-size:clamp(2.3rem, 5vw, 4.1rem); line-height:1.03; letter-spacing:-.015em; max-width:15ch } .arte__texto p:not(.etiqueta){ font-size:1.1875rem } .arte__credito{ padding-left:var(--e3); border-left:2px solid var(--lila); color:var(--tinta-suave); font-size:1.0625rem !important } .collage--arte{ aspect-ratio:1 / 1.02; max-width:600px; width:100%; justify-self:center } .collage--arte .collage__pieza--alta{ left:8%; top:0; width:56%; height:86%; border-radius:var(--arco) } .collage--arte .collage__pieza--orbita{ right:0; top:6%; width:40%; aspect-ratio:1; border-radius:50%; overflow:visible; box-shadow:none; z-index:2 } .collage--arte .collage__pieza--orbita img{ border-radius:50%; box-shadow:0 26px 50px -24px rgba(42,38,34,.55) } .collage--arte .collage__pieza--foto{ right:4%; bottom:0; width:52%; margin:0; padding:10px 10px 34px; background:#fff; z-index:3; rotate:3deg; overflow:visible; } .collage--arte .collage__pieza--foto img{ height:auto; aspect-ratio:3 / 2 } .collage--arte figcaption{ position:absolute; left:14px; bottom:8px; font:italic 500 1.05rem/1 var(--display); color:var(--tinta-suave) } /* La sala: sin JS es una fila con scroll nativo; con JS en escritorio se recorre de lado */ .sala{ background:var(--crema-honda); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain } .sala__pista{ display:flex; width:max-content } .serie{ flex:none; width:min(88vw, 1080px); scroll-snap-align:center; display:grid; gap:var(--e3); align-content:center; padding:var(--e5) var(--e3); } @media (min-width:900px){ .serie{ width:min(86vw, 1180px); height:min(100svh, 820px); grid-template-columns:1.1fr .9fr; gap:var(--e5); padding:var(--e5) var(--e5) } } .serie__piezas{ position:relative; aspect-ratio:1; width:min(100%, 72svh); justify-self:center } .serie__piezas img{ position:absolute; height:auto; border-radius:50%; box-shadow:0 30px 60px -30px rgba(42,38,34,.55) } .serie__grande{ width:74%; left:13%; top:13% } .serie__chica{ width:32% } .serie__chica--a{ right:0; top:0 } .serie__chica--b{ left:0; bottom:2% } .serie__piezas--foto .serie__retrato{ width:78%; left:6%; top:8%; border-radius:0; box-shadow:none } .serie__texto{ display:grid; gap:var(--e2); align-content:center; max-width:30rem } .serie__dato{ font:700 .8125rem/1.4 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--lila-hondo) } .serie__texto h3{ font-size:clamp(2.2rem, 4vw, 3.4rem); font-weight:500; line-height:1.02 } .serie__fichas{ display:grid; gap:4px; padding-top:var(--e1); border-top:1px solid rgba(42,38,34,.15); color:var(--tinta-suave); font-size:1rem } .serie__fichas em{ color:var(--tinta); font-style:italic } /* Vivo (escritorio): la sala se fija y la pista se mueve de lado */ .sala--viva{ overflow:hidden; scroll-snap-type:none } .sala--viva .serie__piezas img{ will-change:transform } .sala--viva .sala__pista{ will-change:transform } .mas-alla{ margin-top:var(--e7); display:grid; gap:var(--e4) } @media (min-width:900px){ .mas-alla{ grid-template-columns:.7fr 1.3fr; align-items:center; gap:var(--e5) } } .mas-alla__texto{ display:grid; gap:var(--e2) } .mas-alla__texto h3{ font-size:clamp(1.9rem, 3vw, 2.6rem); font-weight:500 } .mas-alla__mosaico{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(52px, 7vw, 92px); gap:10px; } .mas-alla__mosaico li{ overflow:hidden; border-radius:18px; box-shadow:var(--sombra-suave) } .mas-alla__mosaico img{ width:100%; height:100%; object-fit:cover } .mosaico--gato{ grid-column:1 / 5; grid-row:1 / 4 } .mosaico--gatos{ grid-column:5 / 7; grid-row:1 / 5 } .mosaico--calabazas{ grid-column:1 / 4; grid-row:4 / 7 } .mosaico--acuarela{ grid-column:4 / 6; grid-row:4 / 8 } .mosaico--performance{ grid-column:6 / 7; grid-row:5 / 8; border-radius:var(--arco) !important } .encargo{ margin-top:var(--e7); display:grid; gap:var(--e5); align-items:center; padding:clamp(28px, 5vw, 70px); border-radius:var(--r-tarjeta); background:linear-gradient(135deg, var(--pared), var(--crema-honda)); } @media (min-width:900px){ .encargo{ grid-template-columns:1.1fr .9fr } } .encargo__texto{ display:grid; gap:var(--e3); justify-items:start } .encargo__texto h3{ font-size:clamp(2rem, 3.4vw, 2.9rem); font-weight:500 } .encargo__datos{ display:grid; gap:var(--e2); width:100% } @media (min-width:720px){ .encargo__datos{ grid-template-columns:repeat(3,1fr) } } .encargo__datos dt{ font:700 .8125rem/1.4 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--lila-hondo) } .encargo__datos dd{ font-size:1rem } .encargo__foto{ margin:0; position:relative; justify-self:center; width:min(100%, 420px) } .encargo__foto img{ width:100%; height:auto; border-radius:var(--arco); box-shadow:var(--sombra-suave) } .encargo__foto figcaption{ margin-top:var(--e1); text-align:center; font:italic 500 1.1rem/1.2 var(--display); color:var(--tinta-suave) } /* ── 6 · Talleres ────────────────────────────────────────────────────────── */ .talleres{ background: radial-gradient(50% 50% at 90% 10%, rgba(247,241,232,.55), transparent 70%), var(--lila); padding-bottom:var(--e7); } .talleres .etiqueta{ color:var(--noche) } .talleres h2 em{ color:var(--noche) } .talleres .cabeza{ margin-bottom:var(--e6) } .talleres__par{ display:grid; gap:var(--e3) } @media (min-width:900px){ .talleres__par{ grid-template-columns:1fr 1.15fr; align-items:stretch } } .taller{ display:grid; gap:var(--e2); align-content:start; padding:clamp(24px, 4vw, 50px); border-radius:var(--r-tarjeta); background:var(--crema) } .taller__tipo{ font:700 .8125rem/1.4 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--lila-hondo) } .taller h3{ font-size:clamp(1.9rem, 3vw, 2.5rem); font-weight:500; line-height:1.08 } .taller .etiquetas{ margin-top:var(--e1) } .taller .etiquetas li{ background:var(--crema-honda) } .taller--foto{ padding:0; overflow:hidden; grid-template-rows:auto 1fr } .taller__imagen{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover } .taller__texto{ display:grid; gap:var(--e2); padding:var(--e3) clamp(24px, 4vw, 50px) clamp(24px, 4vw, 50px) } .talleres__aviso{ margin-top:var(--e4); font-size:1rem; max-width:60ch } .talleres__estado{ margin-top:var(--e3); display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4); align-items:center } /* ── 7 · Quién soy ───────────────────────────────────────────────────────── */ .tanis{ background:var(--noche); padding-top:0; padding-bottom:var(--e7); overflow:hidden } .tanis__retrato{ margin:0; height:clamp(420px, 78svh, 820px); overflow:hidden; position:relative } .tanis__retrato img{ width:100%; height:115%; object-fit:cover; object-position:62% 30% } .tanis__retrato::after{ content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(0deg, var(--noche), transparent) } .tanis__cuerpo{ position:relative; margin-top:calc(var(--e6) * -1); display:grid; gap:var(--e5) } .tanis .cabeza h2{ font-size:clamp(3rem, 8vw, 6.4rem) } .nombres{ display:grid; gap:var(--e3) } @media (min-width:900px){ .nombres{ grid-template-columns:repeat(3,1fr); gap:var(--e4) } } .nombre{ display:grid; gap:var(--e1); padding-top:var(--e3); border-top:1px solid var(--linea-clara) } .nombre__cual{ font:500 clamp(1.7rem, 2.4vw, 2.1rem)/1.1 var(--display); color:var(--lila) } .nombre p:not(.nombre__cual){ font-size:1.0625rem; opacity:.9 } .historia{ display:grid; gap:var(--e3); font-size:1.125rem; line-height:1.7 } @media (min-width:900px){ .historia{ grid-template-columns:repeat(3,1fr); gap:var(--e4) } } .historia p:first-child::first-letter{ float:left; font:500 4.2em/.8 var(--display); margin:.06em .1em 0 0; color:var(--oro) } .hitos{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e3) } @media (min-width:900px){ .hitos{ grid-template-columns:repeat(4,1fr) } } .hitos li{ display:grid; gap:4px; font-size:1rem; opacity:.92 } .hitos__cifra{ font:500 clamp(3.4rem, 6vw, 5.2rem)/1 var(--display); color:var(--oro); font-variant-numeric:tabular-nums } /* ── 8 · El centro · álbum ───────────────────────────────────────────────── */ .centro{ background:var(--pared); padding-block:var(--e7); overflow:hidden } .centro__rejilla{ display:grid; gap:var(--e5); align-items:center } @media (min-width:1024px){ .centro__rejilla{ grid-template-columns:.8fr 1.2fr } } .centro__texto{ display:grid; gap:var(--e2) } .centro__texto h2{ font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.03; letter-spacing:-.015em; max-width:12ch } .centro__texto p:not(.etiqueta){ font-size:1.125rem } .centro__donde{ font:italic 500 1.25rem/1.3 var(--display) !important; color:var(--tinta-suave) } .album{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(30px, 4.4vw, 56px); gap:12px } .album__foto{ position:relative; padding:8px 8px 8px; background:#fffdf9; box-shadow:0 22px 40px -22px rgba(42,38,34,.5) } .album__foto img{ width:100%; height:100%; object-fit:cover } .album__foto::before{ /* un pedazo de cinta */ content:""; position:absolute; z-index:2; top:-10px; left:50%; width:74px; height:22px; translate:-50% 0; rotate:-4deg; background:rgba(195,168,220,.72); mix-blend-mode:multiply; } .album__foto--rincon{ grid-column:1 / 7; grid-row:1 / 6; rotate:-2deg } .album__foto--luna{ grid-column:7 / 12; grid-row:2 / 6; rotate:2.5deg } .album__foto--noche{ grid-column:9 / 13; grid-row:6 / 12; rotate:-3deg; z-index:1 } .album__foto--cuarzos{ grid-column:1 / 4; grid-row:6 / 10; rotate:3deg } .album__foto--terraza{ grid-column:3 / 9; grid-row:7 / 12; rotate:-1.2deg } .album__foto--letrero{ grid-column:2 / 6; grid-row:12 / 15; rotate:2deg } .album__foto--letrero::before{ background:rgba(233,184,150,.8) } @media (max-width:719px){ .album{ grid-auto-rows:34px; gap:8px } .album__foto{ padding:5px } } /* ── 9 · Lo que viene ────────────────────────────────────────────────────── */ .viene{ background:var(--crema); padding-block:var(--e7) } .viene .cabeza{ margin-bottom:var(--e4) } .viene__lista{ display:grid; gap:var(--e3); margin-bottom:var(--e3) } @media (min-width:720px){ .viene__lista{ grid-template-columns:repeat(3,1fr) } } .viene .entrada-tarjeta{ border-radius:var(--r-tarjeta); background:var(--crema-honda); border:0 } .viene .entrada-tarjeta__foto{ border-radius:var(--arco); aspect-ratio:4 / 3; object-fit:cover } /* ── 10 · Contacto ───────────────────────────────────────────────────────── */ .contacto{ background:var(--crema-honda); padding-block:var(--e7) } .contacto__rejilla{ display:grid; gap:var(--e5) } @media (min-width:1024px){ .contacto__rejilla{ grid-template-columns:.85fr 1.15fr; gap:var(--e6); align-items:start } } .contacto__intro{ display:grid; gap:var(--e2) } .contacto__intro h2{ font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1 } .contacto__datos{ font-style:normal; display:grid; gap:var(--e2); margin-top:var(--e3); padding-top:var(--e3); border-top:1px solid rgba(42,38,34,.15); font-size:1.0625rem } .contacto__datos a{ display:inline; min-height:0 } .contacto__formulario{ display:grid; gap:var(--e3); padding:clamp(24px, 4vw, 50px); border-radius:var(--r-tarjeta); background:var(--crema); box-shadow:var(--sombra-suave) } .contacto__formulario .boton{ justify-self:start } /* ── El movimiento: solo lo que hace falta para que componga y no re-pinte ── */ .movimiento [data-velocidad],.movimiento [data-gira],.movimiento .ritual__foto img, .movimiento .tanis__retrato img{ will-change:transform } @media (prefers-reduced-motion:reduce){ .puerta__arco img,.puerta__ir span{ transition:none } .respira__circulo{ transition:none } } /* ── Correcciones de la primera revisión en pantalla ─────────────────────── */ /* nada se sale de lado (una forma decorativa ensanchaba la página a 1584 px) */ .practica,.equipos,.arte,.centro,.talleres,.trae,.contacto{ overflow-x:clip } /* en el círculo del collage, que se vea ella y no las hojas */ .collage--yoga .collage__pieza--circulo img{ object-position:58% 88% } @media (min-width:900px){ .collage--yoga{ max-width:680px } } /* el recorte de ella junto al mandala trae el mandala cortado a la mitad: se desvanece */ .serie__piezas--foto .serie__retrato{ -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 96%); mask-image:linear-gradient(90deg,#000 62%,transparent 96%) } .taller__imagen{ object-position:50% 12% } .equipos::after{ opacity:.32 } .centro{ padding-bottom:var(--e6) } /* en celular, las tres puertas son un carrusel con el dedo (la página se alargaba 1000 px) */ @media (max-width:899px){ .puertas{ grid-auto-flow:column; grid-auto-columns:min(78vw, 340px); gap:var(--e3); overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--e2) * -1); padding:0 var(--e2) var(--e2); overscroll-behavior-x:contain } .puertas li{ scroll-snap-align:start } .puerta__arco{ aspect-ratio:1 / 1 } .precios{ grid-template-columns:1fr 1fr } .precio--principal{ grid-column:1 / -1 } .precio{ padding:var(--e2) } } .equipos{ overflow:clip } /* la línea del camino va de la primera a la cuarta bola, no hasta la orilla */ @media (min-width:900px){ .camino__linea{ right:auto; width:calc(75% + 37.5px) } } /* collage de yoga: la hoja va detrás del arco, asomándose por la izquierda; el círculo es ella sonriendo */ .collage--yoga .collage__hoja{ z-index:-1; right:auto; left:-4%; bottom:auto; top:36%; width:40%; rotate:-24deg; scale:-1 1 } .collage--yoga .collage__pieza--circulo img{ object-position:40% 30% } .collage--yoga .collage__sol{ left:auto; right:-4%; top:-4%; width:26% } .equipos__lado{ display:grid; gap:var(--e3) } .equipos__foto{ margin:0; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--arco); box-shadow:0 40px 70px -40px rgba(0,0,0,.6) } .equipos__foto img{ width:100%; height:100%; object-fit:cover } .equipos__lista li{ font-size:1.15rem; padding-block:14px } @media (max-width:560px){ .boton{ padding-inline:var(--e3) } } /* Contraste: el gris suave sobre el durazno de la pared da 4.46 (piso 4.5, Lighthouse). Ahí va uno más hondo. */ .practica,.centro{ --tinta-suave:#5A5148 } .practica .pendiente,.centro .pendiente{ color:#7A3F1C; border-color:#7A3F1C } /* 🪤 El entintado cambia la opacidad de cada palabra: sin capa propia, el párrafo se re-pinta y se re-rasteriza en CADA cuadro (medido: 1030 ms por pasada). Con capa propia, solo se compone. */ .movimiento .trae__entrada .palabra{ display:inline-block; will-change:opacity } /* ── Segunda revisión (impeccable-finish-reviewer) ──────────────────────── Fuera los rótulos en versalitas, los glifos y los números: los títulos de apoyo son títulos de verdad, en la voz de la display. */ .trae__pregunta{ margin-top:var(--e6); margin-bottom:var(--e4); font:italic 500 clamp(1.9rem, 3vw, 2.6rem)/1.1 var(--display); letter-spacing:0; text-transform:none; color:var(--lila-hondo); } .rituales__guia,.otros__tambien{ font:italic 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.2 var(--display); letter-spacing:0; text-transform:none; color:var(--oro); } .otros__tambien{ margin-bottom:calc(var(--e3) * -1) } .arte__credito{ padding-left:0; border-left:0; font:italic 500 1.25rem/1.45 var(--display) !important; color:var(--tinta-suave); max-width:44ch } .equipos__lista{ gap:0 } .equipos__lista li{ display:block; padding:var(--e2) 0; border-radius:0; background:none; border:0; border-top:1px solid rgba(247,241,232,.2); font:500 1.3rem/1.25 var(--display); } .equipos__lista li:last-child{ border-bottom:1px solid rgba(247,241,232,.2) } .taller__lema{ font:italic 500 clamp(1.3rem, 1.8vw, 1.55rem)/1.25 var(--display); color:var(--lila-hondo); margin-top:-6px } /* Mosaico: el performance deja de ser una tira */ .mosaico--gato{ grid-column:1 / 5; grid-row:1 / 4 } .mosaico--gatos{ grid-column:5 / 7; grid-row:1 / 5 } .mosaico--calabazas{ grid-column:1 / 3; grid-row:4 / 7 } .mosaico--acuarela{ grid-column:3 / 5; grid-row:4 / 8 } .mosaico--performance{ grid-column:5 / 7; grid-row:5 / 8; border-radius:var(--arco) !important } /* Precios en celular: la membresía y el pase a todo lo ancho; nada huérfano */ @media (max-width:899px){ .precio:last-child{ grid-column:1 / -1 } } /* Las hojas del mural reaparecen más abajo, a lo lejos */ .hoja-suelta{ position:absolute; z-index:-1; height:auto; pointer-events:none; opacity:.9 } .hoja-suelta--arte{ width:clamp(160px, 18vw, 300px); right:-4%; top:calc(var(--borde-arco) + 2%); rotate:24deg; scale:-1 1; opacity:.55 } .hoja-suelta--talleres{ width:clamp(170px, 20vw, 320px); right:-5%; top:12%; rotate:-18deg; opacity:.5 } .hoja-suelta--contacto{ width:clamp(170px, 22vw, 360px); left:-6%; bottom:-4%; rotate:12deg; opacity:.35 } /* El cierre vuelve a la noche del zaguán y a la puerta lila */ .contacto{ background: radial-gradient(55% 45% at 15% 20%, rgba(106,75,143,.35), transparent 70%), var(--noche); color:var(--crema); margin-top:calc(var(--borde-arco) * -1); border-radius:50% 50% 0 0 / var(--borde-arco) var(--borde-arco) 0 0; padding-top:calc(var(--borde-arco) + var(--e6)); } .contacto h2 em{ color:var(--lila) } .contacto__puerta{ margin:0 0 var(--e2); width:min(62%, 300px); aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--arco); box-shadow:0 0 0 10px rgba(195,168,220,.12), 0 40px 70px -40px rgba(0,0,0,.7); } .contacto__puerta img{ width:100%; height:100%; object-fit:cover; object-position:68% 55% } .contacto__datos{ border-top-color:rgba(247,241,232,.2) } .contacto__datos a{ color:var(--crema) } .contacto .pendiente{ color:var(--crema); border-color:var(--crema) } .contacto :focus-visible{ outline-color:var(--lila) } .contacto__formulario{ color:var(--tinta) } .contacto__formulario a{ color:var(--lila-hondo) } .meditacion .pendiente{ color:var(--crema); border-color:var(--crema) } .contacto{ overflow:clip } .hoja-suelta--talleres{ opacity:.85 } /* 24-sep, Tania: el álbum sin terraza ni letrero; entra el patio de noche (vertical) */ .album__foto--patio-noche{ grid-column:4 / 8; grid-row:7 / 13; rotate:-1.5deg; z-index:1 } .album__foto--patio-noche::before{ background:rgba(233,184,150,.8) } /* ══ 24-sep · segunda ronda de Tania: sus fotos, sus precios y sus piezas ══════════ */ .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap } /* Ceremonias: las dos fotos reales junto al título */ .ceremonias__apertura{ display:grid; gap:var(--e4); align-items:center; margin-bottom:var(--e6) } .ceremonias__apertura .cabeza{ margin-bottom:0 } @media (min-width:900px){ .ceremonias__apertura{ grid-template-columns:1.05fr .95fr } } .ceremonias__fotos{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); align-items:start; max-width:560px; width:100%; justify-self:center } .ceremonias__foto{ margin:0; overflow:hidden; box-shadow:0 40px 70px -40px rgba(0,0,0,.75) } .ceremonias__foto img{ width:100%; height:100%; object-fit:cover } .ceremonias__foto--altar{ grid-column:1 / 9; grid-row:1; aspect-ratio:4 / 5; border-radius:var(--arco) } .ceremonias__foto--circulo{ grid-column:6 / 13; grid-row:1; margin-top:48%; aspect-ratio:1 / .925; border-radius:22px; outline:8px solid var(--noche); z-index:1; } .ceremonias__pie{ grid-column:1 / 13; margin-top:var(--e2); font:italic 500 1.15rem/1.4 var(--display); color:var(--lila); max-width:34ch } /* Precios que llegaron sueltos */ .meditacion__precio,.taller__precio{ font-size:1.0625rem } .meditacion__precio strong{ font:500 1.6rem/1 var(--display); color:var(--lila) } .taller__precio strong{ font:500 1.6rem/1 var(--display); color:var(--lila-hondo) } .talleres__chips{ margin-top:var(--e3); justify-content:center } .talleres__chips li{ border-color:rgba(30,27,46,.28); color:var(--noche); background:rgba(247,241,232,.5) } .serie__venta{ font-size:1rem; color:var(--tinta-suave) } .serie__venta a{ color:var(--lila-hondo); font-weight:700 } /* «Más allá»: sin el gato ni las calabazas (se fueron a Disponibles) quedan tres */ .mas-alla__mosaico{ grid-auto-rows:clamp(60px, 8vw, 100px) } .mosaico--gatos{ grid-column:1 / 3; grid-row:1 / 5 } .mosaico--acuarela{ grid-column:3 / 5; grid-row:2 / 6 } .mosaico--performance{ grid-column:5 / 7; grid-row:1 / 5 } /* ── Disponibles ─────────────────────────────────────────────────────────── */ .disponibles{ margin-top:var(--e7); scroll-margin-top:90px } .disponibles__cabeza{ display:grid; gap:var(--e1); max-width:40rem; margin-bottom:var(--e4) } .disponibles__cabeza h3{ font-size:clamp(2.2rem, 4.4vw, 3.6rem); font-weight:500; line-height:1.02; letter-spacing:-.015em } .disponibles__cabeza h3 em{ font-style:italic; color:var(--lila-hondo) } .disponibles__cabeza p{ font-size:1.1875rem; color:var(--tinta-suave) } .disponibles__grupo{ display:flex; margin:0; align-items:center; gap:var(--e2); margin:var(--e4) 0 var(--e2); font:700 .8125rem/1.4 var(--texto); letter-spacing:.2em; text-transform:uppercase; color:var(--lila-hondo); } .disponibles__grupo::after{ content:""; flex:1; height:1px; background:rgba(42,38,34,.14) } /* Celular: un carrusel con el dedo por grupo (no se apilan nueve tarjetas). Escritorio: rejilla de tres. */ .disponibles__rejilla{ display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw, 320px); gap:var(--e2); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin-inline:calc(var(--e2) * -1); padding:6px var(--e2) var(--e2); scroll-padding-inline:var(--e2); scrollbar-width:thin; } @media (min-width:720px) and (max-width:899px){ .disponibles__rejilla{ margin-inline:calc(var(--e4) * -1); padding-inline:var(--e4); scroll-padding-inline:var(--e4) } } @media (min-width:900px){ .disponibles__rejilla{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); grid-auto-columns:auto; overflow:visible; margin-inline:0; padding:0 } } .venta{ scroll-snap-align:start; display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-tarjeta); background:#fff; overflow:hidden; box-shadow:0 1px 0 rgba(42,38,34,.06), 0 24px 50px -36px rgba(42,38,34,.4); } .venta__escena{ position:relative; aspect-ratio:1 / .86; display:grid; place-items:center; overflow:hidden; background:radial-gradient(62% 62% at 50% 44%, #fff 0 34%, var(--tono) 72%); } .venta__img{ position:relative; z-index:1; width:88%; height:88%; object-fit:contain; /* la sombra sigue la silueta: la pieza se asienta, no flota */ filter:drop-shadow(0 14px 10px rgba(42,38,34,.22)) drop-shadow(0 30px 30px rgba(42,38,34,.12)); transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .25s; } .venta:hover .venta__img{ transform:translateY(-6px) scale(1.02) } .venta__texto{ display:grid; gap:6px; align-content:start; padding:var(--e2) var(--e3) var(--e3) } .venta__nombre{ margin:0; font:500 1.7rem/1.1 var(--display) } .venta__linea{ font-size:.9375rem; color:var(--tinta-suave) } .venta__precio{ font:500 2.1rem/1 var(--display); letter-spacing:-.01em; margin-top:6px } .venta__variantes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px } .venta__variante{ width:44px; height:44px; padding:3px; border-radius:50%; border:2px solid transparent; background:var(--crema-honda); cursor:pointer; transition:border-color .2s, transform .2s; } .venta__variante img{ width:100%; height:100%; object-fit:contain; border-radius:50% } .venta__variante[aria-pressed="true"]{ border-color:var(--lila-hondo) } .venta__variante:hover{ transform:translateY(-2px) } .venta__cual{ min-height:1.4em; font:italic 500 1.1rem/1.3 var(--display); color:var(--lila-hondo) } .venta__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2); margin-top:var(--e1) } .venta__reales{ font-size:.9375rem; color:var(--lila-hondo); text-underline-offset:3px } .disponibles__nota{ margin-top:var(--e3); font-size:.9375rem; color:var(--tinta-suave); max-width:60ch } .venta__img.cambia{ opacity:0 } /* Fotos reales en un diálogo */ .reales{ border:0; padding:0; background:transparent; max-width:min(96vw, 1100px); width:100%; color:var(--tinta) } .reales::backdrop{ background:rgba(30,27,46,.82) } .reales__caja{ display:grid; gap:var(--e2); padding:var(--e3); border-radius:var(--r-tarjeta); background:var(--crema); max-height:92svh; overflow:auto } .reales__titulo{ font:500 1.8rem/1.1 var(--display) } .reales__fotos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--e2) } .reales__fotos img{ width:100%; height:auto; max-height:70svh; object-fit:contain; border-radius:14px; background:#fff } .reales .boton{ justify-self:start } /* ── La tiendita ─────────────────────────────────────────────────────────── */ .tienda{ margin-top:var(--e6); margin-bottom:calc(var(--borde-arco) + var(--e4)); display:grid; gap:var(--e4); align-items:center } @media (min-width:900px){ .tienda{ grid-template-columns:.8fr 1.2fr; gap:var(--e5) } } .tienda__foto{ margin:0; width:min(100%, 380px); justify-self:center; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--arco); box-shadow:var(--sombra-suave) } .tienda__foto img{ width:100%; height:100%; object-fit:cover } .tienda__texto{ display:grid; gap:var(--e2); max-width:34rem } .tienda__texto h3{ font-size:clamp(1.9rem, 3vw, 2.6rem); font-weight:500 } .tienda__lista{ display:grid; border-top:1px solid rgba(42,38,34,.16) } .tienda__lista li{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--e2); padding:.7em 0; border-bottom:1px solid rgba(42,38,34,.16) } .tienda__lista strong{ font:500 1.5rem/1 var(--display) } .tienda__mas{ color:var(--tinta-suave) } .tienda__mas a{ color:var(--lila-hondo); font-weight:700 } @media (prefers-reduced-motion:reduce){ .venta__img,.venta__variante{ transition:none } .venta:hover .venta__img,.venta__variante:hover{ transform:none } } /* ══ 25-sep · tercera ronda de Tania ═══════════════════════════════════════ */ .venta__precio--pregunta{ font-size:1.35rem; font-style:italic; color:var(--lila-hondo) } .taller__imagen--cojines{ object-position:50% 45% } .taller__imagen--arte{ object-position:50% 70% } .contacto__redes{ display:grid; gap:6px; margin-top:var(--e2); font-size:1rem } .contacto__redes span{ display:inline-block; min-width:5.5em; font:700 .8125rem/1.4 var(--texto); letter-spacing:.18em; text-transform:uppercase; color:var(--lila) } .contacto__redes a{ color:var(--crema); text-underline-offset:3px } .taller__texto{ align-content:start }