/* Portada de noviembre de 2026 (prototipo wordpress/diseno/prototipos/PortadaFinal.html, aprobado por Nacho el 6/11/2026). * Copiado del prototipo: lo de dentro de .portada, con el prefijo ivpt-. Las consultas de contenedor del prototipo (sobre .marco) * pasan a consultas de medios con los mismos cortes: 400, 600, 760 y 1100 px. Contenido a 1200 px como máximo y 16 px de margen. * Interruptor iv_portada_2026_11. El pie y el botón «volver arriba» valen para toda la web; la escala, el separador y las * cursivas son tokens globales, pero solo se usan dentro de .ivpt (la portada). */ /* ---------- Tokens globales (punto 10): escala compacta, mínimo de 11 px, separador y cursiva de la frase de guía ---------- */ :root { --ivpt-k: .9; /* escala compacta: unos 10 % por debajo de la propuesta media */ --ivpt-min: 11px; /* etiquetas y enlaces pequeños, nunca por debajo */ --ivpt-ink: #1C1A17; --ivpt-gold: #C8A96E; --ivpt-card: #FFFDF8; --ivpt-hair: #E3DCCD; --ivpt-paper: #FAF7F0; --ivpt-tinte: #F2EDE3; --ivpt-label: #82632F; --ivpt-text: #4A453D; --ivpt-muted: #8A8275; --ivpt-rojo: #9B4A32; --ivpt-fd: "Fraunces", Georgia, "Times New Roman", serif; --ivpt-fb: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --ivpt-sep-trazo: 48px; /* separador: estrella y trazo dorado corto a la izquierda */ --ivpt-cursiva-guia: italic; /* cursiva SOLO en la frase de cada guía */ --ivpt-gut: max(clamp(16px, 4vw, 56px), calc((100vw - 1200px) / 2)); } /* ---------- Base de la portada (.m del prototipo) ---------- */ .ivpt { font-family: var(--ivpt-fb); color: var(--ivpt-text); font-size: calc(15px * var(--ivpt-k)); line-height: 1.55; background: var(--ivpt-paper); overflow-x: clip; } .ivpt *, .ivpt *::before, .ivpt *::after { box-sizing: border-box; } .ivpt img { display: block; max-width: 100%; } :where(.ivpt) a { color: inherit; text-decoration: none; } :where(.ivpt) h1, :where(.ivpt) h2, :where(.ivpt) h3, :where(.ivpt) h4 { font-family: var(--ivpt-fd); font-weight: 500; color: var(--ivpt-ink); margin: 0; text-wrap: balance; letter-spacing: normal; } :where(.ivpt) p { margin: 0; } .ivpt-sec { padding: calc(56px * var(--ivpt-k)) var(--ivpt-gut); } .ivpt-lbl { font: 600 max(var(--ivpt-min), calc(11px * var(--ivpt-k)))/1.3 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ivpt-label); } .ivpt-lbl.ivpt-r { color: var(--ivpt-rojo); } .ivpt-mas { font: 700 max(var(--ivpt-min), calc(11.5px * var(--ivpt-k)))/1 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ivpt-ink); text-decoration: none; border-bottom: 1px solid var(--ivpt-gold); padding-bottom: 6px; white-space: nowrap; } .ivpt-flag { width: calc(30px * var(--ivpt-k)); height: calc(30px * var(--ivpt-k)); border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--ivpt-hair); display: block; } .ivpt-flag img { width: 100%; height: 100%; object-fit: cover; } .ivpt-foto { position: relative; overflow: hidden; background: #cfc6b4; } .ivpt-foto img, .ivpt-foto picture { width: 100%; height: 100%; object-fit: cover; display: block; } .ivpt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ivpt-gold); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(200,169,110,.25); } .ivpt-star { width: 14px; height: 14px; color: var(--ivpt-gold); flex: none; } .ivpt-fl-svg { width: 16px; height: 16px; } .ivpt .iv-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Cabecera de sección y separador (variante B del prototipo) ---------- */ .ivpt-hd { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 16px; margin-bottom: calc(28px * var(--ivpt-k)); } .ivpt-hd-tx { display: grid; gap: 6px; min-width: 0; } .ivpt-hd h2 { font-size: calc(32px * var(--ivpt-k)); line-height: 1.1; } .ivpt-sep { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; margin-bottom: calc(14px * var(--ivpt-k)); } .ivpt-sep i { height: 1px; background: var(--ivpt-gold); opacity: .7; width: var(--ivpt-sep-trazo); display: block; } .ivpt-sep-largo { padding-top: calc(72px * var(--ivpt-k)); } .ivpt-sep-largo .ivpt-sep i { flex: 1; width: auto; opacity: .55; } @media (max-width: 600px) { .ivpt-hd { grid-template-columns: 1fr; } .ivpt-hd h2 { font-size: calc(25px * var(--ivpt-k)); } .ivpt-hd .ivpt-mas { justify-self: start; } } /* ---------- 1 · Cabecera A ---------- */ .ivpt-titular em { font-style: normal; color: var(--ivpt-gold); } .ivpt-buscar { display: flex; background: var(--ivpt-card); border: 1px solid var(--ivpt-hair); padding: 5px; max-width: 520px; margin: 0; } .ivpt-buscar label { flex: 1; min-width: 0; display: flex; margin: 0; } .ivpt-buscar input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 12px 14px; color: var(--ivpt-ink); font: 400 calc(15px * var(--ivpt-k))/1.4 var(--ivpt-fb); border-radius: 0; -webkit-appearance: none; appearance: none; } .ivpt-buscar input::placeholder { color: var(--ivpt-muted); opacity: 1; } .ivpt-buscar input:focus { outline: none; } .ivpt-buscar:focus-within { outline: 2px solid var(--ivpt-gold); outline-offset: 2px; } .ivpt-buscar button { background: var(--ivpt-ink); color: #FAF7F0; border: 0; border-radius: 0; cursor: pointer; font: 700 max(var(--ivpt-min), calc(11.5px * var(--ivpt-k)))/1 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; padding: 0 18px; display: flex; align-items: center; gap: 8px; } .ivpt-prueba { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 max(var(--ivpt-min), calc(11px * var(--ivpt-k)))/1.6 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; } .ivpt-prueba a { text-decoration: none; border-bottom: 1px solid var(--ivpt-gold); } .ivpt-prueba-l { opacity: .75; } /* tarjeta guía nueva */ .ivpt-nueva { background: var(--ivpt-card); border: 1px solid var(--ivpt-hair); padding: calc(22px * var(--ivpt-k)); position: relative; box-shadow: 0 24px 48px -28px rgba(28,26,23,.45); color: var(--ivpt-text); } .ivpt-nueva h3 { font-size: calc(30px * var(--ivpt-k)); margin: 6px 0 4px; } .ivpt-nueva .ivpt-dek { font-family: var(--ivpt-fd); font-size: calc(16px * var(--ivpt-k)); color: var(--ivpt-text); margin: 0 0 14px; line-height: 1.4; font-style: var(--ivpt-cursiva-guia); } .ivpt-nueva .ivpt-mas { display: inline-block; } .ivpt-cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--ivpt-hair); margin-bottom: 14px; } .ivpt-cifras div { padding: 10px 4px; text-align: center; display: grid; gap: 2px; } .ivpt-cifras div + div { border-left: 1px solid var(--ivpt-hair); } .ivpt-cifras b { font: 500 calc(24px * var(--ivpt-k))/1 var(--ivpt-fd); color: var(--ivpt-ink); } .ivpt-cifras span { font-size: max(var(--ivpt-min), calc(12px * var(--ivpt-k))); color: var(--ivpt-muted); } .ivpt-sello { position: absolute; top: -26px; right: -18px; width: 80px; height: 80px; border-radius: 50%; background: var(--ivpt-ink); color: #FAF7F0; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 3px var(--ivpt-ink), 0 0 0 4px var(--ivpt-gold); } .ivpt-sello small { font: 700 8.5px/1.2 var(--ivpt-fb); letter-spacing: .14em; color: var(--ivpt-gold); } .ivpt-sello b { font: 500 18px/1.1 var(--ivpt-fd); } .ivpt-hA { position: relative; color: #FAF7F0; } .ivpt-hA-foto { position: absolute; inset: 0; } .ivpt-hA-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,15,.82) 0%, rgba(20,18,15,.55) 45%, rgba(20,18,15,.1) 100%); } .ivpt-hA-in { position: relative; display: grid; grid-template-columns: 1.25fr .85fr; gap: 40px; align-items: center; padding: calc(64px * var(--ivpt-k)) var(--ivpt-gut); } .ivpt-hA h1 { color: #FAF7F0; font-size: calc(46px * var(--ivpt-k)); line-height: 1.05; margin: 10px 0 12px; } .ivpt-sub { color: rgba(250,247,240,.85); max-width: 46ch; margin: 0 0 22px; font-size: calc(16px * var(--ivpt-k)); } .ivpt-hA .ivpt-hA-tx .ivpt-lbl { color: var(--ivpt-gold); } .ivpt-hA .ivpt-prueba { color: #FAF7F0; } .ivpt-hA-tx { position: relative; z-index: 1; } .ivpt-busc { grid-column: 1; } .ivpt-hA .ivpt-nueva { max-width: 360px; justify-self: end; grid-column: 2; grid-row: 1 / 3; } .ivpt-cred { position: absolute; left: var(--ivpt-gut); bottom: 10px; font-size: 11px; color: rgba(250,247,240,.7); } @media (max-width: 826px) { .ivpt-prueba a:nth-of-type(3) { display: none; } } /* 3 sugerencias; 2 con el contenido a 760 px o menos */ @media (max-width: 600px) { .ivpt-hA-foto { position: relative; inset: auto; height: 400px; } .ivpt-hA-foto::after { background: linear-gradient(0deg, rgba(18,16,13,.92) 0%, rgba(18,16,13,.72) 30%, rgba(18,16,13,.25) 62%, rgba(18,16,13,0) 80%); } .ivpt-hA-in { grid-template-columns: 1fr; padding: 0 var(--ivpt-gut); gap: 0; position: static; } .ivpt-hA .ivpt-nueva { grid-column: auto; grid-row: auto; margin: 30px 16px 24px; max-width: none; justify-self: stretch; } .ivpt-hA-tx { position: absolute; left: 16px; right: 16px; top: auto; bottom: calc(100% - 400px + 22px); text-shadow: 0 1px 14px rgba(0,0,0,.45); } .ivpt-hA h1 { font-size: calc(30px * var(--ivpt-k)); margin: 8px 0 0; } .ivpt-sub { display: none; } .ivpt-busc { background: var(--ivpt-paper); padding: 18px 16px 0; color: var(--ivpt-ink); } .ivpt-hA .ivpt-busc .ivpt-prueba { color: var(--ivpt-ink); flex-wrap: nowrap; } .ivpt-cred { display: none; } } @media (max-width: 399.98px) { .ivpt-prueba-l { display: none; } } /* por debajo de 400 px, sin «Prueba con» */ /* ---------- 2 · Nuestras últimas guías ---------- */ .ivpt-solo-mv { display: none; } @media (max-width: 826px) { .ivpt-solo-pc { display: none; } .ivpt-solo-mv { display: block; } } .ivpt-fino::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(250,247,240,.6); z-index: 1; pointer-events: none; } .ivpt-mat { background: var(--ivpt-card); padding: 8px; border: 1px solid var(--ivpt-hair); box-shadow: 0 18px 30px -24px rgba(28,26,23,.5); } .ivpt-desp { position: relative; isolation: isolate; } .ivpt-desp::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--ivpt-tinte); border: 1px solid var(--ivpt-gold); z-index: -1; } .ivpt-sellito { position: absolute; top: -16px; right: -12px; width: 62px; height: 62px; border-radius: 50%; background: var(--ivpt-ink); color: #FAF7F0; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 3px var(--ivpt-ink), 0 0 0 4px var(--ivpt-gold); z-index: 2; } .ivpt-sellito small { font: 700 8.5px/1.2 var(--ivpt-fb); letter-spacing: .16em; text-transform: uppercase; color: var(--ivpt-gold); } .ivpt-sellito b { font: 500 15px/1.1 var(--ivpt-fd); } .ivpt-trazo { width: 28px; height: 1px; background: var(--ivpt-gold); display: block; margin: 2px 0; } .ivpt-meta { font-size: max(var(--ivpt-min), calc(12.5px * var(--ivpt-k))); color: var(--ivpt-muted); } /* ordenador: cuatro en marco */ .ivpt-g2C { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; padding-right: 14px; } .ivpt-mc { text-decoration: none; display: grid; gap: 22px; align-content: start; } .ivpt-mc .ivpt-foto { aspect-ratio: 4 / 5; } .ivpt-mc .ivpt-flag { position: absolute; left: -10px; bottom: -12px; width: 40px; height: 40px; z-index: 2; box-shadow: 0 0 0 3px var(--ivpt-paper), 0 0 0 4px var(--ivpt-gold); } .ivpt-mc .ivpt-tx { display: grid; gap: 5px; padding-left: 4px; } .ivpt-mc h3 { font-size: calc(22px * var(--ivpt-k)); } /* móvil y tablet: postales que se deslizan */ .ivpt-g2A { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--ivpt-gut) 10px 2px; margin-right: calc(-1 * var(--ivpt-gut)); } .ivpt-post { background: var(--ivpt-card); border: 1px solid var(--ivpt-hair); padding: 9px 9px 0; text-decoration: none; display: flex; flex-direction: column; position: relative; box-shadow: 0 1px 0 var(--ivpt-hair), 0 22px 34px -28px rgba(28,26,23,.55); scroll-snap-align: start; } .ivpt-post .ivpt-foto { aspect-ratio: 4 / 3; } .ivpt-post .ivpt-cuerpo { padding: 14px 8px 16px; display: grid; gap: 6px; } .ivpt-post .ivpt-pais { display: flex; align-items: center; gap: 8px; } .ivpt-post h3 { font-size: calc(21px * var(--ivpt-k)); } .ivpt-post .ivpt-sellito { top: -12px; right: -10px; width: 54px; height: 54px; } .ivpt-post .ivpt-sellito b { font-size: 13px; } /* con las guías deslizándose (contenido de 760 px o menos), «Ver todas las guías» pasa bajo el título (como en el móvil) y deja sitio a «Desliza» */ @media (max-width: 826px) { .ivpt-sec-guias .ivpt-hd { grid-template-columns: 1fr; } .ivpt-sec-guias .ivpt-hd .ivpt-mas { justify-self: start; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .ivpt-post, .ivpt-postal, .ivpt-ficha { transition: transform .25s, box-shadow .25s; } .ivpt-post:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--ivpt-hair), 0 30px 44px -28px rgba(28,26,23,.6); } .ivpt-ficha:hover { transform: translateY(-3px); box-shadow: 0 24px 36px -28px rgba(28,26,23,.55); } .ivpt-postal:hover { transform: none; } } /* deslizadores: «Desliza →», barra dorada que crece y sin barra del navegador */ .ivpt-desliza { position: relative; } .ivpt-desliza-aviso { position: absolute; right: 0; top: -34px; display: none; align-items: center; gap: 6px; font: 700 max(var(--ivpt-min), 10.5px)/1 var(--ivpt-fb); letter-spacing: .16em; text-transform: uppercase; color: var(--ivpt-gold); } .ivpt-desliza-aviso svg { width: 14px; height: 14px; animation: ivpt-empuja 1.6s ease-in-out infinite; } .ivpt-desliza.ivpt-tocado .ivpt-desliza-aviso svg { animation: none; } @keyframes ivpt-empuja { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .ivpt-desliza-aviso svg { animation: none; } } .ivpt-progreso { display: none; height: 2px; background: rgba(200,169,110,.18); margin-top: 10px; position: relative; overflow: hidden; } .ivpt-progreso i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ivpt-gold); transition: width .12s linear; } @media (prefers-reduced-motion: reduce) { .ivpt-progreso i { transition: none; } } .ivpt-desliza::after { content: ""; position: absolute; right: calc(-1 * var(--ivpt-gut)); top: 0; bottom: 14px; width: 44px; background: linear-gradient(90deg, rgba(28,26,23,0), rgba(28,26,23,.85)); pointer-events: none; display: none; transition: opacity .2s; } .ivpt-desliza.ivpt-fin::after { opacity: 0; } .ivpt-claro::after { background: linear-gradient(90deg, rgba(250,247,240,0), rgba(250,247,240,.9)); } .ivpt-claro .ivpt-desliza-aviso { color: var(--ivpt-label); } .ivpt-claro .ivpt-progreso { background: rgba(130,99,47,.15); } .ivpt-scroller { scrollbar-width: none; -ms-overflow-style: none; } .ivpt-scroller::-webkit-scrollbar { display: none; } @media (max-width: 826px) { .ivpt-desliza-aviso { display: flex; } .ivpt-progreso { display: block; } .ivpt-desliza::after { display: block; } .ivpt-iC2 .ivpt-hd .ivpt-mas { display: none; } } /* ---------- 3 · Destinos: índice a dos columnas, sin cajas ---------- */ .ivpt-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ivpt-hair); margin-bottom: calc(20px * var(--ivpt-k)); overflow-x: auto; scrollbar-width: none; } .ivpt-tabs::-webkit-scrollbar { display: none; } .ivpt-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0; cursor: pointer; font: 600 max(var(--ivpt-min), calc(11.5px * var(--ivpt-k)))/1 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ivpt-muted); padding: 0 0 11px; white-space: nowrap; } .ivpt-tabs button[aria-selected="true"] { color: var(--ivpt-ink); border-color: var(--ivpt-gold); } .ivpt-dA { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; list-style: none; margin: 0; padding: 0; } .ivpt-dA li { margin: 0; } .ivpt-dA li[hidden], .ivpt-dA:not(.ivpt-todos) .ivpt-mas10 { display: none; } .ivpt-dA a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ivpt-hair); text-decoration: none; } .ivpt-dA b { font: 500 calc(18px * var(--ivpt-k))/1.2 var(--ivpt-fd); color: var(--ivpt-ink); } .ivpt-dA small { font-size: max(var(--ivpt-min), calc(12.5px * var(--ivpt-k))); color: var(--ivpt-muted); text-align: right; } @media (max-width: 760px) { .ivpt-dA { grid-template-columns: 1fr; } } /* ---------- 4 · Planifica tu viaje: menú en filas ---------- */ .ivpt-ico { width: 22px; height: 22px; color: var(--ivpt-rojo); } .ivpt-pB { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; } .ivpt-lado .ivpt-hd { margin-bottom: 12px; } .ivpt-lado p { margin: 0; max-width: 34ch; } .ivpt-filas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--ivpt-ink); align-content: start; } .ivpt-filas a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ivpt-hair); text-decoration: none; } .ivpt-filas b { font: 600 calc(15.5px * var(--ivpt-k))/1.2 var(--ivpt-fb); color: var(--ivpt-ink); display: block; } .ivpt-filas small { font-size: max(var(--ivpt-min), calc(13px * var(--ivpt-k))); color: var(--ivpt-muted); } .ivpt-fl { color: var(--ivpt-label); } @media (max-width: 760px) { .ivpt-pB { grid-template-columns: 1fr; gap: 8px; } .ivpt-filas { grid-template-columns: 1fr; } } /* ---------- 5 · Novedades: fichas enmarcadas ---------- */ .ivpt-n2A { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ivpt-ficha { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: var(--ivpt-card); border: 1px solid var(--ivpt-hair); padding: 12px; text-decoration: none; } .ivpt-ficha .ivpt-mat { padding: 5px; box-shadow: none; } .ivpt-ficha .ivpt-foto { width: 132px; aspect-ratio: 4 / 3; } .ivpt-ficha .ivpt-tx { display: grid; gap: 7px; } .ivpt-ficha h3 { font-size: calc(18px * var(--ivpt-k)); line-height: 1.25; } .ivpt-leer2 { font: 700 max(var(--ivpt-min), calc(10.5px * var(--ivpt-k)))/1 var(--ivpt-fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ivpt-ink); border-bottom: 1px solid var(--ivpt-gold); padding-bottom: 5px; justify-self: start; } @media (max-width: 760px) { .ivpt-n2A { grid-template-columns: 1fr; gap: 10px; } .ivpt-ficha { gap: 14px; padding: 10px; } .ivpt-ficha .ivpt-foto { width: 96px; } .ivpt-ficha h3 { font-size: calc(16px * var(--ivpt-k)); } } /* ---------- 6 · Inspiración: postales giradas sobre tinta ---------- */ .ivpt-iC2 { background: var(--ivpt-ink); } .ivpt-iC2 .ivpt-hd h2 { color: #FAF7F0; } .ivpt-iC2 .ivpt-hd .ivpt-mas { color: #FAF7F0; } .ivpt-iC2 .ivpt-hd .ivpt-lbl { color: var(--ivpt-gold); } .ivpt-i2B { display: grid; grid-template-columns: repeat(4, minmax(0, 230px)); gap: 30px; padding: 8px 6px 16px; } .ivpt-postal { background: #F6F1E6; padding: 10px 10px 0; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 26px 40px -22px rgba(0,0,0,.8); } .ivpt-postal:nth-child(1) { transform: rotate(-1.6deg); } .ivpt-postal:nth-child(2) { transform: rotate(1.2deg) translateY(10px); } .ivpt-postal:nth-child(3) { transform: rotate(-.8deg); } .ivpt-postal:nth-child(4) { transform: rotate(1.6deg) translateY(6px); } .ivpt-postal .ivpt-foto { aspect-ratio: 4 / 5; } .ivpt-postal .ivpt-tx { padding: 12px 4px 16px; display: grid; gap: 6px; } .ivpt-postal .ivpt-lbl { color: var(--ivpt-rojo); } .ivpt-postal h3 { font-size: calc(18px * var(--ivpt-k)); line-height: 1.22; } @media (max-width: 826px) { .ivpt-i2B { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 64%; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--ivpt-gut)); padding: 14px var(--ivpt-gut) 24px 8px; } .ivpt-postal { scroll-snap-align: start; } } /* ---------- 7 · Pie (toda la web con el interruptor) ---------- */ .ivpt-pie3 { background: #151310; border-top: 1px solid rgba(200,169,110,.35); color: #D9D1C2; font-family: var(--ivpt-fb); font-size: calc(15px * var(--ivpt-k)); line-height: 1.55; } .ivpt-pie3 *, .ivpt-pie3 *::before, .ivpt-pie3 *::after { box-sizing: border-box; } .ivpt-pie3 a { text-decoration: none; color: inherit; } .ivpt-pie-in { padding: 0 var(--ivpt-gut) 22px; } .ivpt-p-marca { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 32px; padding: calc(40px * var(--ivpt-k)) 0 calc(28px * var(--ivpt-k)); border-bottom: 1px solid rgba(200,169,110,.28); } .ivpt-logo3 { font: 500 calc(30px * var(--ivpt-k))/1 var(--ivpt-fd); color: #FAF7F0 !important; position: relative; display: inline-block; } .ivpt-logo-st { position: absolute; width: 9px; height: 9px; color: var(--ivpt-gold); left: 2.5em; top: -.3em; } .ivpt-p-marca p { margin: 10px 0 0; font-size: calc(14px * var(--ivpt-k)); color: #A79F91; max-width: 40ch; } .ivpt-redes3 { display: flex; gap: 8px; } .ivpt-redes3 a { width: 38px; height: 38px; border: 1px solid rgba(200,169,110,.4); display: grid; place-items: center; } .ivpt-redes3 svg { width: 16px; height: 16px; color: #FAF7F0; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .ivpt-redes3 a { transition: background .2s, border-color .2s; } } .ivpt-redes3 a:hover { background: rgba(200,169,110,.12); border-color: var(--ivpt-gold); } .ivpt-p-cuerpo { display: grid; grid-template-columns: 3fr 1fr 1fr; gap: 40px; padding: calc(32px * var(--ivpt-k)) 0; } .ivpt-p-h { display: flex; align-items: center; gap: 10px; font: 700 max(var(--ivpt-min), 10.5px)/1 var(--ivpt-fb); letter-spacing: .16em; text-transform: uppercase; color: var(--ivpt-gold); margin: 0 0 16px; } .ivpt-p-st { width: 10px; height: 10px; flex: none; } .ivpt-todas { margin-left: auto; color: #A79F91 !important; font-weight: 600; letter-spacing: .12em; border-bottom: 1px solid rgba(200,169,110,.5); padding-bottom: 3px; } .ivpt-p-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: calc(14px * var(--ivpt-k)); } .ivpt-p-lista li { margin: 0; } .ivpt-p-lista a:hover, .ivpt-p-rej a:hover { color: #FAF7F0; } .ivpt-p-rej { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; } .ivpt-p-rej a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(250,247,240,.08); font: 400 calc(15.5px * var(--ivpt-k))/1.25 var(--ivpt-fd); color: #ECE6DA; } .ivpt-mini-flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(250,247,240,.25); display: block; } .ivpt-mini-flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .ivpt-p-legal { border-top: 1px solid rgba(250,247,240,.1); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; color: #8A8275; } .ivpt-enl { display: flex; flex-wrap: wrap; gap: 4px 16px; } .ivpt-enl a, .ivpt-enl button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; } @media (max-width: 760px) { .ivpt-p-marca { grid-template-columns: 1fr; padding-top: 32px; } .ivpt-p-cuerpo { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 26px 0; } .ivpt-p-cuerpo > .ivpt-p-guias { grid-column: 1 / -1; } .ivpt-p-rej { grid-template-columns: 1fr 1fr; gap: 0 18px; } .ivpt-p-rej a { font-size: 15px; } .ivpt-p-legal { flex-direction: column; } } /* ---------- 8 · Botón «volver arriba» flotante ---------- */ .ivpt-arriba { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; } .ivpt-arriba.ver { opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .ivpt-arriba { transition: none; transform: none; } } .ivpt-btB { width: 52px; height: 52px; border-radius: 50%; background: var(--ivpt-card); display: grid; place-items: center; position: relative; border: 0; padding: 0; box-shadow: 0 10px 24px -12px rgba(28,26,23,.5); cursor: pointer; color: var(--ivpt-ink); } .ivpt-btB:focus-visible { outline: 2px solid var(--ivpt-gold); outline-offset: 2px; } .ivpt-anillo { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); } .ivpt-flecha { width: 16px; height: 16px; } /* ---------- «Quién está detrás» (revisión del 6/11/2026, punto 1): el diseño de la portada pública (r5.css), solo con la escala * compacta, el separador y el ancho de 1200 px ---------- */ .ivpt-quien .iv-r5-quien-a, .ivpt-quien .iv-r5-quien-b { padding: calc(48px * var(--ivpt-k)); } .ivpt-quien .iv-r5-quien-t { font-size: calc(34px * var(--ivpt-k)); } .ivpt-quien .iv-r5-quien p { font-size: calc(16px * var(--ivpt-k)); } .ivpt-quien .iv-r5-quien-frase { font-size: calc(26px * var(--ivpt-k)) !important; } .ivpt-quien .iv-eyebrow { font-size: max(var(--ivpt-min), calc(11px * var(--ivpt-k))); } .ivpt-quien .iv-r5-quien p { margin: 1em 0; } /* los de la portada pública (el reset de .ivpt los quitaba) */ .ivpt-quien .iv-r5-quien p.iv-r5-quien-frase { margin: 8px 0 14px; } @media (max-width: 900px) { /* el mismo corte que r5.css */ .ivpt-quien .iv-r5-quien-a, .ivpt-quien .iv-r5-quien-b { padding: calc(28px * var(--ivpt-k)) calc(22px * var(--ivpt-k)); } .ivpt-quien .iv-r5-quien-t { font-size: calc(28px * var(--ivpt-k)); } } /* ===== efectos (aprobados por Nacho el 8/11/2026; copiados de wordpress/diseno/prototipos/PortadaEfectos.html, * bloque «efectos» y último