/* Efectos y tarjetas (EFECTOS-PORTADA.md, Nacho 20/10/2026). Solo se carga con el interruptor iv_efectos (o ?iv_ef=1).
 * Lo que se anima: transform y opacity. Efectos de ratón solo con (hover: hover); nada animado con «reducir movimiento». */

/* ---------- 1. Inspiración, opción A: marco de la web y texto debajo ---------- */
.iv-ef .iv-ef-ins-lista .iv-ef-ins { display: block; color: var(--ink) !important; text-decoration: none; }
.iv-ef-ins-marco { display: block; position: relative; padding: 0 14px 14px 0; }
.iv-ef-ins-marco::before { content: ""; position: absolute; left: 14px; top: 14px; right: 0; bottom: 0; background: var(--iv-ef-tinte, #EADBD2); }
.iv-ef-ins-foto { display: block; position: relative; z-index: 1; overflow: hidden; height: 400px; background: var(--paper-2); }
.iv-ef-ins-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-ef-ins-lab { display: block; margin-top: 18px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9A4A33; }
.iv-ef-ins-t { display: block; margin-top: 6px; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.15; }
.iv-ef-ins-lista > li:first-child .iv-ef-ins-t { font-size: 30px; }
.iv-ef-ins-ir { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.iv-r5-ideas.iv-ef-ins-lista .iv-ef-ins-foto { height: 360px; }
@media (max-width: 900px) {
	.iv-ef-ins-foto, .iv-r5-ideas.iv-ef-ins-lista .iv-ef-ins-foto { height: auto; aspect-ratio: 4 / 3; }
	.iv-ef-ins-marco { padding: 0 12px 12px 0; }
	.iv-ef-ins-marco::before { left: 12px; top: 12px; }
	.iv-ef-ins-t, .iv-ef-ins-lista > li:first-child .iv-ef-ins-t { font-size: 22px; }
}

/* Subrayado dorado que crece (texto en línea, también en varias líneas). */
.iv-ef-sub { background: linear-gradient(#C8A96E, #C8A96E) 0 100% / 0 1.5px no-repeat; }

/* ---------- 2. Efecto común de todas las tarjetas ---------- */
.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t) { position: relative; }
.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t)::after {
	content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; opacity: 0;
	border: 1px solid #C8A96E; box-shadow: 0 18px 40px -18px rgba(28, 26, 23, .28);
}
.iv-ef :is(.iv-r5-guia-t, .iv-r5-pais-t, .iv-r5-plan-t, .iv-r5-tarjeta-t, .iv-r5-dest-t, .iv-c-entrada-t, .iv-r5-ts-t) {
	text-decoration: underline 1.5px transparent; text-underline-offset: 5px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* Tarjetas: sube 4 px, sombra y borde dorado (en ::after, solo opacidad), foto que se acerca, título y flecha. */
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t) { transition: transform .45s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t)::after { transition: opacity .45s; }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t):hover { transform: translateY(-4px); }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t):hover::after { opacity: 1; }
	.iv-ef :is(.iv-r5-guia, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t) img { transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef :is(.iv-r5-guia, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t):hover img { transform: scale(1.045); }
	.iv-ef :is(.iv-r5-guia-t, .iv-r5-pais-t, .iv-r5-plan-t, .iv-r5-tarjeta-t, .iv-r5-dest-t, .iv-c-entrada-t, .iv-r5-ts-t) { transition: text-decoration-color .5s; }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada):hover :is(.iv-r5-guia-t, .iv-r5-pais-t, .iv-r5-plan-t, .iv-r5-tarjeta-t, .iv-r5-dest-t, .iv-c-entrada-t, .iv-r5-ts-t) { text-decoration-color: #C8A96E; }
	.iv-ef :is(.iv-r5-flecha, .iv-ef-flecha, .iv-r5-boton) { display: inline-block; transition: transform .35s; }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-tarjeta, .iv-r5-dest, .iv-c-entrada):hover :is(.iv-r5-flecha, .iv-r5-boton) { transform: translateX(5px); }
	/* Países: la bandera gira un poco. «Planifica»: el icono sube. */
	.iv-ef .iv-r5-pais :is(.iv-sello, .iv-bandera) { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef .iv-r5-pais:hover :is(.iv-sello, .iv-bandera) { transform: rotate(-8deg) scale(1.06); }
	.iv-ef .iv-r5-plan svg { transition: transform .4s; }
	.iv-ef .iv-r5-plan:hover svg { transform: translateY(-3px); }

	/* Inspiración A: la foto se acerca, el bloque se desplaza 6 px, el título se subraya y «Leer la lista →» avanza. */
	.iv-ef-ins-marco::before { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef-ins-foto img { transition: transform 1.2s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef-ins-ir { transition: transform .3s; }
	.iv-ef-sub { transition: background-size .5s; }
	.iv-ef-ins:hover .iv-ef-ins-marco::before { transform: translate(6px, 6px); }
	.iv-ef-ins:hover .iv-ef-ins-foto img { transform: scale(1.045); }
	.iv-ef-ins:hover .iv-ef-sub { background-size: 100% 1.5px; }
	.iv-ef-ins:hover .iv-ef-ins-ir { transform: translateX(4px); color: var(--ink); }
}

/* Con ratón y «reducir movimiento»: sin animación, solo el borde dorado al pasar. */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t):hover::after { opacity: 1; box-shadow: none; }
}

/* Móvil (sin ratón): al tocar, solo un leve oscurecimiento para confirmar el toque. */
@media (hover: none) {
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t, .iv-ef-ins)::after { border: 0; box-shadow: none; background: rgba(28, 26, 23, .07); }
	.iv-ef .iv-ef-ins { position: relative; }
	.iv-ef .iv-ef-ins::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
	.iv-ef :is(.iv-r5-guia, .iv-r5-pais, .iv-r5-plan, .iv-r5-tarjeta, .iv-r5-ts-it, .iv-r5-dest, .iv-c-entrada, .ivr-aloj-t, .ivr-rest-t, .iv-ef-ins):active::after { opacity: 1; }
}

/* ---------- 3. Pie ---------- */
.iv-ef .iv-r5-pie { position: relative; }
.iv-ef-arriba { position: absolute; right: max(var(--lado), calc((100% - var(--contenido-max)) / 2 + var(--lado))); top: 0; padding: 12px 16px; border: 1px solid #4A453D; border-top: 0; font-size: 11px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1 !important; color: #E8E2D6 !important; }
.iv-ef .iv-r5-pie-in > div > a { display: block; width: max-content; max-width: 100%; }
.iv-ef .iv-r5-pie-in > div > a .iv-ef-sub { background-position: 0 88%; background-size: 0 1px; }
.iv-ef .iv-r5-pie-in .iv-ef-flecha { margin-left: 6px; opacity: 0; }
.iv-ef-redes { gap: 10px !important; margin-top: 20px !important; }
.iv-ef-redes a { position: relative; width: 38px; height: 38px; display: flex !important; align-items: center; justify-content: center; border: 1px solid #4A453D; line-height: 1 !important; }
.iv-ef-redes a::before { content: ""; position: absolute; inset: -1px; background: #C8A96E; opacity: 0; }
.iv-ef-redes a svg { position: relative; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.iv-ef .iv-r5-pie-in > div > a { transition: transform .3s; }
	.iv-ef .iv-r5-pie-in > div > a .iv-ef-sub { transition: background-size .4s; }
	.iv-ef .iv-r5-pie-in .iv-ef-flecha { transition: opacity .3s; }
	.iv-ef .iv-r5-pie-in > div > a:hover { transform: translateX(3px); color: #FFF !important; }
	.iv-ef .iv-r5-pie-in > div > a:hover .iv-ef-sub { background-size: 100% 1px; }
	.iv-ef .iv-r5-pie-in > div > a:hover .iv-ef-flecha { opacity: 1; }
	.iv-ef-redes a::before, .iv-ef-arriba { transition: opacity .3s, color .3s, background-color .3s; }
}
@media (hover: hover) {
	.iv-ef-redes a:hover::before { opacity: 1; }
	.iv-ef-redes a:hover { color: var(--ink) !important; }
	.iv-ef-arriba:hover { background: #C8A96E; color: var(--ink) !important; border-color: #C8A96E; }
}

/* ---------- 4. Aparición al bajar (solo si el script la ha preparado; sin script, todo se ve) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.iv-ef-espera > *, .iv-ef-espera :is(ul, ol) > li { opacity: 0; transform: translateY(14px); }
	.iv-ef-visto > *, .iv-ef-visto :is(ul, ol) > li { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1s cubic-bezier(.2, .6, .2, 1); }
	.iv-ef-visto :is(ul, ol) > li:nth-child(2) { transition-delay: .08s; }
	.iv-ef-visto :is(ul, ol) > li:nth-child(3) { transition-delay: .16s; }
	.iv-ef-visto :is(ul, ol) > li:nth-child(4) { transition-delay: .24s; }
	.iv-ef-visto :is(ul, ol) > li:nth-child(n+5) { transition-delay: .3s; }
}
@media print { .iv-ef-espera > *, .iv-ef-espera :is(ul, ol) > li { opacity: 1 !important; transform: none !important; } }