/* ============================================
ROCIO CURTTI — v7
Sistema editorial: la obra manda, el texto acompaña
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@300;400;500;600;700;800;900&display=swap');
:root {
/* PALETA */
--c-bg: #F4EDE1; /* fondo crema */
--c-surface: #FAF6EE; /* crema apenas más claro */
--c-strip: #EAE2D2;
/* El texto de lectura va SOLO en estos dos: casi negro o cobalto.
El gris anterior (#5f5f66) sobre el crema no daba contraste legible.
Rosa, celeste y rojo quedan para fondos, badges y detalles: nunca
para texto de cuerpo sobre fondo claro. */
--c-text: #16151A; /* casi negro */
--c-text-soft: #55555D; /* gris para texto secundario, pasa contraste AA */
--c-text-mute: #16151A; /* mismo tono: ya no hay texto apagado */
--c-line: rgba(0, 0, 0, 0.12);
--c-line-strong: rgba(0, 0, 0, 0.28);
--c-accent: #2E40AF; /* cobalto: acentos y links */
--c-highlight: #E3F3FE; /* celeste de cajas de info */
--c-support: #8FBDD9; /* celeste de apoyo */
--c-spark: #F2DFED; /* rosa de apoyo */
--c-urgent: #D7352B;
--c-estrella-rosa: #D9479A; /* el rosa de las estrellas, saturado para que se lea */
--c-aurora-crema: #E4D6BE; /* el crema del degradado; de dia va mas tostado para que se vea sobre el fondo */
/* TIPOGRAFÍA — una sola familia en todo el sitio */
--f-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
--f-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
/* Separación entre las dos columnas (texto | foto).
Un solo valor para Sobre mí, La Tienda, Cuadros y Para tu marca.
Se abrió de 5vw a 6,5vw (72 → 94px en 1440): en el mockup el aire
entre el texto y la foto es lo que separa las dos ideas. */
--gap-cols: clamp(2rem, 6.5vw, 6.25rem);
/* Márgenes laterales. De 3,5vw a 4,15vw: 51 → 60px en 1450 de ancho.
Es la "caja invisible" — el borde contra el que arranca y termina
TODO en todas las secciones. */
--pad-x: clamp(1rem, 4.15vw, 4.25rem);
/* Aire arriba del rótulo cobalto. Bajó de 51 a 30px: al llegar desde
el menú la sección empezaba demasiado lejos del borde superior. */
--pad-y: clamp(1.5rem, 2.4vw, 2rem);
--max-w: 1440px;
/* Medida de lectura fija en px, no en ch: con el cuerpo en 19,75px,
70ch daban 856px y en los mockups el bloque de texto mide 711-718. */
--max-text: 45rem;
--header-h: 56px;
/* ESCALA TIPOGRÁFICA — se define una sola vez, acá, y se usa en todas
las secciones. Ninguna sección define su propio font-size.
El clamp() ya resuelve "grande en compu, chico en mobile": el primer
valor es el piso en pantallas chicas, el último el techo en grandes.
Por eso no hacen falta breakpoints aparte para tipografía.
Toda la escala bajó 2px respecto de la versión anterior: se ajusta
acá y baja en todo el sitio de una. */
/* ESCALA MEDIDA SOBRE LOS MOCKUPS DE PHOTOSHOP.
Cada valor sale de medir el ancho real de una frase en la imagen y
despejar el cuerpo de letra que la produce. Cuatro frases distintas
de cuatro secciones distintas dieron 19,7-19,8 para el texto y
37,2-39 para los títulos: la escala sube, no baja. Lo que baja es
el interlineado. Letra grande + renglones juntos: ese es el aire
del diseño. */
--fs-hero: clamp(1.875rem, 7.8vw, 6.5rem); /* 30px en mobile, 104px en compu */
--fs-h1: clamp(1.5rem, 4.7vw, 2rem); /* 24px en mobile, 32px en compu */
--fs-h2: clamp(1.25rem, 3.6vw, 1.625rem); /* 20 a 26px */
--fs-h3: clamp(1rem, 2.6vw, 1.235rem); /* 16 a 19,75px */
--fs-subtitle: clamp(1rem, 2.6vw, 1.235rem); /* igual que el cuerpo */
--fs-body: clamp(1rem, 2.6vw, 1.225rem); /* 16 a 19,6px */
--fs-button: 0.875rem; /* 14px */
--fs-eyebrow: 0.8rem; /* 12,8px */
--fs-caption: 0.95rem; /* 15,2px - listas, avisos, fichas */
--fs-nav: 0.85rem; /* 13,6px - la barra del menu NO se toca */
/* Frase-cartel: los dos bloques centrados del sitio (La Tienda y
Contacto). Es el único título que va más grande que un H1. */
--fs-statement: clamp(1.75rem, 6.5vw, 2.875rem); /* 28 a 46px */
--fs-statement-body: clamp(1.125rem, 3vw, 1.44rem); /* 18 a 23px */
/* Interlineado corto: en los mockups los renglones caen cada 22,5px
con letra de 19,8. Eso es 1,14. Se deja en 1,15. */
--lh-body: 1.15;
--lh-heading: 1.2;
--fw-h1: 600;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
background: var(--c-bg);
color: var(--c-text);
font-family: var(--f-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--c-accent); color: var(--c-bg); }
/* ===== Header — liviano, editorial ===== */
/* Sin backdrop-filter a propósito: convierte al header en bloque
contenedor de sus hijos position:fixed, y eso rompía el drawer mobile
(se dibujaba dentro de los 56px del header en vez de la pantalla).
El fondo ya es casi opaco, así que el blur no aportaba nada. */
.site-header {
position: sticky; top: 0; z-index: 100;
background: #F4EEE2;
border-bottom: 1px solid var(--c-line);
height: var(--header-h);
display: flex; align-items: center;
padding: 0 var(--pad-x);
}
/* Con el menú abierto el header sube por encima del resto */
body.nav-is-open .site-header { z-index: 1600; }
.site-header__inner {
width: 100%; max-width: var(--max-w); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 46px; width: auto; transition: opacity 0.2s ease; }
.brand a:hover .brand__logo { opacity: 0.65; }
.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.5rem); }
.nav__list { display: flex; gap: clamp(0.6rem, 1.3vw, 1.4rem); align-items: center; }
.nav__link {
font-family: var(--f-body);
font-size: var(--fs-nav);
font-weight: 400; /* liviano */
letter-spacing: 0.01em; /* casi sin tracking */
text-transform: none; /* sin uppercase agresivo */
color: var(--c-text-mute);
padding: 0.35rem 0;
position: relative;
white-space: nowrap;
transition: color 0.2s ease;
}
.nav__link::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--c-accent);
transform: scaleX(0); transform-origin: left;
transition: transform 0.25s ease;
}
.nav__link:hover { color: var(--c-text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--c-text); }
.nav__item--dropdown { position: relative; }
/* El padre es un link que navega; la flecha, un botón aparte que abre
el submenú. En escritorio van en flujo inline como el resto de los
links: si el fuera flex, el padding del link contaría para la
altura y la fila quedaría 6px más alta que las demás. */
.nav__dropdown-toggle { cursor: pointer; }
.nav__dropdown-arrow {
display: inline-block; vertical-align: middle;
font-size: 0.5rem; opacity: 0.6; cursor: pointer;
background: none; border: 0; color: inherit; line-height: 1;
/* sin padding vertical: si no, la fila del desplegable queda mas alta
que las demas y la barra se desalinea. En mobile el area tactil la
agranda la regla de 44px. */
padding: 0 0.2rem; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__dropdown-arrow:hover { opacity: 1; }
.nav__dropdown-arrow[aria-expanded="true"] { transform: rotate(180deg); }
.nav__dropdown {
position: absolute; top: calc(100% + 0.35rem); left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 175px;
background: var(--c-bg);
border: 1px solid var(--c-line);
border-radius: 3px;
padding: 0.35rem 0;
box-shadow: 0 4px 20px rgba(20, 20, 24, 0.08);
opacity: 0; visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 10;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__sublink { display: block; padding: 0.5rem 1rem; font-size: var(--fs-nav); text-align: center; }
.nav__sublink::after { display: none; }
.nav__sublink:hover { background: var(--c-surface); color: var(--c-text); }
.lang-switch {
display: inline-flex; align-items: center;
border: 1px solid var(--c-line-strong);
border-radius: 999px; overflow: hidden;
font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.05em;
}
.lang-switch__btn { padding: 0.3rem 0.6rem; color: var(--c-text-mute); transition: background 0.2s ease, color 0.2s ease; }
.lang-switch__btn.is-active { background: var(--c-text); color: var(--c-bg); }
.lang-switch__btn:not(.is-active):hover { color: var(--c-text); }
/* Hamburguesa ☰ → X sólo cuando el menú está abierto */
.nav__toggle {
display: none; width: 30px; height: 30px;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px; position: relative;
}
.nav__toggle span {
display: block; width: 22px; height: 1.5px;
background: var(--c-text);
transition: transform 0.28s ease, opacity 0.2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1080px) {
.nav__toggle { display: flex; position: relative; z-index: 1600; }
/* Panel lateral deslizante desde la derecha */
.nav__list {
position: fixed; top: 0; right: 0; bottom: 0; left: auto;
width: min(320px, 84vw);
background-color: #F4EEE2; opacity: 1;
backdrop-filter: none; -webkit-backdrop-filter: none;
z-index: 1500; flex-direction: column;
padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
gap: 1.3rem;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
align-items: flex-start;
box-shadow: -8px 0 32px rgba(20, 20, 24, 0.18);
}
.nav.is-open .nav__list { transform: translateX(0); }
/* Overlay detrás del panel */
.nav-overlay {
position: fixed; inset: 0; z-index: 1400;
background: rgba(20, 20, 24, 0.45);
opacity: 0; visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.nav-is-open .nav-overlay { opacity: 1; visibility: visible; }
/* Botón de cierre dentro del panel */
.nav__close-item { align-self: flex-end; list-style: none; }
.nav__close {
position: static; margin-bottom: 0.5rem;
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--c-line-strong); color: var(--c-text);
display: grid; place-items: center; font-size: var(--fs-h3);
z-index: 2;
}
.nav__close:hover { background: var(--c-text); color: var(--c-bg); }
.nav__link { font-size: var(--fs-body); min-height: 44px; display: flex; align-items: center; color: var(--c-text); }
/* El submenú queda fijo en su lugar: en escritorio la regla de hover
le aplica translateX(-50%) para centrarlo bajo el botón, y en mobile
eso lo corría fuera de pantalla al tocarlo. */
.nav__dropdown,
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
position: static;
transform: none !important;
left: auto; top: auto;
opacity: 1; visibility: visible;
box-shadow: none; border: none; background: transparent;
padding: 0 0 0 1rem; min-width: auto;
}
/* Subrayado en vez de desplazamiento */
.nav__sublink { position: relative; }
.nav__sublink:hover,
.nav__sublink.is-active { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.nav__sublink { text-align: left; padding: 0.45rem 0; }
body.nav-is-open { overflow: hidden; }
body.nav-is-open .site-header {
background-color: #F4EEE2;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* El panel y sus links siempre clickeables */
.nav.is-open .nav__list,
.nav.is-open .nav__list * { pointer-events: auto; }
}
/* ===== Botón "Comprar" del nav: lleno, distinto de los links de texto ===== */
.nav__shop {
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-accent); color: var(--c-bg);
padding: 0.5rem 1.1rem; border-radius: 999px;
font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.04em;
white-space: nowrap; min-height: 36px;
transition: background 0.2s ease, transform 0.2s ease;
}
.nav__shop:hover { background: var(--c-text); transform: translateY(-1px); }
.nav__shop::after { display: none; }
@media (max-width: 1080px) {
.nav__shop { width: 100%; min-height: 46px; margin-top: 0.4rem; }
}
/* ===== Sección "La Tienda" en la home =====
Ocupa la pantalla entera: es la puerta de entrada a la venta y no
tiene que competir con la sección de al lado. Foto vertical a la
izquierda, bloque de texto centrado a la derecha. */
.shop-cta {
background: var(--c-bg);
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
padding: var(--pad-y) var(--pad-x);
min-height: calc(100vh - var(--header-h));
display: flex; flex-direction: column; justify-content: center;
}
.shop-cta__inner {
width: 100%; max-width: var(--max-w); margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 51fr);
gap: var(--gap-cols); align-items: center;
flex: 1 1 auto;
}
/* Misma proporción de foto que en todo el resto del sitio.
El ancho sale de la altura disponible, no al revés: con width:100% y
un tope de alto, el recorte dejaba de ser 6:7 y la foto se volvía
cuadrada justo en las pantallas bajas. */
.shop-cta__media {
aspect-ratio: 6 / 7; overflow: hidden;
background: var(--c-bg); border: 1px solid var(--c-line);
width: 100%;
justify-self: start; align-self: start;
}
.shop-cta__media img { width: 100%; height: 100%; object-fit: cover; }
/* Bloque centrado: acá el texto es un cartel, no un párrafo de lectura */
.shop-cta__text {
display: flex; flex-direction: column; gap: 1.15rem;
align-items: center; text-align: center;
}
.shop-cta__eyebrow {
font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--c-accent);
align-self: flex-start;
}
/* El botón de entrada a la tienda es el más importante del sitio:
va del tamaño del de Contacto, no del de una sección cualquiera */
/* .btn se define más abajo en la hoja: sin la doble clase ganaba él */
.btn.shop-cta__btn {
margin-top: 0.35rem;
font-size: var(--fs-subtitle);
padding: 1.1rem 2.4rem; min-height: 62px;
}
@media (max-width: 860px) {
.shop-cta { min-height: 0; }
.shop-cta__inner { grid-template-columns: 1fr; }
.shop-cta__media { aspect-ratio: 4 / 5; max-height: none; }
.shop-cta__eyebrow { align-self: center; }
}
/* Botón "Tienda" del nav: lleno en cobalto, diferenciado de los links */
.nav__link--shop {
background: var(--c-accent); color: var(--c-bg);
padding: 0.45rem 1rem; border-radius: 999px;
font-weight: 500; letter-spacing: 0.04em;
transition: background 0.2s ease, transform 0.2s ease;
}
.nav__link--shop:hover { background: var(--c-text); color: var(--c-bg); transform: translateY(-1px); }
.nav__link--shop::after { display: none; }
/* El título de La Tienda es el cartel de entrada a la venta: va en
versales y más grande que un H1 de sección. */
.shop-cta__title {
font-family: var(--f-display); font-weight: var(--fw-h1);
font-size: var(--fs-statement); letter-spacing: -0.01em; line-height: 1.05;
text-transform: uppercase;
max-width: 22ch;
}
/* Sin max-width: llena el ancho de su columna, como en el mockup */
.shop-cta__body {
font-size: var(--fs-statement-body); color: var(--c-text);
line-height: 1.5; max-width: none;
letter-spacing: 0.01em;
}
/* ===== Servicios creativos: texto justificado =====
El texto ocupa el ancho completo del recuadro. Se mantiene la
estructura (eyebrow → título → bajada → tarjetas → botón): sólo
cambia la alineación. */
#comisiones-servicios .page-head,
#comisiones-servicios .page-title,
#comisiones-servicios .page-tagline,
#comisiones-servicios .page-lede,
#comisiones-servicios .service-card__desc,
#comisiones-servicios .contact-box__title,
#comisiones-servicios .contact-box__note {
text-align: justify;
text-justify: inter-word;
/* corta palabras largas para que no queden huecos entre palabras */
hyphens: auto;
-webkit-hyphens: auto;
}
/* La bajada usa todo el ancho de la sección, no una columna angosta */
#comisiones-servicios .page-head { max-width: none; }
/* El eyebrow es una etiqueta corta: justificarlo lo estiraría raro */
#comisiones-servicios .eyebrow { text-align: left; }
/* Mismo criterio en La Tienda y en Cuadros a pedido: el texto llena el
ancho de su caja. Se justifican los párrafos, no los títulos ni las
etiquetas: una línea corta justificada queda con huecos enormes. */
.shop-cta__body,
#comisiones-cuadros .split-layout__text p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ===== Instagram: grilla al final, mismo estilo que Galería ===== */
/* Aire justo: al llegar a Contacto desde el menú, el bloque oscuro, las
fotos de Instagram y el pie tienen que entrar juntos en una pantalla. */
.ig { padding: clamp(0.9rem, 1.6vw, 1.5rem) var(--pad-x); background: var(--c-bg); }
.ig__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 0.4rem; }
.ig__head {
font-size: var(--fs-caption); letter-spacing: 0.08em; color: var(--c-text-mute);
text-align: center;
}
.ig__head a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); }
.ig__head a:hover { opacity: 0.75; }
.instagram-grid {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(0.4rem, 1vw, 0.75rem);
}
@media (max-width: 900px) { .instagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Misma proporción 6:7 que el resto de las fotos del sitio. El 9:16 de
los reels las hacía altísimas: empujaban el pie de página fuera de la
pantalla y son lo menos importante de la sección. */
.ig__item {
position: relative; display: block;
aspect-ratio: 6 / 7; overflow: hidden;
background: var(--c-bg); border: 1px solid var(--c-line);
}
.ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease, opacity 0.25s ease; }
.ig__item:hover img { transform: scale(1.06); opacity: 0.9; }
/* ===== WhatsApp flotante ===== */
.wa-float {
position: fixed; right: clamp(0.85rem, 2vw, 1.5rem); bottom: clamp(0.85rem, 2vw, 1.5rem);
z-index: 1300;
width: 54px; height: 54px; border-radius: 50%;
background: #25D366; color: #fff;
display: grid; place-items: center;
box-shadow: 0 4px 16px rgba(20, 20, 24, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 22px rgba(20, 20, 24, 0.34); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 640px) { .wa-float { width: 48px; height: 48px; } .wa-float svg { width: 25px; height: 25px; } }
/* ===== Franja de identidad — SOLO en Home (no sticky) ===== */
.identity-strip {
background: var(--c-strip);
border-bottom: 1px solid var(--c-line);
padding: 0.375rem var(--pad-x); /* 6px arriba y abajo: franja fina */
display: flex; align-items: center; justify-content: center;
}
/* La bienvenida es una frase de lectura, no una etiqueta: sale del
tamaño de cuerpo y en casi negro, no en el gris chico de antes. */
.identity-strip p {
font-size: 0.875rem; /* 14px */
line-height: var(--lh-body);
letter-spacing: 0;
color: var(--c-text-soft);
text-align: center;
font-weight: 400;
}
/* ===== Page / Sections ===== */
/* ===== Secciones =====
Scroll continuo. No hay montaje/desmontaje: todas las vistas están
siempre en el DOM, así no quedan restos de la anterior al navegar.
Cada una llena la pantalla, por lo que al elegir del menú el contenido
aterriza limpio y la siguiente sección queda debajo del pliegue. */
.view { display: block; }
/* min-height, nunca height: la sección arranca en una pantalla y crece
sola a medida que se agregan obras. El scroll aparece donde hace falta
(tiendas) sin recortar nada. */
.view--framed > .page {
min-height: calc(100vh - var(--header-h));
height: auto;
overflow: visible;
display: flex; flex-direction: column;
justify-content: flex-start;
/* separación clara entre secciones: aunque dos caigan en la misma
pantalla al scrollear, se leen como páginas distintas */
padding-bottom: clamp(1.25rem, 2.2vw, 2rem);
position: relative;
}
.view--framed > .page::before {
content: '';
position: absolute;
top: 0; left: var(--pad-x); right: var(--pad-x);
height: 1px;
background: var(--c-line);
}
.view--framed > .page > .page-head { flex: 0 0 auto; }
.page {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--pad-y) var(--pad-x);
scroll-margin-top: calc(var(--header-h) + 0.5rem);
}
.page-head {
margin-bottom: clamp(1rem, 2vw, 1.75rem);
display: flex; flex-direction: column; gap: 0.3rem;
}
.eyebrow {
font-family: var(--f-body);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.14em; /* reducido de 0.26em */
text-transform: uppercase;
color: var(--c-accent);
}
/* H1 de sección: mismo tamaño y peso en toda la web */
.page-title {
font-family: var(--f-display);
font-weight: var(--fw-h1);
font-size: var(--fs-h1);
letter-spacing: -0.02em;
line-height: 1.05;
}
/* Se mantiene la clase por compatibilidad, pero ya no achica */
.page-title--sm { font-size: var(--fs-h1); }
.page-subtitle { color: var(--c-accent); margin-top: -0.1rem; }
/* Frase de posicionamiento debajo del título */
/* Subtítulo de sección: mismo cuerpo que el texto, en negrita. Es la
frase que resume la sección, no un tamaño intermedio más: al mismo
cuerpo que el párrafo el bloque se lee como uno solo. */
.page-tagline {
font-family: var(--f-body);
font-weight: 600;
font-size: var(--fs-body);
color: var(--c-text);
margin-top: 0.35rem;
letter-spacing: 0;
}
/* Bajada: debajo del título, extendida a lo ancho — aprovecha el espacio
horizontal en vez de crecer en alto */
/* El bloque puede ser ancho, pero la LÍNEA no: a 129 caracteres el ojo
no encuentra dónde empieza el renglón siguiente. 70ch lo deja en el
rango cómodo de lectura sin cambiar la caja. */
.page-lede {
font-size: var(--fs-body);
color: var(--c-text-mute);
margin-top: 0.35rem;
line-height: var(--lh-body);
max-width: var(--max-text);
}
.page-lede--sm { font-size: var(--fs-body); }
/* Línea de cierre de una bajada: mismo cuerpo, en negrita */
.page-lede--strong { font-weight: 600; margin-top: 0.75rem; }
/* ===== HERO ===== */
.hero {
padding: clamp(1.25rem, 3vw, 2.5rem) var(--pad-x) clamp(1rem, 2vw, 1.75rem);
max-width: var(--max-w); margin: 0 auto;
min-height: calc(100vh - var(--header-h) - 90px);
display: flex; align-items: center;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(1.5rem, 3.5vw, 3.5rem);
align-items: center; width: 100%;
}
/* Sin padding-top: ese relleno era aire muerto arriba del nombre, y con
la foto estirada a la columna hacía que empezara 56px más arriba. La
caja de texto ahora arranca en el nombre y termina en los botones, que
es exactamente el alto que copia la foto. El bloque entero sigue
centrado en la pantalla porque de eso se encarga .hero. */
.hero__text {
display: flex; flex-direction: column; justify-content: center;
padding-left: clamp(0rem, 2.5vw, 2.5rem);
/* Convierte la columna en unidad de medida: desde acá, 100cqw es el
ancho real que tiene el texto disponible. Lo usa el nombre para
saber de qué tamaño ponerse. */
container-type: inline-size;
}
/* Recta y con peso: WONK 0 quita el trazo caligráfico, SOFT 0 endurece
las terminaciones y el opsz bajo reduce el contraste tipo itálica */
/* Bloque de texto del Home, replicado del mockup: el título casi al
doble, la segunda línea con más sangría y el interlineado más cerrado.
La barra del menú, la franja de abajo y la foto no se tocan. */
/* Los dos nombres en un solo renglón, llenando la caja exactamente.
El cuerpo no se elige a ojo: "Rocío Curtti" ocupa 5,35 veces el
tamaño de la letra, así que dividiendo el ancho de la caja por 5,35
la palabra entra justa, sin sobrar ni faltar.
Y la caja es min(472px, el ancho de la columna): en pantalla grande
son los 472 fijos, y cuando la columna se angosta el nombre se achica
con ella en vez de desbordar. Es la misma cuenta que hace la caja en
su width, así que las dos no se pueden desincronizar. */
.hero__title {
font-family: var(--f-display);
font-weight: 700;
font-size: 88.2243px;
white-space: nowrap;
line-height: 88.2243px;
letter-spacing: -1.76449px;
margin: -27px -7px -252px -12px;
}
/* Las dos palabras van en la misma línea: el span de "Curtti" ya no
abre renglón ni lleva sangría, sólo existe para poder aparecer con un
retardo respecto de "Rocío". */
.hero__title-line2 {
display: inline;
letter-spacing: -0.02em;
}
/* Aparición: primero "Rocío" y, cuando va por la mitad, arranca
"Curtti". Se hace una sola vez, al cargar. */
@keyframes heroFade {
from { opacity: 0; }
to { opacity: 1; }
}
.hero__title-line1,
.hero__title-line2 { animation: heroFade 400ms ease-out both; }
/* "Curtti" arranca cuando el fade de "Rocío" va por el 60%: 240ms de
400. Se solapan, y por eso se nota que una empieza justo antes de
que la otra termine. */
.hero__title-line2 { animation-delay: 240ms; }
/* Quien pidió menos movimiento en el sistema lo ve directamente puesto */
@media (prefers-reduced-motion: reduce) {
.hero__title-line1,
.hero__title-line2 { animation: none; }
}
/* La caja se achica al ancho del nombre; la bajada la llena justificando.
Así arranca y termina exactamente donde el nombre, sin depender de
calcular el tamaño de letra a mano para cada ancho de pantalla. */
/* Ancho FIJO, no fit-content. Antes la caja se encogía al ancho de
"Curtti", así que cualquier cambio de peso o de cuerpo en el nombre le
movía el ancho al eyebrow, y como el eyebrow es justificado, le
cambiaba el aire entre palabras. Con la caja fija eso ya no pasa:
el nombre puede cambiar sin romper la línea de abajo. */
.hero__name { width: 29.5rem; max-width: 100%; } /* 472px */
.hero__subtitle {
margin: 249px 0 88px;
padding: 0;
width: 100%;
font-family: var(--f-body);
font-weight: 400;
font-size: 16px;
line-height: 25.6px;
letter-spacing: 0;
text-align: center;
text-transform: uppercase;
color: var(--c-text);
}
/* El párrafo se centra sobre el ancho exacto del nombre.
width:0 + min-width:100% es lo que lo hace posible: con ancho
automático este texto largo ensancharía la caja fit-content del padre
y el nombre dejaría de mandar. Con width:0 no aporta ancho propio, y
el min-width lo estira después hasta el borde del nombre. */
.hero__sub {
margin-top: 2.7rem;
width: 0; min-width: 100%; max-width: none;
font-weight: 400;
font-size: 1.3125rem; /* 21px */
line-height: 1.3;
/* Espaciado normal: ni aire agregado entre letras ni entre palabras.
El texto ya no se estira para llenar la caja, se lee como un
párrafo cualquiera. */
letter-spacing: normal;
word-spacing: normal;
text-align: center;
color: var(--c-text);
}
.hero__ctas {
/* La línea roja cae a mitad del aire que había entre el párrafo y los
botones: 41px pasan a 21. */
margin-top: 30px;
width: 0; min-width: 100%;
display: flex; gap: 0.7rem; flex-wrap: nowrap;
}
/* Los dos botones se reparten la caja en mitades: en el mockup miden
228 y 233 sobre los 472, y juntos cierran contra el borde de "Curtti" */
/* La caja baja de 54 a 50 de alto; la letra queda en 15px, igual que
antes: se achica el botón, no lo que dice. */
.hero__ctas .btn {
flex: 1 1 0; min-width: 0;
font-size: 0.94rem; min-height: 50px; padding: 0.6rem 1rem;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.65rem 1.3rem; border-radius: 999px;
font-family: var(--f-body);
font-size: var(--fs-button); font-weight: 500;
letter-spacing: 0.04em;
min-height: 42px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solid { background: var(--c-accent); color: var(--c-bg); border: 1px solid var(--c-accent); }
.btn--solid:hover { background: var(--c-text); border-color: var(--c-text); }
.btn--outline { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-strong); }
.btn--outline:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
/* El rectángulo rojo lleno del mockup: 659 x 499, o sea 4:3. Va un poco
más alto que la caja de texto y centrado contra ella, no estirado a
su alto. */
.hero__media {
position: relative; aspect-ratio: 4 / 3;
align-self: center;
max-height: calc(100vh - var(--header-h) - 160px);
overflow: hidden; background: var(--c-surface);
border: 1px solid var(--c-line);
}
.hero__slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
@media (max-width: 1080px) {
.hero { min-height: auto; padding-top: 1.5rem; }
.hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
.hero__text { padding-left: 0; }
.hero__media { aspect-ratio: 16 / 10; max-height: none; }
}
/* ===== Mobile: Home centrada y CTAs apilados tipo Linktree =====
En desktop todo arranca contra el margen izquierdo. En mobile no hay
columna que acompañe, así que el bloque se centra sobre su propio eje
y los botones pasan a ser barras apiladas del mismo ancho. */
@media (max-width: 860px) {
.hero__text { align-items: center; text-align: center; }
.hero__sub { margin-left: auto; margin-right: auto; }
/* "Rocío Curtti" en un solo renglón: sin la columna de la foto al lado
no hay razón para partirlo. El espacio lo da el carácter del HTML,
así el nombre también se lee y se copia entero.
El tamaño sale de una cuenta, no de un número elegido a ojo: el
nombre ocupa 5,263 veces el cuerpo de la letra, así que dividiendo el
ancho disponible (la pantalla menos los dos márgenes) por ese número
llena el renglón justo, en cualquier teléfono. El divisor está en
5,43 y no en 5,263 para bajar dos puntos el cuerpo: el nombre ya no
toca los dos bordes, queda con un poco de aire a la derecha. */
.hero__title {
white-space: nowrap;
font-size: calc((100vw - 2 * var(--pad-x)) / 5.43);
/* Los márgenes con que se acomoda el bloque en la compu no valen
acá: en una sola columna estiraban el hero 115px y volvían a
tirar la franja de tres columnas abajo del corte. */
margin: 0;
}
.hero__subtitle { margin: 4px 0 0; }
/* 4px menos que en la compu: con el nombre en negrita el hero crecía
lo justo para que la franja de tres columnas quedara 1px afuera. */
.hero__ctas { margin-top: 16px; }
.hero__title-line2 { display: inline; padding-left: 0; margin-left: 0; }
/* La bajada se ata al mismo ancho: en mobile el nombre va en una línea
sola, así que la proporción contra el título no es la de escritorio. */
.hero__name { width: 100%; }
.hero__subtitle { font-size: calc((100vw - 2 * var(--pad-x)) / 23.26); }
/* En mobile el título no sale de --fs-hero sino de una cuenta contra el
ancho de pantalla, así que atar la bajada al token la dejaba en 7px */
.hero__sub { font-size: var(--fs-subtitle); }
.hero__ctas {
flex-direction: column; flex-wrap: nowrap;
align-items: center; width: 100%; min-width: 0;
}
/* En columna, el flex:1 de escritorio repartiría la ALTURA entre los
dos botones en vez del ancho: acá cada uno vuelve a medir lo suyo */
.hero__ctas .btn { flex: 0 0 auto; }
/* El ancho se mide contra la ventana, no contra el contenedor: así el
botón dentro de la caja celeste de Servicios, que tiene su propio
padding, sale del mismo ancho que los del Home.
El display:flex hace que el margin auto centre aunque el contenedor
no sea flex; el !important gana al align-self inline de Comisiones. */
.btn, .closing__cta {
display: flex; justify-content: center;
width: min(340px, calc(100vw - 5rem)); max-width: 100%;
margin-left: auto; margin-right: auto;
align-self: center !important;
}
/* Sólo el Home y los botones van centrados. El texto de lectura de las
demás secciones queda alineado a la izquierda: centrar párrafos
largos hace que cada renglón arranque en un lugar distinto y cuesta
seguir la lectura. Se centra la caja, no el texto de adentro. */
.shop-cta__text, .contact-box { align-items: center; text-align: left; }
}
/* ===== Barra de confianza ===== */
.trust-bar { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.trust-bar__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 var(--pad-x); }
.trust-bar__item {
padding: 0.7rem 1rem; text-align: center;
font-size: var(--fs-eyebrow); letter-spacing: 0.02em;
color: var(--c-text-mute); border-right: 1px solid var(--c-line);
}
.trust-bar__item:last-child { border-right: none; }
/* Dentro de La Tienda la franja ya vive con el padding de la sección:
se le saca el propio y se pega al pie del bloque */
.trust-bar--inset {
/* 24px arriba y no --pad-y: con la foto en 590 la seccion se pasaba
5px de la pantalla y la franja quedaba cortada */
margin: 1.5rem calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y));
flex: 0 0 auto;
}
.trust-bar--inset .trust-bar__inner { padding: 0 var(--pad-x); }
/* En pantalla ancha se lee el texto entero; el corto no existe. */
.solo-angosta { display: none; }
/* En el teléfono la franja se mantiene en dos columnas y no se apila:
con tres ítems se apilaba por necesidad —no entraban de a tres— pero
con dos entran al lado. El separador sigue siendo vertical, igual que
en compu.
Para que cada frase entre en UN renglón hacen falta dos cosas: el
texto corto en el primero —"Argentina" completo mide 186 contra los
165 de la columna— y menos relleno a los costados, porque "Múltiples
medios de pago" mide 158 y con 16px de relleno se pasaba por 1px. */
@media (max-width: 720px) {
.trust-bar__item { padding: 0.55rem 0.25rem; }
.solo-ancha { display: none; }
.solo-angosta { display: inline; }
}
/* ===== Prose ===== */
.prose { max-width: var(--max-text); display: flex; flex-direction: column; gap: 0; }
.prose--wide { max-width: 100%; }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); transition: opacity 0.2s ease; }
.prose a:hover { opacity: 0.7; }
.prose .page-title { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: -0.02em; line-height: 1.05; }
.prose h2 {
font-family: var(--f-display); font-weight: 300;
font-size: var(--fs-h3);
margin-top: 1rem; letter-spacing: -0.01em;
}
/* Subtitulo en versalitas: a 18px con 0,14em de tracking el ojo tenia
que saltar letra por letra. Al tamano del cuerpo, con peso 600 y poco
tracking, sigue destacando pero se lee de un golpe. */
.prose h3 {
font-family: var(--f-body); font-weight: 600;
font-size: var(--fs-body); letter-spacing: 0.06em;
text-transform: uppercase; color: var(--c-accent);
margin-bottom: 0;
}
.prose h3:first-child { margin-top: 0; }
/* El subtitulo se agrupa con SU parrafo: pegado abajo, aire arriba */
.prose h3 + p { margin-top: 0.4rem; }
/* ===== Grillas de producto ===== */
/* Siempre 4 por fila en desktop, con las piezas a un tamaño contenido */
.product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: clamp(1.25rem, 2.4vw, 2.25rem);
row-gap: 1.5rem;
width: 100%;
/* Sin max-width propio: la grilla usa la misma caja que el titulo y el
texto. Antes tenia 1120px centrados y quedaba 50px adentro, asi que
las obras nunca empezaban donde empieza el titulo. */
}
/* Prints usa exactamente las mismas medidas que Originales */
/* Prints usa la misma caja que Originales, sin ancho propio */
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .product-grid, .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .product-grid, .product-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.product { display: flex; flex-direction: column; gap: 0.35rem; cursor: pointer; }
/* Misma proporción en Originales y Prints */
.product__media {
position: relative;
aspect-ratio: 0.76;
overflow: hidden; background: var(--c-bg);
border: 1px solid var(--c-line);
}
.product__media--a4 { aspect-ratio: 0.76; }
/* Las miniaturas viven solo dentro del visor, nunca en el grid */
.product__thumbs { display: none; }
.product__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0; transition: opacity 0.45s ease, transform 0.6s ease;
transform: scale(1.06);
}
.product__img.is-active { opacity: 1; }
.product:hover .product__img.is-active { transform: scale(1.11); }
.product__overlay {
position: absolute; inset: 0;
background: rgba(20, 20, 24, 0.45);
opacity: 0; transition: opacity 0.2s ease;
display: grid; place-items: center; z-index: 3;
}
.product:hover .product__overlay { opacity: 1; }
.product__overlay-btn {
padding: 0.55rem 1.15rem; background: var(--c-bg); color: var(--c-text);
border-radius: 999px; font-size: var(--fs-caption); font-weight: 500;
letter-spacing: 0.02em; min-height: 38px;
display: inline-flex; align-items: center;
}
.product__mobile-cta { display: none; font-size: var(--fs-caption); font-weight: 500; color: var(--c-accent); }
@media (hover: none) {
.product__overlay { display: none; }
.product__mobile-cta { display: block; }
}
/* Recuadro "Vendida" sobre la obra */
/* Badge en la esquina superior derecha de la imagen, chico y consistente */
.product__sold {
position: absolute; top: 0.6rem; right: 0.6rem; z-index: 4;
/* Negro con letras blancas en los dos modos. Con var(--c-text) de
noche el fondo se volvia crema y la palabra, blanca sobre claro,
desaparecia. */
background: #16151A; color: #fff;
padding: 0.3rem 0.7rem; font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; border-radius: 2px;
pointer-events: none;
}
/* Estado vendido dentro del visor */
.viewer__sold {
align-self: flex-start;
background: var(--c-bg); color: var(--c-text);
padding: 0.3rem 0.7rem; border-radius: 2px;
font-size: var(--fs-eyebrow); font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
}
.viewer__cart--sold {
background: transparent; color: var(--c-bg);
border: 1px solid rgba(244, 238, 226, 0.5);
}
.viewer__cart--sold:hover { background: var(--c-bg); color: var(--c-text); }
.product__dots {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
display: flex; gap: 4px; z-index: 2; opacity: 0;
transition: opacity 0.25s ease; pointer-events: none;
}
.product:hover .product__dots { opacity: 1; }
.product__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.product__dot.is-active { background: #fff; }
.product__title {
font-family: var(--f-display); font-weight: 400;
font-size: 1.05rem; letter-spacing: -0.005em;
}
.product__technique { font-size: var(--fs-caption); color: var(--c-text-mute); line-height: 1.35; }
.product__price { font-size: var(--fs-caption); color: var(--c-text); font-weight: 400; }
/* La linea de envios que iba en cada ficha se saco: la informacion ya
esta en la franja de abajo de la seccion y repetida once veces no
aportaba nada. Con ella fuera, los circulos de color respiran. */
.product__colors { display: flex; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; }
.product__color {
width: 16px; height: 16px; border-radius: 50%;
border: 1px solid var(--c-line-strong); cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
position: relative; z-index: 5;
}
.product__color:hover { transform: scale(1.15); }
.product__color.is-active { border-color: var(--c-text); box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-text); }
/* Divisor pegado a la fila de obras que encabeza */
/* El margen negativo que había acá tiraba del divisor 13,6px hacia abajo
y lo montaba encima de la primera tarjeta del grupo: en mobile, con una
sola columna, el rótulo de categoría quedaba pisando la ficha. Además
descontaba var(--grid-row-gap), una variable que no existe en ninguna
parte, así que el valor nunca coincidía con el row-gap real. */
.product-grid__divider {
grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1rem;
padding: clamp(0.4rem, 1.2vw, 0.85rem) 0 0.3rem;
border-bottom: 1px solid var(--c-line);
}
.product-grid__divider:first-child { padding-top: 0; }
.product-grid__divider-eyebrow {
font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.14em;
/* Del color del texto y no en cobalto: son rotulos de grupo dentro de
la grilla, no enlaces ni acentos. */
text-transform: uppercase; color: var(--c-text);
}
.product-grid__divider-count { display: none; }
/* ===== Callouts ===== */
.callout {
margin: clamp(0.85rem, 1.8vw, 1.5rem) 0;
padding: clamp(0.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-left: 2px solid var(--c-accent);
border-radius: 2px; max-width: 64ch;
display: flex; flex-direction: column; gap: 0.35rem;
}
/* Bloque destacado celeste, letras negras */
.callout--pink { background: var(--c-highlight); border: none; border-left: none; }
/* Variante ancha: mismo contenedor que la grilla de obras,
así los márgenes laterales coinciden exactamente */
.callout--inline {
flex-direction: row; align-items: baseline; flex-wrap: wrap;
gap: 0.5rem;
/* Arranca en el mismo borde que el título y termina donde termina el
párrafo de arriba: el aviso pertenece al bloque de texto, no a la
grilla de obras. Por eso comparte el ancho de lectura y no el de la
sección entera. */
width: 100%; max-width: var(--max-text);
margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem);
padding: 0.85rem 1.25rem;
}
.callout--inline .callout__title { font-size: var(--fs-caption); color: var(--c-text); }
.callout--inline .callout__body { font-size: var(--fs-caption); color: var(--c-text); }
.callout--inline .callout__body a { color: var(--c-text); border-bottom-color: var(--c-text); }
.callout--pink .callout__title, .callout--pink .callout__body { color: var(--c-text); }
.callout--pink .callout__body a { color: var(--c-text); border-bottom: 1px solid var(--c-text); font-weight: 500; }
.callout__title {
font-family: var(--f-display); font-weight: 400;
font-size: var(--fs-caption); line-height: var(--lh-body);
}
.callout__body { font-size: var(--fs-caption); color: var(--c-text-mute); line-height: var(--lh-body); }
.callout a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); font-weight: 500; }
.callout a:hover { opacity: 0.7; }
/* ===== Service cards ===== */
/* Dos columnas: tarjetas a la izquierda · preview a la derecha
(mismas medidas que Comisiones · Cuadros) */
/* Tarjetas y foto más juntas: la columna de tarjetas gana ancho y el
box de imagen se achica, así el conjunto se lee centrado y sin vacío */
.services-split {
display: grid;
grid-template-columns: minmax(0, 51fr) minmax(0, 36fr);
gap: var(--gap-cols);
align-items: stretch;
justify-content: center;
}
/* Mobile: sin hover. Cada tarjeta se abre como acordeón con su propia
foto adentro, y el box lateral desaparece. */
@media (max-width: 900px) {
.services-split { grid-template-columns: 1fr; }
.service-preview { display: none; }
.service-grid { grid-template-columns: 1fr; }
.service-card { cursor: pointer; position: relative; }
/* Sin hover no hay forma de saber que la tarjeta guarda fotos: acá el
aviso vuelve, pero como una línea al pie y no como un cartel encima.
Doble clase porque la regla que lo oculta está más abajo en la hoja. */
.service-card .service-card__badge {
display: inline-block; position: static;
order: 3; grid-column: 1 / -1; justify-self: start;
background: transparent; border: none; padding: 0;
color: var(--c-accent); margin-top: 0.15rem;
}
.service-card.is-selected .service-card__badge { background: transparent; color: var(--c-accent); }
.service-card.is-open,
.service-card.is-selected { border-color: var(--c-text); }
.service-card.is-open .service-card__media,
.service-card.is-selected .service-card__media { display: block; }
.service-card:hover { transform: none; box-shadow: none; }
}
/* Caja de imagen: un único tamaño para todos los servicios, el mismo
recorte vertical 5:6 que usan las fotos de la Galería. Antes tenía
height:100% y se estiraba a lo alto de la columna, así que cada
servicio se veía de un tamaño distinto.
IMPORTANTE PARA QUIEN CARGUE FOTOS DESPUÉS:
no hace falta recortarlas antes de subirlas. Entran con object-fit:
cover, que las recorta desde el centro para llenar la caja sin
deformarlas. Da igual el tamaño y la proporción del archivo: lo que
sobra se recorta, nada se estira. Poné el motivo cerca del centro,
que es lo que siempre queda a la vista. */
.service-preview {
position: relative; overflow: hidden;
background: var(--c-surface); border: 1px solid var(--c-line);
aspect-ratio: 6 / 7;
/* Sin max-width: la foto llena su columna. El tope de 300px la dejaba
en una miniatura al lado de un bloque de texto enorme — en una web
de artista la obra no puede ser lo más chico de la pantalla. */
width: 100%; height: auto;
justify-self: end; align-self: start;
}
.service-preview__slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; /* recorta, nunca estira */
opacity: 0; transition: opacity 1.4s ease-in-out; /* crossfade lento */
}
.service-preview__slide.is-active { opacity: 1; }
/* Puntos DEBAJO del box: cuántas fotos hay y cuál se está viendo */
.service-col { display: flex; flex-direction: column; gap: 0.55rem; }
.service-col .service-preview { flex: 0 0 auto; }
.service-preview__dots {
display: flex; gap: 7px; justify-content: center;
min-height: 8px;
}
.service-preview__dots:empty { min-height: 0; }
.service-preview__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--c-line-strong); opacity: 0.35; cursor: pointer;
transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.service-preview__dot.is-active { opacity: 1; background: var(--c-accent); transform: scale(1.2); }
/* Flechas internas del box: pasar manualmente entre fotos del servicio */
.service-preview__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.55);
background: rgba(20,20,24,0.3); color: #fff;
display: grid; place-items: center; font-size: var(--fs-caption); z-index: 4;
opacity: 0; transition: opacity 0.25s ease, background 0.2s ease;
backdrop-filter: blur(3px);
}
.service-preview:hover .service-preview__arrow,
.service-preview.has-label .service-preview__arrow { opacity: 0.85; }
.service-preview__arrow:hover { background: #fff; color: var(--c-text); opacity: 1; }
.service-preview__arrow--prev { left: 8px; }
.service-preview__arrow--next { right: 8px; }
.service-preview__arrow[hidden] { display: none !important; }
/* ===== Acordeón de servicios en mobile ===== */
.service-card__media {
display: none;
position: relative;
margin-top: 0.6rem;
border-radius: 3px; overflow: hidden;
border: 1px solid var(--c-line);
background: var(--c-surface);
}
.service-card__media img { width: 100%; height: auto; display: block; }
/* Badge "Ver fotos": chico y siempre visible, en la esquina de la tarjeta.
No depende de hover, así que en mobile también avisa que la tarjeta se
toca para ver las imágenes. */
.service-card__badge {
position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
padding: 0.22rem 0.5rem; border-radius: 999px;
font-size: var(--fs-eyebrow); font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
background: var(--c-highlight); color: var(--c-accent);
border: 1px solid var(--c-accent);
pointer-events: none; white-space: nowrap;
}
.service-card.is-selected .service-card__badge {
background: var(--c-accent); color: var(--c-bg);
}
.service-preview__label {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 1.6rem 1rem 0.85rem;
background: linear-gradient(to top, rgba(20,20,24,0.75), transparent);
color: var(--c-bg); font-size: var(--fs-caption); letter-spacing: 0.06em;
text-align: center;
opacity: 0; transition: opacity 0.3s ease;
}
.service-preview.has-label .service-preview__label { opacity: 1; }
.service-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(0.55rem, 1.1vw, 0.8rem); margin-top: 0.35rem;
align-content: start;
}
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }
/* Hover lift */
/* Crema suave: deja que la tarjeta seleccionada, en blanco puro, resalte */
/* Formato de tarjeta del mockup: el nombre del servicio a la izquierda
en versales, la categoría a la derecha en la misma línea, y la
descripción abajo ocupando todo el ancho. Antes el rótulo iba arriba
y sobraban 5,5rem de padding vacío a la derecha para que el badge
"Ver fotos" no pisara el texto: eso era lo que hacía la tarjeta tan
alta para lo poco que dice. */
.service-card {
position: relative;
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 3px;
padding: 0.7rem 0.9rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.3rem 0.75rem;
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease,
border-color 0.22s ease, background 0.25s ease;
will-change: transform;
}
.service-card__title { grid-column: 1; }
.service-card__desc { grid-column: 1 / -1; }
.service-card__media { grid-column: 1 / -1; order: 4; }
/* En escritorio la foto de al lado ya cambia sola al pasar el mouse:
el cartelito "Ver fotos" era una etiqueta de más. En mobile no hay
hover, así que ahí sí queda, como una línea al pie de la tarjeta. */
.service-card__badge { display: none; }
.service-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
#comisiones-servicios .service-card__title { font-size: 1.1rem; }
#comisiones-servicios .service-card__desc { font-size: var(--fs-body); line-height: var(--lh-body); }
#comisiones-servicios .contact-box { padding: 0.9rem 1.15rem; gap: 0.5rem; margin-top: 0.85rem; }
#comisiones-servicios .contact-box__title { font-size: var(--fs-h3); }
/* Hover en tarjetas NO seleccionadas: solo elevación, no cambia la imagen */
.service-card:not(.is-selected):hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 10px 28px rgba(20, 20, 24, 0.13);
border-color: var(--c-line-strong);
}
/* Servicio seleccionado: fondo blanco, texto negro.
Sin color: el bloque destaca por contraste con las tarjetas en crema,
más el borde negro y la sombra. La pill sigue en cobalto. */
.service-card.is-selected {
background: #FFFFFF;
border-color: var(--c-text);
box-shadow: 0 4px 14px rgba(20, 20, 24, 0.12);
transform: none;
}
.service-card.is-selected .service-card__title,
.service-card.is-selected .service-card__desc { color: var(--c-text); }
.service-card.is-selected .service-card__pill {
background: var(--c-accent);
color: var(--c-bg);
}
/* La categoría pasa a la derecha, en la misma línea que el nombre */
.service-card__pill {
grid-column: 2; grid-row: 1;
justify-self: end; align-self: center;
background: var(--c-accent); color: var(--c-bg);
font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 999px;
margin-bottom: 0; white-space: nowrap;
}
.service-card__title {
font-family: var(--f-body); font-weight: 600;
font-size: var(--fs-body); letter-spacing: 0.04em; line-height: 1.25;
text-transform: uppercase;
}
.service-card__desc { font-size: var(--fs-body); color: var(--c-text-mute); line-height: var(--lh-body); }
/* ===== Contact box ===== */
/* CTA final: fondo celeste, texto en el mismo cobalto del botón */
.contact-box {
background: var(--c-highlight); border-radius: 3px;
padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1.1rem, 2vw, 1.6rem);
margin-top: clamp(0.75rem, 1.4vw, 1.1rem);
display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
color: var(--c-accent);
}
.contact-box__title {
font-family: var(--f-display); font-weight: 300;
font-size: var(--fs-h3); letter-spacing: -0.01em;
line-height: 1.25;
max-width: none; /* se extiende a lo ancho, no baja de línea */
white-space: normal;
color: var(--c-accent);
}
/* sin opacity: apagaba el contraste del cobalto sobre el celeste */
.contact-box__note { font-size: var(--fs-caption); color: var(--c-accent); line-height: var(--lh-body); }
.contact-box .btn--solid { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.contact-box .btn--solid:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
/* ===== Split (comisiones cuadros) ===== */
/* Misma lógica que About: texto e imagen empiezan y terminan a la par.
En Cuadros el bloque crece para llenar la sección: la obra es
protagonista y el texto respira. */
.split-layout {
display: grid;
/* Mismas medidas que About: la foto gana ancho contra el texto */
grid-template-columns: 51fr 36fr;
gap: var(--gap-cols);
align-items: stretch;
flex: 0 1 auto;
width: 100%;
}
@media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; max-height: none; } }
/* Columna de texto: centrada verticalmente y con tipografía más grande */
.split-layout__text {
display: flex; flex-direction: column; justify-content: center;
gap: 0; max-width: none;
align-items: flex-start; /* botón alineado a la izquierda */
}
.split-layout__text > .page-head { margin-bottom: 0.25rem; }
.split-layout__text p { font-size: var(--fs-body); line-height: var(--lh-body); }
/* La pregunta en cobalto y su respuesta se leen como un bloque: se
acerca el párrafo de abajo y se deja más aire arriba, contra el
bloque anterior. */
.split-layout__text h3 {
font-size: var(--fs-body); letter-spacing: 0.06em;
margin-bottom: 0;
}
.split-layout__text h3 + p { margin-top: 0.4rem; }
/* La bajada ya no es un tamaño aparte: mismo cuerpo que el resto, en
negrita. Así el bloque entero se lee de corrido y la sección entra
completa en una pantalla. */
.split-layout__text .lead {
font-family: var(--f-body); font-weight: 600;
font-size: var(--fs-body);
line-height: var(--lh-body); letter-spacing: 0;
color: var(--c-text);
}
/* El botón cierra el bloque centrado sobre la columna de texto */
.split-layout__text .btn { align-self: center; }
/* El botón dentro del bloque siempre con texto claro */
.split-layout__text .btn--solid { color: var(--c-bg); }
.split-layout__text .btn--solid:hover { color: var(--c-bg); }
/* El carrusel no aporta altura propia: se estira para igualar al texto */
/* Mismo contenedor que Sobre mi, La Tienda y Servicios: misma
proporcion y mismo ancho por alto en las cuatro. Sin height:100% ni
align-self:stretch, que era lo que la estiraba a la altura del texto
y le rompia el 6:7. */
.fade-carousel {
position: relative; overflow: hidden;
background: var(--c-surface); border: 1px solid var(--c-line);
aspect-ratio: 6 / 7;
width: 100%;
justify-self: end; align-self: start;
}
.fade-carousel__slide { object-position: center; }
/* Puntos indicadores sobre la obra */
.fade-carousel__dots {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 2;
}
.fade-carousel__dot {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,0.5);
transition: background 0.3s ease, transform 0.3s ease;
}
.fade-carousel__dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 900px) {
.fade-carousel { min-height: 0; aspect-ratio: 4 / 5; }
}
.fade-carousel__slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out;
}
.fade-carousel__slide.is-active { opacity: 1; }
/* ===== Carrusel Galería ===== */
/* --slide-w manda: de ahí salen el ancho de la foto, la altura de las zonas
de hover y la posición vertical de las flechas.
La foto es más alta que ancha (5:6). El clamp busca esa altura pero la
frena antes de que la sección deje de entrar en pantalla; el piso de
1.05 evita que en ventanas bajas el recorte se dé vuelta y quede
horizontal. */
.carousel {
--slide-w: min(38vw, 560px);
/* La altura la manda la ventana, no la foto: título, tira y barra de
desplazamiento tienen que entrar juntos en una pantalla. El piso de
1,05 que había antes ganaba siempre en pantallas bajas y empujaba la
barra de abajo fuera de la vista. Los 150px descontados son el
bloque de título, el aire de la sección y el lugar de la barra. */
--media-h: clamp(
calc(var(--slide-w) * 0.7),
calc(100vh - var(--header-h) - 225px),
calc(var(--slide-w) * 1.2)
);
position: relative; margin-top: 0.35rem;
}
/* La tira de la Galería se extiende casi hasta el borde de la sección:
se compensa el padding lateral con margen negativo, y la primera y la
última foto conservan un respiro con el padding del track. */
#galeria .carousel {
margin-left: calc(-1 * var(--pad-x) + 0.75rem);
margin-right: calc(-1 * var(--pad-x) + 0.75rem);
}
#galeria .carousel__track {
padding-left: 0.25rem; padding-right: 0.25rem;
scroll-padding-left: 0.25rem;
}
.carousel__edge { position: absolute; top: 0; height: var(--media-h); width: clamp(45px, 5vw, 80px); z-index: 5; }
.carousel__edge--left { left: 0; cursor: w-resize; }
.carousel__edge--right { right: 0; cursor: e-resize; }
.carousel__track {
display: flex; gap: clamp(0.6rem, 1.5vw, 1.25rem);
overflow-x: auto; overflow-y: hidden;
/* Sin scroll-snap: el snap obligatorio cancela el scroll programático
y pelea con el avance continuo de las flechas. */
scroll-behavior: smooth;
padding-bottom: 0.85rem; scrollbar-width: thin;
overscroll-behavior-x: contain; overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
}
.carousel__track::-webkit-scrollbar { height: 3px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--c-line-strong); }
/* Ancho pensado para que entren ~2,5 fotos en pantalla:
la mitad de la tercera asoma e invita a seguir navegando. */
.carousel__slide {
flex: 0 0 auto; width: var(--slide-w);
display: flex; flex-direction: column; gap: 0.5rem;
}
.carousel__media {
position: relative;
/* vertical: más alto que ancho, formato de tira continua */
height: var(--media-h); background: var(--c-surface);
overflow: hidden; border: 1px solid var(--c-line); cursor: pointer;
}
.carousel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.carousel__media:hover img { transform: scale(1.03); }
/* Overlay "Ver detalle" al pasar el cursor */
.carousel__media .product__overlay { opacity: 0; }
.carousel__media:hover .product__overlay { opacity: 1; }
@media (hover: none) { .carousel__media .product__overlay { display: none; } }
.carousel__caption { font-size: var(--fs-caption); color: var(--c-text-mute); max-width: 64ch; line-height: 1.5; }
.carousel__caption strong { color: var(--c-text); font-weight: 500; }
.carousel__btn {
position: absolute; top: calc(var(--media-h) / 2); transform: translateY(-50%);
width: 42px; height: 42px; border: 1px solid var(--c-line-strong); border-radius: 50%;
background: rgba(244, 238, 226, 0.92); backdrop-filter: blur(6px);
display: grid; place-items: center; z-index: 10;
transition: background 0.2s ease, color 0.2s ease;
}
.carousel__btn:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.carousel__btn--prev { left: clamp(0.4rem, 1.2vw, 1.25rem); }
.carousel__btn--next { right: clamp(0.4rem, 1.2vw, 1.25rem); }
/* ===== About ===== */
/* Texto e imagen empiezan y terminan a la misma altura */
/* Texto 54% · foto 34% · gap 1.5% del ancho de ventana.
La foto se estira para igualar la altura del bloque completo,
desde el título "¿Quién es Ro?" hasta el último párrafo. */
.about-grid {
display: grid;
grid-template-columns: 51fr 36fr;
gap: var(--gap-cols);
align-items: stretch;
}
.about-col { display: flex; flex-direction: column; }
.about-col > .page-head { margin-bottom: 0.65rem; }
.about-text { display: flex; flex-direction: column; gap: 0; }
/* Mismo tamano de cuerpo que la bajada de Originales: son los dos
textos de lectura larga del sitio y no tienen por que diferir. */
.about-text p { line-height: var(--lh-body); font-size: var(--fs-body); }
.about-text a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); }
.about-text .spark { color: var(--c-spark); margin: 0 0.2rem; }
/* Carrusel del retrato: proporción 0.88:1, alineado a la derecha.
La altura la manda el stretch de la grilla (iguala al texto);
el aspect-ratio queda como proporción base y para mobile. */
.about-portrait {
position: relative; overflow: hidden;
background: var(--c-surface); border: 1px solid var(--c-line);
aspect-ratio: 6 / 7;
width: 100%;
justify-self: end; align-self: start;
}
.about-portrait img,
.about-portrait .about-portrait__slide {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0;
transition: opacity 1.4s ease-in-out; /* crossfade, sin corte */
will-change: opacity;
}
.about-portrait .about-portrait__slide.is-active { opacity: 1; }
.about-portrait__dots {
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 2;
}
.about-portrait__dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.5);
transition: background 0.3s ease, transform 0.3s ease;
}
.about-portrait__dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 900px) {
.about-grid { grid-template-columns: 1fr; }
.about-portrait { max-height: none; }
}
/* ===== CV — entra completo en pantalla, columnas balanceadas ===== */
.cv {
columns: 3;
column-gap: clamp(1.5rem, 3vw, 2.75rem);
max-width: 100%;
}
.cv > * { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
@media (max-width: 1100px) { .cv { columns: 2; } }
@media (max-width: 700px) { .cv { columns: 1; } }
/* Intro del CV: banda compacta a todo el ancho, encima de las columnas */
.cv-highlight {
background: var(--c-highlight); border: none; border-radius: 2px;
padding: 0.7rem 1.1rem;
display: flex; flex-direction: row; align-items: baseline;
flex-wrap: wrap; gap: 0.25rem 0.85rem;
margin-bottom: 0.9rem; column-span: all;
}
.cv-highlight__label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }
.cv-highlight__value { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-body); color: var(--c-text); }
.cv-highlight__meta { font-size: var(--fs-caption); color: var(--c-text); line-height: 1.4; }
.cv-block { display: block; margin-bottom: 1.25rem; }
.cv-block__head {
font-family: var(--f-body); font-weight: 500;
font-size: var(--fs-eyebrow); letter-spacing: 0.13em; text-transform: uppercase;
color: var(--c-accent);
padding-bottom: 0.35rem; margin-bottom: 0.2rem;
border-bottom: 1px solid var(--c-line);
}
.cv-entry {
display: block;
padding: 0.42rem 0;
border-bottom: 1px solid rgba(20, 20, 24, 0.05);
}
.cv-entry:last-child { border-bottom: none; }
.cv-entry__year {
display: block;
font-size: var(--fs-caption); color: var(--c-accent);
font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
margin-bottom: 0.1rem;
}
.cv-entry__body { display: block; }
.cv-entry__title {
display: block;
font-family: var(--f-display); font-weight: 400;
font-size: var(--fs-caption); line-height: 1.3;
}
.cv-entry__meta { display: block; font-size: var(--fs-caption); color: var(--c-text-mute); line-height: 1.45; margin-top: 0.08rem; }
.cv-entry--nodate .cv-entry__year { display: none; }
.cv-download {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: var(--fs-caption); color: var(--c-accent);
border-bottom: 1px solid var(--c-accent); align-self: flex-start;
padding-bottom: 1px; margin-top: 0.75rem;
}
.cv-download:hover { opacity: 0.7; }
/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); counter-reset: faq; }
.faq-item { border-bottom: 1px solid var(--c-line); padding: 0.85rem 0; counter-increment: faq; }
.faq-item summary {
list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.5rem;
font-family: var(--f-display); font-weight: 400;
font-size: var(--fs-subtitle); letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
content: counter(faq, decimal-leading-zero);
font-family: var(--f-body); font-weight: 400; font-size: var(--fs-eyebrow);
letter-spacing: 0.08em; color: var(--c-accent);
margin-right: 0.9rem; flex-shrink: 0; min-width: 1.8rem;
}
.faq-item summary::after { content: '+'; font-family: var(--f-body); font-size: var(--fs-body); color: var(--c-text-mute); margin-left: auto; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin-top: 0.5rem; line-height: var(--lh-body); max-width: var(--max-text); padding-left: 2.7rem; font-size: var(--fs-body); color: var(--c-text-mute); }
.faq-item p a { color: var(--c-accent); border-bottom: 1px solid var(--c-accent); }
/* ============================================
/* ============================================
VISOR ÚNICO — Originales · Prints · Galería
============================================ */
.viewer {
position: fixed; inset: 0; z-index: 1200;
background: rgba(20, 20, 24, 0.95);
display: none;
align-items: center; justify-content: center;
padding: clamp(0.75rem, 2vw, 1.5rem);
}
.viewer.is-open { display: flex; }
/* Recuadro del visor */
.viewer:not(.has-info) .viewer__box {
width: 92vw; max-width: 92vw;
max-height: 92vh; padding: 0;
}
.viewer:not(.has-info) .viewer__media { height: 92vh; }
.viewer:not(.has-info) .viewer__stage {
background: transparent; border: none;
width: 100%; height: 100%;
}
.viewer:not(.has-info) .viewer__img {
max-width: 92vw; max-height: 92vh;
}
/* Datos en franja inferior sobre la imagen, con degradado */
.viewer:not(.has-info) .viewer__meta {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
display: flex; flex-direction: column; gap: 0.15rem;
padding: 3rem 1.25rem 1rem; text-align: left;
background: linear-gradient(to top, rgba(20,20,24,0.72), transparent);
color: #fff; pointer-events: none;
}
.viewer:not(.has-info) .viewer__title { color: #fff; font-size: var(--fs-body); }
.viewer:not(.has-info) .viewer__sub,
.viewer:not(.has-info) .viewer__counter { color: rgba(255,255,255,0.75); font-size: var(--fs-caption); }
.viewer__box {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.75rem);
width: min(1180px, 100%);
/* entra siempre en pantalla: el scroll, si hace falta, va dentro
del panel de texto, nunca cortando el encabezado */
max-height: calc(100vh - 3rem);
height: auto;
/* Sin marco crema por defecto: el foco queda en la obra.
El crema vuelve solo cuando hay panel de info (Tienda). */
background: transparent;
border-radius: 4px;
padding: clamp(0.85rem, 1.8vw, 1.4rem);
overflow: hidden;
}
.viewer.has-info .viewer__box { background: var(--c-bg); }
.viewer.has-info .viewer__box { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); }
@media (max-width: 860px) {
.viewer.has-info .viewer__box { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
}
/* Miniaturas VERTICALES a la izquierda de la imagen principal */
.viewer__media {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.7rem; min-width: 0; min-height: 0;
align-items: stretch;
}
.viewer.has-info .viewer__thumbs {
flex-direction: column; flex-wrap: nowrap;
overflow-y: auto; max-height: 100%;
justify-content: flex-start; gap: 0.45rem;
order: -1;
}
.viewer.has-info .viewer__thumb { width: 62px; height: 62px; }
/* En Galería no hay miniaturas: la imagen ocupa todo */
.viewer:not(.has-info) .viewer__media { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
.viewer__media { grid-template-columns: minmax(0, 1fr); }
.viewer.has-info .viewer__thumbs {
flex-direction: row; overflow-x: auto; overflow-y: hidden;
max-height: none; order: 1;
}
.viewer.has-info .viewer__thumb { width: 52px; height: 52px; flex: 0 0 auto; }
}
.viewer__stage {
position: relative;
display: grid; place-items: center;
min-height: 0; flex: 1 1 auto;
/* Galería: negro, el foco en la obra. Tienda: crema de marca
(ver .viewer.has-info más abajo) — nunca gris. */
background: rgba(20, 20, 24, 0.55);
border: 1px solid var(--c-line);
overflow: hidden;
}
.viewer__img {
max-width: 100%; max-height: min(68vh, 620px);
width: auto; height: auto;
object-fit: contain; /* completa, sin recortar */
transition: opacity 0.35s ease;
display: block;
}
.viewer__img.is-fading { opacity: 0; }
/* Zoom contenido dentro del marco de la imagen: nunca invade el panel
de información ni el botón de compra */
.viewer__stage { overflow: hidden; }
.viewer__zoomview {
position: absolute; inset: 0;
background-repeat: no-repeat;
background-color: var(--c-surface);
opacity: 0; visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
z-index: 3; pointer-events: none;
}
.viewer.is-lensing .viewer__zoomview { opacity: 1; visibility: visible; }
.viewer.has-zoom .viewer__stage { cursor: zoom-in; }
.viewer__hint {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
font-size: var(--fs-eyebrow); letter-spacing: 0.08em;
color: var(--c-text-mute); background: rgba(244,238,226,0.85);
padding: 0.2rem 0.6rem; border-radius: 999px;
opacity: 0.9; transition: opacity 0.2s ease; pointer-events: none;
}
.viewer.is-lensing .viewer__hint { opacity: 0; }
/* ---- NAVEGACIÓN INTERNA: fotos de la misma obra ----
chica, sutil, sobre los bordes de la imagen */
.viewer__img-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(20,20,24,0.18);
background: rgba(244,238,226,0.82);
color: var(--c-text);
display: grid; place-items: center;
font-size: var(--fs-body); z-index: 4; opacity: 0.55;
transition: opacity 0.2s ease, background 0.2s ease;
}
.viewer__stage:hover .viewer__img-arrow { opacity: 0.9; }
.viewer__img-arrow:hover { opacity: 1; background: var(--c-bg); }
.viewer__img-arrow--prev { left: 8px; }
.viewer__img-arrow--next { right: 8px; }
/* display:grid pisaba el atributo hidden: hay que anularlo explícito */
.viewer__img-arrow[hidden],
.viewer__work-nav[hidden],
.viewer__thumbs[hidden] { display: none !important; }
/* ===== Tienda: modal que entra completo en pantalla ===== */
/* La imagen manda el alto; sin barras grises: fondo crema de marca */
.viewer.has-info .viewer__stage {
background: var(--c-bg);
border-color: var(--c-line);
}
.viewer.has-info .viewer__img { max-height: calc(100vh - 11rem); }
/* Obra con una sola foto: sin columna de miniaturas, imagen centrada.
Antes quedaba el hueco de la columna vacía y el texto muy separado. */
.viewer--single .viewer__media { grid-template-columns: minmax(0, 1fr); gap: 0; }
.viewer--single .viewer__thumbs { display: none !important; }
.viewer--single .viewer__stage { justify-self: center; width: 100%; }
/* Datos solo en el panel derecho: el bloque bajo la imagen es de Galería */
.viewer.has-info .viewer__meta { display: none; }
/* El encabezado nunca se corta: scrollea solo el cuerpo del panel */
.viewer.has-info .viewer__info {
display: flex; flex-direction: column;
min-height: 0; overflow: hidden;
}
.viewer.has-info .viewer__info > .viewer__crumb,
.viewer.has-info .viewer__info > .viewer__work-title,
.viewer.has-info .viewer__info > .viewer__price,
.viewer.has-info .viewer__info > .viewer__sold,
.viewer.has-info .viewer__info > .viewer__buy { flex: 0 0 auto; }
.viewer__info-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 0.6rem;
padding-right: 0.25rem;
}
.viewer__info-body::-webkit-scrollbar { width: 4px; }
.viewer__info-body::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 999px; }
/* Panel derecho: breadcrumb → título → precio → año → ficha → descripción */
.viewer__crumb {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
font-size: var(--fs-eyebrow); color: var(--c-text-mute); letter-spacing: 0.04em;
margin-bottom: 0.15rem;
}
.viewer__crumb-sep { opacity: 0.45; }
.viewer__crumb-current { color: var(--c-text); }
.viewer__desc {
font-size: var(--fs-body); line-height: 1.6; color: var(--c-text-mute);
padding-top: 0.15rem;
}
.viewer__buy {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.85rem 1.5rem; border-radius: 999px;
background: var(--c-accent); color: var(--c-bg);
font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.06em;
min-height: 46px; margin-top: 0.35rem;
transition: background 0.2s ease, transform 0.2s ease;
}
.viewer__buy:hover { background: var(--c-text); transform: translateY(-1px); }
.viewer__buy--sold { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-strong); }
.viewer__buy--sold:hover { background: var(--c-text); color: var(--c-bg); }
/* Tira de miniaturas, debajo de la imagen principal */
.viewer__thumbs {
display: flex; gap: 0.4rem; justify-content: center;
flex-wrap: wrap; flex: 0 0 auto;
}
.viewer__thumb {
width: 56px; height: 56px; padding: 0;
border: 1px solid var(--c-line); border-radius: 3px;
overflow: hidden; cursor: pointer; background: var(--c-surface);
opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.viewer__thumb.is-active { opacity: 1; border-color: var(--c-text); }
/* ---- NAVEGACIÓN EXTERNA: obra siguiente del catálogo ----
grande, en los extremos de la pantalla, fuera del recuadro */
.viewer__work-nav {
position: fixed; top: 50%; transform: translateY(-50%);
width: 64px; height: 64px; border-radius: 50%;
border: 1px solid rgba(244,238,226,0.45);
background: rgba(20,20,24,0.4);
color: var(--c-bg);
display: grid; place-items: center;
font-size: 1.9rem; line-height: 1; z-index: 1220;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.viewer__work-nav:hover {
background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg);
}
.viewer__work-nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.viewer__work-nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.viewer__work-nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.viewer__work-nav--next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 720px) {
.viewer__work-nav { width: 44px; height: 44px; font-size: var(--fs-h2); }
}
.viewer__close {
position: fixed; top: 1rem; right: 1rem;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--c-bg); color: var(--c-bg);
display: grid; place-items: center; font-size: var(--fs-h3); z-index: 1225;
transition: background 0.2s ease, color 0.2s ease;
}
.viewer__close:hover { background: var(--c-bg); color: var(--c-text); }
/* ---- Panel de información (Tienda) ---- */
.viewer__info {
display: flex; flex-direction: column; gap: 0.7rem;
overflow-y: auto; min-height: 0;
padding-right: 0.25rem;
}
.viewer__info[hidden] { display: none; }
.viewer__year { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }
.viewer__work-title {
font-family: var(--f-display); font-weight: 300;
font-size: var(--fs-h2);
letter-spacing: -0.015em; line-height: 1.1;
}
.viewer__specs {
display: flex; flex-direction: column; gap: 0.3rem;
font-size: var(--fs-caption); color: var(--c-text-mute);
padding: 0.7rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.viewer__specs strong { font-weight: 500; color: var(--c-text); margin-right: 0.3rem; }
.viewer__specs p { margin: 0; line-height: 1.45; }
.viewer__price { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); }
.viewer__shipping {
font-size: var(--fs-caption); color: var(--c-text-mute); line-height: 1.5;
padding: 0.6rem; background: var(--c-surface); border-left: 2px solid var(--c-accent);
}
.viewer__cart {
padding: 0.8rem 1.3rem; background: var(--c-text); color: var(--c-bg);
border-radius: 999px; font-size: var(--fs-caption); font-weight: 500;
letter-spacing: 0.03em; text-align: center; min-height: 42px;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.2s ease;
}
.viewer__cart:hover { background: var(--c-accent); }
.viewer__pay { display: flex; flex-direction: column; gap: 0.4rem; }
.viewer__pay-label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-mute); }
.viewer__pay-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.viewer__pay-pill { padding: 0.28rem 0.6rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: var(--fs-eyebrow); color: var(--c-text-mute); }
.viewer__pending { font-size: var(--fs-eyebrow); color: var(--c-urgent); font-style: italic; }
/* Pie: título + contador (Galería / sin panel) */
.viewer__panel { display: none; }
.viewer:not(.has-info) .viewer__media { align-items: center; }
.viewer__meta { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; }
.viewer__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-body); }
.viewer__sub { font-size: var(--fs-caption); color: var(--c-text-mute); }
.viewer__counter { font-size: var(--fs-eyebrow); color: var(--c-text-mute); letter-spacing: 0.1em; }
/* ===== Lightbox ===== */
.lightbox {
position: fixed; inset: 0; background: rgba(20, 20, 24, 0.94);
display: none; align-items: center; justify-content: center;
z-index: 1000; padding: clamp(0.75rem, 2vw, 2rem); cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__inner {
max-width: min(1100px, 100%); max-height: calc(100vh - 40px);
overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
cursor: default; scrollbar-width: thin;
}
.lightbox__inner::-webkit-scrollbar { width: 5px; }
.lightbox__inner::-webkit-scrollbar-thumb { background: rgba(244,238,226,0.35); border-radius: 999px; }
.lightbox__img { max-width: 100%; max-height: 70vh; object-fit: contain; background: var(--c-surface); margin: 0 auto; }
.lightbox__caption { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center; color: var(--c-bg); }
.lightbox__title { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-h3); }
.lightbox__close {
position: fixed; top: 1rem; right: 1rem; width: 42px; height: 42px;
border: 1px solid var(--c-bg); border-radius: 50%; color: var(--c-bg);
display: grid; place-items: center; font-size: var(--fs-h3); z-index: 1001;
transition: background 0.2s ease, color 0.2s ease;
}
.lightbox__close:hover { background: var(--c-bg); color: var(--c-text); }
.region-select { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; text-align: center; color: var(--c-bg); padding: 2rem 1rem; }
.region-select__title { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-h2); }
.region-select__buttons { display: flex; gap: 0.65rem; flex-wrap: wrap; justify-content: center; }
.region-select__btn {
padding: 0.75rem 1.4rem; border: 1px solid var(--c-bg); border-radius: 999px;
color: var(--c-bg); font-size: var(--fs-caption); font-weight: 400;
letter-spacing: 0.03em; min-height: 42px;
transition: background 0.2s ease, color 0.2s ease;
}
.region-select__btn:hover { background: var(--c-bg); color: var(--c-text); }
.region-select__note { font-size: var(--fs-caption); opacity: 0.6; max-width: 48ch; line-height: 1.5; }
/* Detail modal */
.lightbox--detail .lightbox__inner { max-width: min(1150px, 100%); background: var(--c-bg); color: var(--c-text); border-radius: 3px; overflow: hidden; }
.detail { display: grid; grid-template-columns: 1.15fr 1fr; max-height: calc(100vh - 40px); }
.detail__gallery { background: var(--c-surface); padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; overflow-y: auto; }
.detail__main { aspect-ratio: 4 / 5; background: var(--c-bg); border: 1px solid var(--c-line); overflow: hidden; position: relative; }
.detail__main img { width: 100%; height: 100%; object-fit: cover; }
.detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.detail__thumb { aspect-ratio: 1; background: var(--c-bg); border: 1px solid var(--c-line); overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease, border-color 0.2s ease; }
.detail__thumb.is-active, .detail__thumb:hover { opacity: 1; border-color: var(--c-text); }
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; border: 1px solid var(--c-line-strong); border-radius: 50%;
background: rgba(244,238,226,0.92); display: grid; place-items: center; z-index: 4;
transition: background 0.2s ease, color 0.2s ease;
}
.detail__nav:hover { background: var(--c-text); color: var(--c-bg); }
.detail__nav--prev { left: 0.65rem; }
.detail__nav--next { right: 0.65rem; }
.detail__edge { position: absolute; top: 0; bottom: 0; width: 25%; z-index: 3; }
.detail__edge--left { left: 0; cursor: w-resize; }
.detail__edge--right { right: 0; cursor: e-resize; }
.detail__info { padding: clamp(1rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.8rem; overflow-y: auto; }
.detail__year { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }
.detail__title { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 1.1; }
.detail__specs { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-caption); padding: 0.75rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); color: var(--c-text-mute); }
.detail__specs strong { font-weight: 500; color: var(--c-text); margin-right: 0.35rem; }
.detail__specs p { margin: 0; line-height: 1.45; }
.detail__price { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); }
.detail__shipping { font-size: var(--fs-caption); color: var(--c-text-mute); line-height: 1.5; padding: 0.6rem; background: var(--c-surface); border-left: 2px solid var(--c-accent); }
.detail__cart {
padding: 0.8rem 1.3rem; background: var(--c-text); color: var(--c-bg);
border-radius: 999px; font-size: var(--fs-caption); font-weight: 500;
letter-spacing: 0.03em; text-align: center; min-height: 42px;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.2s ease;
}
.detail__cart:hover { background: var(--c-accent); }
.detail__colors, .detail__sizes { display: flex; flex-direction: column; gap: 0.4rem; }
.detail__colors-label, .detail__sizes-label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-mute); font-weight: 500; }
.detail__colors-list, .detail__sizes-list { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.detail__color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-line-strong); cursor: pointer; transition: transform 0.15s ease; }
.detail__color:hover { transform: scale(1.1); }
.detail__color.is-active { border-color: var(--c-text); box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-text); }
.detail__size { padding: 0.4rem 0.8rem; border: 1px solid var(--c-line); border-radius: 999px; font-size: var(--fs-eyebrow); background: var(--c-bg); cursor: pointer; min-height: 38px; transition: background 0.15s ease, color 0.15s ease; }
.detail__size:hover { border-color: var(--c-text); }
.detail__size.is-active { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.detail__extras { font-size: var(--fs-caption); color: var(--c-text-mute); line-height: 1.5; padding: 0.6rem 0; border-top: 1px dashed var(--c-line); }
.detail__payments { display: flex; flex-direction: column; gap: 0.45rem; }
.detail__payment-label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-mute); }
.detail__payment-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.detail__payment-pill { padding: 0.3rem 0.6rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: var(--fs-eyebrow); color: var(--c-text-mute); }
.detail__pending { font-size: var(--fs-eyebrow); color: var(--c-urgent); font-style: italic; }
@media (max-width: 860px) {
.detail { grid-template-columns: 1fr; max-height: calc(100vh - 40px); overflow-y: auto; }
.detail__gallery { padding: 0.75rem; }
}
/* ===== Cart ===== */
.cart-modal {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(400px, 100%); background: var(--c-bg);
z-index: 1100; padding: 1.25rem var(--pad-x);
display: none; flex-direction: column; gap: 1rem;
box-shadow: -8px 0 32px rgba(20,20,24,0.15); overflow-y: auto;
}
.cart-modal.is-open { display: flex; }
.cart-modal__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--c-line); }
.cart-modal__title { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-h3); }
.cart-modal__close { width: 34px; height: 34px; border: 1px solid var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; transition: background 0.2s ease, color 0.2s ease; }
.cart-modal__close:hover { background: var(--c-text); color: var(--c-bg); }
.cart-modal__items { display: flex; flex-direction: column; gap: 0.75rem; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.75rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--c-line); }
.cart-item__img { aspect-ratio: 1; background: var(--c-surface); border: 1px solid var(--c-line); overflow: hidden; }
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title { font-weight: 500; font-size: var(--fs-body); }
.cart-item__year { font-size: var(--fs-caption); color: var(--c-text-mute); }
.cart-item__price { font-size: var(--fs-body); }
.cart-empty { text-align: center; color: var(--c-text-mute); font-size: var(--fs-body); padding: 2rem 1rem; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--c-line-strong); }
.cart-total__amount { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 400; }
.cart-modal__checkout { padding: 0.8rem 1.3rem; background: var(--c-text); color: var(--c-bg); border-radius: 999px; font-size: var(--fs-caption); font-weight: 500; width: 100%; min-height: 42px; transition: background 0.2s ease; }
.cart-modal__checkout:hover { background: var(--c-accent); }
.cart-modal__gateways { display: flex; flex-direction: column; gap: 0.45rem; }
.cart-modal__gateways-label { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-mute); }
.cart-modal__gateways-list { display: flex; flex-direction: column; gap: 0.4rem; }
.cart-modal__gateway { padding: 0.65rem 1rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: var(--fs-caption); text-align: center; color: var(--c-text-mute); background: var(--c-surface); cursor: not-allowed; }
.cart-modal__note { font-size: var(--fs-eyebrow); color: var(--c-text-mute); line-height: 1.5; padding-top: 0.5rem; border-top: 1px dashed var(--c-line); }
.cart-backdrop { position: fixed; inset: 0; background: rgba(20,20,24,0.5); z-index: 1099; display: none; }
.cart-backdrop.is-open { display: block; }
/* ============================================
FOOTER — cierre de venta
============================================ */
.closing {
background: var(--c-text);
color: var(--c-bg);
padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad-x);
margin-top: clamp(2rem, 4vw, 3.5rem);
position: relative;
overflow: hidden;
}
/* halo rosa sutil de fondo */
.closing::before {
content: '';
position: absolute;
top: -30%; right: -10%;
width: 55%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(238,123,176,0.16) 0%, transparent 68%);
pointer-events: none;
}
/* Mismos márgenes que el resto del sitio: el cierre estaba metido en
una caja de 1040px centrada, así que arrancaba 200px adentro de la
línea contra la que arranca todo lo demás. */
.closing__inner {
width: 100%; max-width: var(--max-w); margin: 0 auto;
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
position: relative; z-index: 1;
}
/* Bloque de cierre centrado sobre su columna, como en el mockup */
.closing__text { text-align: center; }
@media (max-width: 860px) {
.closing__inner { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
.closing__social { justify-content: center; }
.closing__cta-wrap { align-items: center; }
}
/* El otro cartel del sitio, junto con La Tienda: versales y grande */
.closing__title {
font-family: var(--f-display); font-weight: var(--fw-h1);
font-size: var(--fs-statement);
letter-spacing: -0.01em; line-height: 1.1;
text-transform: uppercase;
max-width: 20ch; margin: 0 auto;
}
@media (max-width: 860px) { .closing__title { max-width: 100%; } }
/* Sin opacidad: sobre el fondo oscuro, un 0,72 dejaba el texto en un
gris que no llegaba al contraste mínimo para leerse cómodo. */
.closing__body {
margin: 1.1rem auto 0;
font-size: var(--fs-statement-body); line-height: 1.25;
font-weight: 600; max-width: 30ch;
}
.closing__cta-wrap { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; }
.closing__cta {
display: inline-flex; align-items: center; gap: 0.65rem;
background: var(--c-accent); color: var(--c-bg);
padding: 1.15rem 2.4rem; border-radius: 999px;
font-size: var(--fs-subtitle); font-weight: 500; letter-spacing: 0.02em;
min-height: 62px;
transition: background 0.2s ease, transform 0.2s ease;
}
.closing__cta:hover { background: var(--c-spark); color: var(--c-text); transform: translateY(-2px); }
.closing__cta-arrow { font-size: var(--fs-body); transition: transform 0.2s ease; }
.closing__cta:hover .closing__cta-arrow { transform: translateX(3px); }
.closing__cta-note { font-size: var(--fs-caption); opacity: 0.85; letter-spacing: 0.02em; }
.closing__social { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.social-icon {
width: 52px; height: 52px;
border: 1px solid rgba(244,238,226,0.22);
border-radius: 50%; display: grid; place-items: center;
color: var(--c-bg); opacity: 0.75;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.social-icon:hover { background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg); opacity: 1; }
.social-icon svg { width: 23px; height: 23px; fill: currentColor; }
.social-icon--pending { opacity: 0.25; cursor: default; }
.social-icon--pending:hover { background: transparent; color: var(--c-bg); border-color: rgba(244,238,226,0.22); opacity: 0.25; }
.site-footer { border-top: 1px solid var(--c-line); padding: 0.85rem var(--pad-x); font-size: var(--fs-caption); color: var(--c-text-mute); }
.site-footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.site-footer a { color: var(--c-text); border-bottom: 1px solid var(--c-line); transition: color 0.2s ease, border-color 0.2s ease; }
.site-footer a:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* ===== Responsive ===== */
@media (max-width: 768px) {
/* --pad-y da 28px arriba y 28px abajo: 56px de aire entre una sección
y la siguiente. --pad-x deja 22px de margen lateral, para que el
texto nunca llegue al borde de la pantalla.
El tamaño de letra NO se toca acá: los clamp() de la escala ya
bajan solos en pantallas chicas. */
:root { --pad-y: 1.75rem; --pad-x: 1.375rem; --header-h: 52px; }
.product-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
/* En mobile entra 1 foto y asoma un tercio de la siguiente */
.carousel { --slide-w: 70vw; }
/* ÁREAS TÁCTILES: nada por debajo de 44x44, que es lo mínimo que un
dedo acierta sin errarle. */
.btn, .closing__cta { min-height: 44px; padding: 0.7rem 1.1rem; }
.nav__toggle, .social-icon, .nav__dropdown-arrow,
.swipe__arrow, .carousel__btn, .viewer__close, .viewer__img-arrow {
min-width: 44px; min-height: 44px;
}
/* El selector de idioma va aparte: con 44x44 por botón la pastilla
medía 90px y le comía el lugar a la hamburguesa. Baja a 38 de alto
y 36 de ancho por botón — sigue siendo un blanco cómodo — y la
pastilla entera pasa de 90 a 76. */
.lang-switch__btn {
min-width: 36px; min-height: 38px;
display: flex; align-items: center; justify-content: center;
padding: 0 0.45rem;
}
/* Un poco más adentro del borde, para que no quede pegada al canto */
.nav__toggle { margin-right: 0.5rem; }
/* Las tres líneas en cobalto: es el único elemento del encabezado que
hay que encontrar sin buscarlo. */
.nav__toggle span { background: var(--c-accent); height: 2px; }
/* En el panel la fila entera se toca, no sólo las letras: "CV" y "FAQ"
son palabras cortas y quedaban con 22px de ancho tocable. La lista
alinea a flex-start, así que hay que estirar también el . */
.nav__list > li, .nav__dropdown > li { width: 100%; }
/* En el panel la fila es link + flecha, uno al lado del otro */
.nav__item--dropdown { display: flex; align-items: center; flex-wrap: wrap; }
.nav__item--dropdown > .nav__dropdown-toggle { flex: 1 1 auto; width: auto; }
.nav__item--dropdown > .nav__dropdown { flex: 1 0 100%; }
.nav__link, .nav__sublink {
min-height: 44px; width: 100%;
display: flex; align-items: center;
}
/* El círculo se ve de 22px pero se toca en 44: el área se agranda con
un pseudo-elemento invisible, así el dedo no le erra y el diseño no
se llena de bolas gigantes. */
.product__color { width: 22px; height: 22px; }
.product__color::after {
content: ''; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px;
}
/* 22px de círculo + 22px de separación = 44px de centro a centro, que
es lo que cada uno necesita para no robarle el toque al de al lado */
.product__colors { gap: 1.375rem; }
.faq-item__q { min-height: 44px; }
/* Los links sueltos (no los que van dentro de un párrafo) también */
.site-footer a, .closing__cta, .nav__shop { min-height: 44px; display: inline-flex; align-items: center; }
/* ESPACIADO VERTICAL UNIFICADO
En mobile las secciones ya no se estiran a una pantalla completa:
el min-height dejaba huecos enormes cuando el contenido era corto
(era el aire de más entre Galería/FAQ y FAQ/footer). */
.view--framed > .page {
min-height: 0;
padding-top: var(--pad-y);
padding-bottom: var(--pad-y);
}
.page { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.page-head { margin-bottom: 0.85rem; }
/* Las secciones que no son .page traían cada una su propio padding
vertical (el hero 20px, La Tienda otro, Instagram 24px, el cierre
32px). Ahora las cuatro respiran igual que el resto: un solo valor
arriba y abajo, para que el ritmo de scroll no cambie de sección
en sección. */
.hero,
.shop-cta,
.ig,
.closing {
padding-top: var(--pad-y);
padding-bottom: var(--pad-y);
}
.closing { margin-top: 0; }
.site-footer { padding: 1.1rem var(--pad-x); }
.carousel { margin-top: 0.25rem; }
.faq-item { padding: 0.7rem 0; }
}
@media (max-width: 420px) { .product-grid { grid-template-columns: 1fr; } }
/* El cierre del panel solo existe en mobile */
@media (min-width: 1081px) { .nav__close, .nav__close-item, .nav-overlay { display: none; } }
/* =========================================================
RITMO DE LECTURA — una sola vez para todo el sitio
=========================================================
Tres referencias, en este orden de importancia:
1. Ancho de línea 45-75 caracteres. Arriba de eso, al terminar un
renglón el ojo no encuentra dónde empieza el siguiente y hay que
releer. Había bloques corriendo a 84.
2. Interlineado 1,5-1,6 para texto de lectura. Menos aprieta los
renglones, más los desarma en líneas sueltas.
3. La separación entre párrafos tiene que ser mayor que el
interlineado, si no los párrafos se leen como uno solo. Un renglón
completo (1,5rem) es la medida segura.
El principio que ordena todo: los elementos que van juntos se ven
juntos. Un subtítulo pegado a SU párrafo y separado del bloque
anterior le dice al ojo dónde empieza cada idea, sin necesidad de
líneas ni recuadros. */
.prose p,
.split-layout__text p,
.split-layout__text .lead,
.about-text p,
.faq-item p,
.shop-cta__body,
.closing__body {
max-width: var(--max-text);
line-height: var(--lh-body);
}
/* Ritmo vertical único, medido en los mockups: los renglones caen cada
22,5px y los bloques (párrafo nuevo, subtítulo, párrafo del subtítulo)
cada 44. O sea: entre bloques va un renglón entero de aire, ni más ni
menos, y siempre el mismo. Los gap de flex se pusieron en 0 arriba
para que este margen sea la única medida que manda. */
.prose p + p,
.split-layout__text p + p,
.about-text p + p,
.prose h3,
.split-layout__text h3,
.prose h3 + p,
.split-layout__text h3 + p { margin-top: 1.3rem; }
.prose h3:first-child,
.split-layout__text h3:first-child { margin-top: 0; }
/* La bajada de sección respira contra el título y contra lo que sigue */
/* Franja de tablet (861-1080px): el layout ya es de una columna pero el
nombre sigue en dos renglones, así que el bloque queda angosto y, al
atarle la bajada, ésta caía a 11,8px. Se abre la sangría de "Curtti"
para ensanchar el bloque: la bajada vuelve a un tamaño legible y la
alineación se mantiene exacta. */
/* =========================================================
UNA SOLA CAJA POR SECCIÓN
=========================================================
Antes cada pieza se alineaba contra un contenedor distinto: el título
contra la sección, la grilla contra 1120px centrados y el aviso celeste
contra 1040px. Tres rectángulos anidados, cada uno ~50px adentro del
anterior. Eso es lo que se leía como desorden.
Ahora rótulo, título, texto, aviso y grilla comparten el mismo borde
izquierdo y el mismo derecho. Efecto lateral bienvenido: las obras
crecen, porque la grilla dejó de recortarse sola.
El ritmo vertical acompaña: lo que va junto se ve junto. El rótulo casi
pegado al título; el título separado de su texto; y el aviso, que es una
interrupción, con más aire abajo que arriba, para que se lea como cierre
del bloque de texto y no como parte de las obras. */
.page-head + .callout--inline { margin-top: 1.5rem; }
.callout--inline + .product-grid,
.callout--inline + * { margin-top: 2rem; }
/* Rótulo pegado a su título, título separado de su bajada */
.page-head .eyebrow { margin-bottom: 0.15rem; }
.page-head .page-title + .page-lede,
.page-head .page-title + .page-tagline { margin-top: 0.75rem; }
/* =========================================================
ORIGINALES — bajada, aviso celeste y grilla mas juntos
=========================================================
Los tres bloques son la misma idea: que hay obras unicas, que se
pueden encargar, y aca estan. El aire que habia entre ellos los leia
como tres cosas sueltas. Solo esta seccion: Prints no tiene aviso. */
#originales .page-head + .callout--inline {
margin-top: 0.875rem; /* 14px, antes 24 */
margin-bottom: 0;
}
#originales .callout--inline + * {
margin-top: 1.125rem; /* 18px, antes 32 */
}
/* =========================================================
MODO NOCTURNO — propuesta, apagada
=========================================================
No se activa solo. Sólo pinta si alguien pone data-theme="dark"
en el , así que mientras tanto la web sigue igual que hoy.
La idea: no invertir el crema a negro puro, sino bajarlo de tono
manteniendo el matiz cálido. Un negro frío al lado de obras con
tanto color las apaga; un carbón con una pizca de marrón las deja
respirar, como la pared de una galería con luz baja.
El cobalto sube de tono: el #2E40AF que funciona sobre crema se
hunde sobre fondo oscuro y deja de leerse. */
:root[data-theme="dark"] {
--c-bg: #17161B; /* carbón cálido, no negro puro */
--c-surface: #201E25; /* un escalón más claro para las cajas */
--c-strip: #232128; /* la franja de bienvenida */
--c-text: #F2EDE4; /* el crema pasa a ser la tinta */
--c-text-soft: #A8A2B0; /* secundario, sigue pasando contraste AA */
--c-text-mute: #F2EDE4;
--c-line: rgba(255, 255, 255, 0.14);
--c-line-strong: rgba(255, 255, 255, 0.32);
--c-accent: #8B9BFF; /* cobalto aclarado para que se lea */
--c-highlight: #1E2A44; /* la caja celeste, en versión noche */
--c-support: #6E93AD;
--c-spark: #3A2C38; /* el rosa de apoyo, apagado */
--c-urgent: #FF6B60;
--c-estrella-rosa: #FF8FCB;
--c-aurora-crema: #F2EDE4;
}
/* Los pocos colores que estaban escritos a mano y no salían de la paleta.
Acá se corrigen sólo en nocturno; de día siguen como estaban. */
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .nav__list,
:root[data-theme="dark"] body.nav-is-open .site-header { background: var(--c-bg); }
:root[data-theme="dark"] .service-card.is-selected { background: var(--c-surface); }
:root[data-theme="dark"] .viewer,
:root[data-theme="dark"] .lightbox__inner { background: rgba(23, 22, 27, 0.94); }
:root[data-theme="dark"] .carousel__btn,
:root[data-theme="dark"] .swipe__arrow { background: rgba(23, 22, 27, 0.78); color: var(--c-text); }
/* El interruptor: sol de día, luna de noche. Sólo se ve uno. */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 999px;
border: 1px solid var(--c-line-strong);
color: var(--c-text);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: inline; }
@media (max-width: 1080px) {
.theme-toggle { width: 38px; height: 38px; }
}
/* =========================================================
SOBRE MÍ — valores propios de la sección
=========================================================
Todo va con el id adelante: son los números de esta sección, no del
resto del sitio. Las demás siguen con la escala general. */
#about .page-head {
/* Los aires se ponen uno por uno más abajo; el gap del flex se saca
para que no se sume a cada margen y los corra. */
gap: 0;
margin-bottom: 0;
}
#about .eyebrow {
/* Sin el margen de 2px de la regla general: acá el aire de abajo lo
pone el título con su propio margen, y si no se suman los dos. */
margin-bottom: 0;
font-size: 12px;
line-height: 20.5px;
font-weight: 400;
letter-spacing: 1.8px;
}
#about .page-title {
font-size: 26px;
line-height: 24px;
font-weight: 500;
letter-spacing: normal;
margin-top: 7px;
}
#about .page-tagline {
/* En compu son 18px y entra sobrada: ocupa 415 de los 716 de la
columna. En el teléfono a 18 se parte en dos renglones, así que ahí
se achica sola hasta entrar en uno: la frase mide 23,5 veces el
cuerpo de la letra, y dividiendo el ancho disponible por ese número
entra justa en cualquier pantalla. El min() deja los 18 apenas hay
lugar, o sea de tablet para arriba. */
font-size: min(18px, calc((100vw - 2 * var(--pad-x)) / 23.5));
line-height: 31px;
font-weight: 500;
margin-top: 13px;
}
#about .about-text { margin-top: 10px; }
#about .about-text p {
font-size: 16px;
/* Pediste 12. A 16px de letra eso deja los renglones pisándose: la
cola de la "g" choca con el renglón de abajo. 22 es el mínimo que
se lee cómodo a ese cuerpo. */
line-height: 22px;
}
#about .about-text p + p { margin-top: 10px; }
/* ---- Sobre mí en el teléfono ---- */
@media (max-width: 860px) {
/* La foto sube y queda entre la bajada y el texto. Antes arrancaba
recién a los 875px: había que scrollear una pantalla entera de
texto antes de ver la cara de Rocío. Ahora se presenta y después
cuenta.
display:contents disuelve la columna para que sus dos partes —el
encabezado y el texto— pasen a ser hermanas de la foto y se puedan
ordenar entre sí. */
.about-grid { display: flex; flex-direction: column; gap: 0; }
#about .about-col { display: contents; }
#about .page-head { order: 1; }
#about .about-portrait { order: 2; margin: 18px 0; }
#about .about-text { order: 3; margin-top: 0; }
/* Justificado, pero con partido de palabras. En una columna de 346px
entran 42 caracteres y el sobrante de un renglón llega a 63px: sin
partir, todo ese blanco se reparte entre los espacios y se abren
los "ríos" de blanco que atraviesan el párrafo. Partiendo, el
sobrante se reparte de a poco y el bloque cierra parejo.
El declara lang="es", así que el navegador parte en
castellano y no en inglés. */
#about .about-text p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
}
/* =========================================================
LA TIENDA — valores propios de la sección
========================================================= */
/* La columna de texto se estira al alto de la foto. Así el rótulo puede
clavarse arriba del todo, en la misma línea donde arranca la imagen,
y el bloque del mensaje queda centrado en lo que sobra. */
#tienda-online .shop-cta__text {
position: relative;
align-self: stretch;
justify-content: center;
/* El gap de 1,15rem que trae la regla general se suma a cada margen y
duplica los aires: 18 pedidos daban 36. Acá los aires se ponen uno
por uno, así que el gap se apaga. */
gap: 0;
}
#tienda-online .shop-cta__eyebrow {
position: absolute;
top: 0; left: 0; right: 0;
font-size: 12px;
line-height: 20.5px;
font-weight: 400;
letter-spacing: 1.8px;
margin: 0;
}
#tienda-online .shop-cta__title {
font-size: 40px;
line-height: 42px;
font-weight: 600;
letter-spacing: normal;
margin: 0;
}
/* La misma bajada que la del Home: mismo cuerpo, mismo interlineado y
espaciado normal. Es la frase que cumple el mismo papel en las dos
secciones, así que se lee igual. */
#tienda-online .shop-cta__body {
font-size: 21px;
line-height: 27.3px;
font-weight: 400;
letter-spacing: normal;
word-spacing: normal;
text-align: center;
max-width: none;
margin: 18px 0 0;
/* Sin esto la frase parte en 709 + 76 y el segundo renglón queda con
una palabra sola colgando. Con balance el navegador reparte el
texto y los dos renglones quedan parejos. */
text-wrap: balance;
}
/* Igualado a los del Home: mismo alto, misma letra, mismo relleno.
Estaba en 69 de alto con letra de 19,8, casi un 40% más grande. */
#tienda-online .shop-cta__btn {
margin-top: 32px;
align-self: center;
min-width: 230px; /* el mismo ancho que los dos del Home */
min-height: 50px;
padding: 9.6px 24px;
font-size: 15px;
letter-spacing: 0.6px;
}
/* En el teléfono no hay columna de foto al lado, así que el rótulo no
tiene con qué alinearse: vuelve al flujo, arriba del título. Sin esto
los dos arrancan en el mismo punto y se pisan. */
@media (max-width: 860px) {
#tienda-online .shop-cta__text { justify-content: flex-start; }
#tienda-online .shop-cta__eyebrow {
position: static;
margin-bottom: 7px;
}
}
/* ---- La Tienda, ajustes sobre la propuesta ---- */
/* El rótulo se apoya en el borde izquierdo de la caja de texto, no
centrado: queda en la misma vertical donde arranca el resto. */
#tienda-online .shop-cta__eyebrow { text-align: left; }
/* El título deja de ser una línea larga y pasa a ser un bloque: se le
pone un ancho máximo para que parta en tres renglones, y el reparto
automático los deja parejos entre sí en vez de dejar uno colgando. */
#tienda-online .shop-cta__title {
max-width: 500px;
text-wrap: balance;
}
/* El botón baja: de 32 a 50 de aire sobre la bajada. */
#tienda-online .shop-cta__btn { margin-top: 86px; }
/* Los 86px de aire sobre el botón son parte de la composición de compu,
donde el bloque flota centrado contra la foto. En el teléfono, apilado,
sobran. */
@media (max-width: 860px) {
#tienda-online .shop-cta__btn { margin-top: 32px; }
}
/* ---- La Tienda: dos renglones, bajada y botón más grandes ---- */
/* 660 y no 500: a 40px "TODO LO QUE ESTÁ A LA VENTA" mide 621 y
"EN UN SOLO LUGAR" 382. Con 660 el primer renglón entra entero y el
segundo no tiene dónde meterse, así que corta justo ahí. Con 500
partía en tres. */
/* Sin "balance": esa propiedad busca renglones parejos y por eso
cortaba en "a la / venta", ignorando el ancho. Con el reparto normal
manda el max-width y el corte cae donde tiene que caer. */
#tienda-online .shop-cta__title { max-width: 700px; text-wrap: wrap; }
#tienda-online .shop-cta__body { font-size: 26px; line-height: 33px; }
#tienda-online .shop-cta__btn {
min-height: 58px;
padding: 14px 34px;
font-size: 17px;
}
/* La franja de tres columnas: el problema no era la franja —es idéntica
a la del Home, 45px de alto y letra de 12,8— sino que esta sección
reclamaba la pantalla entera menos el encabezado y la franja quedaba
apretada contra el borde de abajo, a 1px del corte. El Home deja 90px
de aire; acá se dejan los 45 de la franja, así nunca queda cortada
aunque el navegador tenga la barra de marcadores abierta. */
.shop-cta { min-height: calc(100vh - var(--header-h) - 45px); }
/* El gap del flex se saca: con él puesto, cada margen que se define
abajo se le suma y los aires dejan de ser el número que dicen. */
#tienda-online .shop-cta__text { gap: 0; }
#tienda-online .shop-cta__body { margin-top: 18px; }
/* Mismo criterio que en el telefono: el boton se agrupa con la bajada,
asi que el aire de adentro del grupo es bastante menor que el que lo
separa de lo que sigue. */
#tienda-online .shop-cta__btn { margin-top: 22px; }
/* La franja se cortaba abajo porque la sección no tenía holgura: la foto
sola mide 590, más los 32 de relleno arriba y abajo, los 24 de aire
sobre la franja y sus 45, daban 693 — y con el encabezado, 749 de una
pantalla de 752. Cualquier barra de marcadores abierta la cortaba.
Se achican los rellenos y el aire sobre la franja, sin tocar la foto,
que tiene que seguir midiendo lo mismo que la de Sobre mí. */
#tienda-online { padding-top: 20px; padding-bottom: 20px; }
#tienda-online .trust-bar--inset { margin-top: 14px; margin-bottom: -20px; }
/* El piso de la sección es la foto: 590 de alto, más 81 entre rellenos,
aire y franja, dan 671 — y con el encabezado, 727. En una ventana más
baja que eso la franja cae abajo del corte hagas lo que hagas.
Así que la foto saca su ancho de la altura disponible en vez de
imponerla: con espacio queda en los 506 x 590 de Sobre mí, y cuando
la ventana es baja se achica manteniendo el 6:7 hasta que todo entra.
Los 137 son el encabezado más los 81 de la propia sección. */
#tienda-online .shop-cta__media {
width: min(100%, calc((100vh - 143px) * 6 / 7));
}
/* La foto de Sobre mí usa la MISMA cuenta que la de La Tienda, con el
mismo número: así las dos miden siempre exactamente lo mismo, tanto
en una pantalla alta —donde quedan en 506 x 590— como en una baja,
donde se achican juntas manteniendo el 6:7. */
#about .about-portrait {
width: min(100%, calc((100vh - 143px) * 6 / 7));
justify-self: end;
}
/* ---- La Tienda en el teléfono ---- */
@media (max-width: 860px) {
/* Orden nuevo: rótulo, título, imagen, bajada, botón.
display:contents disuelve la columna de texto para que sus cuatro
partes pasen a ser hermanas de la foto y se puedan intercalar. */
#tienda-online .shop-cta__inner { display: flex; flex-direction: column; gap: 0; }
#tienda-online .shop-cta__text { display: contents; }
/* El rótulo deja de estar absoluto —eso era para clavarlo al borde de
la foto en compu— y vuelve al flujo, arriba de todo y a la izquierda. */
#tienda-online .shop-cta__eyebrow {
order: 1; position: static; text-align: left; align-self: flex-start;
}
/* 26px y no 40: es el único cuerpo que parte la frase en dos renglones
parejos, 311 y 341 sobre los 346 de ancho. A 24 quedan más
desparejos y a 28 se parte en tres con "LUGAR" colgando solo.
Justificado, esos 35px de sobrante se reparten y cierra en bloque. */
#tienda-online .shop-cta__title {
order: 2;
font-size: 26px; line-height: 30px;
max-width: none;
text-align: justify; text-align-last: justify;
text-wrap: wrap;
margin-top: 14px;
}
#tienda-online .shop-cta__media { order: 3; margin-top: 18px; }
#tienda-online .shop-cta__body { order: 4; font-size: 20px; line-height: 26px; margin-top: 18px; }
#tienda-online .shop-cta__btn {
order: 5; margin-top: 24px;
min-height: 50px; padding: 12px 28px; font-size: 15px;
}
}
@media (max-width: 860px) {
/* En el teléfono esta foto estaba en 4:5 y la de Sobre mí en 6:7, así
que medían distinto. Se iguala al 6:7. De paso achica 29px, que es
justo lo que la sección se pasaba de pantalla. */
#tienda-online .shop-cta__media { aspect-ratio: 6 / 7; }
#tienda-online .shop-cta__body { margin-top: 14px; }
#tienda-online .shop-cta__btn { margin-top: 20px; }
}
/* =========================================================
ENCABEZADO EN EL TELÉFONO
=========================================================
Tenía cuatro controles: logo, ES/EN, sol/luna y hamburguesa, más la
franja de bienvenida en dos renglones. 97px de los 844 de pantalla
sólo para presentarse.
El idioma y el modo de color son preferencias, no acciones: se eligen
una vez y no se vuelven a tocar. Se mudan adentro del panel del menú,
abajo del todo, y la barra queda con lo único que se usa a cada rato:
la marca para volver al inicio, y la hamburguesa. */
@media (max-width: 1080px) {
.lang-switch,
.theme-toggle {
position: fixed;
bottom: 2rem;
z-index: 1550;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.lang-switch { right: 1.5rem; }
.theme-toggle { right: calc(1.5rem + 74px + 0.75rem); }
.nav.is-open .lang-switch,
.nav.is-open .theme-toggle { opacity: 1; pointer-events: auto; }
}
/* La bienvenida pasa a un renglón: en el teléfono se lee sólo la primera
mitad. La segunda —"donde habita lo urbano y lo onírico"— la cuenta
mejor Sobre mí, y acá costaba 23px de pantalla.
El cuerpo se achica solo en teléfonos angostos: la frase corta mide
337 y en una pantalla de 360 la columna baja a 316, así que sin esto
volvería a partirse en dos. */
@media (max-width: 720px) {
.identity-strip p {
font-size: min(14px, calc((100vw - 2 * var(--pad-x)) / 24.1));
}
}
/* =========================================================
EL PANEL DEL MENÚ EN EL TELÉFONO
=========================================================
Tenía 20,8px de aire entre cada opción y ninguna marca que las
separara: se leía como una lista suelta flotando. Ahora el aire se
va y en su lugar queda una línea, que es lo que usan las listas de
los teléfonos. Cada opción sigue midiendo 44px de alto, que es el
mínimo para que el dedo no le erre — lo que importa es el alto de
cada zona, no que haya hueco entre ellas. */
@media (max-width: 1080px) {
.nav__list {
/* El aire entre opciones vuelve: sin él, con dedo chico o con una
pantalla táctil que no afina, es fácil tocar la de al lado. */
gap: 1.3rem;
/* 118 y no 76: hay que dejar lugar arriba para el encabezado (52) y
para los dos controles que ahora viven acá. */
padding-top: 118px;
}
/* Un punto más grande, como pediste */
.nav__link { font-size: 17px; }
/* Las opciones de adentro de un desplegable se distinguen por ser más
chicas, más tenues y estar corridas a la derecha — no por una línea
que las encierre junto con su título. "Tienda" tiene que leerse como
algo que se toca, no como el encabezado de un grupo. */
.nav__sublink { font-size: 15px; color: var(--c-text-soft); }
/* El botón Comprar respira aparte: es la única acción del panel que
sale del sitio. */
.nav__shop-item { margin-top: 1.5rem; }
/* El idioma y el modo de color pasan arriba del todo, debajo del
encabezado y a la izquierda: la X queda sola a la derecha.
La cuenta del left ubica el borde izquierdo del panel y le suma su
relleno, así los controles arrancan en la misma vertical que las
opciones del menú. */
.lang-switch,
.theme-toggle {
top: 62px;
bottom: auto;
}
.lang-switch { left: calc(100vw - min(320px, 84vw) + 1.5rem); right: auto; }
.theme-toggle {
left: calc(100vw - min(320px, 84vw) + 1.5rem + 74px + 0.6rem);
right: auto;
}
}
/* =========================================================
TELÉFONO: la hamburguesa a la izquierda, la marca a la derecha
=========================================================
Y el panel abre desde la izquierda, del mismo lado que el botón que
lo llama: si el botón está a la izquierda y el panel entra por la
derecha, la mano cruza la pantalla para nada. */
@media (max-width: 1080px) {
.site-header__inner { flex-direction: row-reverse; }
.nav__list {
left: 0; right: auto;
transform: translateX(-100%);
box-shadow: 8px 0 32px rgba(20, 20, 24, 0.18);
}
/* Los controles quedan contra el borde izquierdo del panel, que ahora
es el borde de la pantalla más el relleno. */
.lang-switch { left: 1.5rem; }
.theme-toggle { left: calc(1.5rem + 74px + 0.6rem); }
}
/* =========================================================
EL MENÚ DEL TELÉFONO: lista propia, plana
========================================================= */
/* En compu la lista del teléfono no existe */
.nav__list--movil { display: none; }
@media (max-width: 1080px) {
/* La lista con desplegables se guarda; manda la plana */
.nav__list:not(.nav__list--movil) { display: none; }
.nav__list--movil { display: flex; }
/* Arriba del panel, una sola fila: el idioma y el modo de color a la
izquierda, la X a la derecha. Los tres a la misma altura. */
.nav__list--movil { padding-top: 76px; gap: 1.3rem; }
.lang-switch { top: 14px; left: 1.5rem; }
.theme-toggle { top: 15px; left: calc(1.5rem + 74px + 0.6rem); }
/* La hamburguesa vive en la barra; cuando el menú se abre, la misma
tecla se convierte en X y se muda al borde derecho del panel, para
quedar en línea con los otros dos controles. */
.nav.is-open .nav__toggle {
position: fixed;
top: 14px;
left: calc(min(320px, 84vw) - 1.5rem - 44px);
}
/* Dos puntos más grande que los 17 de antes */
.nav__list--movil .nav__link { font-size: 19px; }
}
/* =========================================================
LAS ESTRELLAS DEL BOTÓN DE LA TIENDA
=========================================================
Salen del centro del botón y se van apagando mientras suben. La capa
es fija y no recibe clicks: no se interpone con nada. */
.estrellas {
position: fixed;
z-index: 4000;
pointer-events: none;
width: 0; height: 0;
}
.estrellas__una {
position: absolute;
left: 0; top: 0;
font-size: 1.8rem;
line-height: 1;
color: var(--color-estrella, var(--c-accent));
opacity: 0;
animation: estrellaVuela 620ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes estrellaVuela {
0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
25% { opacity: 1; }
100% {
transform:
translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
scale(var(--tam)) rotate(var(--giro));
opacity: 0;
}
}
/* =========================================================
RÓTULO Y TÍTULO IGUALES EN TODA LA WEB
=========================================================
La referencia es Sobre mí. Antes cada sección tenía lo suyo: el
rótulo iba en 12,8px con peso 500 en casi todas y en 19,6 en Cuadros
a pedido —ahí el encabezado vive adentro de .prose y heredaba el
tamaño del texto de lectura—, y los títulos en 32px con peso 600.
Va con .page-head adelante para ganarle a .prose p sin subir de
especificidad: son las dos de dos clases y ésta viene después. */
.page-head { gap: 0; }
.page-head .eyebrow {
font-size: 12px;
line-height: 20.5px;
font-weight: 400;
letter-spacing: 1.8px;
margin: 0;
}
.page-head .page-title {
font-size: 26px;
line-height: 24px;
font-weight: 500;
letter-spacing: normal;
/* el aire entre el rótulo y el título */
margin: 7px 0 0;
}
/* El aire entre el título y la bajada, esté la bajada adentro del
encabezado (todas) o afuera (Cuadros a pedido, que la tiene como
hermana del header). */
.page-head > .page-tagline,
.page-head > .page-lede { margin-top: 13px; }
.page-head + .lead { margin-top: 13px; }
/* Cuadros a pedido tenía dos cosas que la sacaban de la línea del resto.
Su columna de texto se centraba verticalmente contra la foto, así que
el rótulo no arrancaba a los 32 de la sección sino a los 52. Ahora
arranca arriba, como en todas las demás. */
#comisiones-cuadros .split-layout__text { justify-content: flex-start; }
/* Y su encabezado llevaba 4px de margen abajo que se sumaban a los 13
del aire hacia la bajada, dejándola en 17. */
#comisiones-cuadros .split-layout__text > .page-head { margin-bottom: 0; }
/* En el teléfono el botón de la tienda quedaba pegado a la franja de
envíos y medios de pago: 14px, los mismos que en compu, pero acá el
botón ocupa el ancho entero y el encuentro se nota mucho más. */
@media (max-width: 860px) {
#tienda-online .trust-bar--inset { margin-top: 34px; }
}
/* ---- La Tienda en el teléfono: aire alrededor del botón ---- */
/* El botón quedaba apretado entre la bajada y la franja. Para abrirle
lugar sin que la sección se pase de pantalla, la bajada baja de 20 a
17px —con eso entra en dos renglones en vez de tres— y el botón se
achica un punto. Lo que se gana se reparte arriba y abajo de él. */
@media (max-width: 860px) {
#tienda-online .shop-cta__media { justify-self: center; }
#tienda-online .shop-cta__body {
font-size: 17px;
line-height: 22px;
}
#tienda-online .shop-cta__btn {
/* 22 arriba y 36 abajo. La bajada y el boton dicen lo mismo —mira
lo que hay, entra a verlo— asi que tienen que leerse juntos, y
eso se consigue con el aire de adentro del grupo bastante menor
que el que lo separa de la franja. Con 34 contra 36 la diferencia
no se veria y seguirian pareciendo tres cosas sueltas. */
margin-top: 22px;
min-height: 44px;
padding: 11px 28px;
font-size: 14px;
}
#tienda-online .trust-bar--inset { margin-top: 36px; margin-bottom: -12px; }
/* 12 y no 20 abajo: quedaban 4px de sobra contra el borde de la
pantalla y en un teléfono con otra altura la franja se cortaba. */
#tienda-online { padding-top: 14px; padding-bottom: 12px; }
}
/* El aire entre el rótulo y el título, igual que en Sobre mí: 7px.
Venía de 21 porque en el teléfono el rótulo deja de estar clavado
arriba y pasa a ser un bloque más de la pila, heredando la separación
general de la columna. Los 14px que se ganan suben la foto, la bajada,
el botón y la franja. */
@media (max-width: 860px) {
#tienda-online .shop-cta__eyebrow { margin: 0; }
#tienda-online .shop-cta__title { margin-top: 7px; }
}
/* =========================================================
LA TIENDA: ORIGINALES Y PRINTS
========================================================= */
/* La bajada de las dos secciones usa el cuerpo de Sobre mí y se extiende
hasta el ancho que marcaste: más largo que la medida de lectura del
resto del sitio, pero acá el texto es corto y de una sola idea. */
#originales .page-lede,
#prints .page-lede {
font-size: 16px;
line-height: 22px;
font-weight: 400;
/* 850 y no 1090: medido, el texto hasta "acrilicos," ocupa 823px, asi
que con este tope el renglon corta justo ahi y "aerosol, pasteles al
oleo y marcadores" bajan al segundo. */
max-width: 850px;
}
/* Las fichas se juntan: sin la línea de envíos debajo de cada una, el
aire que había entre columnas quedaba grande de más. */
/* Las dos grillas siempre tuvieron el mismo aire; lo que habia pasado es
que lo baje de mas. Vuelve a un valor comodo. */
.product-grid { column-gap: clamp(1.25rem, 2.2vw, 2rem); }
/* ---- El aviso de obras a pedido ----
Un rectángulo transparente de esquinas redondeadas con un degradado
borroso adentro, hecho con los colores de la paleta. El borroso es lo
que lo funde con el fondo: sin él se vería el corte de cada mancha.
Al pasar el cursor las manchas se mueven y el degradado cambia. */
.callout--aurora {
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--c-line);
border-radius: 18px;
background: transparent;
padding: 0.9rem 1.4rem;
/* La caja termina donde termina la frase, con el mismo aire adentro a
izquierda y derecha. */
width: fit-content;
max-width: 100%;
}
/* Las manchas de color. Van en un pseudo-elemento para poder moverlas
sin tocar el texto, y con una máscara que las desvanece contra los
bordes de la caja. */
.callout--aurora::before {
content: '';
position: absolute;
inset: -40%;
z-index: -1;
/* Los mismos tonos que las estrellas —el cobalto y el rosa— más el
crema. El celeste de apoyo se fue: con cuatro manchas se pisaban
entre sí y el degradado daba un gris sucio. */
background:
radial-gradient(52% 80% at 14% 42%, var(--c-accent) 0%, transparent 72%),
radial-gradient(48% 74% at 56% 62%, var(--c-estrella-rosa) 0%, transparent 70%),
radial-gradient(46% 72% at 88% 38%, var(--c-aurora-crema) 0%, transparent 70%);
opacity: 0.62;
filter: blur(28px);
/* Se mueven solas, en un ciclo de 6 segundos que vuelve al punto de
partida para que el empalme no se note. */
animation: auroraDeriva 6s ease-in-out infinite;
transition: filter 0.5s ease;
}
@keyframes auroraDeriva {
0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
33% { transform: translate3d(-9%, 5%, 0) scale(1.14) rotate(7deg); }
66% { transform: translate3d(7%, -4%, 0) scale(1.07) rotate(-6deg); }
100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
/* Al pasar el cursor el color se aviva, sin frenar la deriva */
.callout--aurora:hover::before { filter: blur(24px) saturate(1.3) brightness(1.1); }
/* Quien pidió menos movimiento en el sistema lo ve quieto */
@media (prefers-reduced-motion: reduce) {
.callout--aurora::before { animation: none; }
}
.callout--aurora .callout__body {
margin: 0;
color: var(--c-text);
text-align: center;
}
.callout--aurora .callout__body a {
color: var(--c-text);
border-bottom: 1px solid var(--c-text);
font-weight: 500;
}
.callout--aurora .callout__body a:hover { opacity: 0.7; }
/* El mismo aire que hay entre la bajada de La Tienda y su boton: 22.
El encabezado pierde su margen de abajo porque se sumaba a este y
daba 50. */
#originales .page-head { margin-bottom: 0; }
#originales .page-head + .callout--aurora { margin-top: 22px; }
/* ---- Originales y Prints en el teléfono ---- */
@media (max-width: 860px) {
/* El cuerpo y el peso se quedan como están; lo que cambia es que el
interlineado vuelve al normal y el texto se justifica, igual que en
Sobre mí. Justificado sin partir palabras abre ríos de blanco en una
columna de 346px, así que va con partido automático. */
#originales .page-lede,
#prints .page-lede {
line-height: 22px;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
max-width: none;
}
/* "Disponible para hacer obras a pedido. Escribime." tiene que entrar
en un renglón: a 16px mide más que la pantalla, así que acá se achica
hasta entrar. Medido, la frase ocupa 22,62 veces el cuerpo; el
divisor va en 23,2 para dejar un margen y no achicarla de más. */
#originales .callout--aurora {
padding: 0.7rem 0.9rem;
max-width: none;
}
#originales .callout--aurora .callout__body {
font-size: min(16px, calc((100vw - 2 * var(--pad-x) - 1.8rem) / 23.2));
white-space: nowrap;
}
}
/* De noche el degradado se perdía contra el carbón del fondo: a 38% de
opacidad los colores quedaban casi negros. Sube bastante y el borde de
la caja también, para que el rectángulo se lea como un objeto. */
:root[data-theme="dark"] .callout--aurora {
border-color: rgba(255, 255, 255, 0.22);
}
:root[data-theme="dark"] .callout--aurora::before { opacity: 0.85; }
:root[data-theme="dark"] .callout--aurora:hover::before { opacity: 1; }
/* ---- Los círculos de color de las fichas ----
Eran bolitas de 16px con un aro gris encima del color y, al elegir
una, un doble aro que la engordaba de golpe. Se veían como bolas
sueltas, no como una fila de muestras.
Ahora: más grandes, sin el aro gris —sólo una línea finita del color
del fondo, que las separa de la foto sin ensuciar el color— y el
elegido se marca con un anillo limpio que no cambia el tamaño. */
.product__colors { gap: 0.55rem; margin-top: 0.6rem; }
.product__color {
width: 20px; height: 20px;
border: 1px solid rgba(0, 0, 0, 0.18);
box-shadow: 0 0 0 2px var(--c-bg);
transition: transform 0.15s ease, box-shadow 0.18s ease;
}
:root[data-theme="dark"] .product__color {
border-color: rgba(255, 255, 255, 0.24);
}
.product__color:hover { transform: scale(1.12); }
.product__color.is-active {
transform: none;
box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3.5px var(--c-accent);
}
@media (max-width: 768px) {
/* 26px de círculo y 12 de separación: 38 de centro a centro. El área
que recibe el toque mide esos mismos 38 y no se pisa con la de al
lado, que era el motivo de los 22px de aire que había antes y que
dejaban los círculos desperdigados. */
.product__color { width: 26px; height: 26px; }
.product__color::after { width: 38px; height: 38px; }
.product__colors { gap: 0.75rem; margin-top: 0.7rem; }
}
/* Las estrellas del título de La Tienda, del mismo rosa que las que
salen de los botones. Van en un sólo porque es la etiqueta más
corta; la itálica se le quita acá. */
.shop-cta__title .estrella {
color: var(--c-estrella-rosa);
font-style: normal;
}
/* =========================================================
AIRE DE LA TIENDA: ORIGINALES Y PRINTS
=========================================================
Estaba todo demasiado junto. El aviso quedaba a 18px de la primera
fila de obras y las filas a 24 entre sí: en una tienda eso se lee
como un bloque continuo y cansa la vista. */
#originales .callout--aurora + .product-grid,
#prints .callout--aurora + .product-grid { margin-top: 48px; }
.product-grid { row-gap: 56px; }
/* Los círculos de color pertenecen a SU obra, no a la de abajo: tenían
15px hasta su propio título y 0 hasta el borde de la ficha, así que
visualmente se pegaban a la imagen de la fila siguiente. Ahora quedan
cerca del título que los nombra y el aire de la grilla los separa de
lo que viene. */
.product__colors { margin-top: 0.5rem; margin-bottom: 0; }
/* "Diseño Digital" y "Fotografía" nombran a las obras que tienen debajo,
así que no necesitan el aire entero de la grilla: con los 56px se leían
tan lejos de su grupo como del anterior. El margen negativo se come la
mitad de ese hueco y deja el rótulo pegado a lo que titula. */
.product-grid__divider { margin-bottom: -28px; }
/* =========================================================
AIRE ENTRE FILAS DE OBRAS
=========================================================
Lo que decide este número es lo que cuelga de cada obra, comparado
con el aire que hay entre la imagen y su propio pie —que son 6px—.
Mientras el de afuera sea varias veces ese, el pie se lee pegado a su
obra y no a la de abajo.
Originales: debajo de la imagen sólo va el título, 32px. Con 36 de
aire la relación contra los 6 de adentro es de 6 a 1: más que
suficiente, y la grilla deja de sentirse desarmada.
Prints: su pie mide el doble, 66px, porque suma los círculos de
color. Y esos círculos son elementos gráficos: si quedan cerca de la
imagen siguiente compiten con ella. Por eso lleva 8px más. */
#originales .product-grid { row-gap: 36px; }
#prints .product-grid { row-gap: 44px; }
/* El rótulo de categoría sigue a la mitad del aire de su grilla */
#prints .product-grid__divider { margin-bottom: -22px; }
/* =========================================================
CUADROS A PEDIDO — la misma lógica visual que Sobre mí
=========================================================
La foto y la grilla ya coincidían: 506 x 590 en la misma vertical y
columnas de 716 y 506. Lo que faltaba era el texto. */
/* La bajada y los párrafos toman el cuerpo de lectura de Sobre mí. */
#comisiones-cuadros .lead,
#comisiones-cuadros .prose > p {
font-size: 16px;
line-height: 22px;
}
/* La bajada mantiene el peso del cuerpo: es el primer párrafo, no un
título. */
#comisiones-cuadros .lead { font-weight: 400; }
/* Los subtítulos en minúscula, con el cuerpo y el peso de "Creativa por
naturaleza, estratega por formación". Se quedan en cobalto: son
cuatro y el color es lo que los deja encontrar de un vistazo. */
#comisiones-cuadros .prose h3 {
font-size: 18px;
line-height: 31px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
/* El botón arranca en el borde izquierdo del texto, no centrado. */
#comisiones-cuadros .btn { align-self: flex-start; }
@media (max-width: 860px) {
/* En el teléfono el botón sí va centrado */
#comisiones-cuadros .btn { align-self: center; }
/* Y el orden cambia: título, la bajada que explica de qué se trata,
la foto —que es la prueba de lo que se está ofreciendo— y recién
después los cuatro bloques del cómo.
display:contents disuelve la columna de texto para que sus partes
se puedan ordenar contra la foto sin tocar el HTML. */
/* gap en 0: el de la grilla se sumaba a cada margen y dejaba todos
los aires 32px mas grandes que en compu, borrando la jerarquia. */
#comisiones-cuadros .split-layout { display: flex; flex-direction: column; gap: 0; }
#comisiones-cuadros .split-layout__text { display: contents; }
#comisiones-cuadros .split-layout__text > * { order: 4; }
#comisiones-cuadros .page-head { order: 1; }
#comisiones-cuadros .lead { order: 2; }
#comisiones-cuadros .fade-carousel { order: 3; margin: 18px 0; }
}
/* En el teléfono esta foto quedaba en 4:5 y la de Sobre mí en 6:7. Con
la misma proporción las dos fotos miden lo mismo: 346 x 404. */
@media (max-width: 860px) {
#comisiones-cuadros .fade-carousel { aspect-ratio: 6 / 7; }
}
/* ---- Cuadros a pedido: color y jerarquía de los bloques ---- */
/* Los subtítulos salen del cobalto. En el sitio ese color está
reservado para lo que se puede tocar —el rótulo de sección, los
enlaces, los botones—; usarlo en cuatro títulos que no llevan a
ningún lado le quita ese significado. Van en crema con peso 600: un
escalón más que la bajada de Sobre mí, que es 500, porque acá además
organizan la sección. */
#comisiones-cuadros .prose h3 {
color: var(--c-text);
font-weight: 600;
/* Más aire arriba que abajo: así cada subtítulo abre un bloque en vez
de flotar a la misma distancia del párrafo de antes y del suyo.
Antes eran 21 y 21, o sea ninguna jerarquía. */
margin-top: 36px;
margin-bottom: 0;
}
#comisiones-cuadros .prose h3 + p { margin-top: 8px; }
#comisiones-cuadros .prose p + p { margin-top: 18px; }
/* El botón quedaba pegado al último párrafo, a 0px. */
#comisiones-cuadros .btn { margin-top: 32px; }
/* Aires apretados, en compu y en el teléfono: 16 antes de cada
subtítulo (desde la bajada o desde el texto anterior) y 5 entre el
subtítulo y su texto.
El interlineado del subtítulo baja de 31 a 20. Es una sola línea, así
que la letra no cambia; lo que se va es una franja invisible de 5,5px
arriba y abajo que hacía que los aires se vieran mucho más grandes que
el número. */
#comisiones-cuadros .prose h3 { margin-top: 16px; line-height: 20px; }
#comisiones-cuadros .prose h3 + p { margin-top: 5px; }
/* Los dos formatos van pegados, como un solo texto. Los separa el
nombre subrayado, no un hueco. */
#comisiones-cuadros .prose .formato + .formato { margin-top: 0; }
.formato__nombre {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* La foto con la misma cuenta que Sobre mí y La Tienda: en una pantalla
alta miden igual, y en una baja se achican juntas manteniendo el 6:7
para que la sección entre entera. */
#comisiones-cuadros .fade-carousel {
width: min(100%, calc((100vh - 143px) * 6 / 7));
justify-self: end;
}
/* =========================================================
FLECHAS DE LAS FOTOS — un escalón más chicas en todo el sitio
=========================================================
Todas bajan cerca de un 20% y el signo con ellas, así siguen
proporcionadas. Sobre la obra tienen que avisar que hay más fotos,
no taparla. */
.swipe__arrow,
.service-preview__arrow,
.viewer__img-arrow { width: 24px; height: 24px; font-size: 15px; }
.carousel__btn { width: 34px; height: 34px; font-size: 16px; }
.viewer__work-nav { width: 52px; height: 52px; font-size: 1.55rem; }
@media (max-width: 720px) {
.viewer__work-nav { width: 36px; height: 36px; font-size: 1.3rem; }
}
/* En el teléfono la regla de las áreas táctiles las inflaba a 44x44.
Ahora se ven de 30 pero siguen respondiendo en 44: el ::after es un
borde invisible de 7px alrededor que también recibe el toque. */
@media (max-width: 768px) {
.swipe__arrow, .carousel__btn, .viewer__img-arrow {
min-width: 0; min-height: 0;
width: 30px; height: 30px; font-size: 17px;
}
.swipe__arrow::after, .carousel__btn::after, .viewer__img-arrow::after,
.viewer__work-nav::after {
content: ''; position: absolute; inset: -7px; border-radius: 50%;
}
}
/* Con el cursor sobre la flecha cada cambio dura 0,45s y la foto queda
1,8s a la vista antes del siguiente. El fundido lento de 1,4s se
acorta mientras la flecha está apuntada, así el paso se siente ágil
sin volverse un parpadeo. */
.service-preview:has(.service-preview__arrow:hover) .service-preview__slide { transition-duration: 0.45s; }
.viewer__stage:has(.viewer__img-arrow:hover) .viewer__img { transition-duration: 0.45s; }
/* Cuadros a pedido en compu: la foto arranca a la mitad del título
"Cuadros a pedido". Son los 20,5 del renglón del rótulo, los 7 de aire
hasta el título y la mitad de su renglón de 24. Medido sobre las
letras, la mitad cae en 39: la diferencia es medio píxel. Mismo tamaño,
sólo baja. */
@media (min-width: 861px) {
#comisiones-cuadros .fade-carousel { margin-top: calc(20.5px + 7px + 12px); }
}
/* =========================================================
EL ROSA DE LA PALETA
=========================================================
El #F2DFED es el rosa de la paleta original. En nocturno --c-spark se
apagaba a #3A2C38 para usarse de fondo; este no cambia con el tema:
es el que se usa para puntos, flechas y estrellas. */
:root,
:root[data-theme="dark"] { --c-rosa: #F2DFED; }
/* Las estrellas de "☆ en un solo lugar ☆" */
.shop-cta__title .estrella { color: var(--c-rosa); }
/* De día el rosa claro sobre el crema casi desaparece: un contorno
finito lo despega del fondo sin cambiarle el color. */
:root:not([data-theme="dark"]) .shop-cta__title .estrella,
:root:not([data-theme="dark"]) .estrellas__una {
text-shadow: 0 0 1px rgba(22, 21, 26, 0.55), 0 0 2px rgba(22, 21, 26, 0.25);
}
/* =========================================================
CAJA DE FOTOS CON FUNDIDO
Sobre mí · La Tienda · Cuadros a pedido · Servicios (teléfono)
========================================================= */
.fundido { position: relative; overflow: hidden; }
.fundido .fundido__foto {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0;
transition: opacity 1.4s ease-in-out; /* el mismo fundido que Sobre mí */
}
.fundido .fundido__foto.is-active { opacity: 1; }
/* Puntos rosados abajo, sobre la foto */
.fundido__puntos {
position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
display: flex; justify-content: center; gap: 6px;
}
.fundido__punto {
width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
background: var(--c-rosa); opacity: 0.45; cursor: pointer;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fundido__punto.is-active { opacity: 1; transform: scale(1.3); }
/* Flechas rosadas: el signo y el aro en rosa, el fondo oscuro
transparente para que se lean sobre cualquier foto. */
.fundido__flecha,
.service-preview__arrow,
.carousel__btn {
border: 1px solid var(--c-rosa);
background: rgba(23, 22, 27, 0.55);
color: var(--c-rosa);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.fundido__flecha:hover,
.service-preview__arrow:hover,
.carousel__btn:hover { background: var(--c-rosa); color: #17161B; border-color: var(--c-rosa); }
:root[data-theme="dark"] .carousel__btn { background: rgba(23, 22, 27, 0.55); color: var(--c-rosa); }
:root[data-theme="dark"] .carousel__btn:hover { background: var(--c-rosa); color: #17161B; }
.fundido__flecha {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 24px; height: 24px; padding: 0; border-radius: 50%;
display: grid; place-items: center;
font-size: 15px; line-height: 1; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.fundido__flecha--prev { left: 8px; }
.fundido__flecha--next { right: 8px; }
/* En el teléfono sin flechas: las fotos pasan solas o con el dedo */
@media (max-width: 860px) {
.fundido__flecha { display: none; }
}
/* Con el cursor sobre la flecha: cambio de 0,45s, foto 1,8s a la vista */
.fundido:has(.fundido__flecha:hover) .fundido__foto { transition-duration: 0.45s; }
/* Servicios en el teléfono: la caja de cada tarjeta con el mismo recorte
5:6 de antes, tenga una foto o varias. */
.service-card__media { aspect-ratio: 5 / 6; }
.service-card__media img { height: 100%; object-fit: cover; }
/* Servicios en compu: los puntos van debajo de la caja, ahora rosados */
.service-preview__dot { background: var(--c-rosa); opacity: 0.35; }
.service-preview__dot.is-active { background: var(--c-rosa); opacity: 1; }
:root:not([data-theme="dark"]) .service-preview__dot { box-shadow: 0 0 0 1px rgba(22, 21, 26, 0.3); }
/* Los puntos de las tarjetas de la tienda, también rosados */
.product__dot { background: var(--c-rosa); opacity: 0.55; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }
.product__dot.is-active { background: var(--c-rosa); opacity: 1; }
/* El rosa de la paleta es muy claro: sobre fotos claras o con marcos
rosados los puntos desaparecían. Un aro oscuro finito los recorta de
cualquier fondo sin cambiarles el color. */
.fundido__punto,
.product__dot { box-shadow: 0 0 0 1px rgba(23, 22, 27, 0.4), 0 1px 3px rgba(0, 0, 0, 0.45); }
/* =========================================================
SERVICIOS CREATIVOS — el mismo sistema que Sobre mí
=========================================================
Rótulo y título ya eran los de todo el sitio. La pregunta toma la
bajada de Sobre mí ("Creativa por naturaleza…") y el párrafo, el
cuerpo de lectura: 16 sobre 22, a 10 de la pregunta. */
#comisiones-servicios .page-head { gap: 0; margin-bottom: 0; }
#comisiones-servicios .page-tagline {
/* 18px. Si una pantalla muy angosta no le diera lugar, se achica hasta
entrar en un renglón: "¿Querés potenciar tu negocio?" mide 14,3 veces
el cuerpo; el divisor va en 15 para dejarle un margen. En un teléfono
común entra entera a 18. */
font-size: min(18px, calc((100vw - 2 * var(--pad-x)) / 15));
line-height: 31px;
font-weight: 500;
margin-top: 13px;
text-align: left;
}
#comisiones-servicios .page-lede {
font-size: 16px;
line-height: 22px;
font-weight: 400;
margin-top: 10px;
/* El ancho de la columna de tarjetas, que es el mismo de la columna de
texto de Sobre mí: el párrafo termina donde terminan las tarjetas. */
max-width: calc((100% - var(--gap-cols)) * 51 / 87);
}
/* El mismo aire que hay entre la bajada de Originales y su recuadro */
#comisiones-servicios .services-split { margin-top: 22px; }
/* ---- Tarjetas ---- */
#comisiones-servicios .service-card {
border-radius: 12px;
padding: 14px 16px 16px;
row-gap: 5px; /* título → texto: el de los subtítulos de Cuadros */
column-gap: 12px;
/* Arriba y no centrado: las tarjetas de una misma fila miden lo mismo
y, centrado, el texto de la más corta flotaba lejos de su título. */
align-items: start;
align-content: start;
}
#comisiones-servicios .service-card__title,
#comisiones-servicios .service-card__pill { align-self: center; }
/* El nombre del servicio como los subtítulos del sitio: 18, peso 600,
en minúscula */
#comisiones-servicios .service-card__title {
font-size: 18px;
line-height: 20px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* El texto, el cuerpo de lectura de todo el sitio */
#comisiones-servicios .service-card__desc {
font-size: 16px;
line-height: 22px;
font-weight: 400;
}
/* La categoría, mucho más chica y en el mismo cobalto. Sin elegir va
solo con el contorno; la tarjeta elegida la tiene rellena. */
#comisiones-servicios .service-card__pill {
font-size: 9.5px;
line-height: 1;
font-weight: 500;
letter-spacing: 1.2px;
padding: 4px 8px;
border: 1px solid var(--c-accent);
background: transparent;
color: var(--c-accent);
transition: background 0.2s ease, color 0.2s ease;
}
#comisiones-servicios .service-card.is-selected .service-card__pill {
background: var(--c-accent);
color: var(--c-bg);
}
/* ---- El recuadro final: el de Originales, todo centrado ---- */
#comisiones-servicios .contact-box.callout--aurora {
margin: 32px auto 0;
padding: 20px 36px;
gap: 0;
align-items: center;
text-align: center;
background: transparent;
color: var(--c-text);
}
#comisiones-servicios .contact-box__title {
font-family: var(--f-body);
font-size: 18px;
line-height: 31px;
font-weight: 500;
letter-spacing: 0;
color: var(--c-text);
text-align: center;
}
#comisiones-servicios .contact-box__note {
font-size: var(--fs-caption);
line-height: 22px;
color: var(--c-text);
text-align: center;
}
#comisiones-servicios .contact-box .btn { margin-top: 16px; }
/* El título no se justifica: en el teléfono parte en dos renglones y el
primero quedaba con huecos enormes entre las palabras. */
#comisiones-servicios .page-title { text-align: left; }
/* ---- Servicios en el teléfono ---- */
@media (max-width: 900px) {
/* "Ver fotos" es una línea al pie de la tarjeta, también en la elegida:
una regla vieja la rellenaba de cobalto y competía con la categoría. */
#comisiones-servicios .service-card.is-selected .service-card__badge {
background: transparent;
color: var(--c-accent);
}
#comisiones-servicios .page-lede {
max-width: none;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
#comisiones-servicios .contact-box.callout--aurora { padding: 18px 20px; }
}
/* =========================================================
ESTRELLAS DE LOS BOTONES — un poco más grandes
========================================================= */
.estrellas__una { font-size: 2.2rem; }
/* =========================================================
PRINTS — la segunda frase entera en el segundo renglón
=========================================================
"Podés" quedaba colgado al final del primero. El corte va en el texto
y sólo en pantallas anchas: en una angosta el renglón ya corta antes y
el salto dejaría un renglón suelto. */
@media (max-width: 1000px) {
.corte-compu { display: none; }
}
/* =========================================================
SERVICIOS CREATIVOS EN COMPU — ajustes
========================================================= */
@media (min-width: 901px) {
/* La bajada en la misma caja que las de Originales y Prints */
#comisiones-servicios .page-lede { max-width: 850px; }
/* Dos puntos menos de aire hasta las tarjetas: de 22 a 20 */
#comisiones-servicios .services-split { margin-top: 20px; }
/* Tarjetas: dos puntos menos de letra, el interlineado baja con ella,
y el texto alineado a la izquierda */
#comisiones-servicios .service-card__title {
font-size: 16px;
line-height: 20px;
}
#comisiones-servicios .service-card__desc {
font-size: 14px;
line-height: 20px;
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
}
/* La categoría, dos puntos más cerca del borde de la caja, arriba y a
la derecha. Con transform se mueve sólo ella: el título no se corre. */
#comisiones-servicios .service-card__pill { transform: translate(2px, -2px); }
/* El nombre del servicio dentro de la foto: dos puntos menos y en rosa */
#comisiones-servicios .service-preview__label {
font-size: calc(var(--fs-caption) - 2px);
color: var(--c-rosa);
}
/* El recuadro final ocupa el ancho de la sección y queda lo más bajo
posible: la pregunta y la nota a la izquierda del botón, en una sola
franja. El grupo va centrado. */
#comisiones-servicios .contact-box.callout--aurora {
width: 100%;
max-width: none;
margin: 32px 0 0;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 40px;
padding: 14px 32px;
}
#comisiones-servicios .contact-box__texto,
#comisiones-servicios .contact-box__title,
#comisiones-servicios .contact-box__note { text-align: left; }
#comisiones-servicios .contact-box__title { line-height: 24px; }
#comisiones-servicios .contact-box__note { margin-top: 2px; }
#comisiones-servicios .contact-box .btn { margin-top: 0; flex: none; }
}
/* =========================================================
EL RECUADRO AURORA, TERCERA VERSIÓN — luz con grano
=========================================================
Vale para los dos: el de Originales y el de Servicios.
Sale de la primera referencia: una luz que nace rosa en la esquina de
arriba a la izquierda, pasa por lavanda y se hunde en el cobalto de la
paleta hasta el casi negro, con un grano finito encima como de foto
analógica. El texto va sobre la parte donde la luz ya bajó, con una
sombra muy suave para que siempre se lea primero.
La caja es oscura en los dos temas: es un objeto, no un fondo, y así
el texto crema tiene contraste también de día. */
.callout--aurora {
border: 1px solid rgba(255, 255, 255, 0.09);
background: #141319;
box-shadow: none;
color: #F2EDE4;
}
.callout--aurora .callout__body,
.callout--aurora .callout__body a,
.callout--aurora .contact-box__title {
color: #F2EDE4;
text-shadow: 0 1px 14px rgba(10, 10, 20, 0.55);
}
.callout--aurora .callout__body a { border-bottom-color: #F2EDE4; }
.callout--aurora::before {
inset: -30%;
background:
/* rosa de la paleta → lavanda → periwinkle → cobalto → nada */
radial-gradient(38% 120% at 12% 20%,
#F2DFED 0%, #CDB6F2 18%, #8E8CF3 38%, rgba(56, 72, 190, 0.75) 58%, transparent 78%),
/* un reflejo cobalto en la esquina opuesta, para que no quede plano */
radial-gradient(35% 120% at 96% 96%, rgba(46, 64, 175, 0.55) 0%, transparent 70%);
opacity: 1;
filter: blur(26px);
}
.callout--aurora:hover::before { filter: blur(22px) brightness(1.08); opacity: 1; }
/* El grano: ruido blanco muy tenue */
.callout--aurora::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
padding: 0;
-webkit-mask: none;
mask: none;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJyB4PScwJyB5PScwJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDEuMiAtMC4zNScvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4K");
background-size: 200px 200px;
opacity: 0.16;
mix-blend-mode: normal;
}
:root[data-theme="dark"] .callout--aurora,
:root:not([data-theme="dark"]) .callout--aurora { border-color: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .callout--aurora::before,
:root:not([data-theme="dark"]) .callout--aurora::before { opacity: 1; }
:root[data-theme="dark"] .callout--aurora:hover::before { opacity: 1; }
/* =========================================================
SERVICIOS — ajustes de lectura (compu y teléfono)
========================================================= */
/* La pregunta tenía interlineado de 31: sumaba 6,5px invisibles arriba y
abajo. Con 22, título → pregunta se ve igual que título → bajada en
Cuadros a pedido (21 medido entre letras), y la pregunta queda pegada
a su párrafo como un solo bloque. */
#comisiones-servicios .page-tagline { line-height: 22px; margin-top: 14px; }
#comisiones-servicios .page-lede { margin-top: 5px; }
/* La categoría sube hacia la esquina de la tarjeta, como la marcaste */
#comisiones-servicios .service-card__pill { transform: translate(6px, -8px); }
/* Compu: con siete tarjetas la última quedaba sola a la izquierda. Va
centrada entre las dos columnas, con el mismo ancho que las demás. */
@media (min-width: 901px) {
#comisiones-servicios .service-grid > .service-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - clamp(0.55rem, 1.1vw, 0.8rem) / 2);
}
}
/* Teléfono */
@media (max-width: 900px) {
/* El texto de las tarjetas un punto más chico que la bajada */
#comisiones-servicios .service-card__desc { font-size: 15px; line-height: 21px; }
/* Sin el anclaje automático del navegador: al abrir una tarjeta la
mantenía quieta la de abajo y la foto parecía abrirse hacia arriba.
El JS deja quieto el título de la tarjeta que se tocó. */
#comisiones-servicios { overflow-anchor: none; }
}
/* ---- El recuadro final sin la nota de presupuestos ---- */
#comisiones-servicios .contact-box__note { display: none; }
@media (max-width: 900px) {
/* La pregunta arriba y "Hagámoslo realidad." abajo, con la misma letra,
más chica que antes. La pregunta entera en un renglón pediría 9,4px
en un teléfono de 375: ilegible. A 15 ocupa dos renglones parejos. */
#comisiones-servicios .contact-box__title { font-size: 15px; line-height: 21px; }
#comisiones-servicios .contact-box__pregunta,
#comisiones-servicios .contact-box__cierre { display: block; }
#comisiones-servicios .contact-box__pregunta { text-wrap: balance; }
#comisiones-servicios .contact-box .btn { margin-top: 14px; }
}
/* =========================================================
CUADROS A PEDIDO — el botón centrado en el bloque de texto
========================================================= */
@media (min-width: 861px) {
#comisiones-cuadros .btn { align-self: center; }
}
/* =========================================================
FOTOS CON FUNDIDO EN EL TELÉFONO
========================================================= */
@media (max-width: 860px) {
/* Solas, lentas */
.fundido .fundido__foto { transition-duration: 2s; }
/* Con el dedo, rápidas: la de antes se va en 0,3s y la nueva entra
deslizándose un poco desde el lado hacia el que se movió el dedo. */
.fundido.fundido--rapido .fundido__foto { transition-duration: 0.3s; }
.fundido--desde-derecha .fundido__foto.is-active { animation: fotoDesdeDerecha 0.32s ease-out; }
.fundido--desde-izquierda .fundido__foto.is-active { animation: fotoDesdeIzquierda 0.32s ease-out; }
}
@keyframes fotoDesdeDerecha {
from { transform: translateX(10%); }
to { transform: translateX(0); }
}
@keyframes fotoDesdeIzquierda {
from { transform: translateX(-10%); }
to { transform: translateX(0); }
}
/* La caja aurora es oscura en los dos temas: la regla de Servicios que
pinta el título con el color de texto del tema lo dejaba casi negro de
día. Dentro de la caja va siempre en crema. */
#comisiones-servicios .callout--aurora .contact-box__title { color: #F2EDE4; }
/* Y el fondo: la regla de Servicios que lo dejaba transparente le ganaba
al carbón de la caja. De noche no se notaba; de día el crema de la
página se veía a través. */
#comisiones-servicios .contact-box.callout--aurora { background: #141319; }
/* =========================================================
ROSA DE LAS ESTRELLAS — más intenso, sin llegar al fucsia
========================================================= */
:root,
:root[data-theme="dark"] { --c-rosa-estrella: #E98AC0; }
.shop-cta__title .estrella { color: var(--c-rosa-estrella); }
/* Con este rosa ya no hace falta el contorno que se le había puesto de día */
:root:not([data-theme="dark"]) .shop-cta__title .estrella,
:root:not([data-theme="dark"]) .estrellas__una { text-shadow: none; }
/* ---- Gotas del logo ---- */
.gotas__una {
position: absolute;
left: 0; top: 0;
width: 14px; height: 20px;
opacity: 0;
animation: gotaVuela 720ms cubic-bezier(0.2, 0.7, 0.35, 1) both;
}
.gotas__una svg { display: block; width: 100%; height: 100%; }
@keyframes gotaVuela {
0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.2); opacity: 0; }
20% { opacity: 1; }
100% {
transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rot)) scale(var(--tam));
opacity: 0;
}
}
/* =========================================================
AURORA — la luz viaja de una esquina a la otra
=========================================================
Arranca arriba a la izquierda, se queda un momento, cruza por el
medio hasta abajo a la derecha, se queda y vuelve. Ciclo de 14s: 1,7s
quieta en cada esquina y 5,3s de viaje. Los porcentajes son del
pseudo-elemento, que mide 1,6 veces la caja: 68% y 58% llevan el
centro de la luz de una esquina a la opuesta. */
.callout--aurora::before { animation: auroraViaje 14s ease-in-out infinite; }
@keyframes auroraViaje {
0%, 12% { transform: translate3d(0, 0, 0); }
50%, 62% { transform: translate3d(68%, 58%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.callout--aurora::before { animation: none; }
}
/* ---- Aurora de día ----
La misma luz sobre el crema de la página: la caja pasa a crema claro,
el texto a tinta oscura y el grano se invierte para que se vea. */
:root:not([data-theme="dark"]) .callout--aurora,
:root:not([data-theme="dark"]) #comisiones-servicios .contact-box.callout--aurora {
background: #FAF6EE;
border-color: rgba(22, 21, 26, 0.10);
color: #16151A;
}
:root:not([data-theme="dark"]) .callout--aurora .callout__body,
:root:not([data-theme="dark"]) .callout--aurora .callout__body a,
:root:not([data-theme="dark"]) .callout--aurora .contact-box__title,
:root:not([data-theme="dark"]) #comisiones-servicios .callout--aurora .contact-box__title {
color: #16151A;
text-shadow: 0 1px 12px rgba(250, 246, 238, 0.7);
}
:root:not([data-theme="dark"]) .callout--aurora .callout__body a { border-bottom-color: #16151A; }
:root:not([data-theme="dark"]) .callout--aurora::before {
background:
radial-gradient(38% 120% at 12% 20%,
#F2DFED 0%, #E6C6EE 20%, #BDB5F8 42%, rgba(139, 155, 255, 0.45) 62%, transparent 80%),
radial-gradient(35% 120% at 96% 96%, rgba(46, 64, 175, 0.16) 0%, transparent 70%);
}
:root:not([data-theme="dark"]) .callout--aurora::after { filter: invert(1); opacity: 0.08; }
/* =========================================================
SERVICIOS — recuadro final y tarjetas
========================================================= */
@media (min-width: 901px) {
/* El botón a la derecha se perdía: va centrado, abajo de la frase */
#comisiones-servicios .contact-box.callout--aurora {
flex-direction: column;
row-gap: 14px;
padding: 18px 32px;
}
#comisiones-servicios .contact-box__texto,
#comisiones-servicios .contact-box__title { text-align: center; }
/* La séptima tarjeta, en vez de sola al medio, ocupa el ancho de las
dos columnas: se lee como el cierre de la grilla, no como una que
quedó suelta. */
#comisiones-servicios .service-grid > .service-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: stretch;
width: auto;
}
}
@media (max-width: 900px) {
/* Los puntos de la foto de compu quedaban sueltos debajo de las tarjetas */
#comisiones-servicios .service-col { display: none; }
/* La foto de cada tarjeta, más chica y centrada, con la misma
proporción 5:6 */
#comisiones-servicios .service-card__media {
width: 78%;
justify-self: center;
margin-top: 10px;
}
/* La pista: una luz finita que da vueltas por el borde de la primera
tarjeta. Casi imperceptible, pero se nota que ahí pasa algo. */
#comisiones-servicios .service-card.pista::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--pista-giro),
transparent 0deg, transparent 270deg,
var(--c-rosa-estrella) 318deg, var(--c-accent) 345deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.75;
pointer-events: none;
animation: pistaGiro 4s linear infinite;
}
}
@property --pista-giro {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes pistaGiro { to { --pista-giro: 360deg; } }
/* =========================================================
CUADROS A PEDIDO — el botón cierra la sección
========================================================= */
/* Del tamaño de los botones del Home y centrado debajo del texto y la
foto, que terminan casi a la misma altura. */
#comisiones-cuadros .cuadros__boton {
align-self: center;
margin-top: 32px;
min-width: 230px;
min-height: 50px;
padding: 9.6px 24px;
font-size: 15px;
letter-spacing: 0.6px;
justify-content: center;
}
/* Y más aire hasta la línea de la sección siguiente: 29 dejaban el botón
apretado contra ella. */
@media (min-width: 861px) {
#comisiones-cuadros.page { padding-bottom: 48px; }
}
/* =========================================================
CUADROS A PEDIDO — botón con más peso en compu
========================================================= */
/* El mismo tamaño que "Entrar a la tienda": es el otro botón del sitio
que cierra una sección entera. */
@media (min-width: 861px) {
#comisiones-cuadros .cuadros__boton {
min-width: 230px;
min-height: 58px;
padding: 14px 34px;
font-size: 17px;
}
}
/* =========================================================
GALERÍA
=========================================================
Rótulo y título ya tenían los valores de Sobre mí (12/20,5/400 y
26/24/500, a 7 de distancia). Cambia todo lo de abajo. */
/* Del título a las fotos, el mismo aire que de la bajada a las tarjetas
en Servicios. Antes sumaba 32: el margen del encabezado más el de la
tira. */
#galeria .page-head { margin-bottom: 0; }
#galeria .carousel { margin-top: 20px; }
/* Las fotos crecen hasta el límite de la sección. La altura sale de la
ventana menos todo lo demás: 32 de aire arriba, 51,5 del rótulo y el
título, 20 hasta la tira, 28 del pie y 30 de aire abajo. Antes
quedaban 86px vacíos debajo. */
#galeria .carousel {
--media-h: clamp(
calc(var(--slide-w) * 0.7),
calc(100vh - var(--header-h) - 167px),
calc(var(--slide-w) * 1.3)
);
}
/* Sin la barra de desplazamiento del navegador: la reemplaza el pie */
#galeria .carousel__track {
padding-bottom: 0;
scrollbar-width: none;
}
#galeria .carousel__track::-webkit-scrollbar { display: none; }
/* ---- El pie: progreso rosa y número de foto ---- */
.carousel__pie { margin-top: 12px; padding: 0 0.25rem; } /* alineado con la primera foto */
.carousel__progreso {
position: relative;
height: 2px;
background: var(--c-line);
border-radius: 2px;
overflow: hidden;
}
.carousel__progreso-barra {
position: absolute; top: 0; bottom: 0; left: 0;
background: var(--c-rosa-estrella);
border-radius: 2px;
}
.carousel__datos {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; margin-top: 6px; min-height: 14px;
}
.carousel__nombre { font-size: 13px; line-height: 16px; color: var(--c-text); }
.carousel__contador {
margin-left: auto;
font-size: 11px; line-height: 14px; letter-spacing: 1.4px;
color: var(--c-rosa-estrella);
font-variant-numeric: tabular-nums;
}
/* ---- Flechas más chicas ---- */
#galeria .carousel__btn { width: 28px; height: 28px; font-size: 14px; }
/* ---- El cursor que avisa que la tira se mueve, en rosa ---- */
.carousel__edge--left,
.detail__edge--left {
cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMTkgNyBMMTAgMTYgTDE5IDI1JyBmaWxsPSdub25lJyBzdHJva2U9JyMxNjE1MUEnIHN0cm9rZS13aWR0aD0nNi41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNMTkgNyBMMTAgMTYgTDE5IDI1JyBmaWxsPSdub25lJyBzdHJva2U9JyNFOThBQzAnIHN0cm9rZS13aWR0aD0nMy41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") 14 16, w-resize;
}
.carousel__edge--right,
.detail__edge--right {
cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMTMgNyBMMjIgMTYgTDEzIDI1JyBmaWxsPSdub25lJyBzdHJva2U9JyMxNjE1MUEnIHN0cm9rZS13aWR0aD0nNi41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNMTMgNyBMMjIgMTYgTDEzIDI1JyBmaWxsPSdub25lJyBzdHJva2U9JyNFOThBQzAnIHN0cm9rZS13aWR0aD0nMy41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") 18 16, e-resize;
}
/* ---- Galería en el teléfono ---- */
@media (max-width: 768px) {
/* Una foto grande al centro, con las de los costados asomando */
#galeria .carousel { --slide-w: 80vw; }
#galeria .carousel__track {
scroll-snap-type: x mandatory;
padding-left: calc((100% - var(--slide-w)) / 2);
padding-right: calc((100% - var(--slide-w)) / 2);
scroll-padding-left: calc((100% - var(--slide-w)) / 2);
}
#galeria .carousel__slide {
scroll-snap-align: center;
transform: scale(0.93);
opacity: 0.55;
transition: transform 0.35s ease, opacity 0.35s ease;
}
#galeria .carousel__slide.is-centro { transform: none; opacity: 1; }
/* Sin flechas: se desliza con el dedo, como el resto de las fotos */
#galeria .carousel__btn { display: none; }
.carousel__pie { padding: 0 calc((100% - var(--slide-w)) / 2); }
}
/* =========================================================
VISOR DE FOTOS — flechas, X y textos
=========================================================
La X y las flechas de obra usaban el color del fondo de la página: de
noche eran oscuras sobre el fondo oscuro del visor y no se veían. Van
en rosa, con fondo oscuro translúcido, igual en los dos temas. */
.viewer__close,
.viewer__work-nav {
color: var(--c-rosa);
border: 1px solid rgba(242, 223, 237, 0.45);
background: rgba(20, 20, 24, 0.45);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.viewer__close:hover,
.viewer__work-nav:hover {
background: var(--c-rosa);
color: #17161B;
border-color: var(--c-rosa);
}
/* La X se queda, más chica: en el teléfono es lo primero que se busca
para salir, aunque ya se pueda cerrar tocando afuera. */
.viewer__close { width: 38px; height: 38px; font-size: 20px; line-height: 1; }
/* Los textos de la Galería dentro del visor, en rosa */
.viewer:not(.has-info) .viewer__title { color: var(--c-rosa); }
.viewer:not(.has-info) .viewer__sub,
.viewer:not(.has-info) .viewer__counter { color: rgba(242, 223, 237, 0.75); }
/* Afuera de la foto el cursor avisa que un click cierra */
.viewer:not(.has-info) .viewer__stage { cursor: zoom-out; }
.viewer:not(.has-info) .viewer__img { cursor: default; }
/* El número de foto va a la izquierda, alineado con la primera foto: a la
derecha quedaba debajo del botón de WhatsApp. En el teléfono le sigue
el nombre de la foto del centro. */
.carousel__datos { justify-content: flex-start; gap: 8px; }
.carousel__contador { margin-left: 0; order: -1; }
.carousel__nombre:empty { display: none; }
.carousel__nombre::before { content: '·'; margin-right: 8px; color: var(--c-rosa-estrella); }
/* Con el visor abierto el botón de WhatsApp quedaba encima de la foto */
body:has(.viewer.is-open) .wa-float { display: none; }
/* =========================================================
GALERÍA — ajustes
========================================================= */
/* El cursor de los bordes, con la forma de las flechas del sitio: un
círculo oscuro transparente con aro y signo en el rosa de la paleta.
El punto activo es el centro del círculo. */
.carousel__edge--left,
.detail__edge--left {
cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48Y2lyY2xlIGN4PScxNicgY3k9JzE2JyByPScxNCcgZmlsbD0nIzE0MTMxOScgZmlsbC1vcGFjaXR5PScwLjYnIHN0cm9rZT0nI0YyREZFRCcgc3Ryb2tlLXdpZHRoPScxLjUnLz48cGF0aCBkPSdNMTguNSAxMC41IEwxMyAxNiBMMTguNSAyMS41JyBmaWxsPSdub25lJyBzdHJva2U9JyNGMkRGRUQnIHN0cm9rZS13aWR0aD0nMi4yJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") 16 16, w-resize;
}
.carousel__edge--right,
.detail__edge--right {
cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48Y2lyY2xlIGN4PScxNicgY3k9JzE2JyByPScxNCcgZmlsbD0nIzE0MTMxOScgZmlsbC1vcGFjaXR5PScwLjYnIHN0cm9rZT0nI0YyREZFRCcgc3Ryb2tlLXdpZHRoPScxLjUnLz48cGF0aCBkPSdNMTMuNSAxMC41IEwxOSAxNiBMMTMuNSAyMS41JyBmaWxsPSdub25lJyBzdHJva2U9JyNGMkRGRUQnIHN0cm9rZS13aWR0aD0nMi4yJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") 16 16, e-resize;
}
/* El rosa de la Galería es el de la paleta */
.carousel__progreso-barra { background: var(--c-rosa); }
.carousel__contador { color: var(--c-rosa); }
/* La pista de la primera tarjeta de Servicios, también con el rosa de la
paleta */
@media (max-width: 900px) {
#comisiones-servicios .service-card.pista::after {
background: conic-gradient(from var(--pista-giro),
transparent 0deg, transparent 270deg,
var(--c-rosa) 318deg, var(--c-accent) 345deg, transparent 360deg);
}
}
/* Las fotos con el mismo formato que Sobre mí, La Tienda y Cuadros: 6:7,
más altas que anchas. El alto sigue llenando la sección y el ancho sale
de ese alto. */
#galeria .carousel {
--media-h: clamp(320px, calc(100vh - var(--header-h) - 167px), 640px);
--slide-w: calc(var(--media-h) * 6 / 7);
}
@media (max-width: 768px) {
#galeria .carousel {
--slide-w: 80vw;
--media-h: calc(var(--slide-w) * 7 / 6);
}
}
/* =========================================================
VISOR — cursor normal
=========================================================
La lupa con el signo menos aparecía al ver una foto en grande. Vuelve
el cursor de siempre; cerrar tocando afuera sigue funcionando igual. */
.viewer:not(.has-info) .viewer__stage,
.viewer:not(.has-info) .viewer__img,
.lightbox { cursor: default; }
/* =========================================================
"VENDIDO" CON BORDES REDONDEADOS
========================================================= */
.product__sold,
.viewer__sold {
border-radius: 999px;
padding: 0.3rem 0.8rem;
}
/* =========================================================
EL PANEL DEL MENÚ, DE VIDRIO — como la barra de Instagram
=========================================================
Sólo donde existe la hamburguesa (teléfono y tablet). El panel deja de
ser una hoja opaca pegada al borde: flota separado 8px de los bordes,
con esquinas redondeadas, fondo semitransparente y desenfoque, así la
página se adivina detrás, borrosa. El velo de atrás se aclara y
desenfoca apenas, para que el panel sea lo que se lee primero. */
@media (max-width: 1080px) {
.nav__list,
:root[data-theme="dark"] .nav__list {
top: 8px;
bottom: 8px;
left: 8px;
width: min(320px, calc(84vw - 8px));
border-radius: 24px;
background: rgba(23, 22, 27, 0.62);
background-color: rgba(23, 22, 27, 0.62);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
/* cerrado, se va entero fuera de la pantalla: con -100% quedaban a
la vista los 8px de separación */
transform: translateX(calc(-100% - 24px));
}
.nav.is-open .nav__list,
:root[data-theme="dark"] .nav.is-open .nav__list { transform: translateX(0); }
body.nav-is-open .nav-overlay {
background: rgba(10, 10, 14, 0.30);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* Los controles de arriba y la X, corridos lo mismo que el panel */
.lang-switch { top: 22px; left: calc(8px + 1.5rem); }
.theme-toggle { top: 23px; left: calc(8px + 1.5rem + 74px + 0.6rem); }
.nav.is-open .nav__toggle {
top: 22px;
left: calc(8px + min(320px, calc(84vw - 8px)) - 1.5rem - 44px);
}
/* De día: vidrio claro y letras oscuras */
:root:not([data-theme="dark"]) .nav__list {
background: rgba(250, 246, 238, 0.68);
background-color: rgba(250, 246, 238, 0.68);
border-color: rgba(22, 21, 26, 0.08);
box-shadow: 0 18px 50px rgba(20, 20, 24, 0.18);
}
}
/* =========================================================
EL MENÚ DE VIDRIO, CON MOVIMIENTO
=========================================================
Dos cosas, las dos suaves:
· Adentro del vidrio viajan dos luces difusas de la paleta —una rosa y
otra cobalto— que se cruzan despacio de una esquina a la otra, como
el recuadro de Originales.
· Al abrir, las opciones entran de a una desde el desenfoque: arrancan
borrosas y corridas apenas a la izquierda y se aclaran en su lugar. */
@property --menu-luz-x {
syntax: '';
inherits: false;
initial-value: 18%;
}
@property --menu-luz-y {
syntax: '';
inherits: false;
initial-value: 16%;
}
@media (max-width: 1080px) {
/* :root y la doble clase: la regla del vidrio usa el atajo background,
que borra las imágenes de fondo, y tiene más peso que una clase sola */
:root .nav__list.nav__list--movil {
background-image:
radial-gradient(70% 38% at var(--menu-luz-x) var(--menu-luz-y),
rgba(242, 223, 237, 0.42), transparent 70%),
radial-gradient(65% 34% at calc(100% - var(--menu-luz-x)) calc(100% - var(--menu-luz-y)),
rgba(139, 155, 255, 0.40), transparent 70%);
background-repeat: no-repeat;
}
.nav.is-open .nav__list--movil { animation: menuLuces 12s ease-in-out infinite; }
@keyframes menuLuces {
0%, 100% { --menu-luz-x: 18%; --menu-luz-y: 16%; }
50% { --menu-luz-x: 82%; --menu-luz-y: 72%; }
}
:root:not([data-theme="dark"]) .nav__list--movil {
background-image:
radial-gradient(70% 38% at var(--menu-luz-x) var(--menu-luz-y),
rgba(233, 138, 192, 0.20), transparent 70%),
radial-gradient(65% 34% at calc(100% - var(--menu-luz-x)) calc(100% - var(--menu-luz-y)),
rgba(46, 64, 175, 0.14), transparent 70%);
}
.nav.is-open .nav__list--movil > li {
animation: menuEntra 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.nav.is-open .nav__list--movil > li:nth-child(1) { animation-delay: 0.06s; }
.nav.is-open .nav__list--movil > li:nth-child(2) { animation-delay: 0.09s; }
.nav.is-open .nav__list--movil > li:nth-child(3) { animation-delay: 0.12s; }
.nav.is-open .nav__list--movil > li:nth-child(4) { animation-delay: 0.15s; }
.nav.is-open .nav__list--movil > li:nth-child(5) { animation-delay: 0.18s; }
.nav.is-open .nav__list--movil > li:nth-child(6) { animation-delay: 0.21s; }
.nav.is-open .nav__list--movil > li:nth-child(7) { animation-delay: 0.24s; }
.nav.is-open .nav__list--movil > li:nth-child(8) { animation-delay: 0.27s; }
.nav.is-open .nav__list--movil > li:nth-child(9) { animation-delay: 0.30s; }
.nav.is-open .nav__list--movil > li:nth-child(10) { animation-delay: 0.33s; }
.nav.is-open .nav__list--movil > li:nth-child(11) { animation-delay: 0.36s; }
@keyframes menuEntra {
from { opacity: 0; filter: blur(8px); transform: translateX(-12px); }
to { opacity: 1; filter: blur(0); transform: none; }
}
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
.nav.is-open .nav__list--movil,
.nav.is-open .nav__list--movil > li { animation: none; }
}
/* =========================================================
EL MENÚ: UNA LUZ, COMO LA REFERENCIA
=========================================================
Reemplaza las dos luces sueltas. Una sola luz grande que nace rosa,
pasa por lavanda y se apaga en el cobalto hasta el oscuro del vidrio.
Sin grano: la luz queda lisa, sólo difuminada.
· Cada vez que se abre el menú la luz arranca en otra esquina (la
elige el JS, nunca la misma dos veces seguidas).
· Mientras está abierto se corre despacio unos centímetros, ida y
vuelta cada 9 segundos.
La luz es baja y las opciones llevan una sombra muy suave: lo que se
lee primero es el texto. */
@property --menu-deriva-x {
syntax: '';
inherits: false;
initial-value: 0%;
}
@property --menu-deriva-y {
syntax: '';
inherits: false;
initial-value: 0%;
}
@media (max-width: 1080px) {
:root .nav__list.nav__list--movil {
background-color: rgba(20, 19, 25, 0.74);
background-image:
radial-gradient(95% 58% at
calc(var(--menu-base-x, 86%) + var(--menu-deriva-x))
calc(var(--menu-base-y, 10%) + var(--menu-deriva-y)),
rgba(242, 223, 237, 0.54) 0%,
rgba(205, 182, 242, 0.42) 18%,
rgba(142, 140, 243, 0.34) 38%,
rgba(56, 72, 190, 0.24) 58%,
transparent 80%);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.nav.is-open .nav__list--movil { animation: menuDeriva 9s ease-in-out infinite alternate; }
@keyframes menuDeriva {
from { --menu-deriva-x: -6%; --menu-deriva-y: -4%; }
to { --menu-deriva-x: 8%; --menu-deriva-y: 10%; }
}
.nav__list--movil .nav__link { text-shadow: 0 1px 12px rgba(10, 10, 20, 0.45); }
/* De día: vidrio claro y la misma luz, más suave */
:root:not([data-theme="dark"]) .nav__list.nav__list--movil {
background-color: rgba(250, 246, 238, 0.74);
background-image:
radial-gradient(95% 58% at
calc(var(--menu-base-x, 86%) + var(--menu-deriva-x))
calc(var(--menu-base-y, 10%) + var(--menu-deriva-y)),
rgba(233, 138, 192, 0.30) 0%,
rgba(205, 182, 242, 0.30) 20%,
rgba(139, 155, 255, 0.22) 42%,
transparent 78%);
}
:root:not([data-theme="dark"]) .nav__list--movil .nav__link { text-shadow: none; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
.nav.is-open .nav__list--movil { animation: none; }
}
/* =========================================================
GALERÍA EN EL TELÉFONO — más aire antes de la línea
=========================================================
La sección siguiente empezaba a 28px del número de foto: la Galería
no terminaba, se cortaba. 48, el mismo aire que cierra Cuadros a
pedido en compu antes de su línea. */
@media (max-width: 768px) {
#galeria.page { padding-bottom: 48px; }
}
/* =========================================================
GALERÍA EN EL TELÉFONO — la primera foto vuelve al borde
=========================================================
Para centrar cada foto la tira tenía relleno a los costados, y la
primera quedaba corrida con aire de más a la izquierda. Vuelve el
relleno de antes y cada foto encaja contra el borde izquierdo; la
siguiente asoma a la derecha. */
@media (max-width: 768px) {
#galeria .carousel__track {
padding-left: 0.25rem;
padding-right: 0.25rem;
scroll-padding-left: 0.25rem;
}
#galeria .carousel__slide { scroll-snap-align: start; transform-origin: left center; }
#galeria .carousel__pie { padding: 0 0.25rem; }
}
/* =========================================================
EL MENÚ: MANCHAS DE LUZ QUE RECORREN LOS BORDES
=========================================================
Reemplaza la luz redonda. La referencia de movimiento es la de los
fondos tipo "aurora" o "lava" de Stripe, Linear o Apple: manchas de
forma irregular que cambian de contorno mientras se desplazan, cada
una a su propio ritmo, así nunca se repite el mismo dibujo.
· Una mancha rosa-lavanda recorre el borde izquierdo y la de abajo.
· Una cobalto recorre el borde derecho y el de arriba.
· Van por los bordes y los extremos, casi nunca por el medio, que es
donde están las opciones.
· Muy bajas: 28% y 24% de opacidad, bien difuminadas.
· Cada vez que se abre el menú arrancan en otro punto del recorrido
(el JS les cambia el desfase). Sin grano. */
@media (max-width: 1080px) {
:root .nav__list.nav__list--movil,
:root:not([data-theme="dark"]) .nav__list.nav__list--movil { background-image: none; }
.nav.is-open .nav__list--movil { animation: none; }
.nav__list--movil { isolation: isolate; }
.nav__list--movil::before,
.nav__list--movil::after {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
width: 90%;
height: 44%;
filter: blur(44px);
opacity: 0;
transition: opacity 0.7s ease;
animation-play-state: paused;
}
.nav__list--movil::before {
left: -38%;
top: -14%;
background: radial-gradient(closest-side,
rgba(242, 223, 237, 0.95), rgba(205, 182, 242, 0.7) 45%, rgba(142, 140, 243, 0) 100%);
border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
animation: menuManchaRosa 19s ease-in-out infinite alternate;
animation-delay: var(--menu-desfase-rosa, 0s);
}
.nav__list--movil::after {
right: -40%;
bottom: -14%;
background: radial-gradient(closest-side,
rgba(139, 155, 255, 0.95), rgba(76, 90, 210, 0.6) 50%, rgba(46, 64, 175, 0) 100%);
border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%;
animation: menuManchaCobalto 25s ease-in-out infinite alternate;
animation-delay: var(--menu-desfase-cobalto, 0s);
}
.nav.is-open .nav__list--movil::before { opacity: 0.28; animation-play-state: running; }
.nav.is-open .nav__list--movil::after { opacity: 0.24; animation-play-state: running; }
/* La rosa baja por la izquierda, dobla por abajo y sube un poco por
la derecha, cambiando de forma en cada tramo */
@keyframes menuManchaRosa {
0% { transform: translate(0, 0) rotate(0deg); border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%; }
30% { transform: translate(-6%, 75%) rotate(18deg); border-radius: 45% 55% 38% 62% / 60% 42% 58% 40%; }
60% { transform: translate(8%, 175%) rotate(-12deg); border-radius: 55% 45% 65% 35% / 40% 58% 42% 60%; }
100% { transform: translate(78%, 160%) rotate(26deg); border-radius: 38% 62% 48% 52% / 55% 45% 55% 45%; }
}
/* La cobalto sube por la derecha, cruza por arriba y baja un poco por
la izquierda */
@keyframes menuManchaCobalto {
0% { transform: translate(0, 0) rotate(0deg); border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; }
35% { transform: translate(6%, -85%) rotate(-20deg); border-radius: 58% 42% 60% 40% / 45% 55% 45% 55%; }
70% { transform: translate(-10%, -180%) rotate(14deg); border-radius: 36% 64% 42% 58% / 58% 38% 62% 42%; }
100% { transform: translate(-80%, -165%) rotate(-24deg); border-radius: 52% 48% 38% 62% / 42% 60% 40% 58%; }
}
/* De día, las mismas manchas con el rosa intenso y más bajas */
:root:not([data-theme="dark"]) .nav__list--movil::before {
background: radial-gradient(closest-side,
rgba(233, 138, 192, 0.9), rgba(205, 182, 242, 0.6) 45%, rgba(205, 182, 242, 0) 100%);
}
:root:not([data-theme="dark"]) .nav.is-open .nav__list--movil::before { opacity: 0.22; }
:root:not([data-theme="dark"]) .nav.is-open .nav__list--movil::after { opacity: 0.14; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
.nav__list--movil::before,
.nav__list--movil::after { animation: none; }
}
/* =========================================================
MENÚ — las manchas se mueven mientras está abierto
=========================================================
Ya se movían, pero en 19 y 25 segundos: en los tres o cuatro que el
menú queda abierto el cambio casi no se notaba. Ahora el viaje dura 9
y 12 segundos, así el movimiento se ve mientras se elige una opción, y
arrancan siempre desde el principio de su recorrido. */
@media (max-width: 1080px) {
.nav__list--movil::before { animation-duration: 9s; animation-delay: 0s; }
.nav__list--movil::after { animation-duration: 12s; animation-delay: 0s; }
}
/* =========================================================
PRINTS — círculos de color más chicos
=========================================================
14px en compu y en el teléfono: se leen como una muestra de color al
pie de la foto y no como botones. El elegido lleva un aro separado del
círculo, en el rosa de la paleta de noche y en cobalto de día (el rosa
claro sobre crema no se ve). En el teléfono el área que recibe el
dedo sigue midiendo 28px, sin pisarse con la del lado. */
.product__colors { gap: 6px; }
.product__color,
:root[data-theme="dark"] .product__color {
width: 14px;
height: 14px;
box-shadow: none;
}
.product__color:hover { transform: scale(1.15); }
.product__color.is-active {
transform: none;
box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-accent);
}
:root[data-theme="dark"] .product__color.is-active {
box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-rosa);
}
@media (max-width: 768px) {
.product__color { width: 14px; height: 14px; }
.product__color::after { width: 28px; height: 28px; }
.product__colors { gap: 14px; }
}
/* =========================================================
PRINTS — líneas de DISEÑO DIGITAL y FOTOGRAFÍA en rosa
========================================================= */
#prints .product-grid__divider { border-bottom-color: #F2DFED; }
/* =========================================================
ESTRELLAS — en el rosa claro de la paleta
========================================================= */
:root,
:root[data-theme="dark"] { --c-rosa-estrella: #F2DFED; }
/* De día, el rosa claro sobre el crema necesita el contorno finito */
:root:not([data-theme="dark"]) .shop-cta__title .estrella,
:root:not([data-theme="dark"]) .estrellas__una {
text-shadow: 0 0 1px rgba(22, 21, 26, 0.55), 0 0 2px rgba(22, 21, 26, 0.25);
}
/* =========================================================
LA TIENDA — el marco que llama a comprar (prototipo)
=========================================================
Referencias: el "border beam" que usan Vercel, Clerk y Magic UI (una
luz que recorre el borde de un recuadro) y el "spotlight" de las
tarjetas de Linear y Vercel (una luz adentro que sigue al cursor).
· En compu, el título, la bajada y el botón quedan dentro de un
rectángulo de esquinas redondeadas. Por su borde da vueltas una luz
rosa → lavanda → cobalto, una vuelta cada 6 segundos.
· Adentro, una luz muy suave pasea sola y sigue al cursor (main.js).
· En el teléfono el rectángulo no existe: la luz da vueltas alrededor
del botón "Entrar a la tienda".
El marco sobresale 24px a cada lado del texto sin mover nada: el
título, la bajada y el botón quedan donde estaban. */
@property --tienda-giro {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes tiendaGiro { to { --tienda-giro: 360deg; } }
@media (min-width: 861px) {
#tienda-online .tienda__marco {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% + 48px);
padding: 40px 24px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.015);
}
/* La luz que da vueltas por el borde, sobre un borde base apenas visible */
#tienda-online .tienda__marco::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
padding: 1.5px;
background:
conic-gradient(from var(--tienda-giro),
rgba(242, 223, 237, 0) 0deg,
rgba(242, 223, 237, 0) 210deg,
rgba(242, 223, 237, 0.95) 280deg,
rgba(205, 182, 242, 0.95) 312deg,
rgba(139, 155, 255, 0.95) 340deg,
rgba(139, 155, 255, 0) 360deg),
linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: tiendaGiro 6s linear infinite;
}
/* La luz de adentro */
#tienda-online .tienda__marco::after {
content: '';
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(360px 260px at var(--luz-x, 50%) var(--luz-y, 45%),
rgba(205, 182, 242, 0.17), rgba(139, 155, 255, 0.08) 45%, transparent 75%);
}
:root:not([data-theme="dark"]) #tienda-online .tienda__marco::before {
background:
conic-gradient(from var(--tienda-giro),
rgba(46, 64, 175, 0) 0deg,
rgba(46, 64, 175, 0) 210deg,
rgba(233, 138, 192, 0.9) 280deg,
rgba(139, 155, 255, 0.95) 312deg,
rgba(46, 64, 175, 0.95) 340deg,
rgba(46, 64, 175, 0) 360deg),
linear-gradient(rgba(22, 21, 26, 0.08), rgba(22, 21, 26, 0.08));
}
:root:not([data-theme="dark"]) #tienda-online .tienda__marco::after {
background: radial-gradient(360px 260px at var(--luz-x, 50%) var(--luz-y, 45%),
rgba(139, 155, 255, 0.14), rgba(205, 182, 242, 0.08) 45%, transparent 75%);
}
}
@media (max-width: 860px) {
#tienda-online .tienda__marco { display: contents; }
#tienda-online .shop-cta__btn { position: relative; isolation: isolate; }
#tienda-online .shop-cta__btn::before {
content: '';
position: absolute;
inset: -4px;
z-index: -1;
pointer-events: none;
border-radius: 999px;
padding: 2px;
background: conic-gradient(from var(--tienda-giro),
rgba(242, 223, 237, 0) 0deg,
rgba(242, 223, 237, 0) 190deg,
#F2DFED 275deg, #CDB6F2 312deg, #8B9BFF 345deg,
rgba(139, 155, 255, 0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: tiendaGiro 3.5s linear infinite;
}
}
@media (prefers-reduced-motion: reduce) {
#tienda-online .tienda__marco::before,
#tienda-online .shop-cta__btn::before { animation: none; }
}
/* =========================================================
MENÚ — fijo, sin desplazarse
=========================================================
Las manchas de luz sobresalían del panel y lo volvían desplazable: el
contenido medía 427 de ancho en un panel de 305 y 905 de alto en uno
de 794. Ahora el panel recorta todo y no se mueve para ningún lado.
Para que las once opciones entren enteras también en teléfonos bajos
(667px), el aire entre ellas baja de 20,8 a 8 y el de arriba de 76 a
68. Cada opción sigue midiendo 44px de alto para el dedo. */
@media (max-width: 1080px) {
.nav__list.nav__list--movil {
overflow: hidden;
overflow: clip; /* ni siquiera se puede mover por código */
overscroll-behavior: contain;
touch-action: none;
gap: 8px;
padding-top: 68px;
padding-bottom: 16px;
}
/* Las manchas, en rosa: el rosa de la paleta tal cual, difuminado sobre
oscuro, se veía blanco. Una rosa y otra rosa-lavanda. */
.nav__list--movil::before {
background: radial-gradient(closest-side,
rgba(236, 160, 205, 0.95), rgba(228, 150, 205, 0.6) 45%, rgba(228, 150, 205, 0) 100%);
}
.nav__list--movil::after {
background: radial-gradient(closest-side,
rgba(214, 160, 230, 0.9), rgba(236, 160, 205, 0.55) 50%, rgba(236, 160, 205, 0) 100%);
}
.nav.is-open .nav__list--movil::before { opacity: 0.34; }
.nav.is-open .nav__list--movil::after { opacity: 0.28; }
}
/* =========================================================
PROPUESTA DE COLOR Y DETALLES — 13/09/2026
========================================================= */
/* ---- 1. Sin rojo ----
El rojo #D7352B daba 4,1 sobre el crema: no alcanza para texto chico.
Los avisos de "pendiente" pasan al gris de texto secundario. */
.viewer__pending,
.detail__pending { color: var(--c-text-soft); }
/* ---- 2. El rosa de la paleta, de día, pasa a negro ----
#F2DFED sobre el crema da 1,1: no se ve. De noche sigue rosa. Donde el
rosa estaba apoyado sobre algo oscuro también de día (el visor de
fotos) se queda rosa, porque ahí sí se lee. */
:root:not([data-theme="dark"]) {
--c-rosa: #16151A;
--c-rosa-estrella: #16151A;
}
:root:not([data-theme="dark"]) .shop-cta__title .estrella,
:root:not([data-theme="dark"]) .estrellas__una { text-shadow: none; }
:root:not([data-theme="dark"]) #prints .product-grid__divider { border-bottom-color: #16151A; }
/* Flechas sobre las fotos: de día, vidrio claro con el signo negro */
:root:not([data-theme="dark"]) .fundido__flecha,
:root:not([data-theme="dark"]) .service-preview__arrow,
:root:not([data-theme="dark"]) .carousel__btn {
background: rgba(250, 246, 238, 0.78);
border-color: rgba(22, 21, 26, 0.35);
color: #16151A;
}
:root:not([data-theme="dark"]) .fundido__flecha:hover,
:root:not([data-theme="dark"]) .service-preview__arrow:hover,
:root:not([data-theme="dark"]) .carousel__btn:hover {
background: #16151A;
border-color: #16151A;
color: #F4EDE1;
}
/* Puntos sobre las fotos: de día negros, con un aro claro que los recorta */
:root:not([data-theme="dark"]) .fundido__punto,
:root:not([data-theme="dark"]) .product__dot {
box-shadow: 0 0 0 1px rgba(250, 246, 238, 0.75), 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* El visor es oscuro en los dos modos: ahí el rosa se queda */
.viewer__close,
.viewer__work-nav,
:root:not([data-theme="dark"]) .viewer__close,
:root:not([data-theme="dark"]) .viewer__work-nav { color: #F2DFED; border-color: rgba(242, 223, 237, 0.45); }
.viewer__close:hover,
.viewer__work-nav:hover { background: #F2DFED; color: #17161B; border-color: #F2DFED; }
.viewer:not(.has-info) .viewer__title { color: #F2DFED; }
/* ---- 3. Botones: cobalto con texto claro, siempre ----
De noche el botón era #8B9BFF con letra oscura. Con letra clara ese
azul daba 2,2 de contraste. #4A5AD6 da 4,8 con el crema encima y 3,2
contra el fondo: pasa las dos cosas. De día sigue el #2E40AF (7,3). */
:root { --c-boton: #2E40AF; --c-boton-texto: #F4EDE1; }
:root[data-theme="dark"] { --c-boton: #4A5AD6; --c-boton-texto: #F2EDE4; }
.btn--solid,
.contact-box .btn--solid,
.split-layout__text .btn--solid,
.nav__shop,
.viewer__buy:not(.viewer__buy--sold) {
background: var(--c-boton);
border-color: var(--c-boton);
color: var(--c-boton-texto);
}
.btn--solid:hover,
.contact-box .btn--solid:hover,
.split-layout__text .btn--solid:hover,
.nav__shop:hover,
.viewer__buy:not(.viewer__buy--sold):hover {
background: var(--c-text);
border-color: var(--c-text);
color: var(--c-bg);
}
/* ---- 4. Los recuadros con luz, en celeste y con texto claro ----
El lavanda no salía de la paleta. Ahora la luz nace en el rosa, pasa
por el celeste (#BFE0F2 y el celeste de apoyo #8FBDD9) y se apaga en
el cobalto, sobre un azul noche. Igual en los dos modos, con el texto
siempre en crema. */
.callout--aurora,
:root[data-theme="dark"] .callout--aurora,
:root:not([data-theme="dark"]) .callout--aurora,
#comisiones-servicios .contact-box.callout--aurora,
:root:not([data-theme="dark"]) #comisiones-servicios .contact-box.callout--aurora {
background: #172045;
border-color: rgba(143, 189, 217, 0.22);
color: #F2EDE4;
}
.callout--aurora::before,
:root[data-theme="dark"] .callout--aurora::before,
:root:not([data-theme="dark"]) .callout--aurora::before {
background:
radial-gradient(38% 120% at 12% 20%,
#F2DFED 0%, #BFE0F2 18%, #8FBDD9 38%, rgba(46, 64, 175, 0.75) 58%, transparent 78%),
radial-gradient(35% 120% at 96% 96%, rgba(143, 189, 217, 0.35) 0%, transparent 70%);
opacity: 0.9;
}
:root:not([data-theme="dark"]) .callout--aurora::after { filter: none; opacity: 0.16; }
:root:not([data-theme="dark"]) .callout--aurora .callout__body,
:root:not([data-theme="dark"]) .callout--aurora .callout__body a,
:root:not([data-theme="dark"]) .callout--aurora .contact-box__title,
:root:not([data-theme="dark"]) #comisiones-servicios .callout--aurora .contact-box__title,
.callout--aurora .callout__body,
.callout--aurora .contact-box__title {
color: #F2EDE4;
text-shadow: 0 1px 14px rgba(10, 14, 40, 0.6);
}
:root:not([data-theme="dark"]) .callout--aurora .callout__body a { border-bottom-color: #F2EDE4; }
/* ---- El marco de La Tienda, también en celeste ---- */
@media (min-width: 861px) {
#tienda-online .tienda__marco::before {
background:
conic-gradient(from var(--tienda-giro),
rgba(242, 223, 237, 0) 0deg,
rgba(242, 223, 237, 0) 210deg,
rgba(242, 223, 237, 0.95) 280deg,
rgba(191, 224, 242, 0.95) 310deg,
rgba(143, 189, 217, 0.95) 332deg,
rgba(74, 90, 214, 0.95) 350deg,
rgba(74, 90, 214, 0) 360deg),
linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}
#tienda-online .tienda__marco::after {
background: radial-gradient(360px 260px at var(--luz-x, 50%) var(--luz-y, 45%),
rgba(143, 189, 217, 0.16), rgba(46, 64, 175, 0.08) 45%, transparent 75%);
}
:root:not([data-theme="dark"]) #tienda-online .tienda__marco::before {
background:
conic-gradient(from var(--tienda-giro),
rgba(46, 64, 175, 0) 0deg,
rgba(46, 64, 175, 0) 210deg,
rgba(143, 189, 217, 0.95) 290deg,
rgba(46, 64, 175, 0.95) 340deg,
rgba(46, 64, 175, 0) 360deg),
linear-gradient(rgba(22, 21, 26, 0.08), rgba(22, 21, 26, 0.08));
}
:root:not([data-theme="dark"]) #tienda-online .tienda__marco::after {
background: radial-gradient(360px 260px at var(--luz-x, 50%) var(--luz-y, 45%),
rgba(143, 189, 217, 0.22), rgba(46, 64, 175, 0.06) 45%, transparent 75%);
}
}
/* ---- 5. La Tienda en el teléfono: el botón sin relleno ----
El relleno tapaba la luz. Ahora el botón es sólo su borde, con la luz
dando vueltas justo sobre él, y un poco más grande. */
@media (max-width: 860px) {
#tienda-online .shop-cta__btn,
#tienda-online .shop-cta__btn:hover {
background: transparent;
border-color: transparent;
color: var(--c-text);
min-height: 56px;
padding: 14px 34px;
font-size: 16px;
}
#tienda-online .shop-cta__btn::before {
inset: 0;
padding: 1.5px;
background:
conic-gradient(from var(--tienda-giro),
rgba(242, 223, 237, 0) 0deg,
rgba(242, 223, 237, 0) 150deg,
#F2DFED 250deg, #BFE0F2 295deg, #8FBDD9 325deg, #4A5AD6 350deg,
rgba(74, 90, 214, 0) 360deg),
linear-gradient(rgba(242, 237, 228, 0.22), rgba(242, 237, 228, 0.22));
}
:root:not([data-theme="dark"]) #tienda-online .shop-cta__btn::before {
background:
conic-gradient(from var(--tienda-giro),
rgba(46, 64, 175, 0) 0deg,
rgba(46, 64, 175, 0) 150deg,
#8FBDD9 270deg, #4A5AD6 320deg, #2E40AF 350deg,
rgba(46, 64, 175, 0) 360deg),
linear-gradient(rgba(22, 21, 26, 0.22), rgba(22, 21, 26, 0.22));
}
}
/* =========================================================
6. ENCABEZADO DE VIDRIO AL BAJAR
=========================================================
Arriba de todo el encabezado es liso. Apenas se baja se vuelve
semitransparente y desenfoca lo que pasa por detrás, como el menú.
Con el menú abierto vuelve a ser liso: el desenfoque rompería la
posición del panel. */
body:not(.nav-is-open) .site-header.is-vidrio {
background: rgba(244, 238, 226, 0.72);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
}
:root[data-theme="dark"] body:not(.nav-is-open) .site-header.is-vidrio {
background: rgba(23, 22, 27, 0.62);
}
.site-header { transition: background-color 0.3s ease; }
/* =========================================================
7. LAS SECCIONES APARECEN AL LLEGAR
=========================================================
El rótulo, el título y la bajada entran desde el desenfoque, uno
detrás del otro, la primera vez que la sección aparece en pantalla.
La clase con-aparicion la pone el JS: sin JS todo se ve igual que
siempre. */
.con-aparicion .page .page-head > *,
.con-aparicion #tienda-online .shop-cta__title {
opacity: 0;
filter: blur(8px);
transform: translateY(10px);
transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.con-aparicion .page .page-head.is-visible > *,
.con-aparicion #tienda-online .shop-cta__title.is-visible {
opacity: 1;
filter: blur(0);
transform: none;
}
.con-aparicion .page .page-head.is-visible > :nth-child(2) { transition-delay: 0.08s; }
.con-aparicion .page .page-head.is-visible > :nth-child(3) { transition-delay: 0.16s; }
.con-aparicion .page .page-head.is-visible > :nth-child(4) { transition-delay: 0.24s; }
/* =========================================================
8. LA FRANJA DE ENVÍOS, EN MOVIMIENTO
=========================================================
Las frases pasan despacio de derecha a izquierda, separadas por una
estrella, y se frenan con el cursor encima. Los bordes se funden para
que no se vea dónde entra y dónde sale el texto. En el teléfono ya no
hace falta el texto corto: no hay columnas que lo corten. */
.trust-bar--cinta .trust-bar__inner {
display: block;
max-width: none;
padding: 0;
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);
}
.trust-bar__cinta {
display: flex;
width: max-content;
animation: cintaEnvios 48s linear infinite;
}
.trust-bar--cinta:hover .trust-bar__cinta { animation-play-state: paused; }
.trust-bar__grupo { display: flex; align-items: center; }
.trust-bar--cinta .trust-bar__item {
border-right: none;
padding: 0.7rem 1.5rem;
white-space: nowrap;
}
.trust-bar__sep { color: var(--c-rosa); font-size: 11px; line-height: 1; }
.trust-bar--cinta .solo-ancha { display: inline; }
.trust-bar--cinta .solo-angosta { display: none; }
@keyframes cintaEnvios { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
.trust-bar--cinta .trust-bar__item { padding: 0.55rem 1.1rem; }
}
/* =========================================================
CORRECCIONES 13/09/2026 — un solo lenguaje para lo destacado
=========================================================
Todo lo que tiene que llamar la atención usa el mismo recurso: un
borde con una luz que gira (rosa → celeste → cobalto de noche,
celeste → cobalto de día). Sin cajas oscuras, sin manchas, sin grano.
· La Tienda (compu): el marco alrededor del título y el botón.
· Originales: el aviso "Disponible para hacer obras a pedido".
· Cuadros a pedido y Servicios: el botón final.
· La Tienda (teléfono): el botón y una tarjeta alrededor de la sección. */
/* ---- La luz que gira, reutilizable ---- */
:root {
--luz-giro-colores:
rgba(143, 189, 217, 0) 0deg,
rgba(143, 189, 217, 0) 190deg,
#8FBDD9 280deg, #4A5AD6 325deg, #2E40AF 350deg,
rgba(46, 64, 175, 0) 360deg;
--luz-giro-base: rgba(22, 21, 26, 0.16);
}
:root[data-theme="dark"] {
--luz-giro-colores:
rgba(242, 223, 237, 0) 0deg,
rgba(242, 223, 237, 0) 190deg,
#F2DFED 260deg, #BFE0F2 300deg, #8FBDD9 328deg, #4A5AD6 350deg,
rgba(74, 90, 214, 0) 360deg;
--luz-giro-base: rgba(242, 237, 228, 0.16);
}
/* ---- La Tienda (compu): sin la luz que seguía al cursor ---- */
@media (min-width: 861px) {
#tienda-online .tienda__marco::after { content: none; }
}
/* ---- Estrellas del color del botón (de día) ----
Las que salen al tocar un botón y las del título de La Tienda: el
mismo cobalto del botón, en vez de alternar con el negro. */
:root:not([data-theme="dark"]) .estrellas__una,
:root:not([data-theme="dark"]) .shop-cta__title .estrella { color: var(--c-boton); }
/* =========================================================
ORIGINALES — el aviso, de vidrio con la luz que gira
========================================================= */
#originales .callout--aurora {
background: rgba(255, 255, 255, 0.4);
border: none;
box-shadow: 0 6px 24px rgba(20, 20, 24, 0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--c-text);
}
:root[data-theme="dark"] #originales .callout--aurora {
background: rgba(255, 255, 255, 0.04);
box-shadow: none;
}
#originales .callout--aurora::before {
inset: 0;
padding: 1.5px;
border-radius: inherit;
background:
conic-gradient(from var(--tienda-giro), var(--luz-giro-colores)),
linear-gradient(var(--luz-giro-base), var(--luz-giro-base));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 1;
filter: none;
transform: none;
animation: tiendaGiro 6s linear infinite;
}
#originales .callout--aurora:hover::before { filter: none; opacity: 1; }
#originales .callout--aurora::after { content: none; }
#originales .callout--aurora .callout__body,
#originales .callout--aurora .callout__body a {
color: var(--c-text);
text-shadow: none;
}
#originales .callout--aurora .callout__body a { border-bottom-color: var(--c-text); }
/* =========================================================
"VENDIDO" DE VIDRIO
=========================================================
Sobre la foto: vidrio oscuro translúcido que desenfoca la obra detrás,
con un filo claro y letra blanca. Se lee sobre fotos claras y oscuras. */
.product__sold {
background: rgba(20, 20, 24, 0.32);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
/* En la ficha va sobre el panel, no sobre la foto: el mismo pill, sólo
con el borde */
.viewer__sold {
background: transparent;
border: 1px solid var(--c-line-strong);
color: var(--c-text);
}
/* =========================================================
EL BOTÓN CON LUZ (Cuadros a pedido y Servicios)
=========================================================
Sin relleno: el borde es la luz que gira. Más grande que un botón
común, para que no se pase de largo. Al pasar el cursor se llena
apenas. */
.btn.boton-luz {
position: relative;
isolation: isolate;
background: transparent;
border: none;
color: var(--c-text);
min-width: 300px;
min-height: 62px;
padding: 16px 40px;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.4px;
transition: background 0.3s ease, transform 0.3s ease;
}
.btn.boton-luz::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: 999px;
padding: 1.5px;
background:
conic-gradient(from var(--tienda-giro), var(--luz-giro-colores)),
linear-gradient(var(--luz-giro-base), var(--luz-giro-base));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: tiendaGiro 4s linear infinite;
}
.btn.boton-luz:hover {
background: rgba(143, 189, 217, 0.14);
color: var(--c-text);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.btn.boton-luz::before,
#originales .callout--aurora::before { animation: none; }
}
/* Cuadros a pedido: las reglas de su botón llevaban el id y pisaban el
tamaño */
#comisiones-cuadros .cuadros__boton.boton-luz {
min-width: 300px;
min-height: 62px;
padding: 16px 40px;
font-size: 18px;
margin-top: 36px;
}
@media (max-width: 860px) {
.btn.boton-luz,
#comisiones-cuadros .cuadros__boton.boton-luz {
min-width: min(300px, 100%);
min-height: 56px;
padding: 14px 34px;
font-size: 16px;
}
}
/* =========================================================
SERVICIOS — el cierre sin caja
========================================================= */
.servicios__cierre {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 44px;
text-align: center;
}
.servicios__cierre-texto {
font-size: 18px;
line-height: 26px;
font-weight: 500;
color: var(--c-text);
max-width: 720px;
}
@media (max-width: 900px) {
.servicios__cierre { margin-top: 36px; gap: 16px; }
.servicios__cierre-texto { font-size: 15px; line-height: 21px; }
.servicios__pregunta,
.servicios__remate { display: block; }
.servicios__pregunta { text-wrap: balance; }
}
/* =========================================================
TELÉFONO
========================================================= */
@media (max-width: 1080px) {
/* Menú: sin las manchas de luz. En el teléfono no llegaban a verse y
sólo sumaban trabajo. Queda el vidrio, que sí gustó. */
.nav__list--movil::before,
.nav__list--movil::after { content: none; }
}
@media (max-width: 860px) {
/* Portada: la foto cambia más despacio (el JS la pasa cada 6,5s) con
el fundido lento, y la franja de envíos va a la mitad de velocidad.
Así las dos cosas se mueven sin pelear por la mirada. */
.hero__slide { transition-duration: 2s; }
.trust-bar__cinta { animation-duration: 96s; }
/* La Tienda: la sección entera dentro de una tarjeta con borde de luz
quieta, así se entiende que es un lugar distinto del resto. La
tarjeta se abre hacia los costados sin achicar el contenido: el
título, la foto y el texto quedan del mismo ancho que antes. El
botón sigue con su luz girando. */
#tienda-online .shop-cta__inner {
position: relative;
isolation: isolate;
margin: 0 -12px;
padding: 16px 12px 24px;
border-radius: 26px;
background:
radial-gradient(120% 60% at 50% 100%, rgba(143, 189, 217, 0.12), transparent 70%),
rgba(255, 255, 255, 0.025);
}
#tienda-online .shop-cta__inner::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(160deg, #F2DFED, #BFE0F2 35%, #8FBDD9 60%, #4A5AD6);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.7;
}
:root:not([data-theme="dark"]) #tienda-online .shop-cta__inner {
background:
radial-gradient(120% 60% at 50% 100%, rgba(143, 189, 217, 0.22), transparent 70%),
rgba(255, 255, 255, 0.35);
}
:root:not([data-theme="dark"]) #tienda-online .shop-cta__inner::before {
background: linear-gradient(160deg, #8FBDD9, #4A5AD6 60%, #2E40AF);
opacity: 0.55;
}
}
/* El botón con luz: el aro de base un poco más marcado y la luz más
larga, para que el botón se lea como botón aunque la luz esté del otro
lado. */
.btn.boton-luz { --luz-giro-base: rgba(22, 21, 26, 0.28); }
:root[data-theme="dark"] .btn.boton-luz { --luz-giro-base: rgba(242, 237, 228, 0.28); }
.btn.boton-luz::before { padding: 2px; }
/* En compu la frase de cierre de Servicios entra en un renglón: con tope
de 720 "realidad." caía sola abajo. */
@media (min-width: 901px) {
.servicios__cierre-texto { max-width: none; }
}
@media (max-width: 860px) {
/* La tarjeta de La Tienda se abría sólo hacia la izquierda: con ancho
al 100% el margen negativo de la derecha no contaba. */
#tienda-online .shop-cta__inner { width: calc(100% + 24px); }
/* "Consultar · Pedir presupuesto" partía en dos renglones y el botón
quedaba de 79 de alto: menos relleno a los costados y en uno solo. */
.btn.boton-luz { padding-left: 22px; padding-right: 22px; white-space: nowrap; }
}
/* =========================================================
ORIGINALES Y PRINTS — la obra en su espacio al pasar el cursor
========================================================= */
.product__img--mockup { transition: opacity 0.6s ease, transform 0.9s ease; }
.product.is-mockup .product__img.is-active { opacity: 0; }
.product.is-mockup .product__img--mockup { opacity: 1; transform: scale(1.1); }
/* "Ver detalle" ya no oscurece la foto —si no, el ambiente no se vería—:
queda como una pastilla de vidrio abajo, igual que "Vendido". */
@media (hover: hover) {
.product__overlay {
background: transparent;
place-items: end center;
padding-bottom: 14px;
}
.product__overlay-btn {
min-height: 32px;
padding: 0.4rem 0.95rem;
font-size: 13px;
color: #fff;
background: rgba(20, 20, 24, 0.32);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
}
/* =========================================================
PRINTS — la línea de los subgrupos, la misma de todo el sitio
========================================================= */
/* Era negra de día y rosa de noche. Pasa al color de las líneas que
separan las secciones, en los dos modos. (El :root:not() sólo le da
el peso necesario para ganarle a las reglas anteriores.) */
:root:not([data-theme="ninguno"]) #prints .product-grid__divider { border-bottom-color: var(--c-line); }
/* =========================================================
CUADROS A PEDIDO — el llamado a la acción
========================================================= */
.cuadros__cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 40px;
}
.cuadros__cta-titulo {
font-size: 18px;
line-height: 26px;
font-weight: 500;
color: var(--c-text);
margin-bottom: 16px;
}
#comisiones-cuadros .cuadros__cta .cuadros__boton.boton-luz { margin-top: 0; }
.cuadros__cta-nota {
margin-top: 12px;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.2px;
color: var(--c-text-soft);
}
@media (max-width: 860px) {
.cuadros__cta { margin-top: 32px; }
.cuadros__cta-titulo { font-size: 16px; line-height: 22px; margin-bottom: 14px; text-wrap: balance; }
}
/* =========================================================
SOBRE MÍ — texto nuevo, firma, "Trabajemos juntos" y el CV
========================================================= */
/* El título, un poco más chico: de 26 a 24 */
#about .page-title { font-size: 24px; line-height: 24px; }
/* La bajada entra en un renglón. En compu a 18. En el teléfono se
achica hasta ocupar justo el ancho del texto: la frase mide 28,7 veces
el cuerpo de la letra; el divisor va en 29,2 para dejar un margen. */
#about .page-tagline { font-size: 18px; white-space: nowrap; }
@media (max-width: 860px) {
#about .page-tagline {
font-size: min(18px, calc((100vw - 2 * var(--pad-x)) / 29.2));
line-height: 26px;
}
}
/* La firma: chica, en el gris secundario y centrada */
.about-cta__firma {
font-size: 14px;
line-height: 20px;
color: var(--c-text-soft);
text-align: center;
}
.about-cta__acciones {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 24px;
}
.btn.about-cta__principal { min-height: 46px; padding: 12px 28px; white-space: nowrap; }
.about-cta__cv {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
font-size: 15px;
font-weight: 500;
color: var(--c-text);
white-space: nowrap;
}
.about-cta__cv::after { content: '↓'; }
.about-cta__cv:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Compu: la firma debajo de la foto, centrada a la foto; los botones
debajo del texto, centrados al bloque de texto. La foto vuelve a su
tamaño, el mismo de La Tienda. */
@media (min-width: 861px) {
#about .about-grid { row-gap: 10px; }
#about .about-col { grid-column: 1; grid-row: 1; }
#about .about-portrait { grid-column: 2; grid-row: 1; }
#about .about-cta__firma {
grid-column: 2; grid-row: 2;
justify-self: end;
width: min(100%, calc((100vh - 143px) * 6 / 7));
}
#about .about-cta__acciones { margin-top: 24px; }
}
/* Teléfono: después del texto la firma centrada, y abajo el botón
"Trabajemos juntos" con el CV al lado, centrados. */
@media (max-width: 860px) {
#about .about-cta__firma { order: 4; margin-top: 20px; }
#about .about-cta__acciones { order: 5; margin-top: 16px; }
#about .btn.about-cta__principal { min-height: 46px; padding: 12px 24px; font-size: 15px; }
}
/* =========================================================
MENÚ DE COMPU EN MODO OSCURO
=========================================================
La lista de links tenía el fondo carbón sólido del tema oscuro: con
el encabezado de vidrio se veía como un rectángulo negro detrás de
las palabras. En compu la lista no lleva fondo; lo pone el encabezado.
(Los desplegables sí lo conservan: son paneles.) */
@media (min-width: 1081px) {
:root[data-theme="dark"] .nav__list { background: transparent; }
}
/* =========================================================
LA TIENDA — sin "Ver detalle" sobre las obras
========================================================= */
.product__overlay { display: none; }
/* =========================================================
CUADROS A PEDIDO — franja "Envíos a todo el mundo"
========================================================= */
.cuadros__franja {
margin-top: 40px;
overflow: hidden;
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
background: var(--c-surface);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cuadros__franja-cinta {
display: flex;
align-items: center;
width: max-content;
animation: cintaEnvios 40s linear infinite;
}
.cuadros__franja:hover .cuadros__franja-cinta { animation-play-state: paused; }
.cuadros__franja-cinta span {
padding: 0.7rem 1.5rem;
font-size: var(--fs-eyebrow);
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--c-text);
}
.cuadros__franja-cinta i {
font-style: normal;
font-size: 11px;
line-height: 1;
color: var(--c-rosa);
}
@media (prefers-reduced-motion: reduce) {
.cuadros__franja-cinta { animation: none; }
}
@media (max-width: 860px) {
.cuadros__franja { margin-top: 32px; }
.cuadros__franja-cinta span { padding: 0.55rem 1.1rem; }
}
/* =========================================================
SERVICIOS CREATIVOS
========================================================= */
/* El título no parte palabras ("mar-cas"): corta entre palabras y en
dos renglones parejos, "Servicios creativos / para marcas". */
#comisiones-servicios .page-title {
hyphens: manual;
-webkit-hyphens: manual;
text-wrap: balance;
}
/* Teléfono: la pregunta ocupa todo el ancho, centrada, y "Hagámoslo
realidad." sigue en su propio renglón. */
@media (max-width: 900px) {
.servicios__cierre-texto { max-width: none; width: 100%; }
.servicios__pregunta { text-wrap: wrap; }
}
/* =========================================================
AIRE DESPUÉS DEL ÚLTIMO BOTÓN, EN TODA LA WEB
=========================================================
Cuando una sección termina con su llamado a la acción, hasta la línea
de la sección siguiente quedan 80px en compu y 64 en el teléfono (el
resto de las secciones mantiene sus 30). Ese vacío es lo que hace que
la vista se detenga en el botón en vez de seguir de largo.
· Servicios creativos: termina en el botón.
· Cuadros a pedido: termina en la franja, que es parte del cierre.
· Sobre mí en el teléfono: termina en "Trabajemos juntos". */
#comisiones-servicios.page,
#comisiones-cuadros.page { padding-bottom: 80px; }
@media (max-width: 860px) {
#comisiones-servicios.page,
#comisiones-cuadros.page,
#about.page { padding-bottom: 64px; }
}
/* =========================================================
PREGUNTAS FRECUENTES — el texto de Sobre mí
=========================================================
Las respuestas usan el cuerpo de lectura de Sobre mí: 16 sobre 22,
peso 400, a 10 de la pregunta. Las preguntas, el mismo cuerpo en
semibold para que se distingan. En el teléfono, justificadas con
partido de palabras, igual que Sobre mí. */
.faq-item summary {
font-family: var(--f-body);
font-size: 16px;
line-height: 22px;
font-weight: 600;
letter-spacing: 0;
color: var(--c-text);
}
.faq-item summary::after { font-size: 18px; line-height: 22px; }
.faq-item p {
margin-top: 10px;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: var(--c-text);
}
@media (max-width: 860px) {
.faq-item p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
}
/* Sobre mí en compu: con la firma debajo de la foto la sección medía 630
en una pantalla de 682 (626 libres). 4px menos de relleno abajo y
vuelve a entrar entera. */
@media (min-width: 861px) {
#about.page { padding-bottom: 25px; }
}
/* La respuesta arranca donde arranca el texto de la pregunta, no 7px
antes: número (1,8rem) + su margen (0,9rem) + el espacio (0,5rem). */
.faq-item p { padding-left: 3.2rem; }
@media (max-width: 860px) {
/* Una regla general estiraba el botón a 295px y el CV caía abajo:
con su ancho natural entran los dos en la misma fila. */
#about .btn.about-cta__principal { min-width: 0; width: auto; padding: 12px 18px; }
#about .about-cta__acciones { gap: 12px 14px; }
}
/* =========================================================
CUADROS A PEDIDO — la franja cierra la sección
=========================================================
Debajo de la franja quedaban 80px vacíos antes de la línea de la
sección siguiente: dos límites seguidos sin nada entre ellos. Ahora la
franja termina justo sobre esa línea, que pasa a ser su borde de abajo. */
#comisiones-cuadros.page { padding-bottom: 0; }
.cuadros__franja { border-bottom: none; }
@media (max-width: 860px) {
#comisiones-cuadros.page { padding-bottom: 0; }
}
/* =========================================================
CONTACTO — la lógica de La Tienda
========================================================= */
/* El bloque deja de ser una franja de color invertido: toma el fondo del
sitio, con la línea de arriba como todas las secciones. */
.closing {
background: var(--c-bg);
color: var(--c-text);
margin-top: 0;
padding: 56px var(--pad-x) 64px;
}
.closing::before {
top: 0; left: var(--pad-x); right: var(--pad-x);
width: auto; aspect-ratio: auto; height: 1px;
background: var(--c-line);
}
.closing__inner { display: block; }
/* El marco con la luz que gira, como el de La Tienda */
.closing__marco {
position: relative;
isolation: isolate;
max-width: 820px;
margin: 0 auto;
padding: 44px 40px 36px;
border-radius: 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: rgba(255, 255, 255, 0.015);
}
.closing__marco::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
padding: 1.5px;
background:
conic-gradient(from var(--tienda-giro), var(--luz-giro-colores)),
linear-gradient(var(--luz-giro-base), var(--luz-giro-base));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: tiendaGiro 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.closing__marco::before { animation: none; }
}
/* Título: el mismo cartel que La Tienda (40 sobre 42, peso 600, en
versales). Antes medía 46 y competía con todo. */
.closing__title {
font-family: var(--f-body);
font-size: 40px;
line-height: 42px;
font-weight: 600;
letter-spacing: normal;
text-transform: uppercase;
max-width: none;
margin: 0;
color: var(--c-text);
}
.closing__body {
margin: 16px auto 0;
max-width: 600px;
font-size: 18px;
line-height: 26px;
font-weight: 400;
color: var(--c-text);
text-wrap: pretty;
}
.btn.closing__tienda {
margin-top: 28px;
min-width: 230px;
min-height: 58px;
padding: 14px 34px;
font-size: 17px;
}
/* Las redes: círculos grandes con el nombre debajo */
.closing__redes-titulo {
margin-top: 36px;
font-size: 12px;
line-height: 20.5px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--c-accent);
}
.closing__redes {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px 20px;
margin-top: 14px;
}
.closing__red {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 72px;
}
.closing__red .social-icon {
width: 58px;
height: 58px;
opacity: 1;
color: var(--c-text);
border: 1px solid var(--c-line-strong);
background: rgba(255, 255, 255, 0.03);
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.closing__red .social-icon svg { width: 25px; height: 25px; }
.closing__red:hover .social-icon {
background: var(--c-boton);
border-color: var(--c-boton);
color: var(--c-boton-texto);
transform: translateY(-3px);
}
.closing__red-nombre {
font-size: 12px;
line-height: 16px;
color: var(--c-text-soft);
transition: color 0.25s ease;
}
.closing__red:hover .closing__red-nombre { color: var(--c-text); }
.closing__linktree {
margin-top: 24px;
font-size: 14px;
color: var(--c-text-soft);
border-bottom: 1px solid var(--c-line-strong);
padding-bottom: 2px;
}
.closing__linktree::after { content: ' →'; }
.closing__linktree:hover { color: var(--c-text); border-bottom-color: var(--c-text); }
/* La vidriera de Instagram: sin texto arriba */
.ig { padding-top: 0; }
@media (max-width: 860px) {
.closing { padding: 40px var(--pad-x) 48px; }
.closing__marco { padding: 32px 18px 28px; border-radius: 24px; }
.closing__title { font-size: 26px; line-height: 30px; }
.closing__body { font-size: 16px; line-height: 22px; margin-top: 12px; }
.btn.closing__tienda { margin-top: 22px; min-height: 52px; padding: 12px 28px; font-size: 16px; }
.closing__redes-titulo { margin-top: 30px; }
/* Tres por fila: seis en una sola no entran con el nombre debajo */
.closing__redes { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px 28px; }
.closing__red .social-icon { width: 54px; height: 54px; }
}
/* =========================================================
PREGUNTAS FRECUENTES — menos aire al final
=========================================================
La sección pedía como mínimo el alto de la pantalla: con seis
preguntas cerradas quedaba un vacío grande abajo. Ahora mide lo que
mide su contenido, con 56px antes de Contacto. */
#faq.page { min-height: 0; padding-bottom: 56px; }
@media (max-width: 860px) {
#faq.page { padding-bottom: 48px; }
}
/* =========================================================
CONTACTO — más ancho y la bajada en dos bloques
========================================================= */
/* El marco usa más del ancho de la sección: cada frase entra en un
renglón en compu. */
.closing__marco { max-width: 1040px; padding: 44px 56px 36px; }
.closing__body { max-width: none; margin: 0; }
/* Bloque 1: título + primera frase, pegados */
.closing__body--titulo { margin-top: 10px; }
/* Bloque 2: segunda frase + botón, pegados, con poco aire antes */
.closing__body--boton { margin-top: 22px; }
.btn.closing__tienda { margin-top: 16px; }
@media (max-width: 860px) {
.closing__marco { padding: 32px 18px 28px; }
.closing__body--titulo { margin-top: 8px; }
.closing__body--boton { margin-top: 16px; }
.btn.closing__tienda { margin-top: 14px; }
}
/* =========================================================
INSTAGRAM — el usuario sobre la vidriera
========================================================= */
.ig__handle {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
min-height: 32px;
font-size: 15px;
font-weight: 500;
color: var(--c-text);
transition: color 0.2s ease;
}
.ig__handle svg { width: 18px; height: 18px; fill: currentColor; }
.ig__handle span { border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.ig__handle:hover { color: var(--c-accent); }
.ig__handle:hover span { border-bottom-color: currentColor; }
/* =========================================================
AJUSTES DE TELÉFONO — 13/09/2026
========================================================= */
@media (max-width: 860px) {
/* Sobre mí: el botón a todo el ancho y el CV centrado justo debajo,
como un solo bloque. Al lado, con el hueco entre los dos, parecían
cosas sueltas. */
#about .about-cta__acciones { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
#about .btn.about-cta__principal { width: 100%; justify-content: center; }
#about .about-cta__cv { font-size: 15px; }
/* Servicios creativos: el título en un renglón. "Servicios creativos
para marcas" mide 15 veces el cuerpo; se achica hasta entrar (21,5px
en un teléfono de 375). */
#comisiones-servicios .page-title {
font-size: min(26px, calc((100vw - 2 * var(--pad-x)) / 15.4));
white-space: nowrap;
text-wrap: nowrap;
}
/* Contacto: los seis íconos en una fila, más chicos */
.closing__redes { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; }
.closing__red { width: auto; }
.closing__red .social-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.closing__red .social-icon svg { width: 18px; height: 18px; }
}
/* Contacto: sin el nombre debajo de cada red (se reconocen por el
ícono); los círculos quedan un poco más compactos también en compu. */
.closing__red { gap: 0; }
@media (min-width: 861px) {
.closing__redes { gap: 16px; }
.closing__red { width: auto; }
.closing__red .social-icon { width: 52px; height: 52px; }
.closing__red .social-icon svg { width: 22px; height: 22px; }
}
/* =========================================================
PORTADA EN EL TELÉFONO — foto arriba, botones y franja al final
=========================================================
Antes: nombre, bajada, texto, botones, foto y franja. Lo único que se
mueve —la foto— quedaba abajo de todo, pegado a la franja, y la mirada
se iba ahí. Ahora: nombre, bajada, foto, qué hay (cuadros, prints…),
botones y la franja quieta. La foto queda arriba, donde tiene que
enganchar; lo de abajo es texto y botones, sin movimiento, que es
donde se decide el toque.
display: contents disuelve las dos cajas del texto para poder meter
la foto entre sus partes sin tocar el HTML. */
@media (max-width: 860px) {
.hero__inner { gap: 0; }
.hero__text,
.hero__name { display: contents; }
.hero__title { order: 1; text-align: center; }
.hero__subtitle { order: 2; text-align: center; }
.hero__media { order: 3; margin-top: 20px; }
.hero__sub { order: 4; margin-top: 18px; text-align: center; }
.hero__ctas { order: 5; margin-top: 16px; }
}
/* =========================================================
VISOR DE OBRA — la misma lógica que la ficha de la tienda
=========================================================
En Tiendanube el orden es: foto, precio, formas de pago, descripción.
Acá igual: foto a la izquierda y, a la derecha, título, precio, botón
y las condiciones; la ficha técnica y el texto de la obra van después,
para quien quiera leer. Antes el botón quedaba al final de todo el
texto y había que bajar para comprar. */
.viewer.has-info .viewer__info {
overflow-y: auto;
gap: 0;
padding-right: 6px;
}
.viewer__crumb {
font-size: 11.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.viewer__work-title {
font-family: var(--f-body);
font-size: 26px;
line-height: 30px;
font-weight: 500;
letter-spacing: normal;
}
/* El bloque de compra: todo junto y arriba */
.viewer__compra { display: flex; flex-direction: column; margin-top: 12px; }
.viewer__price {
font-family: var(--f-body);
font-size: 28px;
line-height: 32px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--c-text);
}
.viewer__price--consultar { font-size: 19px; line-height: 26px; font-weight: 500; }
.viewer__unica {
margin-top: 5px;
font-size: 13px;
line-height: 18px;
color: var(--c-text-soft);
}
.viewer__buy {
width: 100%;
min-height: 56px;
margin-top: 16px;
font-size: 16px;
letter-spacing: 0.3px;
}
.viewer__promos {
margin-top: 12px;
font-size: 13px;
line-height: 19px;
letter-spacing: 0.2px;
color: var(--c-text-soft);
}
/* Ficha técnica: etiqueta chica arriba, dato abajo, en dos columnas */
.viewer__ficha {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--c-line);
}
.viewer__dato dt {
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--c-text-soft);
}
.viewer__dato dd {
margin-top: 3px;
font-size: 15px;
line-height: 21px;
color: var(--c-text);
}
.viewer__desc {
margin-top: 20px;
font-size: 15px;
line-height: 22px;
color: var(--c-text-soft);
padding-top: 0;
}
.viewer__extras {
margin-top: 10px;
font-size: 13.5px;
line-height: 20px;
color: var(--c-text-soft);
}
.viewer__shipping {
margin-top: 18px;
padding: 10px 12px;
font-size: 13px;
line-height: 19px;
background: transparent;
border-left: 2px solid var(--c-line-strong);
color: var(--c-text-soft);
}
@media (max-width: 860px) {
.viewer__work-title { font-size: 22px; line-height: 26px; }
.viewer__price { font-size: 24px; line-height: 28px; }
.viewer__buy { min-height: 52px; font-size: 15px; }
.viewer__ficha { grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 20px; padding-top: 14px; }
}
/* =========================================================
VISOR — la ficha técnica en una sola columna
=========================================================
Como las fichas de las galerías de afuera (Artsy, Saatchi Art, Rise
Art): un dato por renglón, el nombre del dato chico a la izquierda y
el valor a la derecha, separados por una línea finita. Se lee de un
vistazo y no obliga a saltar entre dos columnas.
El orden es el que pediste: técnica, año, papel, marco, medidas. */
.viewer__ficha {
display: block;
margin-top: 22px;
padding-top: 0;
border-top: none;
}
.viewer__dato {
display: flex;
align-items: baseline;
gap: 16px;
padding: 11px 0;
border-top: 1px solid var(--c-line);
}
.viewer__dato:last-child { border-bottom: 1px solid var(--c-line); }
.viewer__dato dt {
flex: 0 0 104px;
margin: 0;
font-size: 11px;
line-height: 18px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--c-text-soft);
}
.viewer__dato dd {
margin: 0;
flex: 1 1 auto;
font-size: 15px;
line-height: 20px;
color: var(--c-text);
}
/* El botón del visor, igual que el de La Tienda: mismo alto, mismo
cuerpo de letra y mismo espaciado que el resto de los botones
principales del sitio. */
.viewer__buy {
min-height: 58px;
font-size: 17px;
font-weight: 500;
letter-spacing: 0.6px;
border-radius: 999px;
}
@media (max-width: 860px) {
.viewer__dato { padding: 9px 0; gap: 12px; }
.viewer__dato dt { flex-basis: 88px; }
.viewer__buy { min-height: 54px; font-size: 16px; }
}