@import url(/menus/_b/fonts/ineicons/style.css);
@import url(../fonts/iconos-explica/iconos-explica.css);

body 							{ font-size: 1rem; display: flex; flex-flow: column nowrap; min-height: 100vh; overflow-x: hidden; min-width: 320px; }
body > *        				{ padding: 0px 15px; line-height: 1.5rem;}
body > *:not(:is(nav, footer)) 	{ max-width: 1280px; margin: 0 auto 0px; display: block; }
body > main						{ margin-bottom: 1rem !important; }
body > header					{ width: 100%; padding: 15px;}
body > header > section     	{ margin: 0px auto; padding: 0px; display: flex; flex-flow: row nowrap; gap: 10px; justify-content: space-between;}

/* LOGO INE */
.ImagenLogoIne          		{ display: flex; flex-flow: row nowrap; align-items: flex-end; gap: 15px;}
.ImagenLogoIne > a      		{ padding-left: 0; line-height: initial;}
.ImagenLogoIne > a > img 		{ height: 80px;}
.ImagenLogoIne > .tituloLogo    { font-size: 2.3rem; color: var(--color2-bg); margin: 0; padding: 0; font-weight: 400; line-height: 2.3rem; position: relative; top: 1px; }

/* ESTILOS PARA MENU-IDIOMA Y BUSCADOR */
body > header > section .Menu_idioma            { text-align: right; }
body > header > section .Menu_idioma ul         { display: flex; flex-flow: row nowrap; gap: 10px; justify-content: flex-end; align-items: center; margin: 0; padding: 0; white-space: nowrap;}
body > header > section .MenuDch                { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;gap: 10px; }
#Menu_cabeceraBuscador .Menu_searchString       { text-decoration: none; background-color: var(--bg-color); padding: 0 5px; vertical-align: bottom; width: calc(100% - 36px); height: 36px; border: 1px solid var(--text-color); box-sizing: border-box; margin: 0; }
#Menu_cabeceraBuscador                  		{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; gap: 0; }
#Menu_cabeceraBuscador > button         		{ background: var(--color2-bg); color: white; box-sizing: border-box; width: 36px; height: 36px; position: relative; top: 0px; left: 0; margin: 0 0 0 -5px; border: 1px solid var(--text-color); line-height: 34px; padding: 0; }
#Menu_cabeceraBuscador > button::before 		{ content: "\e91d"; cursor: pointer; position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-family: "INEIcons"; font-weight: 900; font-size: 24px; text-align: center; padding: 0; }
#Menu_cabeceraBuscador > button:hover, 
#Menu_cabeceraBuscador > button:focus   		{ box-shadow: 0 0 0 1px var(--bg-color) inset; background: var(--color1-100); }

.Menu_cabeceraIdioma .language          		{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 0;}

.modal.iframe.custom .modal-body 				{ padding: 0; }

@media screen and (max-width: 800px) {
	body > header {padding-left: 15px; padding-right: 15px;}
}

@media screen and (max-width: 650px) {
    body > header > section > .MenuDch  {  flex-direction: row} 
    body > header > section > .MenuDch > .capa_Menu_cabeceraBuscador { order :1;flex-grow: 1;}
    body > header > section > .MenuDch > .Menu_idioma { order :2;}
    body > header > section > .MenuDch > .Menu_idioma li.fontsize {display : none}
}

/* ESTILOS PARA LAS OPCIONES DE CAMBIO DE TAMAÑO DE LETRA*/
.fontsize	 						{ position: relative; min-width: 36px; display: inline-block; line-height: 32px; font-size: 16px; margin: 0; }
.fontsize .ii-font:before 			{ position: relative; left: -5px; top: 0; }
.fontsize .ii-font.plus::after 		{ content: "\002b" !important; position: absolute; top: -0.2rem !important; right: 6px; }
.fontsize .ii-font.minus::after		{ content: "\2212" !important; position: absolute; top: -4px; right: 8px; }
.fontsize .ii-font.restore::after	{ content: "\f013"; position: absolute; bottom: auto !important; top: 0.1rem; right: 6px; font-size: 0.75rem !important; }
.fontsize + .bordeL.idioma 			{ display: inline-block; margin-left: 10px; }
.fontsize a, .fontsize a i          { text-align: center; color: var(--text-color); display: table-cell; width: 36px; height: 32px; position: relative; vertical-align: middle; text-decoration: none;  }

body > nav.main-menu 				{ background: var(--color1-100); padding: 0; z-index: 1000; position: sticky; top: 0;}
body > nav.main-menu > div 			{ max-width: 1280px !important; margin: 0 auto;} 
body > nav.main-menu a 				{ color: var(--bg-color); text-decoration:none; padding: 9px 15px; line-height: 40px; }
body > nav.main-menu .customBar	{ background: var(--color1-100);}
body > nav.main-menu .customBar.open > .group.open > .content {background: var(--color1-100);}
body > nav.main-menu .customBar .group.right::after {border-left:0;}

@media screen and (max-width: 600px) {
	body > nav.main-menu .customBar.open > .group.open > .content > a 	{ width: 100%; margin: 0; line-height: 1.5; display: block; }
	body > nav.main-menu .customBar .right   {justify-content: left;}
	body > nav.main-menu .customBar .right a {text-align: left;}
}

@media screen and (max-width: 640px) {
    .customBar .group > button { color: var(--bg-color); }
}

@media screen and (max-width: 750px) {
	#logo-ine, #logo-explica { max-height: 50px; width: auto; }
}

/* *******  footer-pie  */
body > footer                       { text-decoration: none; font-size: 1rem; background: var(--color1-100); color: var(--bg-color); padding: 1rem; outline: none; margin: auto 0 0 0; position: relative; clear: both; text-align: center; }
body > footer a                     { display: inline-block;}
body > footer a:active,
body > footer a:focus,
body > footer a:hover,
body > footer a:link,
body > footer a:visited             { text-decoration: none; color: var(--bg-color); position: relative; }
body > footer ul                    { list-style-type: none; margin-top: 5px; margin-bottom: 5px; display: flex; gap: 0; flex-flow: row wrap; justify-content: center; align-items: center; }
body > footer ul li                 { border-left: 1px solid rgba(0,0,0,0.1); padding: 0 8px; }
body > footer li + li               { border-right: 1px solid rgba(255,255,255,0.1); }
body > footer li:first-child        { border-left: 0 none; border-right: 1px solid rgba(255,255,255,0.1); }
body > footer li:last-child         { border-right: 0 none; }
body > footer a                     { min-height: 36px; line-height: 36px; }
body > footer .ii                   { color: var(--bg-color); position: relative; top: 6px; font-size: 26px;}
body > footer .copyright            { flex: 100%; text-align: center; }
body > footer .copyright p          { margin: 0; }
body > footer .copyright a          { min-height: 44px; line-height: 44px; margin: 0; padding: 0; }
body > footer ul li a::before       { font-size: 26px; margin-right: 6px;}

body > footer .copyright    { flex: 100%; text-align: center; padding: 0; width: 100%; margin-bottom: 1rem;}
body > footer .copyright address   { font-size: 1rem; font-style: normal; }
body > footer .copyright address a { display: inline-block; color: var(--bg-color); padding: 0px 5px 0px 0px;  margin: 0; line-height: 44px !important; min-height: 44px; line-height: 44px; }
body > footer .copyright address span:last-of-type { display: inline-block; }

@media screen and (max-height: 650px) {
	body > footer { margin-top: 4rem;}
}

main, .main { max-width: 1280px; margin: 0 auto; width: 100%;}

button * 			{ pointer-events: none; }
.flex 				{ display: inline-flex; flex-flow: row wrap; }
.flex_wrap 			{ display: inline-flex; } 
.img-txt 			{ display: flex; margin: 0.5em; }
.col_izq 			{ display: flex; margin: 0.5em; max-width: 8em; min-width: 5em; width: 5em;	}
.nowrap 			{ white-space: nowrap; }
.imagen 			{ margin-right: 1em; }
p.primero 			{ margin-top: 0em; }
.sin-espacio 		{ margin-top: 0em; margin-bottom: 0em; } 
.espacio-izq-05 	{ margin-left: 0.5em; }
.espacio-sup-2em 	{ margin-top: 2em; }
.espacio-sup-1em 	{ margin-top: 1em; }
.espacio-sup-0em 	{ margin-top: 0em; }
.espacio-inf-0 		{ margin-bottom: 0em; }
.borde-inf 			{ border-bottom: black 1px solid; padding-bottom: 4px; }
.oculto, 
[hidden],
.sr-only			{ display:none; }

.capa_borde 		{ border: var(--color1-100) 1px solid; padding: 0px 10px; }

.customBar	{ border-color: transparent;}

ul.secciones>li>h2.title {font-size: 1.2rem; margin: 5px;}
ul:is(.secciones, .subSecc) > li > .title::before { border: none ! Important; }

.bg_image 								{ position: fixed; right: 0; bottom: 0; z-index: -1; width: 50%; max-width: 300px; object-fit: contain; height: 50%; object-position: right; opacity: 0.2; }

.Menu_idioma .language 					{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 0; }
#comboIdioma                            { text-decoration: none; background-color: var(--bg-color); padding: 1px 1px 1px 1px; border: 1px solid var(--text-color); margin: 0px; box-shadow: none; height: 36px; }
#comboIdioma:hover,
#comboIdioma:focus 					    { box-shadow: 0 0 1px 0px var(--color1-100) inset, 0 0 0px 2px var(--color1-100); }
#comboIdioma + button                   { background-color: var(--bg-color); border: 1px solid var(--text-color); color: var(--text-color); margin: 0 1px 0 -1px; min-height: 36px; min-width: 36px; cursor: pointer; }
#comboIdioma + button:hover,
#comboIdioma + button:focus             { box-shadow: 0 0 0 1px var(--bg-color) inset; background: var(--color1-100); color: var(--bg-color); }

.tag, .var								{ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; background: rgba(0, 0, 0, 0.1); display: inline-block; padding: 0 5px; font-size: 0.8rem; text-align: left; width: 100%; }
.tag span								{ display: block; }
.tag + .tag, .tag + .var				{ margin-top: 5px; }
.var 									{ background: transparent; border-color: var(--color1-150); text-align: center; color: #006400; }

.tpg_INEglobal table.jqplot-table-legend {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); left: 0; }

/* Override para img-cards */
.img-card-grid {margin-top: 3rem;}
.img-card-item > a > img 										{ border-radius: 32px; filter: none !important; }
.img-card-item{ width: 90%; max-width: var(--card-width);  /* Para que en resoluciones altas se mantenga */}
.img-card-item[data-style][data-pos] > a > .text 				{ width: 80%; margin: 0px 10px 10px; border-radius: 32px; padding: 10px !important; }
.img-card-item[data-style][data-pos] > a > .text::after 		{ content: "\e94e"; font-family: 'INEIcons'; position: relative; top: 2px; left: 7px; transition: left 0.5s ease; }
.img-card-item[data-style][data-pos] > a:hover > .text::after,
.img-card-item[data-style][data-pos] > a:focus > .text::after 	{ left: 14px; }
.img-card-item[data-style][data-pos] > a:hover > .text,
.img-card-item[data-style][data-pos] > a:focus > .text 			{ box-shadow: 0 0 0 2px #fff; }

.img-card-item:nth-child(6n+1)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.green 			{ background: #0A8527; text-shadow: none; color: #fff; }

.img-card-item:nth-child(6n+2)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.red 			{ background: #D20404; text-shadow: none; color: #fff; }

.img-card-item:nth-child(6n+3)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.blue 			{ background: #0d63f3; text-shadow: none; color: #FFF; }

.img-card-item:nth-child(6n+4)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.orange			{ background: #DE3712; text-shadow: none; color: #fff; }

.img-card-item:nth-child(6n+5)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.ocean 			{ background: #1A7DA8; text-shadow: none; color: #fff; }

.img-card-item:nth-child(6n+6)[data-style][data-pos] > a > .text:not(:is(.orange, .red, .blue, .green, .ocean, .violet)),
.img-card-item[data-style][data-pos] > a > .text.violet 		{ background: #974fa0; text-shadow: none; color: #fff; }

ul:is(.secciones, .subSecc) > li {margin: 1rem auto;}

.carrusel-flip-card > .flip-card-window > .flip-card-track > .flip-card { max-width: var(--card-width); width: 90%; }
.carrusel-flip-card > .flip-card-window > .flip-card-track > .flip-card > .flip-card-inner > .card-front, 
.carrusel-flip-card > .flip-card-window > .flip-card-track > .flip-card > .flip-card-inner > .card-back { border-radius: 18px;}
.carrusel-flip-card[data-color="azul"] { --primary-color: var(--turquesaPastel); }
.carrusel-flip-card[data-color="azul"] > .flip-card-window > .flip-card-track > .flip-card > .flip-card-inner > .card-front > .btn-flip,
.carrusel-flip-card[data-color="azul"] > .flip-card-window > .flip-card-track > .flip-card > .flip-card-inner > .card-back > .btn-flip { color: var(----text-color); }

ul.category-grid.juegos {margin: 5rem 0;}
header + .categorycard-buttons {padding-top: 1rem;}

.categorycard > header > .title {margin:0; font-family: "Manrope", sans-serif !important;}

.striped { margin-bottom: 2em; border-radius:18px; box-shadow:0 4px 12px rgba(0,0,0,.06); background-color: var(--bg-color); border: 1px solid var(--border-gray); border-left: 8px solid var(--colorStripedBorde); }
.striped h2 { padding: 10px; margin:0 0 20px; font-weight:bold; color: black; border-bottom:4px solid var(--colorStripedBorde); display: inline-block;}

.striped:nth-child(5n+1) { --colorStripedBorde: var(--moradoPastel);}
.striped:nth-child(5n+2) { --colorStripedBorde: var(--turquesaPastel);}
.striped:nth-child(5n+3) { --colorStripedBorde: var(--rosaPastel);}
.striped:nth-child(5n+4) { --colorStripedBorde: var(--verdePastel);}
.striped:nth-child(5n+5) { --colorStripedBorde: var(--verdePastel2);}

.striped:nth-child(5n+1 of .striped) { --colorStripedBorde: var(--moradoPastel);}
.striped:nth-child(5n+2 of .striped) { --colorStripedBorde: var(--turquesaPastel);}
.striped:nth-child(5n+3 of .striped) { --colorStripedBorde: var(--rosaPastel);}
.striped:nth-child(5n+4 of .striped) { --colorStripedBorde: var(--verdePastel);}
.striped:nth-child(5n+5 of .striped) { --colorStripedBorde: var(--verdePastel2);}

.striped .fondoClaro{ background: var(--colorStripedBorde); border-radius: 1em; padding: 0.5em; color: var(--text-color); font-weight: bold;}

.striped .infografias-grid > .infografia-card, 
.striped .infografias-grid > .infografia-card > .img-wrap {background-color: var(--bg-color);}
.striped .infografias-grid > .infografia-card { border: none; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);align-items: center;}

@media (max-width:480px){
  .striped h2 { padding: 10px 0;}
  img.alineaderecha {max-width: 50%; }
  .tabin-module {width: 100%;}
}

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 0.95rem;}
table caption { padding: 0.5em 0; font-weight: bold; text-align: left; font-size: 1.1em;}
table thead th { background: #457E76; color: #ffffff; padding: 0.6rem 0.5rem; text-align: center; font-weight: 700;}
table td { padding: 0.45rem 0.5rem; text-align: center; border-bottom: 1px solid #e5e7eb; }
table tbody tr:nth-child(even) { background: #f4f8f7; }
table tbody tr:hover { background: #e6f2ef; }
table .fila-total { font-weight: 700; background: #dcefe9 !important; }
table td:first-child { text-align: left; }

.tabin-bloque table {background-color: var(--bg-color);}

@media (max-width: 700px) {
  table { font-size: 0.85rem; }
}

.banner{ position: relative; width: 100%; height: 250px; overflow: visible; margin-bottom: 2em;}
.banner > .main { display: flex; align-items: center; width: 100%; height: 100%; position: relative;}

/* Contenedor relativo para posicionar los dos marcos juntos sin desfases */
.banner .main > div:not(.img):not(.fondoImg) { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 55%; height: 205px; display: flex;
    align-items: center; justify-content: center;}

.banner > .main .fondoImg { position: absolute; right: 0; top: 0; width: 96%; height: 100%; border-radius: 1.25rem; transform: rotate(1deg) translate(8px, -4px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 1; background-color: var(--ambar);}

.banner > .main .img { position: absolute; right: 8px; top:0; width: 96%; height: 100%; border: 2px solid var(--bg-color); border-radius: 1.25rem;
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15); overflow: hidden; transform: rotate(-1.5deg); z-index: 10; background: var(--bg-color);}

.banner > .main .img > img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 25%; }

.banner.titulo h1 { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%) rotate(-2deg); width: 48%;
    background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); padding: 1.25rem; border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 1rem; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15); z-index: 20; font-size: 1.75rem; font-weight: 800; color: #0f172a;
    letter-spacing: -0.025em; line-height: 1.2; text-align: center; display: inline-block; margin: 0; }

.banner.titulo h1::after { content: ''; display: block; height: 0.4rem; width: 100%; border-radius: 9999px; margin: 0.5rem auto 0 auto; background-color: var(--ambar);}

.fondoClaro { background: var(--ambar); border-radius: 1em; padding: 0.5em; color: var(--text-color); font-weight: bold; border-color: var(--border-gray) !important;}

.banner > .main .fondoImg.ep,
.banner > .main h1:has(+ div .ep)::after,
.fondoClaro.ep { background-color: var(--verde); color: var(--bg-color);}

.banner > .main .fondoImg.es,
.banner > .main h1:has(+ div .es)::after
.fondoClaro.es { background-color: var(--rojo); color: var(--bg-color);}

.banner > .main .fondoImg.eb,
.banner > .main h1:has(+ div .eb)::after,
.fondoClaro.eb { background-color: var(--azul); color: var(--bg-color);}

.banner > .main .fondoImg.fpu,
.banner > .main h1:has(+ div .fpu)::after,
.fondoClaro.fpu { background-color: var(--naranja); color: var(--bg-color);}

.banner > .main .fondoImg.vl,
.banner > .main h1:has(+ div .vl)::after,
.fondoClaro.vl { background-color: var(--turquesa); color: var(--bg-color);}

.banner > .main .fondoImg.pp,
.banner > .main h1:has(+ div .pp)::after,
.fondoClaro.pp { background-color: var(--morado); color: var(--bg-color);}

#p_1736 .ContenidoMainDch > section > h2:not(.striped h2)::after,
#p_1736 .ContenidoMainDch > article > header > h2:not(.striped h2)::after,
#p_1736 .ContenidoMainDch > aside > h2:not(.striped h2)::after { background-color: var(--morado);}

/* Responsividad para móviles */
@media (max-width: 640px) {
    .banner {  border-radius: 1rem; padding: 0.5rem; height: 125px;}
    .banner.titulo h1 { left: 0.25rem; width: 52%; padding: 0.875rem; font-size: 1.15rem; }
    .banner .main > div:not(.img):not(.fondoImg) { right: 0.25rem; width: 58%; height: 140px; }
}

@media (max-width:480px){
    a.fondoClaro {display: block;}
}

/* ============================================================
   EXPLICA portada
   Estilos acotados a .explica-portada.
   El encabezado del portal (logo, menú, buscador) no se incluye:
   lo pone la plantilla del INE.
   ============================================================ */

/* paleta de la sección de enlaces */
.explica-enlaces{
  --verde:#0A8527;
  --rojo:#D20404;
  --azul:#0D63F3;
  --naranja:#DE3712;
  --turquesa:#1A7DA8;
  --morado:#974FA0;
}
/* colores vivos de la portada (también se usan en los enlaces) */
.explica-portada, .explica-enlaces{
  --indigo:#6A3DF0;
  --esmeralda:#00B386;
  --magenta:#EC1677;
  --ambar:#FFB300;
}

section .explica-portada{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; max-width:1180px; margin:0 auto;}
section .claim{ font-size:1.2rem; line-height:1.8; margin:0 0 3rem 0; font-weight: bold; font-family: 'Unbounded', sans-serif; }
section .accesos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0; max-width:520px; }

section .acceso{ position:relative; display:block; height:100%; overflow:hidden; background:#fff; border-radius:14px; box-shadow:0 8px 22px -10px rgba(22,48,92,.28);
  padding:26px 14px 22px; text-align:center; text-decoration:none; color:inherit; width:100%; font-family:inherit; border: 2px solid var(--esquina); cursor:pointer; }
section .acceso[aria-expanded="true"]{  box-shadow:0 0 0 2px var(--esquina), 0 8px 22px -10px rgba(22,48,92,.28);}
/* esquina de color de cada tarjeta */
section .acceso::before{ content:""; position:absolute; top:0; left:0; width:62px; height:62px; background:linear-gradient(135deg, var(--esquina) 0 50%, transparent 50%);}
section .acceso--azul{--esquina:var(--indigo);}
section .acceso--verde{--esquina:var(--esmeralda);}
section .acceso--naranja{--esquina:var(--magenta);}

section .acceso-icono{ display:grid; place-items:center; width:88px; height:88px; margin:0 auto 14px; border-radius:50%; background:#EDF3FB; overflow:hidden; }
section .acceso-icono img{ width:78%; height:78%; object-fit:contain; }
section .acceso-titulo{ display:block; font-weight:700; font-size:.98rem; line-height:1.3; color:#16305C;}
section .acceso:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px;}

section .paneles{ max-width:520px; margin-top:16px; display:grid;                 /* los tres paneles comparten celda: */}
section .panel{  grid-area:1 / 1; /* el hueco se reserva siempre y nada se desplaza */
  visibility:hidden; background:#F4F7FC; border-left:4px solid var(--indigo); border-radius:10px; padding:10px 20px; }
section .panel.abierto{visibility:visible;}
section .panel p{margin:0 0 10px; font-size:.96rem; line-height:1.6;}
section .panel a{font-weight:700; font-size:.94rem; color:var(--indigo);}
#panel-proyectos{border-left-color:var(--esmeralda);}
#panel-juegos{border-left-color:var(--magenta);}

section .portada-imagen{ 
  --bloque:var(--ambar);      /* color del bloque: cámbialo aquí */
  --desplaz:26px;            /* cuánto asoma el cuadrado */
  --forma:34% / 30%;         /* redondeo ovalado de foto y bloque */
  padding:0 var(--desplaz) var(--desplaz) 0;   /* reserva hueco para que asome */
}
section .foto-marco{ position:relative; width:100%; max-width:500px; margin:0 0 0 auto; }
section .foto-marco::before{ content:""; position:absolute; inset:var(--desplaz) calc(var(--desplaz) * -1) calc(var(--desplaz) * -1) var(--desplaz); background:var(--bloque); border-radius:var(--forma); z-index:0; }
section .foto-recorte{ position:relative; z-index:1; overflow:hidden; border-radius:var(--forma); box-shadow:0 14px 30px -14px rgba(22,48,92,.45);}
section .foto-recorte{ position:relative; z-index:1; overflow:hidden;
  aspect-ratio:5/4;              /* más apaisada: limita la altura */
  max-height:400px; border-radius:var(--forma); box-shadow:0 14px 30px -14px rgba(22,48,92,.45);}
section .foto-recorte img{  display:block;  width:100%; height:100%;  object-fit:cover;
  object-position:50% 72%;       /* recorta sobre todo techo */
  transform:scale(1.12);         /* zoom: súbelo o bájalo a tu gusto */
  transform-origin:50% 55%;}

@media (max-width:900px){
  section .explica-portada{grid-template-columns:1fr; gap:28px;}
  section .portada-imagen { display: none;}
  section .foto-marco{margin:0 auto;}
}

@media (max-width: 600px) {
  section .explica-portada { padding: 36px 0px 0px 0px; }
  section .claim {margin: 0 0 1rem 0;}
  section .portada-imagen{--desplaz:16px;}
}

@media (max-width:480px){
  section .accesos{grid-template-columns:1fr; max-width:none;}
  section .paneles {display: none;}
}

/* ============================================================
   EXPLICA enlaces (segunda sección)
   Tarjetas-enlace con esquina de color, como las de la portada,
   pero en horizontal y con flecha para indicar que llevan a otra página.
   ============================================================ */

.explica-enlaces{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0;}

@media (max-width: 1200px) { .explica-enlaces { grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width:1000px){ .explica-enlaces {grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:600px){  .explica-enlaces {grid-template-columns:1fr;} }

.explica-enlaces .enlace{ position:relative; display:flex; align-items:center; gap:14px; height:100%; min-height:96px; overflow:hidden; padding:16px 18px 16px 22px;
  background:#fff; border-radius:14px; box-shadow:0 8px 22px -10px rgba(22,48,92,.28);
  text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease; }

.explica-enlaces .enlace-imagen{ flex:none; display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background: var(--esquina); overflow:hidden; color:var(--bg-color);}
.explica-enlaces .enlace-imagen img{ width:78%; height:78%;
  object-fit:contain;        /* el icono entero, con aire alrededor */
  mix-blend-mode:multiply;   /* funde fondos blancos (p. ej. el logo de la Competición) */
}

.explica-enlaces .enlace-imagen svg {width:24px; height:24px; fill: #fff;}

.explica-enlaces .enlace-texto{ flex:1; font-weight:700; font-size:.98rem; line-height:1.3;}
.explica-enlaces .enlace-flecha{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:color-mix(in srgb, var(--esquina) 14%, #fff);
  color:var(--tinta, var(--esquina)); transition:background .18s ease, color .18s ease, transform .18s ease; }
.explica-enlaces .enlace-flecha svg{width:16px; height:16px;}

@media (hover:hover){
  .explica-enlaces .enlace:hover{
    transform:translateY(-3px);
    box-shadow:0 0 0 2px var(--esquina), 0 14px 26px -12px rgba(22,48,92,.35);
  }
  .explica-enlaces .enlace:hover .enlace-texto{text-decoration:underline; text-underline-offset:3px;}
  .explica-enlaces .enlace:hover .enlace-flecha{background:var(--esquina); color:var(--sobre, #fff); transform:translateX(2px);}
}
.explica-enlaces .enlace:focus-visible{  transform:translateY(-3px); box-shadow:0 0 0 2px var(--esquina), 0 14px 26px -12px rgba(22,48,92,.35); }
.explica-enlaces .enlace:focus-visible .enlace-flecha{ background:var(--esquina); color:var(--sobre, #fff); transform:translateX(2px); }
.explica-enlaces .enlace:focus-visible{outline:3px solid #16305C; outline-offset:3px;}

/* 8 colores repartidos para que no se junten tonos parecidos
   (ni en fila, ni en columna, ni en móvil) */
.explica-enlaces .enlace--menta{--esquina:var(--esmeralda);}
.explica-enlaces .enlace--naranja{--esquina:var(--naranja);}
.explica-enlaces .enlace--morado{--esquina:var(--morado);}
.explica-enlaces .enlace--verde{--esquina:var(--verde);}
.explica-enlaces .enlace--rojo{--esquina:var(--rojo);}
.explica-enlaces .enlace--azul{--esquina:var(--azul);}
.explica-enlaces .enlace--amarillo{--esquina:var(--ambar); --tinta:#8A5A00; --sobre:#16305C;}
.explica-enlaces .enlace--fucsia{--esquina:var(--magenta);}

.explica-enlaces .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  .explica-enlaces .enlace, .explica-enlaces .enlace-flecha{transition:none;}
}