/* ============================================================ PORTADA v2. Solo afecta a páginas con . Para volver a la versión anterior no hay que hacer nada: index.html y style.css no se han modificado. ============================================================ */ /* Cabecera que se reduce al bajar */ .v2 .site-header { transition: box-shadow .3s ease; } .v2 .site-header .container { transition: min-height .3s ease; } .v2 .brand img { transition: width .3s ease, height .3s ease; } .v2 .site-header.scrolled { box-shadow: 0 12px 30px -24px rgba(21, 17, 12, .55); } .v2 .site-header.scrolled .container { min-height: 60px; } .v2 .site-header.scrolled .brand img { width: 40px; height: 40px; } /* Aparición suave al hacer scroll (solo por debajo de la primera pantalla) */ .v2 .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .v2 .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .v2 .rv { opacity: 1; transform: none; transition: none; } } /* Cabecera de portada: una imagen fuerte (o vídeo) en arco */ .v2 .hero-v2 { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 110px); } .v2 .hero-v2 .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; } .hero-media-wrap { position: relative; width: 100%; max-width: 500px; justify-self: end; } .hero-media { aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: var(--shadow); background: var(--sand); } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; } .hero-card { position: absolute; left: -24px; bottom: 36px; background: var(--ink); color: var(--cream); padding: 16px 20px; border-radius: 16px; display: grid; gap: 2px; box-shadow: var(--shadow); } .hero-card b { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); line-height: 1.1; } .hero-card span { font-size: .74rem; opacity: .8; letter-spacing: .04em; } @media (max-width: 900px) { .v2 .hero-v2 .hero-grid { grid-template-columns: 1fr; } .hero-media-wrap { justify-self: center; max-width: 420px; } .hero-card { left: 14px; bottom: 24px; } } @media (max-width: 700px) { .v2 .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 12px 6px; } .v2 .fact b { font-size: 1.6rem; } } /* Taller en vídeo: sección oscura con imagen de ambiente */ .v2 .band-v2 { position: relative; isolation: isolate; background: #15110c url("ai/ambiente-taller.jpg") center / cover no-repeat; } .v2 .band-v2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 17, 12, .9), rgba(21, 17, 12, .8) 50%, rgba(21, 17, 12, .92)); } .v2 .band-v2 .ai-note { position: absolute; right: 16px; bottom: 12px; font-size: .68rem; letter-spacing: .08em; opacity: .6; } /* Isabel y testimonios en una sola sección */ .v2 #isabel .testis .testi { background: var(--paper); } /* Carruseles en móvil: se desliza de lado y se para en cada tarjeta */ .car-hint { display: none; } @media (max-width: 700px) { .v2 .car { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scroll-padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .v2 .car::-webkit-scrollbar { display: none; } .v2 .car > * { flex: 0 0 80%; scroll-snap-align: center; min-width: 0; } .v2 .piece-row.car { margin-top: 28px; } .v2 .piece-row.car > * { flex-basis: 56%; } .v2 .reels.car > * { flex-basis: 72%; aspect-ratio: 9 / 13; } .v2 .testis.car > * { flex-basis: 86%; } .car-hint { display: block; text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; } .v2 .band-v2 .car-hint { color: rgba(248, 243, 234, .6); } } /* ============================================================ MEJORAS ESTÉTICAS (capa v2) ============================================================ */ html:has(body.v2) { scroll-padding-top: 96px; } .v2 { --muted: #5b5144; } /* mejor contraste del texto secundario */ .v2 ::selection { background: var(--gold); color: var(--ink); } /* Las fotos ya vienen mejoradas: se quita el filtro de color anterior */ .v2 img, .v2 .coll-img img, .v2 .piece .pi img, .v2 .path img, .v2 .hero-art img, .v2 .b2b-imgs img, .v2 .ig-tile img, .v2 .gal-main img, .v2 .gal-thumbs img, .v2 .post-img img { filter: none; } /* Legibilidad de textos de apoyo */ .v2 .small, .v2 .micro { font-size: .82rem; } .v2 .coll p, .v2 .aud p, .v2 .step p, .v2 .proc p, .v2 .mini p, .v2 .lead-box .micro { font-size: .95rem; } .v2 .piece small, .v2 .ccard small { font-size: .84rem; } .v2 h3 { font-weight: 600; } @media (max-width: 700px) { .v2 .coll p, .v2 .piece small, .v2 .aud p, .v2 .step p { font-size: .92rem; } .v2 .site-footer li { margin-bottom: 4px; } .v2 .site-footer { padding-top: 48px; } } /* Detalle decorativo en la cabecera: contorno dorado desplazado */ .hero-media-wrap::before { content: ""; position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px; border: 1.5px solid rgba(185, 138, 62, .55); border-radius: 999px 999px 28px 28px; z-index: 0; } .hero-media { position: relative; z-index: 1; } .hero-card { z-index: 2; } @media (max-width: 700px) { .hero-media-wrap::before { top: 12px; left: 12px; right: -8px; bottom: -8px; } } /* Tarjetas de pieza: etiqueta al pasar el cursor */ .v2 .piece .pi::after { content: "Ver pieza →"; position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(21, 17, 12, .84); color: var(--cream); font-size: .78rem; font-weight: 600; text-align: center; padding: 9px 12px; border-radius: 99px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } .v2 .piece:hover .pi::after, .v2 .piece:focus-visible .pi::after { opacity: 1; transform: none; } @media (hover: none) { .v2 .piece .pi::after { display: none; } } /* Variedad de color: acento verde profundo en secciones claras */ .v2 .section--paper .eyebrow { color: var(--sea-2); } .v2 .section--paper .h2 em { color: #2f6f65; } /* Profundidad suave en tarjetas */ .v2 .aud, .v2 .testi, .v2 .mini, .v2 .term, .v2 .card, .v2 .ccard { box-shadow: 0 16px 36px -30px rgba(21, 17, 12, .4); } /* Formularios: estados de foco y de error */ .v2 .field:focus, .v2 select.field:focus, .v2 textarea.field:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 4px rgba(185, 138, 62, .2); } .v2 .field.light:user-invalid { border-color: #b23a2e; box-shadow: 0 0 0 4px rgba(178, 58, 46, .12); } /* Iconos de línea */ .ccard .ic svg { width: 22px; height: 22px; } /* ============================================================ MEJORAS ESTÉTICAS (2.ª tanda) ============================================================ */ /* Transición suave entre páginas (navegadores compatibles) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } /* Titulares equilibrados y párrafos sin líneas huérfanas */ .v2 h1, .v2 h2 { text-wrap: balance; } /* Barra de progreso de lectura */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 95; background: linear-gradient(90deg, #d9b56c, #b98a3e); pointer-events: none; } /* Galería de la ficha de pieza */ .v2 .gal-main { cursor: zoom-in; } .v2 .gal-main img { transition: transform .6s ease, opacity .25s ease; } .v2 .gal-main:hover img { transform: scale(1.06); } .v2 .gal-thumbs div { cursor: pointer; transition: border-color .25s ease, transform .25s ease; } .v2 .gal-thumbs div:hover { transform: translateY(-2px); } .v2 .gal-thumbs div.on { border-color: var(--brass); } .v2 .gal-thumbs div:not(.on) { border-color: transparent; } /* ============================================================ COMPONENTES NUEVOS (ideas de mejora) ============================================================ */ /* Accesibilidad */ .skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: var(--cream); padding: 10px 18px; border-radius: 99px; font-weight: 600; } .skip:focus { left: 12px; } /* Aviso según origen (utm) */ .origin-bar { background: var(--sea); color: var(--cream); font-size: .86rem; } .origin-bar .container { display: flex; gap: 14px; align-items: center; justify-content: center; padding-top: 10px; padding-bottom: 10px; text-align: center; flex-wrap: wrap; } .origin-bar a { color: var(--gold); text-decoration: underline; font-weight: 600; } .origin-bar button { background: none; border: 0; color: var(--cream); opacity: .7; font-size: 1.1rem; padding: 4px 8px; } /* Vídeo (hueco reservado) */ .video-slot { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #1a1510 center / cover no-repeat; box-shadow: var(--shadow); isolation: isolate; display: grid; place-items: center; color: var(--cream); } .video-slot.tall { aspect-ratio: 9 / 13; max-width: 320px; } .video-slot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 17, 12, .25), rgba(21, 17, 12, .78)); } .video-slot .vp { width: 72px; height: 72px; border-radius: 50%; background: rgba(248, 243, 234, .94); color: var(--ink); display: grid; place-items: center; font-size: 1.2rem; padding-left: 4px; } .video-slot .vc { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; display: grid; gap: 4px; } .video-slot .vc b { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.1; } .video-slot .vc span { font-size: .8rem; opacity: .85; } /* Cuenta atrás y plazas */ .cd-card { background: var(--sea); color: var(--cream); border-radius: 24px; padding: 30px; display: grid; gap: 16px; } .cd { display: flex; gap: 12px; } .cd div { min-width: 64px; text-align: center; background: rgba(248, 243, 234, .08); border: 1px solid var(--line-light); border-radius: 14px; padding: 12px 8px; } .cd b { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--gold); font-weight: 600; } .cd small { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .seats { display: grid; gap: 8px; } .seats .bar { background: rgba(248, 243, 234, .15); } /* Tabla comparativa */ .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); } .cmp { width: 100%; border-collapse: collapse; min-width: 640px; } .cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: .92rem; } .cmp th:first-child, .cmp td:first-child { text-align: left; } .cmp thead th { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; background: var(--paper); vertical-align: bottom; } .cmp thead th small { display: block; font-family: var(--sans); font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: 4px; } .cmp .rec { background: #fbf3e2; } .cmp thead .rec { border-top: 3px solid var(--brass); } .cmp .y { color: var(--brass); font-weight: 700; font-size: 1.1rem; } .cmp .n { color: #b9ad96; } .cmp tfoot td { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-deep); font-weight: 600; border-bottom: 0; } /* Mini-quiz */ .quiz { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow); } .quiz .q { display: none; } .quiz .q.on { display: block; animation: rise .5s ease both; } .quiz .qn { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; } .quiz h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 10px 0 20px; } .quiz .opts { display: grid; gap: 12px; } .quiz .opts button { text-align: left; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--cream); font-size: .98rem; transition: border-color .25s, background .25s, transform .25s; } .quiz .opts button:hover, .quiz .opts button:focus-visible { border-color: var(--brass); background: #fbf3e2; transform: translateX(3px); } .quiz .dots { display: flex; gap: 8px; margin-top: 22px; } .quiz .dots i { width: 30px; height: 4px; border-radius: 9px; background: var(--sand); } .quiz .dots i.on { background: var(--brass); } .quiz .res { display: none; text-align: center; } .quiz .res.on { display: grid; gap: 14px; justify-items: center; animation: rise .5s ease both; } .quiz .res .rn { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--gold-deep); font-weight: 600; line-height: 1; } .quiz .res .rp { font-family: var(--serif); font-size: 1.6rem; } .quiz .again { background: none; border: 0; text-decoration: underline; color: var(--muted); font-size: .86rem; } /* Para ti / no es para ti */ .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fit > div { border-radius: 22px; padding: 30px; border: 1px solid var(--line); background: var(--paper); } .fit h3 { font-size: 1.7rem; margin-bottom: 14px; } .fit ul { display: grid; gap: 10px; font-size: .95rem; } .fit li { display: flex; gap: 10px; } .fit .yes li::before { content: "✓"; color: var(--brass); font-weight: 700; } .fit .no li::before { content: "–"; color: var(--muted); font-weight: 700; } .guarantee { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: #fbf3e2; border: 1px solid var(--brass); border-radius: 22px; padding: 26px 30px; } .guarantee .gi { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; } .guarantee .gi svg { width: 26px; height: 26px; } @media (max-width: 800px) { .fit { grid-template-columns: 1fr; } .guarantee { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* Casos de alumnas */ .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .case { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: grid; } .case .ph-img { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #efe6d6, #efe6d6 12px, #f6efe2 12px, #f6efe2 24px); display: grid; place-items: center; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px dashed var(--brass); } .case .cb { padding: 22px; display: grid; gap: 8px; } .case h4 { font-size: 1.4rem; } .case dl { margin: 6px 0 0; display: grid; gap: 6px; font-size: .88rem; } .case dt { color: var(--gold-deep); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .case dd { margin: 0; color: var(--ink-2); } @media (max-width: 900px) { .cases { grid-template-columns: 1fr; } } /* Estado de pieza */ .status { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; } .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2e9d5f; box-shadow: 0 0 0 4px rgba(46, 157, 95, .18); } .status.sold::before { background: #b23a2e; box-shadow: 0 0 0 4px rgba(178, 58, 46, .15); } .status.wip::before { background: #c9822b; box-shadow: 0 0 0 4px rgba(201, 130, 43, .18); } .pill-s { position: absolute; left: 10px; top: 10px; z-index: 2; background: rgba(248, 243, 234, .94); border-radius: 99px; padding: 5px 11px 5px 9px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; } .pill-s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e9d5f; } .pill-s.sold::before { background: #b23a2e; } .pill-s.wip::before { background: #c9822b; } .piece[data-status="sold"] .pi img { filter: grayscale(.55) opacity(.85); } .filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .filter-row .lbl { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 6px; } /* Historia de la pieza */ .story-piece { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: start; } .facts-list { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 18px 0; } .facts-list div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .95rem; } .facts-list span:first-child { color: var(--muted); } @media (max-width: 900px) { .story-piece { grid-template-columns: 1fr; } } /* Calculadora de pedido */ .calc { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .calc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); } .calc-row b { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; display: block; line-height: 1.1; } .calc-row small { color: var(--muted); } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); } .stepper button { width: 40px; height: 40px; border: 0; background: none; font-size: 1.2rem; border-radius: 50%; } .stepper output { min-width: 34px; text-align: center; font-weight: 700; } .calc-line { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-deep); min-width: 84px; text-align: right; font-weight: 600; } .calc-sum { background: var(--ink); color: var(--cream); border-radius: 24px; padding: 28px; display: grid; gap: 14px; position: sticky; top: 110px; } .calc-sum .tot { font-family: var(--serif); font-size: 3rem; color: var(--gold); line-height: 1; font-weight: 600; } .calc-sum .bar { background: rgba(248, 243, 234, .18); } .calc-msg { font-size: .88rem; opacity: .9; } @media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc-sum { position: static; } .calc-row { grid-template-columns: 1fr auto; } .calc-line { grid-column: 1 / -1; text-align: left; } } /* Catálogo con correo */ .gate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--sand); border-radius: 28px; padding: clamp(28px, 4vw, 52px); } .gate .thumb { aspect-ratio: 3 / 4; max-width: 280px; border-radius: 14px; background: linear-gradient(160deg, #1b4843, #0f2e2c); color: var(--gold); display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 1.7rem; padding: 24px; box-shadow: var(--shadow); transform: rotate(-3deg); justify-self: center; } .gate .ok { display: none; background: #dbeee3; color: #1f6b41; border-radius: 14px; padding: 14px 18px; font-size: .92rem; font-weight: 600; } .gate.done .ok { display: block; } .gate.done form { display: none; } @media (max-width: 800px) { .gate { grid-template-columns: 1fr; text-align: center; } .gate .thumb { max-width: 200px; } } /* Mapa */ .map-box { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: clamp(18px, 3vw, 30px); } .map-box svg { width: 100%; height: auto; display: block; } .map-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .84rem; color: var(--muted); margin-top: 14px; } .map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); margin-right: 8px; } /* Historia con scroll (proceso) */ .story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; } .story-fig { position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: var(--shadow); background: var(--sand); max-width: 440px; width: 100%; justify-self: center; } .story-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; } .story-fig img.on { opacity: 1; } .story-steps { display: grid; gap: 0; } .story-step { min-height: 62vh; display: grid; align-content: center; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity .5s ease; } .story-step.on { opacity: 1; } .story-step .sn { font-family: var(--serif); font-style: italic; font-size: 3rem; color: var(--brass); line-height: 1; } .story-step h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .story-step p { color: var(--ink-2); max-width: 44ch; } .story-step .sf { display: none; } @media (max-width: 800px) { .story { grid-template-columns: 1fr; } .story-fig { display: none; } .story-step { min-height: 0; opacity: 1; text-align: center; justify-items: center; padding: 30px 0; } .story-step .sf { display: block; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; margin-bottom: 8px; } } /* Glosario */ .gloss-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 30px; } .gloss-tools .field { max-width: 420px; } .gloss-az { display: flex; flex-wrap: wrap; gap: 6px; } .gloss-az a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: .82rem; font-weight: 600; } .gloss-az a:hover { border-color: var(--brass); background: #fbf3e2; } .gloss-list { display: grid; gap: 0; } .gloss-item { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 200px 1fr; gap: 24px; scroll-margin-top: 110px; } .gloss-item dt { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; } .gloss-item dd { margin: 0; color: var(--ink-2); max-width: 64ch; } .gloss-empty { display: none; padding: 30px 0; color: var(--muted); } @media (max-width: 700px) { .gloss-item { grid-template-columns: 1fr; gap: 6px; } } /* Guía larga */ .guide { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } .toc { position: sticky; top: 110px; display: grid; gap: 4px; font-size: .9rem; } .toc b { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; } .toc a { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--ink-2); } .toc a:hover, .toc a.on { border-left-color: var(--brass); color: var(--ink); } .prose { max-width: 720px; } .prose h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin: 48px 0 14px; scroll-margin-top: 110px; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--ink-2); margin-bottom: 16px; font-size: 1.04rem; line-height: 1.75; } .prose ul { display: grid; gap: 8px; margin: 0 0 18px 4px; } .prose li { display: flex; gap: 10px; color: var(--ink-2); } .prose li::before { content: "✦"; color: var(--brass); font-size: .8rem; margin-top: 4px; } .callout-b { border-left: 3px solid var(--brass); background: #fbf3e2; padding: 18px 22px; border-radius: 0 16px 16px 0; margin: 22px 0; color: var(--ink-2); } @media (max-width: 900px) { .guide { grid-template-columns: 1fr; } .toc { position: static; } } /* Materiales */ .mat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .mat-card { display: grid; grid-template-columns: 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); } .mat-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .mat-card .mb { padding: 26px; display: grid; gap: 10px; } .mat-card h3 { font-size: 1.8rem; } @media (max-width: 800px) { .mat-cards { grid-template-columns: 1fr; } } /* Lightbox */ .lb { position: fixed; inset: 0; z-index: 300; background: rgba(15, 12, 8, .94); display: none; align-items: center; justify-content: center; padding: 30px; } .lb.on { display: flex; animation: rise .3s ease both; } .lb img { max-width: min(92vw, 900px); max-height: 88vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); object-fit: contain; } .lb button { position: absolute; background: rgba(248, 243, 234, .12); color: var(--cream); border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; } .lb .x { top: 20px; right: 20px; } .lb .pv { left: 20px; top: 50%; } .lb .nx { right: 20px; top: 50%; } .lb button:hover { background: rgba(197, 160, 89, .5); } /* Evita desbordes en móvil: los hijos de rejilla pueden encogerse */ .v2 .two-col > *, .v2 .grid2 > *, .v2 .grid3 > * { min-width: 0; } .v2 .video-slot { max-width: 100%; } /* ============================================================ MEJORAS: precios, aviso, tarjeta de origen, «se lleva» ============================================================ */ .piece .price { color: var(--ink); font-weight: 700; } .notify { display: grid; gap: 8px; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); } .notify label { font-weight: 600; font-size: .92rem; } .notify > div { display: flex; gap: 8px; flex-wrap: wrap; } .notify .field { flex: 1 1 180px; min-width: 0; } .thanks { padding: 18px 20px; border-radius: 18px; background: #eaf3ec; color: #1f4d33; font-weight: 600; line-height: 1.5; } .gal-main.ilus::after { content: "Imagen ilustrativa"; position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(21, 17, 12, .72); color: #f8f3ea; font-size: .74rem; font-weight: 600; letter-spacing: .04em; } .gal-main { position: relative; } .origin-card { width: 100%; max-width: 320px; margin-top: 8px; padding: 22px 22px 18px; border-radius: 16px; background: #fbf6ea; border: 1px solid #d9c9a4; box-shadow: 0 14px 30px -24px rgba(21, 17, 12, .5); font-family: var(--sans); text-align: left; } .origin-card .oc-k { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; } .origin-card .oc-n { display: block; font-family: var(--serif); font-size: 1.9rem; margin: 6px 0 2px; color: var(--ink); } .origin-card .oc-t { margin: 0 0 12px; font-size: .84rem; color: var(--muted); line-height: 1.4; } .origin-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .84rem; } .origin-card dt { color: var(--muted); } .origin-card dd { margin: 0; text-align: right; font-weight: 600; } .origin-card .oc-f { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px dashed #d9c9a4; font-size: .72rem; color: var(--muted); } .check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; } .check input { margin-top: 3px; flex: none; } /* El hueco de vídeo ocupa todo el ancho disponible dentro de columnas centradas */ .video-slot { width: 100%; } @media (max-width: 860px) { .v2 .steps[style*="repeat(3"] { grid-template-columns: 1fr !important; } } /* Rendimiento: no se calcula el diseño de lo que está muy por debajo hasta que se acerca */ .v2 main > section:not(:first-child), .v2 .site-footer { content-visibility: auto; contain-intrinsic-size: auto 720px; } /* Contraste (accesibilidad) */ .v2 h1 em, .v2 h2 em, .v2 h3 em { color: #a5772a; } .v2 .section--dark h1 em, .v2 .section--dark h2 em, .v2 .section--ink h1 em, .v2 .section--ink h2 em, .v2 .section--dark h3 em, .v2 .section--ink h3 em, .v2 .hero-dark em { color: var(--gold); } .ph-tag { color: #6a4a12; background: rgba(185, 138, 62, .2); } .section--dark .ph-tag, .section--ink .ph-tag, .lead-box .ph-tag { color: #ecd39a; } .cmp tbody th, .cmp tfoot th { text-align: left; font-weight: 600; font-size: .92rem; padding: 16px 18px; border-bottom: 1px solid var(--line); } .cmp tfoot th { font-family: var(--serif); font-size: 1.2rem; color: var(--gold-deep); border-bottom: 0; } .v2 .lead-box.has-bg em, .v2 .band-v2 em, .v2 .cd-card em, .v2 .dark em { color: var(--gold); } /* ============================================================ «CÓMO SE LLEVA»: tres arcos con el mismo acabado de color (eco del arco de la portada y del retrato de Isabel) ============================================================ */ .worn-band { background: linear-gradient(180deg, var(--paper) 0%, #f6eedf 100%); overflow: hidden; } .worn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin: clamp(32px, 5vw, 56px) auto 0; max-width: 1060px; align-items: start; } .worn { margin: 0; position: relative; isolation: isolate; } .worn:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); } .worn::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid rgba(185, 138, 62, .55); border-radius: 999px 999px 26px 26px; z-index: -1; } .wf { position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden; box-shadow: 0 30px 50px -34px rgba(21, 17, 12, .55); background: #e9dfcc; } .wf img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .9s ease; } .wf a { display: block; color: inherit; } .worn:hover img { transform: scale(1.045); } .worn figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px; display: grid; gap: 2px; text-align: center; color: #fbf6ea; background: linear-gradient(180deg, transparent, rgba(21, 17, 12, .62)); pointer-events: none; } .worn figcaption b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.15; } .worn figcaption span { font-size: .78rem; letter-spacing: .06em; opacity: .9; } .worn .wf a figcaption span { color: #ecd39a; opacity: 1; font-weight: 600; } @media (max-width: 760px) { .worn-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; padding: 12px 15vw 26px; margin-inline: -16px; scrollbar-width: none; align-items: stretch; } .worn-grid::-webkit-scrollbar { display: none; } .worn { flex: 0 0 70vw; scroll-snap-align: center; margin-top: 0 !important; } .worn::before { inset: 12px -10px -12px 10px; } } .worn-band .section-head { text-align: center; justify-items: center; } .worn-band .section-head .eyebrow { justify-content: center; } .worn-band .section-head .lead { margin-inline: auto; } .worn-band .container > .micro { margin-top: clamp(48px, 6vw, 72px) !important; }