:root {

    --max-width:     1047px;

    --gap-lg:        18px;

    --gap-sm:        8px;

    --border-radius: 2px;

    --color-00:    #000000;

    --color-01:    #F2F3F7;

    --color-02:    #DDDEE3;

    --color-03:    #A4A4A4;

    --color-04:    #656565;

    --color-05:    #212529;

    --color-06:    #002F6C;

    --color-07:    #FFCD00;

    --color-08:    #FFF9E1;

    --color-09:    #0F1E8C;

    --color-10:    #FFF6CF;

    --color-99:    #FFFFFF;

}



html  { scroll-behavior: smooth; }

#ve2025 * { margin: 0; padding: 0; position: relative; min-width: 0; box-sizing: border-box; font-family: 'Open Sans', Sans-serif, Arial, Helvetica, Verdana; line-height: 140%; font-size: 1.0rem; color:var(--color-05); }

#ve2025 strong, #ve2025 span { font-size: inherit; color: inherit; }

#ve2025 section { margin: clamp(25px, 10dvw, 50px) 0; width: 100%; }

#ve2025 section .ronin-content { padding: 0 clamp(var(--gap-sm), 2dvw ,var(--gap-lg)); max-width: calc(var(--max-width) + (var(--gap-lg) * 2)); margin: 0 auto; }



body.ve-block-scrolling { height: 100dvh; overflow: hidden; }



#ve2025 .waitting { transition: all 0.5s; opacity: 0; z-index: 0; display: flex; justify-content: center; align-items: center;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); }

#ve2025 .waitting.visible { transition: all 0.5s; opacity: 1; z-index: 99; }

#ve2025 .waitting .puntos { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0,0,0,0.5); }

#ve2025 .waitting .puntos { animation: esperando 1s infinite; transition: all 0.3; box-shadow: -25px 0 0 rgba(0,0,0,0.2), 25px 0 0 rgba(0,0,0,0.2); }



#ve2025 .rai-bottom.item-off { opacity: 0; }

.rai-bottom.item-on { animation: raiBottomFadeIn 2s; opacity: 1; animation-fill-mode: both; }



#ve2025 .display-none { display: none!important; }

#ve2025 picture { display: block; }

#ve2025 picture img { width: 100%; }

#ve2025 .image { background-color: #ddd; background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%; }

#ve2025 img.ve-icon { width: 24px; display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }

/* El icono de contrarreloj individual es mucho más alto que ancho (98x114px,

   el resto de iconos de tipo de etapa son apaisados) — a los 24px del resto

   se ve desproporcionado, así que este se limita a 20px de ancho. */

#ve2025 img[src*="icon-contrarreloj-individual"] { width: 20px; max-width: 20px; }



#ve2025 .ve-table-container { margin: 0 auto 25px; }

#ve2025 .ve-table { margin: 25px auto 5px; }

#ve2025 .ve-table-row { display: grid; gap: 0; border-radius: var(--border-radius); overflow: hidden; }

#ve2025 .ve-table-row.current { background-color: var(--color-08)!important; }

#ve2025 .ve-table-row.current::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: var(--color-07); }

#ve2025 .ve-table-row:nth-child(odd) { background-color: var(--color-01); }

#ve2025 .ve-table-cell { padding: 15px 20px; }

#ve2025 .ve-table-title { font-size: 0.85rem; line-height: 120%; margin: 0; font-weight: 700; }

#ve2025 .ve-table-description { font-size: 0.85rem; line-height: 120%; margin: 0; font-weight: 500; color: var(--color-04); }



#ve2025 .rs-title { font-family: 'Roboto Condensed'; font-size: clamp(1.8rem, 10dvw, 2.0rem); line-height: 120%; margin: 0 0 clamp(20px, 9dvw, 40px); text-transform: uppercase; }

#ve2025 .rs-title > span {display: inline-block; vertical-align: unset;font-family: inherit;}

#ve2025 .rs-subtitle { font-family: 'Roboto Condensed'; font-size: clamp(1.6rem, 10dvw, 1.8rem); line-height: 120%; margin: 0 0 clamp(20px, 9dvw, 40px); text-transform: uppercase; }

#ve2025 .rs-description p { font-size: clamp(1.1rem, 8dvw, 1.14rem); line-height: 140%; font-weight: 400; }

#ve2025 .rs-description p:not(:last-child) { margin: 0 0 10px; }



#ve2025 *[class*='button-ve'] { text-decoration: none; text-align: center; cursor: pointer; user-select: none; transition: all 0.3s; text-transform: uppercase; display: inline-block; padding: 9px 25px; border-radius: var(--border-radius); border-width: 1px; border-style: solid; border-color: var(--color-06); background-color: var(--color-06); color: var(--color-99); font-size: 0.8rem; font-weight: 600; }

#ve2025 *[class*='button-ve'].disabled { cursor: not-allowed; border-color: var(--color-02); background-color: var(--color-02); color: var(--color-03); }

#ve2025 *[class*='button-ve'].disabled:hover { cursor: not-allowed; border-color: var(--color-02); background-color: var(--color-02); color: var(--color-03); }

#ve2025 *[class*='button-ve'].small { padding: 8px 20px; font-size: 0.8rem; }

#ve2025 *[class*='button-ve'] > img { display: inline-block; vertical-align: middle; color: inherit; margin: -4px 0 0 5px; width: 22px; aspect-ratio: 1; }

#ve2025 *[class*='button-ve']:hover { transition: all 0.3s; border-color: var(--color-02); background-color: var(--color-02); color: var(--color-99); }



#ve2025 .button-ve00 { border-color: transparent; background-color: transparent; color: var(--color-06); }

#ve2025 .button-ve00:hover { border-color: transparent; background-color: transparent; color: var(--color-06); }

#ve2025 .button-ve01 { border-color: var(--color-06); background-color: transparent; color: var(--color-06); }

#ve2025 .button-ve01:hover { border-color: var(--color-06); background-color: var(--color-06); color: var(--color-99); }

#ve2025 .button-ve02 { border-color: var(--color-07); background-color: var(--color-07); color: var(--color-06); }

#ve2025 .button-ve02:hover { border-color: var(--color-06); background-color: var(--color-06); color: var(--color-99); }

#ve2025 .button-ve03 { border-color: transparent; background-color: transparent; color: var(--color-09); padding: 8px 8px 8px 0!important; }

#ve2025 .button-ve03:hover { border-color: transparent; background-color: transparent; color: var(--color-09); padding: 8px 0 8px 8px!important; }



#ve2025 .rs-buttons-group { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; }

#ve2025 .rs-buttons-group > a { flex: 0 0 auto; border-radius: 0; }

#ve2025 .rs-buttons-group > a:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); }

#ve2025 .rs-buttons-group > a:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; }

#ve2025 .rs-buttons-group > a:not(:first-child) { border-left: none; }

#ve2025 .rs-buttons-group > a:hover { border-color: var(--color-03); background-color: var(--color-03); color: var(--color-99); }

#ve2025 .rs-buttons-group > a.active { border-color: var(--color-06); background-color: var(--color-06); color: var(--color-99); }



#ve2025 .rs-etapas-top.loading { overflow: hidden; }

#ve2025 .rs-etapas-top .rs-top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: flex-end; margin: 0 0 25px; }

#ve2025 .rs-etapas-top .rs-title-container { display: grid; grid-template-columns: auto 1fr; gap: 8px 15px; align-items: center; }

#ve2025 .rs-etapas-top .rs-title { margin: 0; }

#ve2025 .rs-etapas-top .rst-label-container { height: 100%; display: flex; align-items: flex-end; padding-bottom: 5px; }

#ve2025 .rs-etapas-top .rst-label { background-color: var(--color-07); text-transform: uppercase; font-size: 0.7rem; font-weight: 600; display: inline-block; padding: 3px 10px; border-radius: 100px; }

#ve2025 .rs-etapas-top .rs-date { font-weight: 600; text-transform: uppercase; font-size: 0.9rem; }

#ve2025 .rs-etapas-top .rs-blocks-container { overflow: hidden; margin: 0 0 clamp(50px, 12dvw, 70px); }

#ve2025 .rs-etapas-top .rs-blocks { transition: 0.5s; max-height: 500px; opacity: 1; display: grid; grid-template-columns: 1fr; margin: 0; border-radius: 8px; overflow: hidden; background-color: var(--color-01); }

#ve2025 .rs-etapas-top.dia-descanso .rs-blocks { transition: 0.5s; max-height: 0; opacity: 0; }

#ve2025 .rs-etapas-top.dia-descanso .rs-blocks-container { margin: 0; }

#ve2025 .rs-etapas-top.loading .rs-blocks { filter: blur(5px); }

#ve2025 .rs-etapas-top .rs-block:nth-child(2) { display: grid; align-items: center; }

#ve2025 .rs-etapas-top .rs-block-content { padding: 25px; }

#ve2025 .rs-etapas-top .rs-block-title { margin: 0 0 25px; font-weight: 700; font-size: 1.3rem; }

#ve2025 .rs-etapas-top .infos { border-top: 1px solid var(--color-02); margin: 0 0 15px; }

#ve2025 .rs-etapas-top .info { border-bottom: 1px solid var(--color-02); padding: 5px 0; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }

#ve2025 .rs-etapas-top picture { line-height: 0; height: 100%; background-color: #aaa; }

#ve2025 .rs-etapas-top picture img { display: block; height: 100%; }

#ve2025 .rs-etapas-top.dia-descanso picture img { display: none; }

#ve2025 .rs-etapas-top .rs-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

#ve2025 .rs-etapas-top .rs-buttons > a { padding: 9px 12px; }



#ve2025 .rs-etapas-calendario .rs-button { text-align: center; }

#ve2025 .rs-etapas-calendario .rs-title-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 25px; align-items: center; }

#ve2025 .rs-etapas-calendario .rs-title { margin: 0; }

#ve2025 .rs-etapas-calendario .rs-title-button > a { padding: 8px 8px 8px 0; top: 6px; font-weight: 700; }

#ve2025 .rs-etapas-calendario .ve-table-container { width: 100%; overflow: auto; width: 100%; }

/* Las filas plegadas tambien pierden el padding: max-height:0 recorta la

   caja de contenido pero NO el padding, asi que cada fila oculta seguia

   ocupando sus 20px y dejaba un hueco muerto antes del boton Cargar mas. */

#ve2025 .rs-etapas-calendario .ve-table:not(.view-all) .ve-table-row:nth-child(n+9) { max-height: 0; opacity: 0; padding: 0; }

#ve2025 .rs-etapas-calendario .ve-table-row { grid-template-columns: 100px 1fr 80px; padding: 10px 0; transition: 0.5s; max-height: 400px; opacity: 1; }

#ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell { padding: 5px 15px; }

#ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(4) { grid-column: span 3; padding-bottom: 0; }

#ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(5) { grid-column: span 3; padding-top: 0; }

#ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(6) { grid-column: span 3; }

#ve2025 .rs-etapas-calendario .ve-table-cell { padding: 8px 15px; display: grid; align-items: center; }

#ve2025 .rs-etapas-calendario .ve-table-cell.icon-text { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; }

#ve2025 .rs-etapas-calendario .ve-table-cell .ve-icon { margin: 0; }

#ve2025 .rs-etapas-calendario .ve-table-title { text-transform: uppercase; font-size: 0.75rem; }

#ve2025 .rs-etapas-calendario .ve-table-description { text-transform: uppercase; font-size: 0.75rem; }

#ve2025 .rs-etapas-calendario .rs-item-distance { display: block; text-align: right; }

#ve2025 .rs-etapas-calendario .rs-item-buttons-mas { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--color-03); padding: 8px 0; cursor: pointer; user-select: none; }

#ve2025 .rs-etapas-calendario .rs-item-buttons-mas span { font-size: 0.8rem; font-style: italic; color: var(--color-04); }

#ve2025 .rs-etapas-calendario .rs-item-buttons-mas img { width: 16px; transition: 0.5s; }

#ve2025 .rs-etapas-calendario .rs-item-buttons-mas.visible img { transition: 0.5s; transform: rotate(180deg); }

#ve2025 .rs-etapas-calendario .rs-item-buttons { transition: 0.5s; opacity: 0; max-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

#ve2025 .rs-etapas-calendario .rs-item-buttons.visible { transition: 0.5s; opacity: 1; max-height: 100px; }

#ve2025 .rs-etapas-calendario .rs-item-buttons > a { padding: 9px 12px; }



#ve2025 .rs-etapas-mapa .rs-title { margin: 0 0 clamp(20px, 9dvw, 40px); }

#ve2025 .rs-etapas-mapa .rs-leyenda { list-style-type: none; margin: 0 0 25px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px 25px; max-width: 900px; }

#ve2025 .rs-etapas-mapa .rs-leyenda-title { font-weight: 600; font-size: 0.9rem; }

#ve2025 .rs-etapas-mapa picture { line-height: 0; border-radius: 8px; overflow: hidden; height: 100%; }

#ve2025 .rs-etapas-mapa picture img { display: block; height: 100%; }



#ve2025 .rs-etapas-modal { position: fixed; margin: 0; display: grid; place-items: center; top: 0; left: 0; width: 100dvd; height: 100dvh; overflow: hidden; z-index: 99999;}

#ve2025 .rs-etapas-modal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0005; }

#ve2025 .rs-etapas-modal .rs-close-area { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; }

#ve2025 .rs-etapas-modal .ronin-content { animation-duration: 0.5s; z-index: 5; opacity: 0; background-color: var(--color-99); padding: 10px clamp(5px, 3dvw, 25px); width: calc(100dvw - clamp(var(--gap-sm), 9dvw, var(--gap-lg))); max-width: 980px; height: auto; max-height: calc(100dvh - clamp(var(--gap-sm), 9dvw, var(--gap-lg))); overflow: auto; border-radius: 8px; }

#ve2025 .rs-etapas-modal .rs-close { position: absolute;top: clamp(5px, 3dvw, 35px);right: clamp(76px, 4dvw, 36px);width: clamp(30px, 4dvw, 100px);height: clamp(30px, 7dvw, 56px);z-index: 20;cursor: pointer;user-select: none; }

#ve2025 .rs-etapas-modal .rs-close > img { width: clamp(24px, 3dvw, 40px); aspect-ratio: 1; display: none; }

#ve2025 .rs-etapas-modal .rs-top { position: absolute; top: clamp(15px, 3dvw, 25px); left: 0; width: 100%; padding: 0 clamp(5px, 3dvw, 25px); z-index: 10; }

#ve2025 .rs-etapas-modal .rs-pretitle { text-transform: uppercase; font-weight: 600; font-size: clamp(0.7rem, 3dvw, 0.9rem); }

#ve2025 .rs-etapas-modal .rs-title { margin: 0; font-size: clamp(1.4rem, 3dvw, 2.0rem); }

#ve2025 .rs-etapas-modal .rs-title-gap { color: var(--color-03); font-weight: 400; font-family: inherit; }

#ve2025 .rs-etapas-modal .rs-title-type { color: var(--color-03); font-weight: 400; font-size: 0.8em; font-family: inherit; }



#ve2025 .rs-equipos-grid { margin: clamp(25px, 10dvw, 50px) 0; }

#ve2025 .rs-equipos-grid .rs-items { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 10dvw, 40px) clamp(15px, 8dvw, 35px); }

#ve2025 .rs-equipos-grid .rs-item { background-color: var(--color-01); border-radius: var(--border-radius); }

/* El maillot ahora ocupa el 100% del ancho arriba (una sola columna) y el

   país + nombre del equipo van debajo, también al 100%. .rs-item-image va

   primero (order:-1) aunque en el HTML esté después de .rs-item-info. */

#ve2025 .rs-equipos-grid .rs-item-top { display: grid; grid-template-columns: 1fr; gap: 0; }

#ve2025 .rs-equipos-grid .rs-item-top::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 25px; background-color: var(--color-99); }

/* Sobresale un poco por encima de la tarjeta (el hueco entre tarjetas es de

   20px como mínimo, así que -5px no llega a pisar la tarjeta de arriba) */

#ve2025 .rs-equipos-grid .rs-item-image { order: -1; margin-top: -5px; z-index: 1; }

#ve2025 .rs-equipos-grid .rs-item-image picture { width: 55%; max-width: 150px; margin-left: auto; }

#ve2025 .rs-equipos-grid .rs-item-info { padding: 15px 10px 0; margin-top: -20px; margin-bottom: 10px; }

#ve2025 .rs-equipos-grid .rs-item-country span { color: #154fab; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; display: block; margin: 0 0 5px; }

#ve2025 .rs-equipos-grid .rs-item-name span { text-transform: uppercase; font-size: 0.9rem; font-weight: 700; line-height: 120%; display: block; }

#ve2025 .rs-equipos-grid .rsil-element-info { line-height: 14px; font-size: 12px; }

#ve2025 .rs-equipos-grid .rsil-element-info span { line-height: inherit; font-size: inherit; }

#ve2025 .rs-equipos-grid .rsil-element-name { font-weight: 600; color: var(--color-04); }

#ve2025 .rs-equipos-grid .rs-item-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

#ve2025 .rs-equipos-grid .rsil-element { border-top: 1px solid var(--color-02); padding: 10px; display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center; }

#ve2025 .rs-equipos-grid .rsil-element:nth-child(odd) { padding: 10px 5px 10px 10px; }

#ve2025 .rs-equipos-grid .rsil-element:nth-child(even) { padding: 10px 10px 10px 5px; }

#ve2025 .rs-equipos-grid .rsil-element-flag { aspect-ratio: 1; border-radius: 50%; overflow: hidden; line-height: 0; }

#ve2025 .rs-equipos-grid .rsil-element-flag img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }

/* Ciclista sin confirmar todavía: círculo gris en vez de bandera */

#ve2025 .rs-equipos-grid .rsil-element--pendiente .rsil-element-flag { background-color: #e8e8e8; }

#ve2025 .rs-equipos-grid .rsil-element--pendiente .rsil-element-name { color: var(--color-03); }



#ve2025 .rs-clasificaciones-top .rs-filters { border-top: 1px solid var(--color-02); border-bottom: 1px solid var(--color-02); padding: 18px 0; display: grid; grid-template-columns: 1fr; gap: 25px; }

#ve2025 .rs-clasificaciones-top .rs-filter-group:first-child .rs-buttons-group { justify-content: center; }

#ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group { justify-content: center; }



#ve2025 .rs-clasificaciones-grid .ve-table-container { transition: 0.9s; width: 100%; overflow: auto; background-color: #fff; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; }

#ve2025 .rs-clasificaciones-grid .ve-table-container.visible { transition: 0.9s; opacity: 1; position: relative;z-index: 20; }

#ve2025 .rs-clasificaciones-grid .ve-table { min-width: 600px; }

#ve2025 .rs-clasificaciones-grid .ve-table.equipos { min-width: 500px; }

#ve2025 .rs-clasificaciones-grid .ve-table-row { grid-template-columns: 65px 1fr 1fr 120px; }

#ve2025 .rs-clasificaciones-grid .ve-table.equipos .ve-table-row { grid-template-columns: 90px 1fr 120px; }

#ve2025 .rs-clasificaciones-grid .ve-table-row:first-child { background-color: var(--color-07); }

#ve2025 .rs-clasificaciones-grid .ve-table-row.esp { background-color: var(--color-08); }

#ve2025 .rs-clasificaciones-grid.alias-logistica .ve-table:not(.view-all) .ve-table-row:nth-child(n+6) { display: none; }

#ve2025 .rs-clasificaciones-grid .ve-table-cell.right-content { text-align: right; }

#ve2025 .rs-clasificaciones-grid .flag-name { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; }

#ve2025 .rs-clasificaciones-grid .flag { aspect-ratio: 1; border-radius: 50%; overflow: hidden; width: 20px; display: block; object-fit: cover; }

#ve2025 .rs-clasificaciones-grid .team { text-transform: uppercase; }



#ve2025 .rs-historia-top { padding-bottom: clamp(15px, 8dvw, 30px); }

#ve2025 .rs-historia-top .rs-title { margin: 0 0 clamp(40px, 10dvw, 60px); }

#ve2025 .rs-historia-top .rs-blocks { display: grid; grid-template-columns: 1fr; gap: 50px; margin: 0 0 clamp(50px, 12dvw, 90px); }

#ve2025 .rs-historia-top .rs-block-item { background-color: var(--color-01); border-radius: 20px; padding: 5px 15px; align-items: center; display: grid; grid-template-columns: 20px 40px 55px 1fr 45px 45px 45px; gap: 10px; }

#ve2025 .rs-historia-top .rs-block-item:not(:last-child) { margin: 0 0 15px; }

#ve2025 .rs-historia-top .rs-block-item-position span { font-weight: 700; font-size: 0.8rem; }

#ve2025 .rs-historia-top .rs-block-item:first-child { background-color: var(--color-10); }

#ve2025 .rs-historia-top .rs-block-item-flag { line-height: 0; }

#ve2025 .rs-historia-top .rs-block-item-flag img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center center; overflow: hidden; display: block; }

#ve2025 .rs-historia-top .rs-block-item-image { line-height: 0; }

#ve2025 .rs-historia-top .rs-block-item-image img { width: 50px; }

#ve2025 .rs-historia-top .rs-block-item-name span { font-weight: 700; font-size: 0.8rem; }

#ve2025 .rs-historia-top .rs-block-item-trofeos { line-height: 0; }

#ve2025 .rs-historia-top .rs-block-item-trofeos img { width: 20px; display: inline-block; vertical-align: top; margin: 0 10px 0 0; }

#ve2025 .rs-historia-top .rs-block-item-trofeos span { font-weight: 700; font-size: 0.8rem; }

/* Envuelve los 3 trofeos solo para poder tratarlos como grupo en móvil (ver

   media query de abajo); en tablet/escritorio "display: contents" lo hace

   invisible para el grid y sus 3 hijos vuelven a contar como columnas

   sueltas de .rs-block-item, igual que si no existiera este contenedor. */

#ve2025 .rs-historia-top .rs-block-item-trofeos-group { display: contents; }

#ve2025 .rs-historia-top .rs-banner { min-height: 300px; display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 8px; overflow: hidden; background-color: var(--color-01); }

#ve2025 .rs-historia-top .rs-banner .rs-description { display: grid; place-items: center; padding: 28px; }

#ve2025 .rs-historia-top .rs-banner-image img { display: block; max-width: 100%; height: 100%; object-fit: cover; object-position: center center; }



#ve2025 .rs-historia-personaje { padding-bottom: clamp(15px, 8dvw, 30px); }

#ve2025 .rs-historia-personaje .rs-title { font-size: 32px; }

#ve2025 .rs-historia-personaje .rs-description { margin: 0 0 clamp(25px, 10dvw, 40px); }

#ve2025 .rs-trofeos-lista { display: flex; flex-direction: column; gap: 10px; }

#ve2025 .rs-trofeos-item { display: grid; grid-template-columns: 30px 55px 1fr 200px; align-items: center; gap: 15px; padding: 15px 20px; border-radius: 12px; background-color: #F7F8FA; font-weight: 700; }

#ve2025 .rs-trofeos-item.destacado { background-color: var(--color-08); }

#ve2025 .rs-trofeos-item.plata { background-color: #ecedef; }

#ve2025 .rs-trofeos-item.bronce { background-color: #f6ece0; }

#ve2025 .rs-trofeos-item.no-participo { font-style: italic; font-weight: 400; }

#ve2025 .rs-trofeos-header { display: grid; grid-template-columns: 30px 55px 1fr 200px; gap: 15px; padding: 0 20px 8px; font-size: 0.75rem; text-transform: uppercase; color: var(--color-03); }

#ve2025 .rs-trofeos-header-sort { cursor: pointer; user-select: none; white-space: nowrap; }

#ve2025 .rs-trofeos-header-sort:hover { color: var(--color-06); }

#ve2025 .rs-trofeos-header-arrows { font-style: normal; display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; margin-left: 3px; color: var(--color-03); }

#ve2025 .rs-trofeos-header-arrows span { display: block; line-height: 0.6; font-size: 0.5rem; }

#ve2025 .rs-trofeos-header-km { text-align: right; }

#ve2025 .rs-trofeos-header-carrera { text-align: center; }

#ve2025 .rs-trofeos-header-etapas { text-align: left; }

#ve2025 .rs-trofeos-header-year { text-align: right; }

#ve2025 .rs-trofeos-icon { width: 24px; display: block; }

#ve2025 .rs-trofeos-km { text-align: right; }

#ve2025 .rs-trofeos-etapas { text-align: left; white-space: nowrap; }



#ve2025 #historia_perico_resumen.rs-perico-colapsado { display: none; }

#ve2025 .rs-personaje-trayectoria { display: none; }

#ve2025 .rs-personaje-trayectoria.visible { display: block; }

#ve2025 .rs-historia-personaje .rs-button { text-align: center; margin: clamp(20px, 8dvw, 30px) 0 0; }



@keyframes rsTrofeoFlip {

    from { transform: rotateX(-90deg); opacity: 0; }

    to { transform: rotateX(0deg); opacity: 1; }

}

#ve2025 .rs-historia-personaje .rs-trofeos-lista { perspective: 800px; }

#ve2025 .rs-historia-personaje .rs-trofeos-item { transform-origin: top center; }

#ve2025 #historia_perico_resumen:not(.rs-perico-colapsado):not(.rs-perico-saliendo) .rs-trofeos-item,

#ve2025 .rs-personaje-trayectoria.visible:not(.rs-perico-saliendo) .rs-trofeos-item {

    animation: rsTrofeoFlip 0.45s ease both;

}

@keyframes rsTrofeoFlipOut {

    from { transform: rotateX(0deg); opacity: 1; }

    to { transform: rotateX(-90deg); opacity: 0; }

}

#ve2025 .rs-perico-saliendo .rs-trofeos-item {

    animation: rsTrofeoFlipOut 0.35s ease both;

}

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(1) { animation-delay: 0s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(2) { animation-delay: 0.05s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(3) { animation-delay: 0.1s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(4) { animation-delay: 0.15s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(5) { animation-delay: 0.2s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(6) { animation-delay: 0.25s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(7) { animation-delay: 0.3s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(8) { animation-delay: 0.35s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(9) { animation-delay: 0.4s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(10) { animation-delay: 0.45s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(11) { animation-delay: 0.5s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(12) { animation-delay: 0.55s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(13) { animation-delay: 0.6s; }

#ve2025 .rs-historia-personaje .rs-trofeos-item:nth-child(14) { animation-delay: 0.65s; }

#ve2025 .rs-trofeos-posicion { width: 24px; text-align: center; font-weight: 700; color: var(--color-04); }



#ve2025 .rs-historia-grid .ve-table-container { overflow: auto; }

#ve2025 .rs-historia-grid .ve-table { min-width: 600px; }

#ve2025 .rs-historia-grid .ve-table-row { grid-template-columns: 100px 1fr 1fr 1fr; }

#ve2025 .rs-historia-grid .ve-table-row:nth-child(odd) { background-color: var(--color-99); }

#ve2025 .rs-historia-grid .ve-table-row:nth-child(even) { background-color: var(--color-01); }

#ve2025 .rs-historia-grid .ve-table-row.esp { background-color: var(--color-08); }

#ve2025 .rs-historia-grid #historia_palmares_table:not(.view-all) .ve-table-row:nth-child(n+12) { display: none; }

#ve2025 .rs-historia-grid .rs-button { text-align: center; margin: 20px 0 0; }

#ve2025 .rs-historia-grid .flag-name { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; }

#ve2025 .rs-historia-grid .flag { line-height: 0; }

#ve2025 .rs-historia-grid .flag img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center center; overflow: hidden; display: block; }



/* Previsualizador de vídeo (miniatura + botón play; el iframe de YouTube

   solo se carga al hacer clic, ver veReproducirVideo() en vueltaespana2026.js).

   Círculo blanco con borde sobre la miniatura + franja amarilla de texto debajo. */

#ve2025 .rs-video { margin: 0 0 clamp(20px, 8dvw, 40px); }

#ve2025 .rs-video-thumb,

#ve2025 .rs-video-frame { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background-color: var(--color-00); }

#ve2025 .rs-video-thumb { cursor: pointer; }

#ve2025 .rs-video-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }

#ve2025 .rs-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--color-99); display: flex; align-items: center; justify-content: center; transition: transform 0.3s; }

#ve2025 .rs-video-play::before { content: ''; margin-left: 8px; border-style: solid; border-width: 19px 0 19px 30px; border-color: transparent transparent transparent var(--color-99); }

#ve2025 .rs-video-thumb:hover .rs-video-play { transform: translate(-50%, -50%) scale(1.08); }

#ve2025 .rs-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Sube por detrás del vídeo (margin-top negativo) para que, en las esquinas

   redondeadas de abajo del vídeo, se vea su propio amarillo y no el fondo

   blanco de la página. */

#ve2025 .rs-video-caption { position: relative; z-index: 0; margin-top: -8px; background-color: var(--color-07); padding: 20px clamp(15px, 4dvw, 30px); border-radius: 0 0 8px 8px; }

#ve2025 .rs-video-caption-title { font-size: clamp(1.2rem, 4dvw, 1.4rem); font-weight: 700; color: var(--color-06); margin: 0 0 8px; }

#ve2025 .rs-video-caption-description { font-size: 0.95rem; line-height: 140%; color: var(--color-06); margin: 0; }



#ve2025 .rs-logistica-top .rs-title-container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 15px; margin: 0 0 clamp(20px, 9dvw, 40px); }

#ve2025 .rs-logistica-top .rs-title-container .rs-title { margin: 0; font-family: 'Roboto Condensed' !important; font-size: 32px; }

#ve2025 .rs-logistica-top .rst-label { background-color: var(--color-07); text-transform: uppercase; font-size: 0.7rem; font-weight: 600; display: inline-block; padding: 3px 10px; border-radius: 100px; top: -4px; }

#ve2025 .rs-logistica-top .rs-subtitle { font-family: 'Open Sans'; font-size: clamp(2.0rem, 10dvw, 2.2rem); line-height: 120%; font-weight: 700; text-transform: none; max-width: 500px; }

#ve2025 .rs-logistica-top .rs-blocks { display: grid; grid-template-columns: 1fr; gap: 50px; margin: 0 0 clamp(25px, 12dvw, 50px); }

#ve2025 .rs-logistica-top .rs-block:nth-child(2) { display: grid; align-items: center; }

#ve2025 .rs-logistica-top picture { line-height: 0; border-radius: 8px; overflow: hidden; height: 100%; }

#ve2025 .rs-logistica-top picture img { display: block; height: 100%; }

#ve2025 .rs-logistica-top picture.infografia { margin: clamp(25px, 12dvw, 70px) 0; }



#ve2025 .rs-logistica-highlighted-01 .rs-blocks { display: grid; grid-template-columns: 1fr; gap: 50px; margin: 0 0 clamp(50px, 12dvw, 70px); border-radius: 8px; overflow: hidden; background-color: var(--color-01); }

#ve2025 .rs-logistica-highlighted-01 picture  { line-height: 0; height: 100%; }

#ve2025 .rs-logistica-highlighted-01 picture img { display: block; height: 100%; }

#ve2025 .rs-logistica-highlighted-01 .rs-block:nth-child(2) { display: grid; align-items: center; }

#ve2025 .rs-logistica-highlighted-01 .rs-title { color: var(--color-06); margin: 0; font-size: clamp(1.6rem, 10dvw, 1.8rem); text-transform: none; font-family: 'Open Sans'; font-weight: 700; }



#ve2025 .rs-logistica-highlighted-02 .rs-blocks { display: grid; grid-template-columns: 1fr; gap: 50px; margin: 0 0 clamp(50px, 12dvw, 90px); }

#ve2025 .rs-logistica-highlighted-02 .rs-block:nth-child(1) { display: grid; align-items: center; }

#ve2025 .rs-logistica-highlighted-02 picture { line-height: 0; border-radius: 8px; overflow: hidden; height: 100%; }

#ve2025 .rs-logistica-highlighted-02 picture img { display: block; height: 100%; }



#ve2025 .rs-logistica-filtros .rs-buttons-group { justify-content: center; }

#ve2025 .rs-logistica-filtros .rs-buttons-group > a { width: 160px; max-width: 45%; }



#ve2025 section.rs-logistica-filtros { margin: clamp(25px, 10dvw, 50px) 0 clamp(15px, 8dvw, 25px); }

#ve2025 section.rs-clasificaciones-grid.alias-logistica { margin: clamp(15px, 8dvw, 25px) 0; }

#ve2025 section.rs-logistica-mas { margin: clamp(15px, 8dvw, 25px) 0 clamp(25px, 10dvw, 50px); }

#ve2025 section.rs-logistica-mas .rs-button { text-align: center; }

#ve2025 section.rs-logistica-highlighted-03 { margin: clamp(25px, 8dvw, 70px) 0 clamp(25px, 10dvw, 50px); }



#ve2025 .rs-logistica-highlighted-03 .rs-description { margin: 2rem 0 clamp(25px, 10dvw, 90px); }

#ve2025 .rs-logistica-highlighted-03 .rs-description.block-description { margin: 0; }

#ve2025 .rs-logistica-highlighted-03 .rs-blocks { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 6dvw, 50px); background-color: var(--color-01); padding: 25px; border-radius: 8px; overflow: hidden; }

#ve2025 .rs-logistica-highlighted-03 .rs-block:nth-child(1) { display: grid; align-items: center; }



#ve2025 .rs-logistica-banner picture { line-height: 0; border-radius: 8px; overflow: hidden; height: 100%; }

#ve2025 .rs-logistica-banner picture img { display: block; height: 100%; }



/* Toda la tipografía de las páginas de logística en Open Sans, peso 700 */

#ve2025 .rs-logistica-top *,

#ve2025 .rs-logistica-highlighted-01 *,

#ve2025 .rs-logistica-highlighted-02 *,

#ve2025 .rs-logistica-highlighted-03 *,

#ve2025 .rs-logistica-filtros *,

#ve2025 .rs-logistica-mas *,

#ve2025 .rs-logistica-description *,

#ve2025 .rs-logistica-banner *,

#ve2025 .rs-clasificaciones-grid.alias-logistica * {

    font-family: 'Open Sans', Sans-serif, Arial, Helvetica, Verdana !important;

    font-weight: 700 !important;

}

#ve2025 .rs-logistica-top .rs-video-caption-description {

    font-weight: 400 !important;

}



/* El bloque de texto va en peso normal. El selector con * de arriba lo

   ponia todo en 700, incluidos los <strong>, que quedaban indistinguibles

   del resto del parrafo. Hace falta !important para ganarle a esa regla. */

#ve2025 .rs-logistica-top .rs-description,

#ve2025 .rs-logistica-top .rs-description *,

#ve2025 .rs-logistica-highlighted-01 .rs-description,

#ve2025 .rs-logistica-highlighted-01 .rs-description *,

#ve2025 .rs-logistica-highlighted-02 .rs-description,

#ve2025 .rs-logistica-highlighted-02 .rs-description *,

#ve2025 .rs-logistica-highlighted-03 .rs-description,

#ve2025 .rs-logistica-highlighted-03 .rs-description * {

    font-weight: 400 !important;

}



@media only screen and (max-width: 600px) {

    #ve2025 .rs-etapas-top .rs-title-container { grid-template-columns: 1fr; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group { flex-wrap: wrap; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a { width: 50%; flex: 1 1 auto; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a:nth-child(1) { border-radius: var(--border-radius) 0 0 0; border-bottom: none; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a:nth-child(2) { border-radius: 0 var(--border-radius) 0 0; border-bottom: none; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a:nth-child(3) { width: 30%; border-radius: 0 0 0 var(--border-radius); border-left: 1px solid var(--color-06); }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a:nth-child(4) { width: 30%; border-radius: 0; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group > a:nth-child(5) { width: 30%; border-radius: 0 0 var(--border-radius) 0; }

    #ve2025 .rs-logistica-highlighted-01 .rs-block:nth-child(2) { padding: 0 25px 50px; }



    /* Trofeos de Perico (rs-historia-personaje): en escritorio son 4

       columnas fijas (icono, año, equipo, etapas ganadas), pero la columna

       de "etapas ganadas" (200px) ya no deja sitio al nombre del equipo en

       móvil (se queda a 0px y el texto se solapa). Cada tarjeta pasa a 2

       filas: icono + año + equipo arriba (el dato principal, en negrita),

       "etapas ganadas" debajo ocupando todo el ancho como dato secundario

       (más pequeño y en gris, igual que las descripciones del calendario

       de etapas) en vez de ir a la misma talla y peso que el resto. */

    #ve2025 .rs-trofeos-item {

        grid-template-columns: 28px auto 1fr;

        grid-template-rows: auto auto;

        row-gap: 6px;

        column-gap: 12px;

        padding: 14px 16px;

    }

    #ve2025 .rs-trofeos-item .rs-trofeos-icon {

        grid-row: 1 / span 2;

        align-self: center;

    }

    #ve2025 .rs-trofeos-item .rs-trofeos-year,

    #ve2025 .rs-trofeos-item .rs-trofeos-team {

        font-size: 0.95rem;

    }

    #ve2025 .rs-trofeos-item .rs-trofeos-etapas {

        grid-column: 2 / -1;

        grid-row: 2;

        white-space: normal;

        font-weight: 500;

        font-size: 0.8rem;

        color: var(--color-04);

        text-align: right;

    }



    /* Cabecera de ordenación de la trayectoria completa: en vez de forzar

       las 4 etiquetas (POS/Año/Equipo/Etapas ganadas) en la rejilla de la

       tarjeta (quedaban descolocadas, una encima de otra), se muestran

       como una fila de etiquetas que envuelve con normalidad. */

    #ve2025 .rs-trofeos-header {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        gap: 8px 20px;

        padding: 0 16px 14px;

    }



    #ve2025 .rs-trofeos-lista {

        gap: 14px;

    }



    /* Top de máximos ganadores (rs-historia-top .rs-block-item): en

       escritorio son 7 columnas fijas (bandera, posición, foto, nombre,

       3x trofeos), pero en móvil las columnas fijas por sí solas ya casi

       llenan el ancho disponible y el nombre (la única columna flexible)

       se queda a 0px, solapándose con los trofeos. Los 3 trofeos van

       agrupados en .rs-block-item-trofeos-group (display:contents en

       tablet/escritorio, así que ahí no cambia nada) para poder tratarlos

       como un bloque aparte solo aquí: pasan a una segunda fila a todo lo

       ancho, repartidos en una fila flex propia. */

    #ve2025 .rs-historia-top .rs-block-item {

        grid-template-columns: 22px 22px 44px 1fr;

        grid-template-rows: auto auto;

        row-gap: 10px;

        column-gap: 10px;

        padding: 12px 15px;

    }

    #ve2025 .rs-historia-top .rs-block-item-name span {

        font-size: 0.9rem;

    }

    #ve2025 .rs-historia-top .rs-block-item-image img {

        width: 44px;

    }

    #ve2025 .rs-historia-top .rs-block-item-trofeos-group {

        display: flex;

        grid-column: 1 / -1;

        grid-row: 2;

        flex-wrap: wrap;

        align-items: center;

        justify-content: flex-end;

        gap: 6px 20px;

        border-top: 1px solid var(--color-02);

        padding-top: 10px;

    }

    #ve2025 .rs-historia-top .rs-block-item-trofeos {

        display: flex;

        align-items: center;

    }

    #ve2025 .rs-historia-top .rs-block-item-trofeos img {

        width: 16px;

        margin: 0 5px 0 0;

    }

    #ve2025 .rs-historia-top .rs-block-item-trofeos span {

        font-weight: 400;

        font-size: 0.75rem;

    }



    #ve2025 .rs-etapas-modal .rs-close {

        position: absolute;

        top: clamp(5px, 3dvw, 35px);

        right: clamp(26px, 4dvw, 39px);

        width: clamp(30px, 4dvw, 100px);

        height: clamp(30px, 7dvw, 56px);

        z-index: 20;

        cursor: pointer;

        user-select: none;

    }

}



@media only screen and (min-width: 601px) {

    #ve2025 .rs-logistica-highlighted-01 .rs-block:nth-child(2) { padding: 25px 25px 25px 0; }

}



/*

  Palmarés (rs-historia-grid): la tabla de 4 columnas (Año, Campeón,

  Subcampeón, Tercero) no cabe en tablet/móvil sin scroll horizontal. Por

  debajo de 1024px se apila: el año como título de la tarjeta y cada

  puesto en su propia línea con una etiqueta (Campeón/Subcampeón/Tercero)

  delante, en vez de una tabla que solo se puede leer haciendo scroll.

  La cabecera de columnas (vetr-header) no aporta nada en este formato, así

  que se oculta; desde 1024px sigue como la tabla original sin tocar nada.

*/

@media only screen and (max-width: 1023px) {

    #ve2025 .rs-historia-grid .ve-table-container { overflow: visible; }

    #ve2025 .rs-historia-grid .ve-table { min-width: 0; }

    #ve2025 .rs-historia-grid .ve-table-row.vetr-header { display: none; }

    /* 3 columnas iguales para Campeón/Subcampeón/Tercero (en vez de una

       sola columna apilada, que dejaba nombres cortos como "Jonas

       Vingegaard" con mucho hueco vacío a la derecha de una tarjeta a todo

       lo ancho) y el año arriba ocupando las 3. Se separan con una línea

       vertical entre ellas en vez de ir todas seguidas sin más. */

    #ve2025 .rs-historia-grid .ve-table-row {

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-rows: auto auto;

        row-gap: 10px;

        margin: 0 0 10px;

        border-radius: 0;

        padding: 10px 0;

    }

    #ve2025 .rs-historia-grid .ve-table-cell {

        padding: 4px 12px;

    }

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(1) {

        grid-column: 1 / -1;

        grid-row: 1;

        padding: 4px 16px;

    }

    /* align-items:start en las 3 columnas del podio: por defecto el grid

       las estira (stretch) para igualar la altura de la más alta (el

       nombre con más líneas), y esa altura de más se repartía dentro de

       cada columna empujando bandera+título hacia abajo en las columnas

       con menos texto, desalineándolas entre sí. */

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(2) {

        grid-column: 1;

        grid-row: 2;

        align-self: start;

    }

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(3),

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(4) {

        grid-row: 2;

        align-self: start;

        border-left: 1px solid var(--color-02);

    }

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(3) {

        grid-column: 2;

    }

    #ve2025 .rs-historia-grid .ve-table-cell:nth-child(4) {

        grid-column: 3;

    }

    #ve2025 .rs-historia-grid .ve-table-title.ano {

        font-size: 0.95rem;

    }



    /* Bandera encima del nombre (en vez de al lado) para que el nombre

       tenga todo el ancho de su columna: al lado, en columnas de 3 tan

       estrechas, el nombre se quedaba con muy poco sitio y el texto se

       cortaba. align-items:start (en vez del "center" que trae de base

       esta misma regla) para que bandera y título queden arriba también

       dentro de la propia columna, no centrados en su alto. */

    #ve2025 .rs-historia-grid .flag-name {

        align-items: start;

        grid-template-columns: 1fr;

        gap: 6px;

    }

    #ve2025 .rs-historia-grid .flag img {

        width: 22px;

    }

    /* La etiqueta va dentro del propio nombre (.ve-table-description), no

       en la celda .flag-name: esa celda es un grid de 2 columnas fijas

       (bandera 20px + nombre 1fr), y meter aquí un tercer elemento la

       descolocaba entera (la bandera se comía la columna del nombre). */

    #ve2025 .rs-historia-grid .ve-table-description {

        display: block;

    }

    #ve2025 .rs-historia-grid .ve-table-description::before {

        display: block;

        font-size: 0.7rem;

        font-weight: 700;

        text-transform: uppercase;

        color: var(--color-03);

        margin: 0 0 4px;

    }

    #ve2025 .rs-historia-grid .ve-table-description.campeon::before { content: "Campeón"; }

    #ve2025 .rs-historia-grid .ve-table-description.subcampeon::before { content: "Subcampeón"; }

    #ve2025 .rs-historia-grid .ve-table-description.tercero::before { content: "Tercero"; }

}



@media only screen and (min-width: 800px) {

    #ve2025 .rs-etapas-top .rs-blocks { display: grid; grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-logistica-highlighted-01 .rs-blocks { grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-logistica-highlighted-02 .rs-blocks { grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-logistica-highlighted-01 .rs-block:nth-child(2) { padding: 25px 25px 25px 0; }

}



@media only screen and (min-width: 1024px) {

    #ve2025 .rs-etapas-top .rs-blocks { display: grid; grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-clasificaciones-top .rs-filters { display: grid; grid-template-columns: 1fr 2fr; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:first-child .rs-buttons-group { justify-content: flex-start; }

    #ve2025 .rs-clasificaciones-top .rs-filter-group:last-child .rs-buttons-group { justify-content: flex-end; }

    /* Historia pasa a 2 columnas solo a partir de escritorio (1024px); por

       debajo (móvil y tablet) se queda en la única columna apilada de

       .rs-historia-top .rs-blocks/.rs-banner de más arriba, para que tablet

       se vea igual que móvil en vez de mostrar ya el layout de escritorio. */

    #ve2025 .rs-historia-top .rs-blocks { grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-historia-top .rs-banner { grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-logistica-highlighted-01 .rs-title { max-width: 470px; }

    #ve2025 .rs-logistica-highlighted-01 .rs-blocks { grid-template-columns: 1fr 1fr; }

    #ve2025 .rs-logistica-highlighted-02 .rs-blocks { grid-template-columns: 1fr 1fr; }

}



@keyframes esperando {

    0%   { background-color: rgba(0,0,0,0.5); box-shadow: -25px 0 0 rgba(0,0,0,0.2), 25px 0 0 rgba(0,0,0,0.2); }

    33%  { background-color: rgba(0,0,0,0.2); box-shadow: -25px 0 0 rgba(0,0,0,0.2), 25px 0 0 rgba(0,0,0,0.5); }

    66%  { background-color: rgba(0,0,0,0.2); box-shadow: -25px 0 0 rgba(0,0,0,0.5), 25px 0 0 rgba(0,0,0,0.2); }

    100% { background-color: rgba(0,0,0,0.5); box-shadow: -25px 0 0 rgba(0,0,0,0.2), 25px 0 0 rgba(0,0,0,0.2); }

}



@keyframes raiBottomFadeIn {

    0% { opacity: 0; transform: translate(0,50px); }

    80% { opacity: 1; transform: translate(0,0); }

    100% { opacity: 1; }

}



.mod.mod--portadilla--top.simple.double {

    display: none;

}



/* ==========================================================================

   A partir de aquí: CSS de la tabla de etapa-2 compacta (columnas

   estrechas, iconos, fila de descanso...). El marco rosa de prueba y el

   grid que coloca la publicidad al lado viven en el <style> de

   preview.html, no aquí.



   Solo hay dos diseños para esta tabla:

   - Por debajo de 1024px: el layout de tarjeta apilada que ya traía el CSS

     original para móvil (antes solo llegaba hasta 600px; ahora llega hasta

     1024px porque en tablet, con la publicidad al lado, no queda sitio ni

     para el layout de escritorio original ni para el nuestro sin que las

     columnas de tipo/localización acaben colapsando letra a letra).

   - Desde 1024px en adelante: nuestro diseño compacto.

   Por eso hemos quitado de los @media 601/800/1024px de más arriba las

   reglas que activaban el layout de escritorio original de esta tabla

   (grid-template-columns, order, rs-item-buttons-mas/rs-item-buttons) y

   las hemos traído aquí, adaptadas a nuestro diseño.

*/



/*

  "Etapa 1", "Etapa 2"... se muestran solo como "1", "2"... para ahorrar

  sitio en esa columna. El texto "Etapa " sigue existiendo en el HTML (va

  envuelto en .ve-num-prefix por el script de vueltaespana2026.js), solo se

  oculta aquí; así la etapa destacada, que copia este mismo texto por JS,

  lo sigue mostrando completo ("Etapa 1").

*/

@media only screen and (min-width: 1024px) {

    #ve2025 .rs-etapas-calendario .ve-num-prefix {

        display: none;

    }

}



/*

  Equipos: 1 tarjeta por fila en móvil/tablet (por debajo de 900px, el

  mismo corte que usa la tabla de etapas de arriba) y 2 a partir de 900px,

  siempre 2 aunque la pantalla sea muy ancha (ya no llega a 3).

*/

@media only screen and (min-width: 900px) {

    #ve2025 .rs-equipos-grid .rs-items {

        grid-template-columns: 1fr 1fr;

    }

}



/*

  A partir de 1024px la fila deja de ser la tarjeta apilada de móvil y pasa

  a nuestro diseño compacto de una sola fila con columnas estrechas y texto

  que puede pasar a varias líneas.

*/

@media only screen and (min-width: 1024px) {

    /* Estas 3 reglas son las que antes ponían los @media 601/800/1024px

       originales para pasar del layout de tarjeta al de fila: reordenar

       las celdas (la distancia va después de la localización, no antes),

       que cada celda ocupe 1 sola columna (en vez de las 3 que ocupan en

       la tarjeta móvil) y mostrar los botones sin el toggle "Más

       información". */

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell { grid-column: span 1 !important; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(1) { order: 1; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(2) { order: 2; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(3) { order: 5; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(4) { order: 3; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(5) { order: 4; }

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(6) { order: 6; }

    #ve2025 .rs-etapas-calendario .rs-item-buttons-mas { display: none; }

    #ve2025 .rs-etapas-calendario .rs-item-buttons { opacity: 1; max-height: 100px; }



    #ve2025 .rs-etapas-calendario .ve-table {

        /* Red de seguridad: si algún día el hueco real es más estrecho de

           lo previsto (p.ej. un anuncio más ancho de lo esperado), la tabla

           hace scroll horizontal en vez de colapsar las columnas letra a

           letra — 488px es más o menos lo mínimo para que las columnas

           fijas (28+115+46+130px + huecos) dejen algo de sitio decente a

           tipo/localización. */

        min-width: 488px;

    }



    /* etapa, fecha, tipo, localización, km, botones */

    #ve2025 .rs-etapas-calendario .ve-table-row {

        grid-template-columns: 28px 115px 0.85fr 1.15fr 46px 130px;

        column-gap: 6px;

    }



    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell {

        padding: 8px 8px !important;

    }



    /* Menos separación entre el número de etapa y la fecha: se recorta el

       padding que mira hacia el otro (el gap general de 6px se queda igual

       para el resto de columnas). */

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(1) {

        padding-right: 2px !important;

    }



    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(2) {

        padding-left: 2px !important;

    }



    /* Km (nth-child(3) en el DOM, aunque visualmente va en la columna 5 por

       el "order" de más abajo): con "214.3 km" ya no caben los 8px de

       padding a cada lado de antes sin que el número se salga de su

       columna y se monte sobre localización/botones — por eso se ve

       descentrado aunque tenga text-align:center. Con menos padding lateral

       y la columna ampliada de 38px a 46px ya entra holgado. */

    #ve2025 .rs-etapas-calendario .ve-table-row .ve-table-cell:nth-child(3) {

        padding: 8px 2px !important;

    }



    /* Tipo, localización y km se ven siempre enteros, palabra a palabra:

       se apoyan solo en el ajuste de línea normal por espacios (nada de

       line-clamp/ellipsis, hyphens:auto ni overflow-wrap:break-word, que

       partían palabras a lo bruto como "TEMPLA-RIO" o "214" / ".3");

       overflow-wrap:normal explícito porque el navegador no siempre trae

       ese valor por defecto en según qué contexto de grid/flex, y aquí

       necesitamos que ganar por especificidad a cualquier break-word que

       venga de otro sitio. La fila simplemente crece de alto lo que haga falta. */

    #ve2025 .rs-etapas-calendario .ve-table-title,

    #ve2025 .rs-etapas-calendario .ve-table-description {

        overflow-wrap: normal;

    }



    /* La fecha ("Sáb. 23/08/2025") en una sola línea: la columna ya tiene

       115px, que le sobran de sitio a name/km/botones al hacerlos más finos */

    #ve2025 .rs-etapas-calendario .rs-item-date {

        white-space: nowrap;

    }



    /* Los km siempre en 2 líneas ("214.3" / "KM"): columna de 38px, más

       estrecha que "214.3 km" junto pero suficiente para el número solo,

       así el salto de línea ocurre siempre, sea cual sea el ancho de

       pantalla (overflow-wrap:normal ya viene de la regla de arriba, que

       también se aplica aquí porque .rs-item-distance lleva la clase

       .ve-table-title). */

    #ve2025 .rs-etapas-calendario .rs-item-distance {

        white-space: normal;

        text-align: center;

    }



    /* Filas de "Descanso" (#descanso1/#descanso2): mismas columnas que el

       resto de filas (aunque tipo/km/botones queden vacíos), para que todo

       quede alineado igual en toda la tabla. */



    /* Primera columna: solo "-" (el texto "Descanso" se oculta por ahora,

       a la espera de decidir dónde queda mejor; el JS no depende de este

       texto para el día de descanso, así que ocultarlo aquí es seguro). */

    #ve2025 .rs-etapas-calendario #descanso1 .rs-item-name,

    #ve2025 .rs-etapas-calendario #descanso2 .rs-item-name {

        font-size: 0 !important;

    }



    #ve2025 .rs-etapas-calendario #descanso1 .rs-item-name::before,

    #ve2025 .rs-etapas-calendario #descanso2 .rs-item-name::before {

        content: '-';

        font-size: 0.75rem;

    }



    /* "Descanso" a la altura de los botones (celda 6, vacía en estas filas) */

    #ve2025 .rs-etapas-calendario #descanso1 .ve-table-cell:nth-child(6)::before,

    #ve2025 .rs-etapas-calendario #descanso2 .ve-table-cell:nth-child(6)::before {

        content: 'Descanso';

        font-size: 0.75rem;

        font-weight: 700;

        text-transform: uppercase;

        color: var(--color-05);

    }



    /* Perfil se queda con el espacio flexible (y con !important en overflow

       para que su texto nunca "se salga" del botón, aunque quede apretado);

       Directo y Crónica pasan a ser cuadrados de icono fijos y pegados,

       con el mínimo gap entre los tres para que ocupen lo menos posible. */

    #ve2025 .rs-etapas-calendario .rs-item-buttons {

        grid-template-columns: minmax(0, 1fr) 28px 28px;

        gap: 3px;

    }



    #ve2025 .rs-etapas-calendario .rs-item-buttons > a {

        padding: 6px 3px;

        font-size: 0.62rem;

    }



    /* Con el nuevo ancho de columna "PERFIL" ya cabe entero; nowrap evita

       que llegue a partirse en dos líneas, pero sin ellipsis: si algún día

       no cupiera, se vería el texto completo desbordando en vez de cortado. */

    #ve2025 .rs-etapas-calendario .rs-item-perfil {

        white-space: nowrap;

    }



    /* Directo y Crónica: solo icono. Usan currentColor vía mask, así que

       siguen cambiando de color en :hover y cuando están "disabled" igual

       que antes.

       (font-size:0 va con !important porque si no lo pierde frente a la

       regla ".rs-item-buttons > a", que al llevar el selector "a" es más

       específica y ganaba, dejando el texto visible en vez del icono) */

    #ve2025 .rs-etapas-calendario .rs-item-directo,

    #ve2025 .rs-etapas-calendario .rs-item-cronica {

        font-size: 0 !important;

        padding: 0 !important;

        width: 28px;

        height: 28px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

    }



    #ve2025 .rs-etapas-calendario .rs-item-directo::before,

    #ve2025 .rs-etapas-calendario .rs-item-cronica::before {

        content: '';

        display: inline-block;

        width: 14px;

        height: 14px;

        background-color: currentColor;

        -webkit-mask-repeat: no-repeat;

        mask-repeat: no-repeat;

        -webkit-mask-position: center;

        mask-position: center;

        -webkit-mask-size: contain;

        mask-size: contain;

    }



    /* Directo: icono de "play" (enlaza al directo en vídeo) */

    #ve2025 .rs-etapas-calendario .rs-item-directo::before {

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E");

        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E");

    }



    /* Crónica: icono de líneas de texto (más nítido que un contorno fino a 14px) */

    #ve2025 .rs-etapas-calendario .rs-item-cronica::before {

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='3'/%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='3'/%3E%3Crect%20x='4'%20y='17'%20width='10'%20height='3'/%3E%3C/svg%3E");

        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='3'/%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='3'/%3E%3Crect%20x='4'%20y='17'%20width='10'%20height='3'/%3E%3C/svg%3E");

    }

}



/*

  Clasificaciones (rs-clasificaciones-grid): esta tabla (posición, bandera

  + nombre, equipo, tiempo/puntos en columnas fijas de 65px/1fr/1fr/120px,

  o 90px/1fr/120px en las tablas de "Equipos", que no tienen celda de

  equipo aparte) no tenía todavía ningún ajuste para tablet/móvil, así que

  por debajo de 1024px se apretaba igual que le pasaba a las otras tablas

  de esta página antes de arreglarlas. Se apila en tarjeta de 2 líneas:

  posición + bandera y nombre + equipo (con una línea vertical separando

  nombre y equipo) arriba, y tiempo/puntos debajo a la derecha. Las tablas

  de "Equipos" no tienen celda de equipo aparte (flag-name ya lleva el

  nombre del equipo), así que esa 3ª columna se queda simplemente vacía en

  ellas y no ocupan sitio de más.

*/

@media only screen and (max-width: 1023px) {

    #ve2025 .rs-clasificaciones-grid .ve-table-container {

        overflow: visible;

    }

    #ve2025 .rs-clasificaciones-grid .ve-table,

    #ve2025 .rs-clasificaciones-grid .ve-table.equipos {

        min-width: 0;

    }

    #ve2025 .rs-clasificaciones-grid .ve-table-row {

        grid-template-columns: 28px minmax(0, 1fr) auto;

        align-items: center;

        row-gap: 4px;

        column-gap: 10px;

        padding: 10px 14px;

        border-radius: 8px;

        margin: 0 0 6px;

    }

    /* La tabla de "Equipos" tiene su propia regla de escritorio

       (.ve-table.equipos .ve-table-row, 90px 1fr 120px) que por tener más

       clases en el selector gana por especificidad a la de justo arriba y

       seguía aplicándose en móvil: la posición se quedaba con 90px de

       sobra y el nombre del equipo se apretaba en una columna muy

       estrecha. Se igualan aquí las columnas para que también use el

       mismo reparto que el resto de tablas. */

    #ve2025 .rs-clasificaciones-grid .ve-table.equipos .ve-table-row {

        grid-template-columns: 28px minmax(0, 1fr) auto;

    }

    #ve2025 .rs-clasificaciones-grid .ve-table-cell {

        padding: 0;

    }

    #ve2025 .rs-clasificaciones-grid .ve-table-row > .ve-table-cell:first-child {

        grid-column: 1;

    }

    #ve2025 .rs-clasificaciones-grid .flag-name {

        grid-column: 2;

        min-width: 0;

    }

    /* El equipo del corredor, al lado del nombre en vez de en su propia

       línea. Solo existe en individual/montaña/puntos/jóvenes, no en

       "Equipos". */

    #ve2025 .rs-clasificaciones-grid .ve-table-cell:not(.flag-name):not(.right-content):not(:first-child) {

        grid-column: 3;

        max-width: 40vw;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

    #ve2025 .rs-clasificaciones-grid .right-content {

        grid-column: 1 / -1;

        text-align: right;

    }

}