/* Portada · ronda 3 (PORTADA-3.md; prototipos Portada3 y GuiaPortada C). Solo se carga en la portada con iv_portada_3 o ?iv_p3=1.
 * Efectos solo en ordenador con ratón; nada con «reducir movimiento»; solo transform y opacity en lo que se anima. */

/* ---------- 1. Hero ---------- */
.iv-p3-hero { position: relative; height: 600px; overflow: hidden; background: #1E2633; color: var(--paper); }
.iv-p3-media, .iv-p3-foto, .iv-p3-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-p3-foto img { object-fit: cover; display: block; }
/* Velo solo del lado del texto (nunca parejo). */
.iv-p3-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,20,28,.82) 0%, rgba(16,20,28,.55) 38%, rgba(16,20,28,0) 70%); }
.iv-p3-in { position: relative; max-width: var(--contenido-max); height: 100%; margin: 0 auto; padding: 0 var(--lado); }
.iv-p3-txt { position: absolute; left: var(--lado); top: 96px; width: 620px; max-width: calc(100% - 2 * var(--lado)); }
.iv-p3-eb { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #D9BE85; }
.iv-p3-h1 { font-family: var(--display); font-weight: 500; font-size: 64px; line-height: 1.02; margin: 16px 0 14px; color: var(--paper); }
.iv-p3-h1 em { font-style: italic; font-weight: 400; color: #D9BE85; }
.iv-p3-dek { font-size: 17px; line-height: 1.55; color: rgba(250,247,240,.88); margin: 0 0 24px; }
.iv-p3-cred { font-size: 11px; color: rgba(250,247,240,.7); }
.iv-p3-cred-d { position: absolute; left: var(--lado); bottom: 14px; }
.iv-p3-cred-m { display: none; }

/* ---------- 3. Buscador ---------- */
.iv-p3 .iv-p3-buscar { display: flex; max-width: 560px; background: #FFFDF8; padding: 6px; border: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.iv-p3 .iv-p3-buscar label { flex: 1; display: flex; min-width: 0; }
.iv-p3 .iv-p3-buscar input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 14px 16px !important; font: 16px var(--sans); color: var(--ink); outline: none; box-shadow: none !important; }
.iv-p3 .iv-p3-buscar input::placeholder { color: #8A8377; }
.iv-p3-btn { display: flex; align-items: center; gap: 8px; border: 0; background: var(--ink); color: var(--paper); font: 700 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 0 22px; min-height: 48px; cursor: pointer; transition: background .25s, color .25s; }
.iv-p3-btn svg { transition: transform .25s; }
.iv-p3-prueba { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 16px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.iv-p3-prueba span { color: rgba(250,247,240,.6); }
.iv-p3-prueba a { position: relative; padding: 6px 0; color: var(--paper) !important; text-decoration: none; transition: color .25s; }
.iv-p3-prueba a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--gold); transform-origin: left; transform: scaleX(.35); transition: transform .3s; }
@media (hover: hover) and (min-width: 901px) {
	.iv-p3 .iv-p3-buscar:hover { border-color: var(--gold); }
	.iv-p3 .iv-p3-buscar:focus-within { box-shadow: 0 0 0 3px rgba(200,169,110,.55); }
	.iv-p3-btn:hover { background: var(--gold); color: var(--ink); }
	.iv-p3-btn:hover svg { transform: translateX(3px); }
	.iv-p3-prueba a:hover { color: #D9BE85 !important; }
	.iv-p3-prueba a:hover::after { transform: scaleX(1); }
}

/* ---------- 2. Tarjeta de la guía más reciente (solo ordenador) ---------- */
.iv-p3 a.iv-p3-cg { position: absolute; right: var(--lado); bottom: 56px; width: 470px; background: var(--paper); color: var(--ink); text-decoration: none; padding: 30px 32px 26px; display: block; }
.iv-p3-cg-lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2F5D50; }
.iv-p3-cg-t { display: block; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; margin: 10px 0 8px; }
.iv-p3-cg-fr { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 18px; color: #4A453D; margin: 0 0 20px; }
.iv-p3-cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.iv-p3-cifras > span { padding: 14px 0 12px; text-align: center; }
.iv-p3-cifras > span + span { border-left: 1px solid var(--hairline); }
.iv-p3-cifras b { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1; }
.iv-p3-cifras small { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.iv-p3-lk { display: inline-flex; align-items: center; gap: 10px; position: relative; padding-bottom: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.iv-p3-lk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--gold); }
.iv-p3-lk svg { transition: transform .3s; }
/* Sello oscuro con borde y aro dorados (Portada3). */
.iv-p3-sello { position: absolute; right: -30px; top: -44px; width: 104px; height: 104px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px var(--gold); color: #D9BE85; display: flex; align-items: center; justify-content: center; text-align: center; }
.iv-p3-sello > span { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; }
.iv-p3-sello b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--paper); }
@keyframes iv-p3-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes iv-p3-gira { from { opacity: 0; transform: rotate(-40deg) scale(.7); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.iv-p3 a.iv-p3-cg { animation: iv-p3-sube .9s .2s both cubic-bezier(.2,.7,.2,1); }
	.iv-p3-sello { animation: iv-p3-gira 1.2s .7s both cubic-bezier(.2,.7,.2,1); }
}
@media (hover: hover) and (min-width: 901px) { .iv-p3 a.iv-p3-cg:hover .iv-p3-lk svg { transform: translateX(5px); } }

/* ---------- 4. Tira de guías ---------- */
.iv-p3 .iv-r5-sec.iv-p3-sec-guias { margin-top: 64px; }
.iv-p3-lab { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.iv-p3 ul.iv-p3-tira { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.iv-p3 a.iv-p3-g { display: block; height: 100%; text-decoration: none; color: var(--ink); background: #FFFDF8; border: 1px solid var(--hairline); transition: transform .3s, box-shadow .3s, border-color .3s; }
.iv-p3-g-im { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.iv-p3-g-im img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.iv-p3-g-tx { display: block; padding: 14px 16px 16px; }
.iv-p3-g-pais { display: flex; align-items: center; gap: 8px; }
.iv-p3-g-t { display: block; font-family: var(--display); font-weight: 500; font-size: 24px; margin: 8px 0 4px; }
.iv-p3-g-m { display: block; font-size: 12.5px; color: var(--muted); }
.iv-p3-desliza, .iv-p3-pos { display: none; }
@media (hover: hover) and (min-width: 901px) {
	.iv-p3 a.iv-p3-g:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,26,23,.10); border-color: var(--gold); }
	.iv-p3 a.iv-p3-g:hover .iv-p3-g-im img { transform: scale(1.06); }
}

/* Banderas redondas (las del sitio) con borde fino. */
.iv-p3-fl { display: block; flex: none; width: var(--fl, 30px); height: var(--fl, 30px); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(28,26,23,.15); }
.iv-p3-fl img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Destinos ---------- */
.iv-p3 .iv-r5-sec.iv-p3-sec-paises { margin-top: 64px; }
.iv-p3 ul.iv-p3-paises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.iv-p3-paises > li[hidden] { display: none; }
.iv-p3 a.iv-p3-f { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; background: #FFFDF8; border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: border-color .25s, transform .25s; }
.iv-p3-f .iv-p3-fl { transition: transform .4s, box-shadow .3s; }
.iv-p3-f b { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; }
.iv-p3-f small { font-size: 12px; color: var(--muted); }
.iv-p3-f-m, .iv-p3-pr-m { display: none; }
/* Destinos: 10 en ordenador; los de un artículo, solo con «Ver todos los países» (o con una pestaña de continente). */
.iv-p3-paises:not(.iv-p3-todos) > li.iv-p3-mas10, .iv-p3-paises:not(.iv-p3-todos) > li.iv-p3-uno { display: none; }
.iv-p3-vertodos { margin: 20px 0 0; }
.iv-p3-vertodos[hidden] { display: none; }
@media (hover: hover) and (min-width: 901px) {
	.iv-p3 a.iv-p3-f:hover { border-color: var(--gold); transform: translateY(-2px); }
	.iv-p3 a.iv-p3-f:hover .iv-p3-fl { transform: rotate(-8deg) scale(1.05); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
}

/* ---------- 6. Móvil ---------- */
@media (max-width: 900px) {
	.iv-p3-hero { height: auto; overflow: visible; background: var(--paper); color: var(--ink); }
	.iv-p3-media { position: relative; height: 300px; overflow: hidden; background: #1E2633; }
	.iv-p3-velo { background: linear-gradient(180deg, rgba(16,20,28,0) 35%, rgba(16,20,28,.72) 100%); }
	.iv-p3-in, .iv-p3-txt { position: static; height: auto; width: auto; max-width: none; padding: 0; }
	.iv-p3-txt { padding: 18px var(--lado) 6px; }
	.iv-p3-eb, .iv-p3-dek, .iv-p3 a.iv-p3-cg, .iv-p3-cred-d { display: none; }
	/* Solo el titular sobre la foto: se coloca sobre la parte de abajo de la foto (300 px), dentro del hero. */
	.iv-p3-h1 { position: absolute; left: var(--lado); right: var(--lado); bottom: calc(100% - 282px); margin: 0; font-size: 36px; }
	.iv-p3 .iv-p3-buscar { max-width: none; border: 1.5px solid var(--ink); padding: 5px; }
	.iv-p3 .iv-p3-buscar input { padding: 12px !important; font-size: 15px; }
	.iv-p3-btn { padding: 0 16px; min-height: 46px; }
	.iv-p3-btn svg { display: none; }
	.iv-p3-prueba { gap: 4px 16px; margin-top: 12px; font-size: 11px; }
	.iv-p3-prueba span { color: var(--muted); }
	.iv-p3-prueba a { color: var(--ink) !important; padding: 6px 0 2px; }
	.iv-p3-prueba a::after { transform: none; bottom: 0; }
	.iv-p3-cred-m { display: block; margin-top: 10px; font-size: 10px; color: #8A8377; }

	.iv-p3 .iv-r5-sec.iv-p3-sec-guias, .iv-p3 .iv-r5-sec.iv-p3-sec-paises { margin-top: 40px; }
	.iv-p3-todas { display: none; }
	.iv-p3-desliza { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
	.iv-p3-desliza span { display: inline-block; }
	/* Tira deslizable: la tarjeta siguiente asoma por la derecha. */
	.iv-p3 ul.iv-p3-tira { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--lado)); padding-right: var(--lado); overscroll-behavior-x: contain; }
	.iv-p3 ul.iv-p3-tira::-webkit-scrollbar { display: none; }
	.iv-p3-tira > li { flex: none; width: 232px; scroll-snap-align: start; }
	.iv-p3-g-t { font-size: 21px; }
	.iv-p3-g-ver, .iv-p3-g-pais .iv-p3-fl { display: none; }
	.iv-p3-pos { display: flex; gap: 6px; margin-top: 14px; }
	.iv-p3-pos span { height: 2px; width: 12px; background: var(--hairline); transition: width .3s, background-color .3s; }
	.iv-p3-pos span.on { width: 28px; background: var(--gold); }

	.iv-p3-sec-paises .iv-r5-pestanas { display: none; }
	.iv-p3 ul.iv-p3-paises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.iv-p3-paises:not(.iv-p3-todos) > li.iv-p3-mas6 { display: none; }
	.iv-p3 a.iv-p3-f { padding: 12px; gap: 10px; }
	.iv-p3-f .iv-p3-fl { --fl: 38px !important; }
	.iv-p3-f b { font-size: 17px; }
	.iv-p3-vertodos { margin: 16px 0 0; }
	.iv-p3-f-d, .iv-p3-todos-d, .iv-p3-pr-d { display: none; }
	.iv-p3-f-m, .iv-p3-pr-m { display: inline; }
}
@keyframes iv-p3-flecha { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(5px); } 90% { transform: translateX(0); } }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	.iv-p3-desliza span { animation: iv-p3-flecha 4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.iv-p3 *, .iv-p3 *::after { transition: none !important; animation: none !important; }
}