@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* Fuentes Chalet */
@font-face {
    font-family: 'Chalet';
    src: url('assets/fonts/chalet_thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Chalet';
    src: url('assets/fonts/chalet_medium.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Chalet';
    src: url('assets/fonts/chalet_bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Colores corporativos */
    --color-primary: #00A6E7;
    --color-secondary: #eb0a46;
    --color-tertiary: #002E7d;
    --color-white: #ffffff;
    --color-light-gray: #f0f0f0;
    --color-body-text: #000000;
    --color-green: #89f4df;
    --color-purple: #869FE9;
    
    /* Variantes de colores */
    --color-primary-dark: #0192c8;
    
    /* Colores con transparencia - Negro */
    --color-black-alpha-40: rgba(0, 0, 0, 0.4);
    --color-black-alpha-20: rgba(0, 0, 0, 0.2);
    
    /* Colores con transparencia - Blanco */
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-40: rgba(255, 255, 255, 0.4);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-70: rgba(255, 255, 255, 0.7);
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    
    /* Colores con transparencia - Azul secundario */
    --color-primary-alpha-40: rgba(1, 166, 230, 0.4);
    --color-primary-alpha-50: rgba(1, 166, 230, 0.5);
    
    /* Colores con transparencia - Azul secundario oscuro */
    --color-primary-dark-alpha-40: rgba(1, 147, 200, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ocultar scrollbar en todos los navegadores */
body {
    font-family: 'Chalet', sans-serif;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: none;
    /* IE y Edge */
    -ms-overflow-style: none;
}

/* Chrome, Safari y Opera */
body::-webkit-scrollbar {
    display: none;
}

html {
    /* Firefox */
    scrollbar-width: none;
    /* IE y Edge */
    -ms-overflow-style: none;
}

/* Chrome, Safari y Opera */
html::-webkit-scrollbar {
    display: none;
}

/* ============================================
   WIDTH
   ============================================ */

.w-25 {
    width: 25%;
}

.w-25-extra {
    width: 28%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-40-extra {
    width: 48%;
}

.w-45 {
    width: 45%;
}

.w-55 {
    width: 55%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.mt-20 {
    margin-top: 20px;
}

.d-desktop {
    display: block;
}

.d-mobile {
    display: none !important;
}

@media screen and (max-width: 1200px) {
    .w-25 {
        width: 100%;
    }

    .w-25-extra {
        width: 100%;
    }

    .w-35 {
        width: 100%;
    }

    .w-40 {
        width: 100%;
    }

    .w-40-extra {
        width: 100%;
    }

    .w-45 {
        width: 100%;
    }

    .w-55 {
        width: 100%;
    }

    .w-60 {
        width: 100%;
    }

    .w-70 {
        width: 100%;
    }

    .w-80 {
        width: 100%;
    }

    .w-90 {
        width: 100%;
    }

    .mt-20 {
        margin-top: 0px;
    }

    .d-desktop {
        display: none !important;
    }

    .d-mobile {
        display: block !important;
    }

    .template-paragraph--continue.d-mobile {
        margin-top: -0.2rem !important;
    }
}

/* ============================================
   PANTALLA DE CARGA
   ============================================ */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.6s ease-out;
}

/* ============================================
   VIDEO MODAL
   ============================================ */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    z-index: 10001;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.video-modal-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: white;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 10002;
}

.video-modal-close:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.video-modal-close svg {
    display: block;
}

.template__video {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    margin-top: 16px;
}

.template__video.template__link {
    background: var(--color-primary);
    padding: 20px;
    color: var(--color-white);
    border-radius: 6px;
}

.template__video.template__link:hover {
    background: var(--color-tertiary);
    transform: translateY(-3px);
}

.template__video img {
    width: 60px;
    height: 60px;
    margin: 0;
}

.template__video a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.template__video p {
    margin: 0 !important;
    font-weight: 600 !important;
    color: var(--color-tertiary) !important;
    line-height: normal;
    text-align: left !important;
}

.template__video.template__link p {
    color: var(--color-white) !important;
}

.template__video.template__link svg {
    width: 40px;
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 1200px) {
    .template__column--text p:last-child {
        margin-bottom: 0;
    }

    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        top: -45px;
        right: -5px;
    }

    .template__video {
        padding: 0px;
        gap: 10px;
    }

    .template__video a {
        gap: 10px;
    }

    .template__video img {
        width: 60px;
        height: 60px;
    }

    .template__video p {
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem) !important;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animaciones para elementos de paneles */
/* ============================================
   SISTEMA DE ANIMACIONES REUTILIZABLES
   ============================================ */

/* Keyframes para diferentes tipos de animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Clases de animación reutilizables - Estado inicial */
.fade-in,
.fade-out,
.fade-left,
.fade-right,
.fade-up,
.fade-down,
.zoom-in,
.zoom-out {
    opacity: 0;
}

.slide-left,
.slide-right {
    transform: translateX(100%);
}

.slide-up,
.slide-down {
    transform: translateY(100%);
}

/* Activar animaciones cuando el panel padre tiene clase .active */
.panel.active .fade-in {
    animation: fadeIn 0.8s ease-out both;
}

.panel.active .fade-out {
    animation: fadeOut 0.8s ease-out both;
}

.panel.active .fade-left {
    animation: fadeLeft 0.8s ease-out both;
}

.panel.active .fade-right {
    animation: fadeRight 0.8s ease-out both;
}

.panel.active .fade-up {
    animation: fadeUp 0.8s ease-out both;
}

.panel.active .fade-down {
    animation: fadeDown 0.8s ease-out both;
}

.panel.active .slide-left {
    animation: slideLeft 0.8s ease-out both;
}

.panel.active .slide-right {
    animation: slideRight 0.8s ease-out both;
}

.panel.active .slide-up {
    animation: slideUp 0.8s ease-out both;
}

.panel.active .slide-down {
    animation: slideDown 0.8s ease-out both;
}

.panel.active .zoom-in {
    animation: zoomIn 0.8s ease-out both;
}

.panel.active .zoom-out {
    animation: zoomOut 0.8s ease-out both;
}

/* Clases de delay para escalonar animaciones */
.delay-1 {
    animation-delay: 0.1s !important;
}

.delay-2 {
    animation-delay: 0.2s !important;
}

.delay-3 {
    animation-delay: 0.3s !important;
}

.delay-4 {
    animation-delay: 0.4s !important;
}

.delay-5 {
    animation-delay: 0.5s !important;
}

.delay-6 {
    animation-delay: 0.6s !important;
}

.delay-7 {
    animation-delay: 0.7s !important;
}

.delay-8 {
    animation-delay: 0.8s !important;
}

.delay-9 {
    animation-delay: 0.9s !important;
}

.delay-10 {
    animation-delay: 1s !important;
}

.delay-11 {
    animation-delay: 1.1s !important;
}

.delay-12 {
    animation-delay: 1.2s !important;
}

/* Clases de duración personalizadas */
.duration-fast {
    animation-duration: 0.4s !important;
}

.duration-normal {
    animation-duration: 0.8s !important;
}

.duration-slow {
    animation-duration: 1.2s !important;
}

.duration-slower {
    animation-duration: 1.6s !important;
}

/* Elementos visibles en la portada desde el inicio (sin animación) */
.cover-section .cover-logo,
.cover-section .cover-title,
.cover-section .cover-year {
    opacity: 1 !important;
    animation: none !important;
}

.loading-logo {
    width: auto;
    margin-bottom: 25px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.loading-bar-container {
    width: 220px;
    height: 10px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}

.loading-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.loading-percentage {
    font-size: 0.9rem;
    color: #555;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-top: 10px;
}

.square-secondary {
    height: 280px;
    width: 100%;
    background: var(--color-secondary);
    margin-bottom: 40px;
}

/* Header */
.main-header {
    position: fixed;
    top: 15px;
    left: 30px;
    right: 10px;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: transparent;
    z-index: 1002;
    pointer-events: none;
}

.main-header>* {
    pointer-events: auto;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
}

.logo {
    height: 25px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Ya no necesario - header simplificado */

.header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Controles de idioma y descarga en el header */
.header-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: transparent;
    padding: 0.5rem 1.25rem;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.language-selector-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lang-btn-header {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Chalet', sans-serif;
    padding: 0;
}

.lang-btn-header:hover {
    opacity: 0.8;
}

.lang-btn-header.active {
    color: var(--color-primary);
}

.language-selector-header .lang-separator {
    color: var(--color-primary);
    font-weight: 100;
}

.download-btn-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 100;
    transition: all 0.3s ease;
    font-family: 'Chalet', sans-serif;
}

.download-btn-header:hover {
    opacity: 0.8;
}

.download-btn-header i {
    font-size: 1.2rem;
    color: var(--color-primary);
}

/* Estilos invertidos para los controles del header (blanco en secciones oscuras) */
.header-controls.inverted .lang-btn-header {
    color: var(--color-white);
}

.header-controls.inverted .language-selector-header .lang-separator {
    color: var(--color-white);
    font-weight: 100;
}

.header-controls.inverted .download-btn-header {
    color: var(--color-white);
}

.header-controls.inverted .download-btn-header i {
    color: var(--color-white);
}

/* Ya no necesario - header simplificado */

/* Ya no necesario - header simplificado */

/* Botón hamburguesa del header */
.header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    gap: 3px;
    margin: 0;
    z-index: 1003;
    transition: all 0.3s ease;
}

.header-hamburger span {
    width: 20px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.header-hamburger:hover {
    background: transparent;
    transform: scale(1.05);
}

.header-hamburger:hover span {
    background: var(--color-primary);
}

.header-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.header-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.header-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Estilos invertidos del botón hamburguesa para slides Port */
.header-hamburger.inverted {
    background: transparent;
}

.header-hamburger.inverted span {
    background: var(--color-white);
}

/* Responsive header controls */
@media (max-width: 768px) {
    .header-controls {
        padding: 0.4rem 1rem;
        gap: 1rem;
    }

    .language-selector-header {
        gap: 0.4rem;
    }

    .lang-btn-header {
        font-size: 0.8rem;
    }

    .download-btn-header span {
        display: none;
    }

    .download-btn-header i {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .header-controls {
        display: none;
    }
}

/* Menú lateral desde la derecha */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: var(--color-white);
    border-left: 1px solid var(--color-white-alpha-20);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1004;
    overflow-y: auto;
}

.side-menu.active {
    transform: translateX(0);
}

.side-menu-content {
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.side-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-primary);
}

.side-menu-close:hover {
    background: transparent;
    color: var(--color-primary-dark);
    transform: scale(1.1);
}

.side-menu-nav {
    margin-top: 1.5rem;
}

.side-menu-nav h2 {
    color: var(--color-tertiary);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: left;
    font-weight: 600;
    padding-left: 0.5rem;
}

/* Contenedor del menú */
.menu-container {
    position: relative;
    min-height: 300px;
}

/* Botón de volver */
.back-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 0.5rem 0.5rem 0rem;
    margin-bottom: 0.5rem;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}

.back-btn.show {
    opacity: 1;
    visibility: visible;
    max-height: 50px;
}

.back-btn:hover {
    color: var(--color-primary-dark);
}

.back-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Menú principal */
.menu-main {
    opacity: 1;
    visibility: visible;
    font-family: 'Chalet', sans-serif;
}

.menu-main button,
.menu-main span,
.subsection-text {
    font-family: 'Chalet', sans-serif !important;
}

.menu-main.hidden {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* Menú de subsecciones */
.menu-subsections {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.menu-subsections.show {
    opacity: 1;
    visibility: visible;
    position: relative;
    pointer-events: auto;
}

.subsection-title {
    width: 100%;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.subsection-title:hover {
    color: var(--color-tertiary);
    transform: translateX(5px);
}

.subsection-title .section-number {
    color: inherit;
}

.subsection-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subsection-item {
    display: flex;
    gap: 0.25rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.subsection-item:hover {
    padding-left: 1.5rem;
}

.subsection-number {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
}

.subsection-text {
    color: var(--color-body-text);
    font-size: 1rem;
    font-weight: 400;
    flex: 1;
    line-height: 27px;
}

.subsection-item:hover .subsection-number {
    color: var(--color-primary);
}

.subsection-item:hover .subsection-text {
    color: var(--color-primary);
}

/* Grid de menú en 2 columnas */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    margin-bottom: 3rem;
}

/* Botón de sección del menú */
.section-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-tertiary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left;
}

.section-btn:hover {
    transform: none;
    background: transparent;
}

.section-btn:hover .number {
    color: var(--color-primary);
}

.section-btn:hover .title {
    color: var(--color-primary);
}

.side-menu-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-tertiary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.side-menu-link:hover {
    transform: none;
    background: transparent;
}

.side-menu-link:hover .number {
    color: var(--color-primary);
}

.side-menu-link:hover .title {
    color: var(--color-primary);
}

.side-menu-link .number,
.section-btn .number {
    background: transparent;
    color: var(--color-primary);
    width: auto;
    height: auto;
    border-radius: 0;
    display: block;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.side-menu-link .title,
.section-btn .title {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary);
    max-width: 100%;
    text-align: left;
}

/* Separador en el menú lateral */
.side-menu-separator {
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    margin: 1.5rem 0;
}

/* Controles del menú lateral */
.side-menu-controls {
    margin-top: 1rem;
    padding-top: 0rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Selector de idiomas en el menú */
.language-selector-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0;
}

.lang-btn-menu {
    background: transparent;
    border: none;
    color: var(--color-tertiary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Chalet', sans-serif !important;
}

.lang-btn-menu:hover {
    color: var(--color-primary);
}

.lang-btn-menu.active {
    color: var(--color-primary);
    font-weight: 500;
}

.lang-separator {
    color: var(--color-tertiary);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Botón de descarga del menú */
.download-btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    border: none;
    border-radius: 25px;
    color: var(--color-tertiary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.download-btn-menu .icon-container {
    width: 24px;
    height: 24px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-btn-menu i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

/* Overlay para cerrar el menú */
.side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black-alpha-40);
    z-index: 1003;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.side-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Ya no necesario - menú móvil eliminado */

/* Ya no necesario - menú móvil eliminado */

.container {
    display: flex;
    width: max-content;
    height: 100vh;
}

.panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-tertiary);
    font-size: 2rem;
}

.panel.end {
    justify-content: flex-start;
    padding: 4rem;
}

.panel.end .template__image {
    object-fit: cover;
}

.template__column.template__column--image.end, .template__column.end {
  justify-content: end;
}

.panel h1 {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    color: var(--color-white);
    font-weight: 100;
}

.panel p {
    font-size: 1rem;
    opacity: 0.9;
    color: var(--color-body-text);
    font-weight: 100;
}

/* Cambio a scroll vertical en pantallas <= 1200px */
@media (max-width: 1200px) {

    body,
    html {
        overflow-x: hidden;
        width: 100%;
    }

    .container {
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        display: block;
        overflow-x: hidden;
        transform: none !important;
    }

    .panel {
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        transform: none !important;
        overflow-x: hidden;
    }

    .nav-arrow,
    .footer-nav,
    .progress-bar-container {
        display: none;
    }
}

.subsection h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-tertiary);
}

.subsection p {
    font-size: 1rem;
    opacity: 0.9;
    color: var(--color-body-text);
}

/* Índice de subsecciones */
.subsection-index h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--color-tertiary);
    opacity: 0.9;
}

.subsection-nav {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.subsection-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 2.5rem;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 350px;
}

.subsection-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    /* transform: translateX(10px); */
}

.subsection-link .sub-number {
    color: inherit;
}

.subsection-link .sub-title {
    font-size: 1.4rem;
}

/* Sección de índice */
.index-section {
    background: var(--color-white);
}

/* Portada / Cover Section */
.cover-section {
    padding: 0 !important;
    overflow: hidden;
}

.cover-container {
    display: flex;
    height: 100%;
    width: 100%;
}

.cover-left {
    flex: 1;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    padding: 4rem;
    padding-bottom: 10rem;
    position: relative;
}

.cover-logo {
    position: absolute;
    top: 3rem;
    left: 4rem;
    width: 220px;
    height: auto;
}

.cover-text {
    margin-top: 8rem;
}

.cover-title {
    color: var(--color-tertiary);
    font-size: 4.5rem;
    font-weight: normal;
    line-height: 1.1;
    margin: 0 0 1rem 0;
}

.cover-year {
    color: var(--color-white);
    font-size: 7.5rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 0;
}

.cover-right {
    flex: 2;
    background-image: url('assets/Portada-Aquaservice-memoria-de-sostenibilidad-2025.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.index-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.index-link {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 15px;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 400px;
}

.index-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    /* transform: translateX(10px); */
}

.index-link .number {
    font-size: 2.5rem;
    font-weight: bold;
    opacity: 0.7;
}

.index-link .title {
    font-size: 1.8rem;
}

/* Colores para cada sección */
.red {
    background: var(--color-white);
}

.red-dark {
    background: var(--color-white);
}

.red-light {
    background: var(--color-white);
}

.red-lighter {
    background: var(--color-white);
}

.red-lightest {
    background: var(--color-white);
}

.blue {
    background: var(--color-white);
}

.blue-dark {
    background: var(--color-white);
}

.blue-light {
    background: var(--color-white);
}

.blue-lighter {
    background: var(--color-white);
}

.blue-lightest {
    background: var(--color-white);
}

.green {
    background: var(--color-white);
}

.green-dark {
    background: var(--color-white);
}

.green-light {
    background: var(--color-white);
}

.green-lighter {
    background: var(--color-white);
}

.green-lightest {
    background: var(--color-white);
}

.purple {
    background: var(--color-white);
}

.purple-dark {
    background: var(--color-white);
}

.purple-light {
    background: var(--color-white);
}

.purple-lighter {
    background: var(--color-white);
}

.purple-lightest {
    background: var(--color-white);
}

.orange {
    background: var(--color-white);
}

.orange-dark {
    background: var(--color-white);
}

.orange-light {
    background: var(--color-white);
}

.orange-lighter {
    background: var(--color-white);
}

.orange-lightest {
    background: var(--color-white);
}

/* ========================================
   SECTION COVER - Portadas de sección
   ======================================== */

.section-cover {
    padding: 0 !important;
    overflow: hidden;
}

.section-cover-container {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Columna izquierda - Contenido */
.section-cover-left {
    flex: 0 0 30%;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6rem 5rem 5rem 5rem;
    position: relative;
}

.section-cover-logo {
    width: 180px;
    margin-bottom: 3rem;
}

.section-cover-logo img {
    width: 100%;
    height: auto;
}

.section-cover-numero {
    font-size: 6.5rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 0.9;
    margin-bottom: 1.5rem;
}

.section-cover-titulo {
    font-size: 2.5rem;
    font-weight: 100;
    color: var(--color-white);
    line-height: 0.95;
    margin-bottom: 1.5rem;
}

.section-cover-text.highlight,
.section-cover-author.highlight {
    font-size: 1.125rem;
    color: var(--color-tertiary);
    margin: 0 0 1rem 0;
    font-weight: 900;
    font-family: 'Lucida Bright', 'Libre Baskerville', Georgia, serif;
}

.section-cover-indice {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-cover-item {
    font-size: 1rem;
    color: var(--color-white);
    line-height: 1.4;
    padding-left: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 5px;
    font-weight: 100;
}

.section-cover-item.is-clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.section-cover-item.is-clickable:hover,
.section-cover-item.is-clickable:focus-visible {
    opacity: 0.8;
}

.section-cover-item .item-numero {
    font-weight: 400;
    color: var(--color-white);
    flex-shrink: 0;
}

.section-cover-item .item-text {
    flex: 1;
}

/* Columna derecha - Imagen */
.section-cover-right {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.section-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sin animaciones en portadas de sección */
.section-cover .section-cover-logo,
.section-cover .section-cover-numero,
.section-cover .section-cover-titulo,
.section-cover .section-cover-indice,
.section-cover .section-cover-item,
.section-cover .item-numero,
.section-cover .item-text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    font-weight: 100 !important;
}

/* Indicador de scroll */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: 1rem;
    opacity: 0.7;
    z-index: 100;
    pointer-events: none;
}

/* Flechas de navegación */
.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    color: var(--color-primary);
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.58));
    opacity: 1;
    visibility: visible;
}

.nav-arrow.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nav-arrow:hover {
    border-color: var(--color-white-alpha-80);
    transform: translateY(-50%) scale(1.1);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.32));
}

.nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.nav-arrow-left {
    left: 10px;
}

.nav-arrow-right {
    right: 10px;
}

/* Estilos invertidos de los botones de navegación para slides Port */
.nav-arrow.inverted {
    color: var(--color-white);
    background: transparent;
}

.nav-arrow.inverted:hover {
    color: var(--color-white);
}

.progress-bar:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Footer de navegación horizontal */
.footer-nav {
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 2rem;
    z-index: 1001;
}

.footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-primary);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.footer-link:hover {
    color: var(--color-tertiary);
}

.footer-link.active {
    color: var(--color-tertiary);
}

.footer-link .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-white-alpha-50);
    transition: all 0.3s ease;
}

.footer-link:hover .dot,
.footer-link.active .dot {
    background: var(--color-white);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--color-white-alpha-80);
}

.footer-link .label {
    font-size: 0.75rem;
    opacity: 0.8;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.footer-link.active .label {
    opacity: 1;
}

/* Estilos para footer con texto blanco en slides Port */
.footer-nav.white-text .footer-link {
    color: var(--color-white);
}

.footer-nav.white-text .footer-link .label {
    color: var(--color-white);
    opacity: 0.9;
}

.footer-nav.white-text .footer-link.active .label {
    opacity: 1;
}

.footer-nav.white-text .footer-link:hover {
    color: var(--color-white);
}

/* Barra de progreso */
.progress-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--color-black-alpha-20);
    z-index: 999;
    backdrop-filter: blur(5px);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px var(--color-primary-alpha-50);
}

/* ============================================
   SISTEMA DE PLANTILLAS UNIFICADO (Metodología BEM)
   ============================================ */

/* Contenedor principal genérico */
.container-plantilla {
    max-width: 1420px;
    margin: 0 auto;
    position: relative;
}

/* ==================== 
   CLASES BASE - Elementos comunes a todas las plantillas
   ==================== */

/* Clase base de plantilla */
.template {
    padding: 0rem 6rem;
    position: relative;
}

/* Número grande de sección */
.template__number {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    z-index: 10;
    text-align: left;
    margin-bottom: 0.5rem;
}

.template__number_2 {
    padding-top: 0px;
    line-height: 4.5rem;
}

/* Título principal */
.template__title {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 100;
    margin-bottom: 2rem;
    margin-left: 0;
    line-height: 1.2;
}

.template__title--small {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-primary);
    padding: 0 0 1rem 0;
}

.template__title:has(+ .template__title--small) {
    margin-bottom: 0;
}

/* Contenedor de contenido base */
.template__content {
    display: grid;
    gap: 1.5rem;
}

/* Columna genérica */
.template__column {
    display: flex;
    flex-direction: column;
}

/* Modificadores de columna */
.template__column--image {
    justify-content: flex-start;
}

.template__column--text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-body-text);
    justify-content: start;
}

/* Contenedor de imagen */
.template__image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.template__image-container--auto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

/* Imagen */
.template__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template__image--auto {
    width: 100%;
    object-fit: cover;
    height: auto;
}

/* Estilos de párrafos en columnas de texto */
.template__column--text p {
    margin-bottom: 1.2rem;
    text-align: justify;
    font-size: 1rem;
    opacity: 0.9;
    color: var(--color-body-text);
}

.template__column--text p b, .template-paragraph b {
    font-weight: 600;
    color: var(--color-body-text);
}

.template__column--text .subtitle {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.125rem;
}

.template-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    padding: 0 0 1rem 0;
}

.template-subtitle-list {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-body-text);
    padding: 0 0 1rem 0;
}

.template-subtitle--small {
    font-size: 1.1rem;
    color: var(--color-body-text);
}

/* ==================== 
   MODIFICADORES DE LAYOUT - Grid de columnas
   ==================== */

/* 2 columnas iguales (1fr 1fr) */
.template__content--2col {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

/* 2 columnas (imagen pequeña + texto grande: 1fr 2fr) */
.template__content--2col-narrow-left {
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
}

/* 2 columnas (imagen pequeña + texto grande: 1fr 3fr) */
.template__content--2col-wide-right {
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
}

/* 3 columnas iguales (1fr 1fr 1fr) */
.template__content--3col {
    grid-template-columns: 1fr 1fr 1fr;
}

/* 3 columnas con primera más ancha (2fr 1fr 1fr) */
.template__content--3col-wide-left {
    grid-template-columns: 2fr 1fr 1fr;
}

/* 3 columnas con central más ancha (1fr 2fr 1fr) */
.template__content--3col-wide-center {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: end;
}

.template__content--3col-wide-center.inherit {
    align-items: inherit;
}

/* 3 columnas con última más ancha (1fr 1fr 2fr) */
.template__content--3col-wide-right {
    grid-template-columns: 1fr 1fr 2fr;
}

/* 4 columnas iguales */
.template__content--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* ==================== 
   RESPONSIVE - Media Queries para Grids
   ==================== */

/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    /* 4 columnas se convierten en 2 */
    .template__content--4col {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* 3 columnas se convierten en 2 */
    .template__content--3col,
    .template__content--3col-wide-left,
    .template__content--3col-wide-center,
    .template__content--3col-wide-right {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    /* 2 columnas mantienen su estructura pero con gap reducido */
    .template__content--2col,
    .template__content--2col-narrow-left {
        gap: 1rem;
    }
    
    /* Quitar alineación especial en tablets */
    .template__content--3col-wide-center {
        align-items: start;
    }
    
    /* Fix para imágenes en responsive - evitar que rompan el container */
    .template__column--image {
        overflow: hidden;
    }
    
    .template__column--image img,
    .template__image {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* Una columna desde <= 1200px */
@media (max-width: 1200px) {
    /* Resetear alineación en móviles */
    .template__content--3col-wide-center {
        align-items: start;
    }

    /* Ajustar tamaños de título y número en móviles */
    .template__number {
        font-size: 4rem;
    }

    .template__title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    /* Ajustar padding del template en móviles */
    .template {
        padding: 1.5rem;
    }

    /* Fix para imágenes en responsive - evitar que rompan el container */
    .template__column--image {
        overflow: hidden;
    }

    .template__column--image img,
    .template__image {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* Tablets y móviles - convertir layouts a 1 columna */
@media (max-width: 768px) {

    /* Convertir todos los layouts de columnas a 1 columna en móviles */
    .template__content--2col,
    .template__content--2col-narrow-left,
    .template__content--2col-wide-right,
    .template__content--3col,
    .template__content--3col-wide-left,
    .template__content--3col-wide-center,
    .template__content--3col-wide-right,
    .template__content--4col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Reducir espacio cuando una columna comienza con continue */
    .template__column:has(> .template-paragraph--continue:first-child) {
        margin-top: -0.8rem;
    }

    /* Reducir margen de imágenes que preceden a un continue */
    .template__column--image+.template__column:has(> .template-paragraph--continue:first-child) {
        margin-top: -0.5rem;
    }
}

/* Móviles pequeños (max-width: 480px) */
@media (max-width: 480px) {
    .template__number {
        font-size: 3rem;
    }

    .template__title {
        font-size: 1.5rem;
    }

    .template {
        padding: 1rem;
    }

    .template__content--2col,
    .template__content--2col-narrow-left,
    .template__content--3col,
    .template__content--3col-wide-left,
    .template__content--3col-wide-center,
    .template__content--3col-wide-right,
    .template__content--4col,
    .template__content--2col-wide-right {
        gap: 0.8rem;
    }

    /* Mayor reducción de espacio en móviles pequeños */
    .template__column:has(> .template-paragraph--continue:first-child) {
        margin-top: -1rem;
    }
}

/* ==================== 
   ELEMENTOS ADICIONALES - Para plantillas complejas
   ==================== */

/* Título de columna (para plantillas con subsecciones) */
.template__column-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-body-text);
    padding: 0.5rem 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1rem;
}

/* Columna con gap (para plantillas con múltiples bloques) */
.template__column--with-gap {
    gap: 1rem;
}

.template__column--with-gap-large {
    gap: 1.5rem;
}

/* Bloque de contenido genérico */
.template__block {
    display: flex;
    align-items: flex-start;
}

.template__block-content {
    color: #666;
    font-size: 1.1rem;
    width: 100%;
}

.template__block-content p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.6;
    color: var(--color-body-text);
}

/* Bloque pequeño */
.template__block--small .template__block-content {
    font-size: 0.9rem;
}

/* Fila de bloques pequeños */
.template__blocks-row {
    display: flex;
    gap: 1rem;
}

.template__blocks-row .template__block {
    flex: 1;
}

/* Grid de bloques para layout 1fr 2fr */
.template__blocks-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

/* Números de todas las plantillas */
.plantilla2-numero,
.plantilla2b-numero,
.plantilla2c-numero,
.plantilla2d-numero,
.plantilla3-numero,
.plantilla3b-numero,
.plantilla3c-numero,
.plantilla3d-numero,
.plantilla4-numero,
.plantilla4b-numero,
.plantilla4c-numero {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-tertiary);
    line-height: 1;
    z-index: 10;
    text-align: left;
    margin-bottom: 0.5rem;
}

/* Títulos de todas las plantillas */
.plantilla2-titulo,
.plantilla2b-titulo,
.plantilla2c-titulo,
.plantilla2d-titulo,
.plantilla3-titulo,
.plantilla3b-titulo,
.plantilla3c-titulo,
.plantilla3d-titulo,
.plantilla4-titulo,
.plantilla4b-titulo,
.plantilla4c-titulo {
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: normal;
    margin-bottom: 2rem;
    margin-left: 0;
    line-height: 1.2;
}

/* Contenidos con grid específico para cada variante */
.plantilla2-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 1rem;
}

.plantilla2b-contenido {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    margin-top: 1rem;
}

.plantilla2c-contenido,
.plantilla2d-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.plantilla3-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.plantilla3b-contenido {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.plantilla3c-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 2rem;
    margin-top: 1rem;
}

.plantilla3d-contenido {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.plantilla4-contenido,
.plantilla4b-contenido,
.plantilla4c-contenido {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}

/* Columnas para todas las plantillas */
.plantilla2-columna,
.plantilla2b-columna,
.plantilla3-columna,
.plantilla3b-columna,
.plantilla3c-columna,
.plantilla3d-columna,
.plantilla4-columna,
.plantilla4b-columna,
.plantilla4c-columna {
    display: flex;
    flex-direction: column;
}

.plantilla2-columna-imagen,
.plantilla2b-columna-imagen,
.plantilla3-columna-imagen,
.columna-imagen-b,
.plantilla4-columna-imagen {
    justify-content: flex-start;
}

/* Contenedores de imagen */
.plantilla2-imagen-container,
.plantilla2b-imagen-container,
.plantilla3-imagen-container,
.imagen-container-b,
.plantilla4-imagen-container {
    width: 100%;
    height: auto;
    background-color: var(--color-light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imágenes */
.plantilla2-image,
.plantilla2b-image,
.plantilla3-image,
.image-b,
.plantilla4-image,
.plantilla4c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.plantilla4c-image {
    height: auto;
    border-radius: 4px;
}

/* Columnas de texto */
.plantilla2-columna-texto,
.plantilla2b-columna-texto,
.plantilla3-columna-texto-1,
.plantilla3-columna-texto-2,
.plantilla3b-columna-texto-1,
.plantilla3b-columna-texto-2,
.plantilla3c-columna-texto-1,
.plantilla3c-columna-texto-2,
.plantilla3d-columna-texto-1,
.plantilla3d-columna-texto-2,
.plantilla4-columna-texto-1,
.plantilla4-columna-texto-2 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-body-text);
    justify-content: center;
}

.plantilla2-columna-texto p,
.plantilla2b-columna-texto p,
.plantilla3-columna-texto-1 p,
.plantilla3-columna-texto-2 p,
.plantilla3b-columna-texto-1 p,
.plantilla3b-columna-texto-2 p,
.plantilla3c-columna-texto-1 p,
.plantilla3c-columna-texto-2 p,
.plantilla3d-columna-texto-1 p,
.plantilla3d-columna-texto-2 p,
.plantilla4-columna-texto-1 p,
.plantilla4-columna-texto-2 p {
    margin-bottom: 1.2rem;
    text-align: justify;
    font-size: 1rem;
    opacity: 0.9;
    color: var(--color-body-text);
}

.plantilla3-columna-texto-2 p b,
.plantilla3b-columna-texto-2 p b,
.plantilla3c-columna-texto-2 p b,
.plantilla3d-columna-texto-2 p b,
.plantilla4-columna-texto-2 p b {
    font-weight: bold;
    color: var(--color-body-text);
}

/* Plantillas C y D - Elementos estructurados */
.plantilla2c-columna-izq,
.plantilla2c-columna-der {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plantilla2d-columna-izq,
.plantilla2d-columna-der {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.plantilla2c-titulo-columna,
.plantilla2d-titulo-columna {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-body-text);
    padding: 0.5rem 0;
    border-bottom: 2px solid #e5e7eb;
}

.plantilla2c-bloque-content,
.plantilla2d-bloque-content {
    text-align: justify;
    color: #666;
    font-size: 1.1rem;
}

.plantilla2c-bloques-pequenos {
    display: flex;
    gap: 1rem;
}

.plantilla2d-bloques-pequenos {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.plantilla2c-bloque-pequeno,
.plantilla2c-bloque-grande,
.plantilla2d-bloque-pequeno {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.plantilla2c-bloque-pequeno .plantilla2c-bloque-content,
.plantilla2d-bloque-pequeno .plantilla2d-bloque-content {
    font-size: 0.9rem;
    width: 100%;
}

/* ====================
   PLANTILLAS PORT (con fondo)
   ==================== */

/* Template Port 1 */
.template-port1 {
    padding: 2rem;
    position: relative;
    background-image: url('assets/port1-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.templateport1-numero {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1;
    z-index: 10;
    text-align: left;
    margin-bottom: 0.5rem;
}

.templateport1-marco {
    border: 2px solid var(--color-white);
    background-color: rgba(255, 255, 255, 0.78);
    border-radius: 10px;
    padding: 2rem;
    width: 50%;
    margin-right: auto;
    margin-left: 0;
    box-sizing: border-box;
}

.templateport1-titulo {
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: normal;
    margin-bottom: 2rem;
    margin-left: 0;
    line-height: 1.2;
}

.templateport1-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.templateport1-columna {
    display: flex;
    flex-direction: column;
}

.templateport1-columna-imagen {
    justify-content: flex-start;
}

.templateport1-imagen-container {
    width: 100%;
    height: auto;
    background-color: var(--color-light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.templateport1-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.templateport1-columna-texto-1,
.templateport1-columna-texto-2 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-body-text);
}

.templateport1-columna-texto-1 p,
.templateport1-columna-texto-2 p {
    margin-bottom: 1.2rem;
    text-align: justify;
    font-size: 1rem;
    opacity: 0.9;
}

.templateport1-columna-texto-2 p b {
    font-weight: bold;
    color: var(--color-body-text);
}

/* Template Port 2 */
.template-port2 {
    padding: 2rem;
    position: relative;
    background-image: url('assets/port1-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.templateport2-numero {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-tertiary);
    line-height: 1;
    z-index: 10;
    text-align: left;
    margin-bottom: 0.5rem;
}

.templateport2-marco {
    border: 2px solid var(--color-white);
    background-color: rgba(255, 255, 255, 0.78);
    border-radius: 10px;
    padding: 2rem;
    width: 50%;
    margin-left: auto;
    margin-right: 0;
    box-sizing: border-box;
}

.templateport2-titulo {
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: normal;
    margin-bottom: 2rem;
    margin-left: 0;
    line-height: 1.2;
}

.templateport2-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.templateport2-columna {
    display: flex;
    flex-direction: column;
}

.templateport2-columna-imagen {
    justify-content: flex-start;
}

.templateport2-imagen-container {
    width: 100%;
    height: auto;
    background-color: var(--color-light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.templateport2-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.templateport2-columna-texto-1,
.templateport2-columna-texto-2 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-body-text);
}

.templateport2-columna-texto-1 p,
.templateport2-columna-texto-2 p {
    margin-bottom: 1.2rem;
    text-align: justify;
    font-size: 1rem;
    opacity: 0.9;
}

.templateport2-columna-texto-2 p b {
    font-weight: bold;
    color: var(--color-body-text);
}

/* ====================
   SECTION 4.10 - CERTIFICACIONES
   ==================== */

/* ============================================
   TEMPLATE GENÉRICO - BLOQUE INFERIOR IZQUIERDO
   Clase reutilizable para cualquier sección
   ============================================ */

.template-bottom-left {
    width: 100vw;
    padding: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.template-bottom-left__container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100vh;
    margin-bottom: 160px;
    margin-left: 160px;
}

.template-bottom-left .template__content--2col {
    gap: 1.5rem;
}

.template-bottom-left__marco {
    background-color: var(--color-white);
    padding: 2.5rem;
    max-width: 900px;
}

.template-bottom-left__titulo {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 100;
    margin-bottom: 4rem;
    line-height: 1.3;
}

.template-bottom-left__descripcion {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-body-text);
    margin-bottom: 1.5rem;
    text-align: justify;
}

.template-bottom-left__logos-grid {
    display: grid;
    gap: 40px;
}

.template-bottom-left__logos-grid .fila_1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem 1.5rem;
    align-items: center;
    justify-items: start;
}

.template-bottom-left__logos-grid .fila_2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
    align-items: center;
    justify-items: start;
}

.template-bottom-left__logos-grid .mobile {
    display: none;
}

.template-bottom-left__logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-bottom-left__logos-grid .fila_1 .template-bottom-left__logo img {
    width: 100%;
    max-height: 100%;
}

.template-bottom-left__logos-grid .fila_1 .template-bottom-left__logo:nth-child(-n+4) img {
    height: 80px;
}

.template-bottom-left__logo img {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* Solo para la sección 7.10 */
.section7-10, .section4-8-1 {
    position: relative;
}

.section7-10 .template-bottom-left__container, .section4-8-1 .template-bottom-left__container {
    position: absolute;
    right: 160px;
    bottom: 160px;
    left: 160px;
    top: auto;
    width: auto;
    height: auto;
    margin: 0;
    max-width: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.section7-10 .template-bottom-left__marco {
    width: min(100%, 900px);
    margin-left: auto;
}

.section4-8-1 .template-bottom-left__marco {
  width: 30%;
  padding: 20px;
}

/* Evitar solape con el header fijo en portátiles (sección 4.10) */
@media (min-width: 1201px) and (max-height: 1200px) {
    .is-mac:root {
        --mac13-font-scale: 0.8;
        --mac13-text-line-height: 1.60;
        --mac13-title-line-height: 1.08;
        --mac13-image-max-height: min(50vh, 520px);
    }

    .is-mac :where(
        p,
        li,
        .template-paragraph,
        .template-paragraph--continue,
        [class*="descripcion"],
        [class*="texto"],
        [class*="columna-texto"],
    ):not(.timeline-text):not(.timeline-year):not(.timeline-numero):not(.timeline-titulo) {
        font-size: calc(1rem * var(--mac13-font-scale))!important;
        line-height: var(--mac13-text-line-height) !important;
    }

    .is-mac :where(
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        [class*="titulo"],
        [class*="template__title"],
    ):not(.timeline-titulo):not(.template-subtitle--small):not(.template-subtitle) {
        font-size: calc(2rem * var(--mac13-font-scale)) !important;
        line-height: var(--mac13-title-line-height) !important;
    }

    .is-mac :where(
        .template__image,
        .template__image--auto,
        .template-image,
        .template-image--large
    ) {
        max-height: var(--mac13-image-max-height) !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .is-mac :where(
        .template__image-container,
        .template__image-container--auto,
        .template__image
    ) {
        max-height: calc(var(--mac13-image-max-height) + 2rem)!important;
        height: auto !important;
    }

    .is-mac .ods-card__title {
        font-size: calc(1.2rem * var(--mac13-font-scale)) !important;
        line-height: var(--mac13-title-line-height) !important;
    }

    .is-mac .grid-card__number{
        font-size: calc(2rem * var(--mac13-font-scale)) !important;
        line-height: var(--mac13-title-line-height) !important;
    }

    .is-mac .grid-card__title{
        font-size: calc(2rem * var(--mac13-font-scale)) !important;
        line-height: var(--mac13-title-line-height) !important;
    }
    
    .is-mac .template__stat-unit{
        font-size: calc(2rem * var(--mac13-font-scale)) !important;
        line-height: var(--mac13-title-line-height) !important;  
    }

    .is-mac .section4_8__map{
        width: 75%!important;
    }

     .is-mac #anchor-4-3{
        padding-left:5rem;
     }

    .is-mac [data-year="1997"] {
        padding-top: 4rem;
    }

     .is-mac [data-year="2004"] {
        padding-top: 4rem;
    }

    .is-mac [data-year="2014"] {
        padding-top: 12rem;
    }


    .is-mac [data-year="2015"] {
        padding-top: 1rem;
    }

    .is-mac [data-year="2016"] {
        padding-top: 1rem!important;
    }


    .is-mac [data-year="2018"] {
        top:32px!important;
    }

    .is-mac [data-year="2019"] {
        padding-top: 2.5rem!important;
    }

      .is-mac [data-year="2020"] {
        margin-bottom: -20px!important;
    }

      .is-mac #anchor-4-3_2 > div > div.timeline-wrapper.timeline-desktop > div.timeline-line{
        top:300px;
    }


    .is-mac [data-year="2021"] {
            padding-top: 2.8rem!important;
    }

    .is-mac [data-year="2022"] {
            padding-top: 1.8rem!important;
    }

    .is-mac [data-year="2023"] {
        top: 40px!important;
    }

    .is-mac [data-year="2024"] {
        top: -90px!important;
    }

    .is-mac [data-year="2025"] {
        top: 2px!important;
    }

    .is-mac #anchor-5-8-3 > div > div > div:nth-child(4) > img {
        max-height: 30vh!important;
        margin-bottom: 5%;
    }

    .is-mac #anchor-4-11 .template-bottom-left__container {
        height: calc(100vh - 4.2rem);
        margin-top: 4.2rem;
        margin-bottom: clamp(2rem, 5vh, 4rem);
        margin-left: clamp(2.5rem, 5vw, 10rem);
        box-sizing: border-box;
    }

    .is-mac #anchor-4-11 .template-bottom-left__marco {
        max-height: calc(100vh - 9rem);
    }

    .is-mac #anchor-7-4 > div > div > div.template__column.template__column--text.fade-up.delay-2 > p.template-paragraph.template-paragraph--highlight.end.fade-up.delay-12{
        margin-top:30%!important;
    }

    .is-mac .section7_1_1__logo {
        margin-top:36%!important;
    }

    .is-mac .d-desktop:not(.template__image-container) {
        display: none !important;
    }

    .is-mac .d-mobile:not(.template__image-container) {
        display: block !important;
    }

    .is-mac .template-paragraph--continue.d-mobile:not(.template__image-container) {
        margin-top: -0.2rem !important;
    }
}

/* ====================
   RESPONSIVE - PLANTILLAS 2 COLUMNAS
   ==================== */

/* Tablets */
@media (max-width: 1024px) {
    .plantilla2-contenido {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero {
        font-size: 5rem;
    }

    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo {
        font-size: 2rem;
    }

    .plantilla2-columna-texto,
    .plantilla2b-columna-texto {
        font-size: 0.9rem;
    }

    .plantilla2b-contenido {
        grid-template-columns: 1fr 1.5fr;
        gap: 2rem;
    }

    .plantilla2c-contenido,
    .plantilla2d-contenido {
        gap: 1.5rem;
    }

    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.5rem;
    }

    .plantilla2d-bloque-grande {
        padding: 0px;
    }
}

/* Una columna desde <= 1200px */
@media (max-width: 1200px) {

    .plantilla2-contenido,
    .plantilla2b-contenido,
    .plantilla2c-contenido,
    .plantilla2d-contenido {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .plantilla2-imagen-container,
    .plantilla2b-imagen-container {
        height: 300px;
        margin: 0 auto;
    }

    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero {
        font-size: 4rem;
        margin-bottom: 0;
    }

    .plantilla2-titulo,
    .plantilla2b-titulo {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 0;
    }

    .plantilla2c-titulo,
    .plantilla2d-titulo {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 0;
    }

    .plantilla2-columna-texto,
    .plantilla2b-columna-texto {
        font-size: 0.9rem;
    }

    .plantilla-dos-columnas,
    .plantilla-dos-columnas-b,
    .plantilla-dos-columnas-c,
    .plantilla-dos-columnas-d {
        padding: 1rem;
    }

    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.3rem;
        text-align: justify;
    }

    .plantilla2d-bloque-grande {
        padding: 0px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero {
        font-size: 3rem;
    }

    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo {
        font-size: 1.5rem;
    }

    .plantilla2-imagen-container {
        height: 250px;
    }

    .plantilla2b-imagen-container {
        height: 250px;
        max-width: 250px;
    }

    .plantilla2-columna-texto,
    .plantilla2b-columna-texto {
        font-size: 0.85rem;
    }

    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1rem;
    }

    .plantilla2d-bloque-pequeno {
        padding: 1rem;
    }
}

/* ====================
   RESPONSIVE - PLANTILLAS 3 COLUMNAS
   ==================== */

/* Tablets */
@media (max-width: 1024px) {
    .plantilla3-contenido {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }

    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero {
        font-size: 5rem;
    }

    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo {
        font-size: 2rem;
    }

    .plantilla3b-contenido {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 1.5rem;
    }

    .plantilla3c-contenido {
        grid-template-columns: 1fr 1fr 1.5fr;
        gap: 1.5rem;
    }

    .plantilla3d-contenido {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 1.5rem;
    }
}

/* Una columna desde <= 1200px */
@media (max-width: 1200px) {

    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .plantilla3-imagen-container,
    .imagen-container-b {
        height: 300px;
        margin: 0 auto;
    }

    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero {
        font-size: 4rem;
        margin-bottom: 0;
    }

    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 0;
    }

    .plantilla3-columna-texto-1,
    .plantilla3-columna-texto-2,
    .plantilla3b-columna-texto-1,
    .plantilla3b-columna-texto-2,
    .plantilla3c-columna-texto-1,
    .plantilla3c-columna-texto-2,
    .plantilla3d-columna-texto-1,
    .plantilla3d-columna-texto-2 {
        font-size: 0.9rem;
    }

    .plantilla-tres-columnas,
    .plantilla-tres-columnas-b,
    .plantilla-tres-columnas-c,
    .plantilla-tres-columnas-d {
        padding: 1rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero {
        font-size: 3rem;
    }

    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo {
        font-size: 1.5rem;
    }

    .plantilla3-imagen-container,
    .imagen-container-b {
        height: 250px;
        max-width: 200px;
    }
}

/* ====================
   RESPONSIVE - PLANTILLAS 4 COLUMNAS
   ==================== */

/* Tablets */
@media (max-width: 1024px) {

    .plantilla4-contenido,
    .plantilla4b-contenido,
    .plantilla4c-contenido {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 5rem;
    }

    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 2rem;
    }
}

/* Una columna desde <= 1200px */
@media (max-width: 1200px) {
    .plantilla4-contenido {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .plantilla4b-contenido,
    .plantilla4c-contenido {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .plantilla4-imagen-container {
        height: 300px;
        margin: 0 auto;
    }

    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 4rem;
        margin-bottom: 0;
    }

    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 0;
    }

    .plantilla4-columna-texto-1,
    .plantilla4-columna-texto-2 {
        font-size: 0.9rem;
    }

    .plantilla-cuatro-columnas,
    .plantilla-cuatro-columnas-b,
    .plantilla-cuatro-columnas-c {
        padding: 1rem;
    }

    .plantilla4b-bloque-content p {
        font-size: 0.9rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 3rem;
    }

    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 1.5rem;
    }

    .plantilla4-imagen-container {
        height: 250px;
        max-width: 200px;
    }
}

/* ====================
   RESPONSIVE - PLANTILLAS PORT
   ==================== */

/* Tablets */
@media (max-width: 1024px) {

    .templateport1-contenido,
    .templateport2-contenido {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .templateport1-numero,
    .templateport2-numero {
        font-size: 5rem;
    }

    .templateport1-titulo,
    .templateport2-titulo {
        font-size: 2rem;
    }
}

/* Móviles */
@media (max-width: 768px) {

    .templateport1-contenido,
    .templateport2-contenido {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .templateport1-imagen-container,
    .templateport2-imagen-container {
        height: 300px;
        margin: 0 auto;
        max-width: 250px;
    }

    .templateport1-numero,
    .templateport2-numero {
        font-size: 4rem;
        margin-bottom: 0;
    }

    .templateport1-titulo,
    .templateport2-titulo {
        font-size: 1.8rem;
        text-align: left;
        margin-bottom: 0;
    }

    .templateport1-columna-texto-1,
    .templateport1-columna-texto-2,
    .templateport2-columna-texto-1,
    .templateport2-columna-texto-2 {
        font-size: 0.9rem;
    }

    .templateport1-marco,
    .templateport2-marco {
        width: 100%;
        padding: 1.25rem;
    }

    .template-port1,
    .template-port2 {
        padding: 1rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {

    .templateport1-numero,
    .templateport2-numero {
        font-size: 3rem;
    }

    .templateport1-titulo,
    .templateport2-titulo {
        font-size: 1.5rem;
    }

    .templateport1-marco,
    .templateport2-marco {
        padding: 1rem;
    }

    .template-bottom-left__titulo {
        font-size: 1.25rem;
    }

    .template-bottom-left__logo img {
        width: 50px;
        max-height: 50px;
    }
}

/* Responsive para template bloque inferior izquierdo en tablets */
@media (max-width: 1024px) {
    .template-bottom-left__container {
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        justify-content: flex-start;
    }
}

/* Responsive para bloque inferior izquierdo en móviles */
@media (max-width: 1200px) {
    .template-bottom-left__container {
        height: auto;
        min-height: 100vh;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .template-bottom-left__marco {
        padding: 1rem;
    }

    .template-bottom-left__titulo {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .template-bottom-left__descripcion {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .template-bottom-left__logos-grid .fila_1,
    .template-bottom-left__logos-grid .fila_2 {
        display: none;
    }

    .template-bottom-left__logos-grid .mobile {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1.5rem;
        align-items: center;
        justify-items: start;
    }

    .template-bottom-left__logo img {
        width: 60px;
        max-height: 60px;
    }

    .section4-1 .template__column--text {
        margin-top: 0px !important;
    }
}

@media (max-width: 1200px) {
    .section7-10 .template-bottom-left__container,
    .section4-8-1 .template-bottom-left__container {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .section7-10 .template-bottom-left__marco {
        width: min(100%, 900px);
    }

    .section4-8-1 .template-bottom-left__marco {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .section7-10 .template-bottom-left__container,
    .section4-8-1 .template-bottom-left__container {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }
}

/* Responsive para section7-10 en móviles */
@media (max-width: 768px) {
    .section7-10,
    .section4-8-1 {
        position: relative !important;
        min-height: 100vh !important;
        display: flex;
        align-items: flex-end;
    }

    .section7-10 .template-bottom-left__container,
    .section4-8-1 .template-bottom-left__container {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .section7-10 .template-bottom-left__marco {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Responsive */
@media (max-width: 1200px) {

    /* Asegurar que no haya scroll horizontal en móvil */
    body,
    html {
        overflow-x: hidden;
        width: 100vw;
    }

    /* Cambiar a scroll vertical */
    .container {
        flex-direction: column;
        width: 100vw !important;
        height: auto !important;
        display: block;
        overflow-x: hidden;
        transform: none !important;
    }

    .panel {
        width: 100vw !important;
        min-height: auto !important;
        height: auto !important;
        display: block;
        padding: 2rem 1rem;
        box-sizing: border-box;
        transform: none !important;
        position: relative;
        margin-bottom: 0;
        border: none;
        overflow-x: hidden;
    }

    .panel.end {
        padding: 2rem 1rem;
    }

    /* Ocultar elementos desktop */
    .nav-arrow {
        display: none;
    }

    .footer-nav {
        display: none;
    }

    .progress-bar-container {
        display: none;
    }

    /* Ya no hay menú móvil duplicado */

    /* Ajustar header */
    .main-header {
        top: 0px;
        left: 0px;
        right: 0px;
        padding: 0.5rem 1rem;
    }

    /* Header con scroll en móvil - fondo blanco y elementos en azul */
    .main-header.scrolled {
        background: var(--color-white);
        padding: 0.5rem 1rem;
        top: 0px;
        left: 0px;
        right: 0px;
    }
    
    .main-header.scrolled .header-hamburger {
        background: transparent;
        box-shadow: none;
    }

    .main-header.scrolled .header-hamburger span {
        background: var(--color-primary);
    }

    .logo {
        height: 20px;
    }

    .header-hamburger {
        width: 45px;
        height: 45px;
    }

    /* Ajustar índices */
    .index-nav,
    .subsection-nav {
        gap: 1rem;
    }

    .index-link,
    .subsection-link {
        min-width: auto;
        padding: 1rem 1.5rem;
    }

    .index-link .number,
    .subsection-link .sub-number {
        font-size: 1.8rem;
    }

    .index-link .title,
    .subsection-link .sub-title {
        font-size: 1rem;
    }

    /* Ajustar textos */
    .panel h1 {
        font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
    }

    .panel h2 {
        font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    }

    .panel p, .grid__cell p, .template-subtitle--small, .services-list li, .subsection-text, .subsection-number, .back-btn, .grid-card__text {
        font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem) !important;
    }

    .template__column--text p {
        font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem) !important;
    }

    .template__column--text .subtitle {
        font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
    }

    .section2 .container-plantilla {
        height: auto !important;
    }

    .section2 .template__image {
        height: 100% !important;
    }

    .section4_7__composition-column {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .side-menu-link .title, .section-btn .title {
        font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
    }

    /* Ajustar portada para móvil */
    .cover-container {
        flex-direction: column;
    }

    .cover-left {
        padding: 1.25rem;
        min-height: 50vh;
    }

    .cover-logo {
        top: 1.5rem;
        left: 2rem;
        width: 150px;
    }

    .cover-text {
        margin-top: 4rem;
    }

    .cover-title {
        font-size: 2.5rem;
    }

    .cover-year {
        font-size: 5rem;
    }

    .cover-right {
        min-height: 50vh;
    }

    /* Ajustar portadas de sección para móvil */
    .section-cover-container {
        flex-direction: column;
    }

    .section-cover-left {
        flex: 1;
        padding: 1rem;
        min-height: 70vh;
    }

    .section-cover-logo {
        width: 140px;
        margin-bottom: 2rem;
    }

    .section-cover-numero {
        font-size: 6rem;
        margin-bottom: 1.5rem;
    }

    .section-cover-titulo {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }

    .section-cover-item {
        font-size: 1.25rem;
    }

    .section-cover-right {
        flex: 1;
        min-height: 70vh;
        width: 100%;
        display: flex;
    }

    .section-cover-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    /* Ajustar menú lateral para móvil */
    .menu-grid {
        gap: 1rem 1.5rem;
    }

    .side-menu {
        width: 100vw;
    }

    .side-menu-content {
        padding: 1.5rem;
    }

    .side-menu-nav h2 {
        font-size: 1.3rem;
    }

    .side-menu-link {
        margin-bottom: 0.3rem;
    }

    .side-menu-link .number {
        font-size: 2.5rem;
    }

    .plantilla3-imagen-container,
    .plantilla4-imagen-container {
        margin-bottom: 1.2rem;
    }
}

/* ============================================
   TIMELINE SECTION
   ============================================ */

.timeline-section {
    width: auto;
    background: var(--color-white);
    padding: 4rem 0rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Control de visibilidad timeline desktop/mobile */
.timeline-desktop-only {
    display: flex;
    /* Mostrar en desktop */
}

.timeline-mobile-only {
    display: none;
    /* Ocultar en desktop */
}

@media (max-width: 1200px) {
    .timeline-desktop-only {
        display: none !important;
        /* Ocultar en mobile */
    }

    .timeline-mobile-only {
        display: flex !important;
        /* Mostrar en mobile */
    }
}

.timeline-container {
    margin: 0 auto;
}

/* Header del timeline */
.timeline-header {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 4rem;
}

.timeline-numero {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-tertiary);
    line-height: 1;
    margin: 0;
}

.timeline-titulo {
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0;
}

/* ============================================
   MOSTRAR/OCULTAR VERSIONES
   ============================================ */

/* Por defecto mostrar desktop, ocultar mobile */
.timeline-desktop {
    display: block;
}

.timeline-mobile {
    display: none;
}

/* En móvil ocultar desktop, mostrar mobile */
@media (max-width: 1024px) {
    .timeline-desktop {
        display: none;
    }

    .timeline-mobile {
        display: block;
    }
}

/* ============================================
   TIMELINE DESKTOP (Horizontal)
   ============================================ */

/* Wrapper del timeline desktop */
.timeline-desktop {
    position: relative;
    overflow-y: visible;
    max-width: 2800px;
}

/* Línea principal horizontal */
.timeline-desktop .timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: translateY(-50%);
    z-index: 1;
}

/* Contenedor de items desktop */
.timeline-desktop .timeline-items {
    position: relative;
    display: flex;
    min-width: max-content;
    z-index: 2;
    padding-left: 5px;
    gap: 2rem;
}

#anchor-4-3_2 .timeline-desktop.timeline-wrapper {
    height: 630px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 135px;
}

#anchor-4-3_2 .timeline-desktop .timeline-line {
    width: 1750px;
}

@media screen and (min-width: 2100px) {
    #anchor-4-3_2 .timeline-desktop.timeline-wrapper {
        margin-top: 132px;
    }
}

@media screen and (min-width: 2600px) {
    #anchor-4-43_2 .timeline-desktop.timeline-wrapper {
        margin-top: 125px;
    }
}

/* Item individual desktop */
.timeline-desktop .timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 345px;
}

.timeline-whithout-content {
    position: absolute !important;
    top: 50%;
    display: flex !important;
    justify-content: space-between;
    flex-direction: row !important;
    width: 100%;
}

/* Punto en la línea - SÓLIDO */
.timeline-desktop .timeline-point-solid {
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    position: relative;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    top: -8px;
}

/* Punto intermedio pequeño */
.timeline-desktop .timeline-point-solid.point-intermediate {
    width: 8px;
    height: 8px;
    border: 1px solid var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    background: var(--color-primary);
    top: -4px;
}

/* Item punto intermedio */
.timeline-desktop .timeline-item.point-two .timeline-connector,
.timeline-desktop .timeline-item.point-two .timeline-content,
.timeline-desktop .timeline-item.point-two .timeline-image {
    display: none;
}

/* Punto OUTLINE */
.timeline-desktop .timeline-point-outline {
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    position: relative;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Conector punteado vertical */
.timeline-desktop .timeline-connector {
    width: 2px;
    height: 50px;
    background-image: linear-gradient(to bottom,
            var(--color-primary) 50%,
            transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
    position: relative;
    z-index: 2;
}

/* Contenido del timeline */
.timeline-desktop .timeline-content {
    display: flex;
    gap: 0.8rem;
}

/* Items arriba de la línea */
.timeline-desktop .timeline-item.timeline-bottom {
    flex-direction: column-reverse;
}

.timeline-desktop .timeline-item.timeline-bottom .timeline-connector,
.timeline-desktop .timeline-item.timeline-top .timeline-connector {
    height: 88px;
}

/* Items abajo de la línea */
.timeline-item.timeline-bottom .timeline-content,
.timeline-item.timeline-top .timeline-content {
    display: flex;
}

.row {
    flex-direction: row !important;
}

.row-reverse {
    flex-direction: row-reverse !important;
}

.column {
    flex-direction: column !important;
}

.column-reverse {
    flex-direction: column-reverse !important;
}

.timeline-item.timeline-bottom .timeline-content__text,
.timeline-item.timeline-top .timeline-content__text {
    display: flex;
    flex-direction: column;
    width: 50%;
}

/* Item especial - Split (imagen arriba, texto abajo) */
.timeline-desktop .timeline-item.timeline-split {
    flex-direction: column;
    align-items: center;
}

/* Estilos específicos para el primer item (1997) */
.timeline-desktop .timeline-item.timeline-split[data-year='1997'] {
    align-items: last baseline;
}

.timeline-desktop .timeline-item.timeline-split[data-year='1997'] .timeline-point-outline {
    position: relative;
    left: -10px;
    top: -11px;
}

.timeline-desktop .timeline-content-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

.timeline-desktop .timeline-content-bottom {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.8rem;
    margin-top: 0;
}

/* Conectores para item split */
.timeline-desktop .timeline-connector-top,
.timeline-desktop .timeline-connector-bottom {
    width: 2px;
    height: 88px;
    background-image: linear-gradient(to bottom,
            var(--color-primary) 50%,
            transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}

.timeline-top .timeline-point.timeline-point-solid {
    top: -8px !important;
}

.timeline-bottom .timeline-point.timeline-point-solid {
    top: 8px !important;
}

/* Año */
.timeline-desktop .timeline-year {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

/* Texto descriptivo */
.timeline-desktop .timeline-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-body-text);
    text-align: justify;
    font-weight: 100;
}

/* Texto en contenido inferior de split */
.timeline-desktop .timeline-content-bottom .timeline-text {
    text-align: left;
}

/* Imagen del timeline */
.timeline-desktop .timeline-image {
    width: 200px;
    height: 160px;
    overflow: hidden;
}

.timeline-desktop .timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Imagen en contenido superior de split - sin margen inferior */
.timeline-desktop .timeline-content-top .timeline-image {
    margin-bottom: 0;
}

/* Scrollbar personalizado para desktop */
.timeline-desktop::-webkit-scrollbar {
    height: 8px;
}

.timeline-desktop::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.timeline-desktop::-webkit-scrollbar-thumb {
    background: var(--color-terciary);
    border-radius: 4px;
}

.timeline-desktop::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ============================================
   TIMELINE MOBILE (Vertical)
   ============================================ */

/* Wrapper del timeline mobile */
.timeline-mobile {
    position: relative;
    padding: 0;
}

/* Línea principal vertical */
.timeline-mobile .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
    background: var(--color-primary);
    z-index: 1;
}

/* Contenedor de items mobile */
.timeline-mobile .timeline-items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 0;
    z-index: 2;
}

/* Item individual mobile */
.timeline-mobile .timeline-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Punto en la línea mobile */
.timeline-mobile .timeline-point-solid,
.timeline-mobile .timeline-point-outline {
    position: absolute;
    left: 2px;
    transform: translateX(-50%);
    flex-shrink: 0;
}

.timeline-mobile .timeline-point-solid {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-mobile .timeline-point-outline {
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Conector horizontal en mobile */
.timeline-mobile .timeline-connector {
    width: 40px;
    height: 2px;
    background-image: linear-gradient(to right,
            var(--color-primary) 50%,
            transparent 50%);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Contenido mobile */
.timeline-mobile .timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Año mobile */
.timeline-mobile .timeline-year {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

/* Texto mobile */
.timeline-mobile .timeline-text {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-body-text);
    text-align: left;
    font-weight: 100;
}

/* Imagen mobile */
.timeline-mobile .timeline-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 3/2;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.timeline-mobile .timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   TIMELINE - RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1024px) {
    .timeline-desktop .timeline-items {
        gap: 6rem;
    }

    .timeline-desktop .timeline-item {
        min-width: 240px;
        max-width: 240px;
    }

    .timeline-desktop .timeline-connector,
    .timeline-desktop .timeline-connector-top,
    .timeline-desktop .timeline-connector-bottom {
        height: 40px;
    }

    .timeline-desktop .timeline-image {
        width: 180px;
        height: 120px;
    }

    .timeline-item.timeline-bottom .timeline-content__text,
    .timeline-item.timeline-top .timeline-content__text {
        width: 100%;
    }

    .timeline-bottom .timeline-point.timeline-point-solid,
    .timeline-top .timeline-point.timeline-point-solid {
        top: 0px !important;
    }
}

@media (max-width: 1200px) {
    .timeline-section {
        padding: 1rem;
    }

    .timeline-header {
        margin-bottom: 3rem;
    }

    .timeline-numero {
        font-size: 2.5rem;
    }

    .timeline-titulo {
        font-size: 1.5rem;
    }
}

/* ============================================
   MEDIA QUERIES - ALTURA (Pantallas cortas)
   ============================================ */

/* Pantallas de 900px o menos (portátiles 15' y menores) */
@media (max-height: 900px) {
    .side-menu-content {
        padding: 0.5rem 1rem;
    }

    .side-menu-link .number,
    .section-btn .number {
        font-size: 2.5rem;
    }

    .menu-grid {
        gap: 0rem 0rem;
    }

    .side-menu-nav h2 {
        font-size: 1.2rem;
    }

    .menu-grid {
        margin-bottom: 0px;
    }

    .side-menu-link {
        gap: 0;
    }

    .side-menu-close {
        width: 30px;
    }

    /* Centrar contenido de .panel.end */
    .panel.end {
        padding: 1.5rem;
    }

    .plantilla-dos-columnas,
    .plantilla-dos-columnas-b,
    .plantilla-dos-columnas-c,
    .plantilla-dos-columnas-d,
    .plantilla-tres-columnas,
    .plantilla-tres-columnas-b,
    .plantilla-tres-columnas-c,
    .plantilla-tres-columnas-d,
    .plantilla-cuatro-columnas,
    .plantilla-cuatro-columnas-b,
    .plantilla-cuatro-columnas-c {
        padding: 1.5rem;
    }

    /* Reducir tamaños de números y títulos */
    .template__number,
    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero,
    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero,
    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 4.5rem;
        margin-bottom: 0.3rem;
    }

    .template__title,
    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo,
    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo,
    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    /* Reducir gaps en grids */
    .template__content--2col,
    .plantilla2-contenido {
        gap: 2rem;
    }

    .template__content--3col,
    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido {
        gap: 1.5rem;
    }

    /* Section covers */
    .section-cover-left {
        padding: 1.5rem;
    }

    .section-cover-numero {
        font-size: 5.5rem;
        margin-bottom: 1rem;
    }

    .section-cover-titulo {
        font-size: 2.3rem;
        margin-bottom: 1.2rem;
    }

    .section-cover-item {
        margin-bottom: 3px;
    }

    /* Imágenes en templates - Adaptar a altura de pantalla */
    .plantilla2-imagen-container,
    .plantilla2b-imagen-container,
    .plantilla3-imagen-container,
    .plantilla4-imagen-container {
        height: auto;
        max-height: 45vh;
    }

    /* Cambiar object-fit para evitar cortes */
    .template__image,
    .plantilla2-image,
    .plantilla2b-image,
    .plantilla3-image,
    .plantilla4-image {
        object-fit: contain;
    }

    /* Títulos de columna */
    .template__column-title,
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }

    /* Bloques de contenido */
    .template__block-content p,
    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.95rem;
    }

    .side-menu-link .title,
    .section-btn .title,
    .panel p,
    .grid__cell p,
    .template-subtitle--small,
    .services-list li,
    .subsection-text,
    .subsection-number,
    .back-btn,
    .grid-card__text {
        font-size: 1rem !important;
    }

    .section4_8__content {
        gap: 1.5rem;
    }

    .side-menu-close {
        top: 0;
    }

    .side-menu-nav {
        margin-top: 1rem;
    }

    .subsection-list {
        gap: 10px;
    }

    .subsection-title {
        font-size: 1.15rem;
        padding: 0;
        margin-bottom: 10px;
    }

    .side-menu-separator {
        margin: 1rem 0;
    }

}

@media (max-height: 800px) {

    /* Reducir tamaños generales */
    .panel h1 {
        font-size: 3.2rem;
        margin-bottom: 0.8rem;
    }

    .panel.end {
        padding: 2.5rem;
    }

    .plantilla-dos-columnas,
    .plantilla-dos-columnas-b,
    .plantilla-dos-columnas-c,
    .plantilla-dos-columnas-d,
    .plantilla-tres-columnas,
    .plantilla-tres-columnas-b,
    .plantilla-tres-columnas-c,
    .plantilla-tres-columnas-d,
    .plantilla-cuatro-columnas,
    .plantilla-cuatro-columnas-b,
    .plantilla-cuatro-columnas-c {
        padding: 1.2rem;
    }

    .template__number,
    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero,
    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero,
    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 4rem;
        margin-bottom: 0.2rem;
    }

    .template__title,
    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo,
    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo,
    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 1.7rem;
        margin-bottom: 1.2rem;
    }

    /* Reducir tamaños de texto */
    .template__column--text,
    .plantilla2-columna-texto,
    .plantilla2b-columna-texto,
    .plantilla3-columna-texto-1,
    .plantilla3-columna-texto-2,
    .plantilla3b-columna-texto-1,
    .plantilla3b-columna-texto-2,
    .plantilla3c-columna-texto-1,
    .plantilla3c-columna-texto-2,
    .plantilla3d-columna-texto-1,
    .plantilla3d-columna-texto-2,
    .plantilla4-columna-texto-1,
    .plantilla4-columna-texto-2 {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .template__column--text p,
    .plantilla2-columna-texto p,
    .plantilla2b-columna-texto p,
    .plantilla3-columna-texto-1 p,
    .plantilla3-columna-texto-2 p,
    .plantilla3b-columna-texto-1 p,
    .plantilla3b-columna-texto-2 p,
    .plantilla3c-columna-texto-1 p,
    .plantilla3c-columna-texto-2 p,
    .plantilla3d-columna-texto-1 p,
    .plantilla3d-columna-texto-2 p,
    .plantilla4-columna-texto-1 p,
    .plantilla4-columna-texto-2 p {
        margin-bottom: 0.8rem;
        font-size: 0.85rem;
    }

    /* Reducir gaps */
    .template__content--2col,
    .plantilla2-contenido {
        gap: 1.5rem;
    }

    .template__content--2col-narrow-left,
    .plantilla2b-contenido {
        gap: 1.5rem;
    }

    .template__content--3col,
    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido {
        gap: 1.2rem;
    }

    .template__content--4col,
    .plantilla4-contenido,
    .plantilla4b-contenido,
    .plantilla4c-contenido {
        gap: 1.2rem;
    }

    /* Portadas - Cover */
    .cover-logo {
        width: 180px;
        top: 2rem;
        left: 3rem;
    }

    .cover-left {
        padding: 1.25rem;
    }

    .cover-text {
        margin-top: 6rem;
    }

    .cover-title {
        font-size: 3.5rem;
        margin: 0 0 0.8rem 0;
    }

    .cover-year {
        font-size: 5.5rem;
    }

    /* Section covers */
    .section-cover-left {
        padding: 4.5rem 3rem;
    }

    .section-cover-logo {
        width: 160px;
        margin-bottom: 2rem;
    }

    .section-cover-numero {
        font-size: 5rem;
        margin-bottom: 0.8rem;
    }

    .section-cover-titulo {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .section-cover-item {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    /* Index links */
    .index-nav {
        gap: 1.2rem;
        margin-top: 1.5rem;
    }

    .index-link {
        padding: 0.8rem 1.5rem;
        gap: 1.5rem;
        min-width: 350px;
    }

    .index-link .number {
        font-size: 2rem;
    }

    .index-link .title {
        font-size: 1.5rem;
    }

    /* Subsecciones */
    .subsection h2 {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
    }

    .subsection-index h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .subsection-nav {
        gap: 1rem;
    }

    .subsection-link {
        padding: 1rem 2rem;
        gap: 1.2rem;
        min-width: 300px;
        border-radius: 12px;
    }

    .subsection-link .sub-number {
        font-size: 1.6rem;
    }

    .subsection-link .sub-title {
        font-size: 1.2rem;
    }

    /* Grid cards - Reducir tamaños */
    .grid-card {
        padding: 1.5rem;
    }

    .grid-card__number {
        font-size: 4rem;
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
    }

    .grid-card__title {
        font-size: 1.7rem;
    }

    .grid-card__percentage {
        font-size: 3.2rem;
    }

    /* Section 4 Grid - Reducir paddings */
    .grid__cell {
        padding: 20px 24px;
    }

    .grid__cell h3 {
        font-size: 1.5rem;
    }

    .grid__cell p {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .grid__img--tall {
        max-height: 50vh;
        object-fit: contain;
    }

    .grid__img--small {
        max-width: min(140px, 15vw);
    }

    .plantilla2b-imagen-container {
        max-width: min(200px, 25vw);
    }

    /* Mantener object-fit contain en pantallas cortas */
    .template__image,
    .plantilla2-image,
    .plantilla2b-image,
    .plantilla3-image,
    .plantilla4-image {
        object-fit: contain;
    }

    /* Títulos de columna */
    .template__column-title,
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
        padding: 0.3rem 0;
    }

    /* Bloques de contenido */
    .template__block-content p,
    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .plantilla2c-bloque-pequeno .plantilla2c-bloque-content,
    .plantilla2d-bloque-pequeno .plantilla2d-bloque-content {
        font-size: 0.85rem;
    }

    /* Subtítulos en columnas de texto */
    .template__column--text .subtitle,
    .plantilla2-columna-texto .subtitle,
    .plantilla2b-columna-texto .subtitle {
        font-size: 1.25rem;
    }

    /* Imágenes en Port templates */
    .templateport1-imagen-container,
    .templateport2-imagen-container {
        max-height: 40vh;
    }

    .templateport1-image,
    .templateport2-image {
        object-fit: contain;
    }

    #anchor-4-3_2 .timeline-desktop.timeline-wrapper {
        margin-top: 115px !important;
    }
}

@media (max-height: 700px) {

    /* Reducción más agresiva */
    .panel h1 {
        font-size: 2.8rem;
        margin-bottom: 0.6rem;
    }

    .panel.end {
        padding: 2rem;
    }

    .plantilla-dos-columnas,
    .plantilla-dos-columnas-b,
    .plantilla-dos-columnas-c,
    .plantilla-dos-columnas-d,
    .plantilla-tres-columnas,
    .plantilla-tres-columnas-b,
    .plantilla-tres-columnas-c,
    .plantilla-tres-columnas-d,
    .plantilla-cuatro-columnas,
    .plantilla-cuatro-columnas-b,
    .plantilla-cuatro-columnas-c {
        padding: 1rem;
    }

    .template__number,
    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero,
    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero,
    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 3.5rem;
        margin-bottom: 0.2rem;
    }

    .template__title,
    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo,
    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo,
    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .template__column--text,
    .plantilla2-columna-texto,
    .plantilla2b-columna-texto,
    .plantilla3-columna-texto-1,
    .plantilla3-columna-texto-2,
    .plantilla3b-columna-texto-1,
    .plantilla3b-columna-texto-2,
    .plantilla3c-columna-texto-1,
    .plantilla3c-columna-texto-2,
    .plantilla3d-columna-texto-1,
    .plantilla3d-columna-texto-2,
    .plantilla4-columna-texto-1,
    .plantilla4-columna-texto-2 {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Reducir gaps aún más */
    .template__content--2col,
    .plantilla2-contenido,
    .plantilla2b-contenido {
        gap: 1.2rem;
    }

    .template__content--3col,
    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido {
        gap: 1rem;
    }

    .template__content--4col,
    .plantilla4-contenido,
    .plantilla4b-contenido,
    .plantilla4c-contenido {
        gap: 1rem;
    }

    /* Portadas */
    .cover-logo {
        width: 150px;
        top: 1.5rem;
        left: 2.5rem;
    }

    .cover-text {
        margin-top: 4rem;
    }

    .cover-title {
        font-size: 2.8rem;
        line-height: 1;
        margin: 0 0 0.5rem 0;
    }

    .cover-year {
        font-size: 4.5rem;
    }

    /* Section covers */
    .section-cover-left {
        padding: 2.5rem;
    }

    .section-cover-logo {
        width: 140px;
        margin-bottom: 1.5rem;
    }

    .section-cover-numero {
        font-size: 4.5rem;
        margin-bottom: 0.6rem;
    }

    .section-cover-titulo {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .section-cover-item {
        font-size: 1.1rem;
        line-height: 1.3;
        margin-bottom: 2px;
    }

    /* Index links */
    .index-nav {
        gap: 0.9rem;
        margin-top: 1rem;
    }

    .index-link {
        padding: 0.6rem 1.2rem;
        gap: 1.2rem;
        min-width: 300px;
        border-radius: 12px;
    }

    .index-link .number {
        font-size: 1.8rem;
    }

    .index-link .title {
        font-size: 1.3rem;
    }

    /* Subsecciones */
    .subsection h2 {
        font-size: 2rem;
        margin-bottom: 0.6rem;
    }

    .subsection-index h2 {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }

    .subsection-nav {
        gap: 0.8rem;
    }

    .subsection-link {
        padding: 0.8rem 1.5rem;
        gap: 1rem;
        min-width: 280px;
        border-radius: 10px;
    }

    .subsection-link .sub-number {
        font-size: 1.4rem;
    }

    .subsection-link .sub-title {
        font-size: 1.1rem;
    }

    /* Grid cards */
    .grid-card {
        padding: 1.2rem;
    }

    .grid-card__number {
        font-size: 3.5rem;
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: 1.3rem;
        margin-bottom: 0.6rem;
    }

    .grid-card__title {
        font-size: 1.5rem;
    }

    .grid-card__percentage {
        font-size: 2.8rem;
    }

    /* Section header en grids */
    .section-header {
        padding: 1.5rem 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Section 4 Grid */
    .grid__cell {
        padding: 16px 20px;
    }

    .grid__cell h4 {
        font-size: 0.95rem;
    }

    .grid__cell p {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }

    .services-list {
        margin-top: 12px;
    }

    .services-list li {
        margin-bottom: 6px;
    }

    .grid__img--tall {
        max-height: 42vh;
        object-fit: contain;
    }

    .grid__img--small {
        max-width: min(120px, 13vw);
        margin-top: 12px;
    }

    /* Imágenes en templates */
    .template__image-container,
    .plantilla2-imagen-container,
    .plantilla2b-imagen-container,
    .plantilla3-imagen-container,
    .plantilla4-imagen-container {
        height: auto;
        max-height: 85%;
    }

    /* Ajustar imágenes pequeñas */
    .plantilla2b-imagen-container {
        max-width: 200px;
    }

    /* Títulos de columna */
    .template__column-title,
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
        padding: 0.3rem 0;
    }

    /* Bloques de contenido */
    .template__block-content p,
    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .plantilla2c-bloque-pequeno .plantilla2c-bloque-content,
    .plantilla2d-bloque-pequeno .plantilla2d-bloque-content {
        font-size: 0.85rem;
    }

    /* Subtítulos en columnas de texto */
    .template__column--text .subtitle,
    .plantilla2-columna-texto .subtitle,
    .plantilla2b-columna-texto .subtitle {
        font-size: 1.25rem;
    }

    /* Template Port */
    .templateport1-marco,
    .templateport2-marco {
        padding: 1.5rem;
        width: 55%;
    }

    .templateport1-numero,
    .templateport2-numero {
        font-size: 5rem;
    }

    .templateport1-titulo,
    .templateport2-titulo {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .timeline-header {
        margin-bottom: 2.5rem;
    }

    .timeline-numero {
        font-size: 2.5rem;
    }

    .timeline-titulo {
        font-size: 1.6rem;
    }

    .timeline-desktop .timeline-connector,
    .timeline-desktop .timeline-connector-top,
    .timeline-desktop .timeline-connector-bottom {
        height: min(40px, 8vh);
    }

    .timeline-desktop .timeline-year {
        font-size: 2.2rem;
    }

    .timeline-desktop .timeline-text {
        font-size: 0.85rem;
    }

    .timeline-desktop .timeline-image {
        width: 180px;
        height: min(120px, 15vh);
    }

    .plantilla2b-imagen-container {
        max-width: min(180px, 22vw);
    }

    /* Mantener object-fit contain */
    .template__image,
    .plantilla2-image,
    .plantilla2b-image,
    .plantilla3-image,
    .plantilla4-image {
        object-fit: contain;
    }

    /* Títulos de columna compactados */
    .template__column-title,
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        padding: 0.2rem 0;
    }

    /* Bloques de contenido */
    .template__block-content p,
    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .plantilla2c-bloque-pequeno .plantilla2c-bloque-content,
    .plantilla2d-bloque-pequeno .plantilla2d-bloque-content {
        font-size: 0.8rem;
    }

    /* Bloques con gap */
    .template__column--with-gap {
        gap: 0.8rem;
    }

    .template__column--with-gap-large {
        gap: 1.2rem;
    }

    /* Subtítulos en columnas de texto */
    .template__column--text .subtitle,
    .plantilla2-columna-texto .subtitle,
    .plantilla2b-columna-texto .subtitle {
        font-size: 1.25rem;
    }

    /* Imágenes en Port templates */
    .templateport1-imagen-container,
    .templateport2-imagen-container {
        max-height: 35vh;
    }

    .templateport1-image,
    .templateport2-image {
        object-fit: contain;
    }
}

@media (max-height: 600px) {

    /* Pantallas muy cortas - compactación máxima */
    .panel h1 {
        font-size: 2.2rem;
        margin-bottom: 0.4rem;
    }

    .plantilla-dos-columnas,
    .plantilla-dos-columnas-b,
    .plantilla-dos-columnas-c,
    .plantilla-dos-columnas-d,
    .plantilla-tres-columnas,
    .plantilla-tres-columnas-b,
    .plantilla-tres-columnas-c,
    .plantilla-tres-columnas-d,
    .plantilla-cuatro-columnas,
    .plantilla-cuatro-columnas-b,
    .plantilla-cuatro-columnas-c {
        padding: 0.8rem;
    }

    .template__number,
    .plantilla2-numero,
    .plantilla2b-numero,
    .plantilla2c-numero,
    .plantilla2d-numero,
    .plantilla3-numero,
    .plantilla3b-numero,
    .plantilla3c-numero,
    .plantilla3d-numero,
    .plantilla4-numero,
    .plantilla4b-numero,
    .plantilla4c-numero {
        font-size: 3rem;
        margin-bottom: 0.1rem;
    }

    .template__title,
    .plantilla2-titulo,
    .plantilla2b-titulo,
    .plantilla2c-titulo,
    .plantilla2d-titulo,
    .plantilla3-titulo,
    .plantilla3b-titulo,
    .plantilla3c-titulo,
    .plantilla3d-titulo,
    .plantilla4-titulo,
    .plantilla4b-titulo,
    .plantilla4c-titulo {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .template__column--text,
    .plantilla2-columna-texto,
    .plantilla2b-columna-texto,
    .plantilla3-columna-texto-1,
    .plantilla3-columna-texto-2,
    .plantilla3b-columna-texto-1,
    .plantilla3b-columna-texto-2,
    .plantilla3c-columna-texto-1,
    .plantilla3c-columna-texto-2,
    .plantilla3d-columna-texto-1,
    .plantilla3d-columna-texto-2,
    .plantilla4-columna-texto-1,
    .plantilla4-columna-texto-2 {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    /* Reducir gaps al mínimo */
    .template__content--2col,
    .plantilla2-contenido,
    .plantilla2b-contenido {
        gap: 1rem;
    }

    .template__content--3col,
    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido {
        gap: 0.8rem;
    }

    .template__content--4col,
    .plantilla4-contenido,
    .plantilla4b-contenido,
    .plantilla4c-contenido {
        gap: 0.8rem;
    }

    /* Plantilla C y D - Bloques */
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1.3rem;
        padding: 0.3rem 0;
    }

    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.85rem;
    }

    .plantilla2c-bloques-pequenos,
    .plantilla2d-bloques-pequenos {
        gap: 0.8rem;
    }

    /* Portadas */
    .cover-logo {
        width: 120px;
        top: 1rem;
        left: 2rem;
    }

    .cover-text {
        margin-top: 3rem;
    }

    .cover-title {
        font-size: 2.2rem;
        line-height: 0.95;
        margin: 0 0 0.4rem 0;
    }

    .cover-year {
        font-size: 3.5rem;
    }

    /* Section covers */
    .section-cover-left {
        padding: 2rem;
    }

    .section-cover-logo {
        width: 120px;
        margin-bottom: 1.2rem;
    }

    .section-cover-numero {
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    .section-cover-titulo {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
    }

    .section-cover-item {
        line-height: 1.2;
        margin-bottom: 1px;
    }

    /* Index links */
    .index-nav {
        gap: 0.7rem;
        margin-top: 0.8rem;
    }

    .index-link {
        padding: 0.5rem 1rem;
        gap: 1rem;
        min-width: 260px;
        border-radius: 10px;
    }

    .index-link .number {
        font-size: 1.5rem;
    }

    .index-link .title {
        font-size: 1.1rem;
    }

    /* Subsecciones */
    .subsection h2 {
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
    }

    .subsection-index h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .subsection-nav {
        gap: 0.6rem;
    }

    .subsection-link {
        padding: 0.7rem 1.2rem;
        gap: 0.8rem;
        min-width: 240px;
        border-radius: 8px;
    }

    .subsection-link .sub-number {
        font-size: 1.2rem;
    }

    .subsection-link .sub-title {
        font-size: 1rem;
    }

    /* Grid cards - Compactar */
    .grid-card {
        padding: 1rem;
    }

    .grid-card__number {
        font-size: 3rem;
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .grid-card__title {
        font-size: 1.3rem;
    }

    .grid-card__percentage {
        font-size: 2.5rem;
    }

    /* Section header en grids */
    .section-header {
        padding: 1.2rem 1.5rem;
    }

    .section-title {
        font-size: 1.7rem;
    }

    /* Section 4 Grid */
    .grid__cell {
        padding: 12px 16px;
    }

    .grid__cell h4 {
        font-size: 0.85rem;
    }

    .grid__cell p {
        font-size: 0.8rem;
        margin-bottom: 5px;
    }

    .services-list {
        margin-top: 10px;
    }

    .services-list li {
        margin-bottom: 5px;
    }

    .services-list .icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin-right: 10px;
    }

    .grid__img--tall {
        max-height: 38vh;
        object-fit: contain;
    }

    .grid__img--small {
        max-width: min(100px, 12vw);
        margin-top: 10px;
    }

    /* Section 4.2 */
    .section4_2__content {
        min-height: 450px;
        padding: 30px;
    }

    .section4_2__text-content {
        max-width: 60%;
        gap: 20px;
    }

    .section4_2__description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .section4_2__description p {
        margin-bottom: 15px;
    }

    .section4_2__values {
        gap: 10px;
    }

    /* Template Port */
    .templateport1-marco,
    .templateport2-marco {
        padding: 1.2rem;
        width: 60%;
    }

    .templateport1-numero,
    .templateport2-numero {
        font-size: 4.5rem;
    }

    .templateport1-titulo,
    .templateport2-titulo {
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }

    .templateport1-contenido,
    .templateport2-contenido {
        gap: 1.5rem;
    }

    .templateport1-columna-texto-1,
    .templateport1-columna-texto-2,
    .templateport2-columna-texto-1,
    .templateport2-columna-texto-2 {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .templateport1-columna-texto-1 p,
    .templateport1-columna-texto-2 p,
    .templateport2-columna-texto-1 p,
    .templateport2-columna-texto-2 p {
        margin-bottom: 0.8rem;
        font-size: 0.85rem;
    }

    .timeline-header {
        margin-bottom: 2rem;
    }

    .timeline-numero {
        font-size: 2.2rem;
    }

    .timeline-titulo {
        font-size: 1.4rem;
    }

    .timeline-desktop .timeline-items {
        gap: 6rem;
    }

    .timeline-desktop .timeline-item {
        min-width: 220px;
        max-width: 220px;
    }

    .timeline-desktop .timeline-connector,
    .timeline-desktop .timeline-connector-top,
    .timeline-desktop .timeline-connector-bottom {
        height: min(40px, 6vh);
    }

    .timeline-desktop .timeline-year {
        font-size: 2rem;
    }

    .timeline-desktop .timeline-text {
        font-size: 0.8rem;
    }

    .timeline-desktop .timeline-image {
        width: 160px;
        height: min(100px, 13vh);
    }

    .plantilla2b-imagen-container {
        max-width: min(150px, 20vw);
    }

    /* Asegurar object-fit contain en pantallas muy cortas */
    .template__image,
    .plantilla2-image,
    .plantilla2b-image,
    .plantilla3-image,
    .plantilla4-image {
        object-fit: contain;
    }

    /* Títulos de columna */
    .template__column-title,
    .plantilla2c-titulo-columna,
    .plantilla2d-titulo-columna {
        font-size: 1rem;
        margin-bottom: 0.4rem;
        padding: 0.2rem 0;
        border-bottom-width: 1px;
    }

    /* Bloques de contenido */
    .template__block-content p,
    .plantilla2c-bloque-content,
    .plantilla2d-bloque-content {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .plantilla2c-bloque-pequeno .plantilla2c-bloque-content,
    .plantilla2d-bloque-pequeno .plantilla2d-bloque-content {
        font-size: 0.7rem;
    }

    /* Bloques con gap */
    .template__column--with-gap {
        gap: 0.6rem;
    }

    .template__column--with-gap-large {
        gap: 1rem;
    }

    /* Grid de bloques 1fr 2fr */
    .template__blocks-grid {
        gap: 0.8rem;
    }

    /* Subtítulos en columnas de texto */
    .template__column--text .subtitle,
    .plantilla2-columna-texto .subtitle,
    .plantilla2b-columna-texto .subtitle {
        font-size: 1.25rem;
    }

    /* Imágenes en Port templates */
    .templateport1-imagen-container,
    .templateport2-imagen-container {
        max-height: 30vh;
    }

    .templateport1-image,
    .templateport2-image {
        object-fit: contain;
    }
}

/* Ajuste global: evitar recorte vertical en portátiles (13") */
@media (min-width: 1201px) and (max-height: 900px) {
    .panel.template {
        justify-content: flex-start;
        min-height: 100vh;
        height: 100vh;
        padding-top: 4.75rem;
        padding-bottom: 1.75rem;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .panel.template .template__content--2col,
    .panel.template .template__content--2col-narrow-left,
    .panel.template .template__content--2col-wide-right,
    .panel.template .template__content--3col,
    .panel.template .template__content--3col-wide-left,
    .panel.template .template__content--3col-wide-center,
    .panel.template .template__content--3col-wide-right,
    .panel.template .template__content--4col {
        gap: 1.2rem;
    }

    .panel.template .template__column--text p {
        font-size: 0.9rem;
        line-height: 1.45;
        margin-bottom: 0.8rem;
    }

    .panel.template .template__column--image .template__image {
        max-height: min(46vh, 420px);
        height: auto;
        object-fit: contain;
    }

    .template-grid .grid-container,
    .section4grid1 .container-plantilla,
    .section4grid1 .grid4,
    .section4grid2 .section4grid2__grid {
        height: min(750px, calc(100vh - 8.5rem));
        max-height: calc(100vh - 8.5rem);
    }

    .grid-card,
    .grid__cell,
    .section4grid2__grid > div {
        min-height: 0;
        padding: clamp(0.7rem, 0.5rem + 0.5vw, 1.2rem);
    }

    .grid-card__number {
        font-size: clamp(3rem, 2.1rem + 2vw, 5rem);
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
        margin-bottom: 0.5rem;
    }

    .grid-card__text,
    .grid__cell p,
    .services-list li {
        font-size: clamp(0.82rem, 0.72rem + 0.35vw, 1rem) !important;
        line-height: 1.25;
    }

    .grid__img--tall {
        max-height: min(42vh, 420px);
    }

    .grid__img--medium {
        max-height: min(24vh, 240px);
    }

    .grid__img--small {
        max-width: min(110px, 8vw);
        margin-top: 8px;
    }
}

/* Templates de 3 columnas iguales en desktop */
@media (min-width: 1201px) and (max-width: 1728px) and (max-height: 1100px) {
    .is-mac .panel.template:has(.template__content--3col) {
        justify-content: center;
        padding-top: clamp(3.5rem, 6svh, 5rem);
        padding-bottom: clamp(3rem, 5svh, 4.5rem);
    }

    .is-mac .panel.template:has(.template__content--3col) .container-plantilla {
        width: min(1560px, calc(100vw - 10rem));
    }

    .is-mac .panel.template .template__content--3col {
        gap: clamp(2rem, 3vw, 3.5rem);
        align-items: start;
    }

    .is-mac .panel.template .template__content--3col .template__column {
        min-width: 0;
    }

    .is-mac .panel.template .template__content--3col .template__column--image {
        overflow: visible;
    }

    .is-mac .panel.template .template__content--3col .template__image-container {
        height: auto;
        overflow: visible;
    }

    .is-mac .panel.template .template__content--3col .template__column--image .template__image {
        width: 100%;
        height: auto;
        max-height: min(56svh, 520px);
        object-fit: contain;
    }

    .is-mac #anchor-3-1 .template__title {
        font-size: clamp(2rem, 2.8vw, 2.7rem);
        margin-bottom: clamp(1.6rem, 3svh, 2.4rem);
    }

    .is-mac #anchor-3-1 .subtitle {
        font-size: clamp(1.35rem, 1.7vw, 1.85rem);
        line-height: 1.05;
        margin-top: 0.45rem;
    }
}

@media (min-width: 1201px) and (max-width: 1512px) and (max-height: 900px) {
    .is-mac .panel.template:has(.template__content--3col) {
        justify-content: center;
        padding-top: clamp(3.25rem, 5.5svh, 4.5rem);
        padding-bottom: clamp(2.75rem, 4.5svh, 4rem);
    }

    .is-mac .panel.template .template__content--3col .template__column--image .template__image {
        max-height: min(52svh, 470px);
    }
}

/* Section 1 - Mensaje de Alberto */
@media (min-width: 1201px) and (max-width: 1728px) and (max-height: 1100px) {
    .is-mac .section1 {
        justify-content: center;
        padding-top: clamp(3rem, 5svh, 4.5rem);
        padding-bottom: clamp(2.5rem, 4.5svh, 4rem);
    }

    .is-mac .section1 .container-plantilla {
        width: min(1560px, calc(100vw - 7rem));
    }

    .is-mac .section1 .template__title {
        margin-bottom: clamp(1.5rem, 3svh, 2.5rem);
    }

    .is-mac .section1 .template__content--3col-wide-left {
        grid-template-columns: minmax(460px, 1.55fr) minmax(230px, 0.72fr) minmax(230px, 0.72fr);
        align-items: start;
        gap: clamp(1.6rem, 2.6vw, 3rem);
    }

    .is-mac .section1 .template__image-container {
        aspect-ratio: 782 / 499;
        height: auto;
        overflow: visible;
    }

    .is-mac .section1 .template__image {
        width: 100%;
        height: auto;
        max-height: min(46svh, 480px);
        object-fit: contain;
    }

    .is-mac .section1 .template__column--text p {
        font-size: clamp(0.86rem, 1.35svh, 1rem);
        line-height: 1.32;
    }
}

@media (min-width: 1201px) and (max-width: 1512px) and (max-height: 900px) {
    .is-mac .section1 {
        justify-content: center !important;
    }

    .is-mac .section1 .template__image {
        max-height: min(44svh, 440px);
    }
}

/* Section 3.1.1 - Lideres en la peninsula iberica */
@media (min-width: 1201px) and (max-width: 1512px) and (max-height: 982px) {
    .is-mac .section3_1_1 {
        justify-content: center;
        padding-top: clamp(2.75rem, 5svh, 4rem);
        padding-bottom: clamp(2.75rem, 5svh, 4rem);
    }

    .is-mac .section3_1_1 .container-plantilla {
        width: min(1660px, calc(100vw - 7rem));
    }

    .is-mac .section3_1_1 .template__content--2col-narrow-left {
        grid-template-columns: minmax(250px, 0.42fr) minmax(0, 2.4fr);
        align-items: center;
        gap: clamp(2.5rem, 4vw, 5rem);
    }

    .is-mac .section3_1_1 .template__title {
        font-size: clamp(2.4rem, 4.9svh, 4rem);
        line-height: 1.08;
        margin-bottom: 0;
    }

    .is-mac .section3_1_1 .template__image-container {
        height: min(72svh, 720px);
        overflow: visible;
        justify-content: center;
    }

    .is-mac .section3_1_1 .template__image {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
    }
}

@media (min-width: 1201px) and (max-width: 1512px) and (max-height: 900px) {
    .is-mac .section3_1_1 {
        justify-content: center !important;
    }

    .is-mac .section3_1_1 .template__image-container {
        height: min(70svh, 650px);
    }
}

/* ============================================
   TEMPLATE GRID - Mosaico de tarjetas estadísticas
   ============================================ */

.template-grid {
    background: var(--color-white);
    /* padding: 6rem; */
}

.template-grid .container-plantilla {
    padding: 0;
    max-width: 1420px;
}

/* Grid container - Cuadrícula perfecta 3x4 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    max-width: 1420px;
    height: 750px;
    gap: 0;
}

/* Grid container - Cuadrícula 2x4 (2 filas x 4 columnas) */
.grid-container--2rows {
    grid-template-rows: 1fr 1fr;
}

/* Encabezado de sección para templates con título */
.section-header {
    padding: 2rem 3rem;
    background: transparent;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

/* Ajuste de contenedor cuando hay título */
.template-section3-grid3.panel {
    overflow: hidden;
}

.template-section3-grid3 .container-plantilla {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    align-items: center;
}

.template-section3-grid3 .section-header {
    padding: 2rem 0rem 2rem;
    flex-shrink: 0;
}

.template-section3-grid3 .grid-container {
    flex: 1;
    height: auto;
    width: 100%;
    max-width: 1420px;
}

/* Grids tipo mosaico en desktop: centrados y contenidos dentro del viewport */
@media (min-width: 1201px) {
    .template-grid.panel,
    .template-section3-grid3.panel,
    .section4grid1.panel,
    .section4grid2.panel,
    .template-ods-grid.panel {
        --grid-panel-max-height: 750px;
        --grid-panel-width: min(1420px, calc(100vw - 12rem));
        --grid-panel-safe-area: 9.25rem;
        height: 100dvh;
        min-height: 100svh;
        justify-content: center !important;
        padding-top: clamp(2.75rem, 5svh, 4rem) !important;
        padding-bottom: clamp(2.75rem, 5svh, 4rem) !important;
        overflow: hidden !important;
    }

    .template-section3-grid3.panel,
    .template-ods-grid.panel {
        --grid-panel-max-height: 640px;
    }

    .template-grid .container-plantilla,
    .template-section3-grid3 .container-plantilla,
    .section4grid1 .container-plantilla,
    .section4grid2 .container-plantilla,
    .template-ods-grid .container-plantilla {
        height: auto !important;
        max-width: 100%;
        margin-bottom: 0;
    }

    .template-grid .grid-container,
    .template-section3-grid3 .grid-container,
    .section4grid1 .grid4,
    .section4grid2 .section4grid2__grid,
    .template-ods-grid .ods-grid-container {
        width: var(--grid-panel-width) !important;
        max-width: var(--grid-panel-width) !important;
        height: min(var(--grid-panel-max-height), calc(100dvh - var(--grid-panel-safe-area))) !important;
        max-height: min(var(--grid-panel-max-height), calc(100dvh - var(--grid-panel-safe-area))) !important;
    }

    .template-grid .grid-card,
    .template-section3-grid3 .grid-card,
    .section4grid1 .grid__cell,
    .section4grid2 .section4grid2__grid > div,
    .template-ods-grid .ods-card {
        min-height: 0;
    }
}

@media (min-width: 1201px) and (max-height: 1200px) {
    .is-mac .template-grid.panel,
    .is-mac .template-section3-grid3.panel,
    .is-mac .section4grid1.panel,
    .is-mac .section4grid2.panel,
    .is-mac .template-ods-grid.panel {
        --grid-panel-max-height: 690px;
        --grid-panel-safe-area: 9.75rem;
        padding-top: clamp(3rem, 5.5svh, 4.5rem) !important;
        padding-bottom: clamp(3rem, 5.5svh, 4.5rem) !important;
    }

    .is-mac .template-section3-grid3.panel,
    .is-mac .template-ods-grid.panel {
        --grid-panel-max-height: 600px;
    }

    .is-mac .template-grid .grid-card,
    .is-mac .template-section3-grid3 .grid-card,
    .is-mac .section4grid1 .grid__cell,
    .is-mac .section4grid2 .section4grid2__grid > div,
    .is-mac .template-ods-grid .ods-card {
        padding: clamp(0.85rem, 1.6svh, 1.25rem);
    }

    .is-mac .template-grid .grid-card__number,
    .is-mac .template-section3-grid3 .grid-card__number {
        font-size: clamp(3.2rem, 6svh, 4.55rem);
    }

    .is-mac .template-grid .grid-card__unit,
    .is-mac .template-section3-grid3 .grid-card__unit {
        font-size: clamp(1.05rem, 2.3svh, 1.5rem);
        margin-bottom: 0.6rem;
    }

    .is-mac .template-grid .grid-card__text,
    .is-mac .template-section3-grid3 .grid-card__text,
    .is-mac .section4grid1 .grid__cell p,
    .is-mac .section4grid2 .grid-card__text,
    .is-mac .template-ods-grid .ods-card__text {
        font-size: clamp(0.82rem, 1.6svh, 0.98rem) !important;
        line-height: 1.2;
    }
}

@media (max-width: 1200px) {
    .template-section3-grid3.panel {
        overflow: visible;
    }

    .template-section3-grid3,
    .section5_8_6_3 {
        margin-bottom: 50px;
    }

    .template-section3-grid3 .container-plantilla {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .template-section3-grid3 .grid-container {
        flex: none;
    }
}

/* Tarjeta base */
.grid-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    min-height: 240px;
}

/* Tarjetas con fondo azul */
.grid-card--blue {
    background: var(--color-primary);
    color: var(--color-white);
}

.grid-card--blue .template__stat-unit {
    color: var(--color-white);
}

/* Tarjetas con fondo azul oscuro */
.grid-card--blue-dark {
    background: var(--color-tertiary);
    color: var(--color-white);
}

/* Tarjetas con imagen de fondo */
.grid-card--image {
    position: relative;
    padding: 0;
}

.grid-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.grid-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.3));
    z-index: 1;
}

/* Números grandes */
.grid-card__number {
    font-size: 5rem;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.grid-card__number small {
    font-size: 0.5em;
    font-weight: 300;
}

.grid-card__number .xx-placeholder {
    color: #ff4444;
    font-weight: 700;
}

/* Unidad (millones €, K, etc) */
.grid-card__unit {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1rem;
}

/* Título de tarjeta */
.grid-card__title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

/* Texto descriptivo */
.grid-card__text {
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.25rem;
    color: var(--color-white) !important;
    margin-top: 10px;
}

/* Porcentaje xxx% */
.grid-card__percentage {
    font-size: 4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    margin-top: auto;
}

/* Subtexto (más que 2024) */
.grid-card__subtext {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    opacity: 0.95;
}

/* ============================================
   RESPONSIVE - TEMPLATE GRID
   ============================================ */

/* Tablets grandes y laptops pequeñas */
@media (max-width: 1200px) {
    .grid-card {
        padding: 2rem;
    }

    .grid-card__number {
        font-size: 4rem;
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: 1.5rem;
    }

    .grid-card__title {
        font-size: 1.8rem;
    }

    .grid-card__percentage {
        font-size: 3.5rem;
    }

    .grid-card__bg {
        position: relative;
    }

    .grid-card.grid-card--image {
        padding: 0px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, 1fr);
        min-height: auto;
        height: auto;
    }

    .grid-container--2rows {
        grid-template-rows: repeat(4, 1fr);
    }

    .grid-card {
        min-height: 250px;
    }

    .grid-card--image {
        min-height: 300px;
    }

    .section-title {
        font-size: 2rem;
    }
}

/* Una columna desde <= 1024px */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        display: flex;
        flex-direction: column;
    }

    .grid-card {
        padding: 2rem 1.5rem;
        min-height: 250px;
    }

    .grid-card--image {
        min-height: 250px;
    }

    .grid-card__unit,
    .template__stat-unit {
        font-size: 1.2rem;
    }

    .grid-card__title {
        font-size: 1.5rem;
    }

    .grid-card__percentage {
        font-size: 2.8rem;
    }

    .section-header {
        padding: 1.5rem 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Reordenar la fila 2 en móvil: Texto → Foto → Texto → Foto */
    /* Tarjeta 5 (Imagen) → Posición 6 */
    .grid-card:nth-child(5) {
        order: 6;
    }

    /* Tarjeta 6 (Texto 3.595) → Posición 5 */
    .grid-card:nth-child(6) {
        order: 5;
    }

    /* Tarjeta 7 (Imagen) → Posición 8 */
    .grid-card:nth-child(7) {
        order: 8;
    }

    /* Tarjeta 8 (Texto 400) → Posición 7 */
    .grid-card:nth-child(8) {
        order: 7;
    }
}

/* ============================================
   TEMPLATE ODS GRID - SECCIÓN 7.5.1
   ============================================ */

.template-ods-grid {
    background: var(--color-white);
}

.template-ods-grid .container-plantilla {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    padding: 0;
    margin: 0;
    align-items: center;
}

.template-ods-grid .section-header {
    padding: 2rem 3rem 1rem;
    flex-shrink: 0;
}

.template-ods-grid .template__number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1;
}

.template-ods-grid .template__title {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-primary);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* Contenedor grid de ODS - 4 columnas x 2 filas */
.ods-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 1420px;
    flex: 1;
    gap: 0;
    overflow: hidden;
}

/* Tarjeta base de ODS */
.ods-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    color: var(--color-white);
    overflow: hidden;
}

/* Variantes de color según ODS oficial */
.ods-card--red {
    background: #e5243b;
    /* ODS 1 - Fin de la pobreza */
}

.ods-card--blue {
    background: #26bde2;
    /* ODS 6 - Agua limpia y saneamiento */
}

.ods-card--yellow {
    background: #fcc30b;
    /* ODS 7 - Energía asequible */
}

.ods-card--burgundy {
    background: #a21942;
    /* ODS 8 - Trabajo decente */
}

.ods-card--orange {
    background: #fd6925;
    /* ODS 9 - Industria, innovación */
}

.ods-card--gold {
    background: #bf8b2e;
    /* ODS 12 - Producción y consumo */
}

.ods-card--green-dark {
    background: #3f7e44;
    /* ODS 13 - Acción por el clima */
}

.ods-card--green-light {
    background: #56c02b;
    /* ODS 15 - Vida ecosistemas terrestres */
}

/* Icono del ODS */
.ods-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    flex-shrink: 0;
}

.ods-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* Convertir a blanco */
    padding-bottom: 10px;
}

/* Contenido de la tarjeta */
.ods-card__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

/* Título del ODS */
.ods-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    margin: 0;
}

/* Texto descriptivo */
.ods-card__text {
    line-height: 1.4;
    color: var(--color-white) !important;
    text-align: justify;
}

/* ============================================
   RESPONSIVE - TEMPLATE ODS GRID
   ============================================ */

/* Tablets */
@media (max-width: 1200px) {
    .template-ods-grid .container-plantilla {
        height: auto;
        overflow: visible;
    }

    .template-ods-grid .section-header {
        padding: 2rem 2rem 1rem;
    }

    .template-ods-grid .template__number {
        font-size: 2.5rem;
    }

    .template-ods-grid .template__title {
        font-size: 2rem;
    }

    .ods-grid-container {
        width: auto;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        flex: none;
    }

    .ods-card {
        min-height: 300px;
    }

    .ods-card__title {
        font-size: 1.2rem;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .template-ods-grid .section-header {
        padding: 1.5rem 1.5rem 1rem;
    }

    .template-ods-grid .template__number {
        font-size: 2rem;
    }

    .template-ods-grid .template__title {
        font-size: 1.5rem;
    }

    .ods-grid-container {
        grid-template-columns: 1fr;
    }

    .ods-card {
        min-height: 250px;
    }

    .ods-card__title {
        font-size: 1.1rem;
    }
}

/* ============================================
   SECCIÓN 4 GRID 1 - Productos y servicios
   ============================================ */

/* Ajustes del panel para pantalla completa */
.section4grid1.panel {
    overflow: hidden;
}

.section4grid1 .container-plantilla {
    display: flex;
    flex-direction: column;
    height: 750px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    align-items: center;
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    max-width: 1420px;
    height: 750px;
    flex: 1;
}

.grid4 .services-list img {
    width: 48px !important;
    height: 50px !important;
}

.grid4 .services-list li>div {
    width: 100px;
    display: flex;
    justify-content: end;
}

.grid4 .services-list li:first-child>div {
    width: 130px;
}

.grid__cell {
    padding: 25px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Colores de fondo */
.bg-darkblue {
    background-color: var(--color-tertiary);
    color: var(--color-white);
}

.bg-cyan {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.bg-green {
    background-color: var(--color-green);
    color: var(--color-tertiary);
}

.bg-purple {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.cell--1 {
    grid-area: 1 / 1 / 2 / 2;
}

.cell--blank {
    grid-area: 1 / 2 / 2 / 3;
}

.cell--2 {
    grid-area: 2 / 1 / 3 / 2;
}

.cell--5 {
    grid-area: 3 / 1 / 4 / 2;
}

.cell--9 {
    grid-area: 4 / 1 / 5 / 2;
}

.cell--6 {
    grid-area: 2 / 2 / 4 / 3;
}

.cell--3 {
    grid-area: 1 / 3 / 2 / 4;
}

.cell--8 {
    grid-area: 2 / 3 / 4 / 4;
}

.cell--7 {
    grid-area: 1 / 4 / 3 / 5;
}

.cell--4 {
    grid-area: 4 / 4 / 3 / 5;
}

.cell--7 h3 {
    margin-bottom: 6px;
}

.cell--7 p {
    margin-bottom: 6px;
    font-size: 1rem;
}

/* Imágenes grandes dentro de celdas 6, 8 y 9 */
.img-tall {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.img-tall.dispenser {
    justify-content: flex-end;
    padding: 0px;
}

.grid__img--tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dispenser .grid__img--tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}

.dispenser .grid__img--tall.adaptable {
    padding: 70px 0px 0px;
    max-height: 700px;
    object-fit: contain;
}

.grid__img--medium {
    max-height: 280px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.grid__img--small {
    max-width: 140px;
    display: block;
    margin-top: 16px;
}

.grid__cell h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.bg-darkblue h3 {
    color: var(--color-white);
}

.bg-cyan h3,
.bg-purple h3 {
    color: var(--color-tertiary);
}

.grid__cell h4 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.grid__cell p {
    margin: 0 0 8px 0;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--color-white);
    font-weight: 100;
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    color: var(--color-white);
}

.services-list li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.95rem;
    line-height: 1.15;
    font-weight: 100;
    gap: 8px;
}

.section4grid1 .services-list li {
    justify-content: flex-start;
}

.section4grid1 .services-list li span {
    width: auto;
}

.section4grid1 .services-list .template-feature-icon {
    width: 32px;
    height: 32px;
}

@media (max-width: 1200px) {
    .section4grid1 .services-list li span {
        width: 87%;
    }

    .section4grid1 .services-list .template-feature-icon {
        width: 45px;
        height: 45px;
    }
}

/* Iconos para services-list - usando icon-map.svg como placeholder */
.services-list .icon {
    display: block;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Clases específicas para cada tipo de icono (usando mismo svg como placeholder) */
.icon-copo,
.icon-sol,
.icon-gota,
.icon-doble-capa,
.icon-cierre,
.icon-acero {
    background-image: url('assets/iconos/icon-map.svg');
    background-color: transparent;
}

.icon-placeholder {
    background-image: url('assets/placeholder.png');
    background-color: transparent;
}

.icon-mapa {
    background-image: url('assets/iconos/icon-map.svg');
    background-color: transparent;
}

.icon-gota-check {
    background-image: url('assets/iconos/icon-gota-check.png');
    background-color: transparent;
}

.icon-alta-tecnologia {
    background-image: url('assets/iconos/icon-alta-tecnologia.jpg');
    background-color: transparent;
}

.icon-persona {
    background-image: url('assets/iconos/icon-persona.jpg');
    background-color: transparent;
}

.icon-repartidor {
    background-image: url('assets/iconos/icon-repartidor.jpg');
    background-color: transparent;
}

.icon-dialogo {
    background-image: url('assets/iconos/icon-dialogo.svg');
    background-color: transparent;
}

/* Responsive para tablets */
@media screen and (max-width: 1200px) {

    .section4grid1.panel,
    .section4grid2 {
        padding-bottom: 0;
    }

    .section4grid1 .container-plantilla,
    .section4grid2 .container-plantilla {
        height: auto;
        min-height: auto;
    }

    .grid4 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        min-height: auto;
        height: auto;
    }

    /* Ocultar celda vacía en responsive */
    .cell--blank {
        display: none;
    }

    /* Reorganizar en tablet: 2 columnas */
    .cell--1,
    .cell--2,
    .cell--3,
    .cell--4,
    .cell--5,
    .cell--6,
    .cell--7,
    .cell--8,
    .cell--9 {
        grid-column: auto;
        grid-row: auto;
        grid-area: auto;
        min-height: 250px;
    }

    .cell--7 {
        padding: 15px;
    }

    .cell--7 p {
        font-size: 1.05rem;
    }

    /* Mostrar imagen de fuente de red en tablet/móvil */
    .cell--8 {
        display: flex;
    }

    .grid__img--tall,
    .dispenser .grid__img--tall.adaptable {
        max-height: 360px;
    }

    .grid__cell h4 {
        font-size: 1rem;
    }
}

/* Responsive una columna desde <= 1024px */
@media screen and (max-width: 1024px) {
    .section4grid1 .container-plantilla {
        height: auto;
    }

    .grid4 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .cell--1,
    .cell--2,
    .cell--3,
    .cell--4,
    .cell--5,
    .cell--6,
    .cell--7,
    .cell--8,
    .cell--9 {
        grid-column: 1;
        grid-row: auto;
        grid-area: auto;
        min-height: 100px;
        padding: 24px 20px;
    }

    .grid__img--tall {
        max-height: 280px;
    }

    .grid__img--small {
        max-width: 120px;
        margin-top: 12px;
    }

    .grid__cell h3 {
        font-size: 1.5rem;
    }

    .grid__cell h4 {
        font-size: 0.95rem;
    }

    .services-list {
        margin-top: 12px;
    }

    .services-list li {
        margin-bottom: 6px;
    }
}

/* ============================================
   CLASE UTILIDAD W-100
   ============================================ */
.w-100 {
    width: 100%;
}

.section4-1 .template__column--text {
    margin-top: auto;
}

.section2 .container-plantilla {
    height: 570px;
}

.section2 .template__image {
    height: 680px;
}

@media (min-width: 1201px) {
    .section2 {
        justify-content: center;
        padding-top: clamp(3.25rem, 5.5svh, 4.75rem);
        padding-bottom: clamp(3rem, 5svh, 4.5rem);
    }

    .section2 .container-plantilla {
        width: min(1580px, calc(100vw - 7rem));
        height: auto;
    }

    .section2 .template__content--2col-narrow-left {
        grid-template-columns: minmax(260px, 0.55fr) minmax(0, 2.35fr);
        align-items: center;
        gap: clamp(2.75rem, 5.5vw, 6.5rem);
    }

    .section2 .template__column--text {
        max-width: 315px;
        justify-content: center;
    }

    .section2 .template__number {
        font-size: clamp(4.4rem, 8svh, 6rem);
        margin-bottom: 1rem;
    }

    .section2 .template__title {
        font-size: clamp(2rem, 3.2svh, 2.8rem);
        margin-bottom: clamp(1.4rem, 2.8svh, 2.2rem);
    }

    .section2 .template__column--text p {
        font-size: clamp(1rem, 1.55svh, 1.16rem);
        line-height: 1.35;
    }

    .section2 .template__image-container {
        aspect-ratio: 1508 / 1111;
        height: min(70svh, 680px) !important;
        overflow: hidden;
        justify-self: end;
    }

    .section2 .template__image {
        width: 100%;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
        object-position: center;
    }
}

@media (min-width: 1201px) and (max-height: 900px) {
    .section2 {
        justify-content: center !important;
    }

    .section2 .template__image-container {
        height: min(66svh, 620px) !important;
    }
}

.template__column.template__column--text p:last-child {
    margin-bottom: -6px;
}

@media screen and (max-width: 1200px) {
    .template__column.template__column--text p:last-child {
        margin-bottom: 0px;
    }
}

/* ============================================
   SECCIÓN 4.2 - EL MOTOR DE AQUASERVICE
   ============================================ */

.section4_2__content {
    height: 620px;
    position: relative;
    margin-top: 60px;
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 40px;
}

.section4_2__text-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    max-width: 50%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.section4_2__description {
    color: #666;
    line-height: 1.8;
    text-align: justify;
}

.section4_2__description p {
    margin-bottom: 20px;
}

.section4_2__values {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    border-left: 3px solid #00a9e0;
}

.section4_2__value {
    font-size: 1.75rem;
    font-weight: 500;
    color: #00a9e0;
    text-align: left;
    line-height: 1.2;
}

@media screen and (max-width: 1200px) {
    .section4_2__content {
        height: auto;
        min-height: 500px;
        padding: 30px;
        background-position: center;
    }

    .section4_2__text-content {
        max-width: 70%;
        grid-template-columns: 1fr;
    }

    .section4_2__values {
        border-left: none;
        border-top: 3px solid #00a9e0;
        padding-left: 0;
        padding-top: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .section4_2__value {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 1200px) {
    .section4_2__content {
        height: auto;
        margin-top: 40px;
        min-height: 400px;
        padding: 20px;
        justify-content: center;
    }

    .section4_2__text-content {
        max-width: 100%;
        gap: 0px;
    }

    .section4_2__description {
        font-size: 0.95rem;
    }
}

/* ====== SECTION 4.6 - CONOCE NUESTROS MANANTIALES ====== */
.section4_8__content {
    display: grid;
    grid-template-columns: 1.25fr 3fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
    align-items: start;
}

.section4_8__text-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    justify-content: space-between;
}

.section4_8__text-column.end {
    justify-content: end;
}

.section4_8__lists {
    margin-top: 1rem;
}

.section4_8__list-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section4_8__list-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.section4_8__manantiales-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section4_8__manantiales-list li {
    font-size: 0.9rem;
    color: var(--color-body-text);
    line-height: 1.5;
}

.section4_8__qr {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.section4_8__qr-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: contain;
}

.section4_8__play-button {
    width: 80px !important;
    height: 80px !important;
}

.section4_8__play-text {
    font-size: 1.5rem !important;
}

.section4_8__content .template__video {
    padding: 0px;
    margin-top: 0px;
}

.section4_8__map-column {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.section4_8__map {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Responsive para tablets */
@media screen and (max-width: 1024px) {
    .section4_8__content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section4_8__lists {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Responsive para móviles */
@media screen and (max-width: 768px) {
    .section4_8__qr {
        flex-direction: column;
        align-items: flex-start;
    }

    .section4_8__qr-image {
        width: 60px;
        height: 60px;
    }

    .section4_8__lists {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .section4_8__list-title {
        font-size: 1.5rem;
    }
}

/* ====== SECTION 4.7 - EL IMPACTO POSITIVO DE AQUASERVICE ====== */
.section4_6__content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
    align-items: center;
}

.section4_6__text-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section4_6__infographic-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section4_6__images-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    align-items: center;
}

.section4_6__icon {
    width: 260px !important;
}

.section4_6__image-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section4_6__stats {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.section4_6__stat {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: relative;
    padding-top: 1.1rem;
}

.section4_6__stat-prefix {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1;
    position: absolute;
    top: 0;
}

.section4_6__stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    width: fit-content;
}

.section4_6__stat-number {
    font-size: 4.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.section4_6__stat-number[data-i18n='section4_6.stat3_numero'],
.section4_6__mobile-number[data-i18n='section4_6.stat3_numero'] {
    white-space: nowrap;
}

.section4_6__stat-unit {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.section4_6__stat-text {
    font-size: 1rem !important;
    color: var(--color-primary) !important;
    line-height: 1.3;
    margin: 0.5rem 0 0 0;
    width: fit-content;
}

.section4_6__stat-separator {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

.section4_6__stat-separator.dark-blue {
    color: var(--color-tertiary);
    display: inline-flex;
    width: max-content;
    justify-self: center;
    flex-shrink: 0;
    margin-top: 0px;
}

.section4_6__mobile-cards {
    display: none;
}

@media (min-width: 1201px) and (max-width: 1728px) and (max-height: 1100px) {
    #anchor-4-6 {
        justify-content: center;
        padding-top: clamp(3rem, 5svh, 4.5rem);
        padding-bottom: clamp(2.75rem, 4.5svh, 4rem);
    }

    #anchor-4-6 .container-plantilla {
        width: min(1740px, calc(100vw - 3.25rem));
    }

    #anchor-4-6 .template__title {
        margin-bottom: clamp(1.2rem, 2.5svh, 2rem);
        font-size: clamp(1.95rem, 3svh, 2.7rem);
    }

    #anchor-4-6 .section4_6__content {
        grid-template-columns: minmax(285px, 0.56fr) minmax(0, 2.44fr);
        align-items: start;
        gap: clamp(1rem, 1.6vw, 1.8rem);
    }

    #anchor-4-6 .section4_6__text-column {
        gap: clamp(0.85rem, 1.8svh, 1.25rem);
    }

    #anchor-4-6 .section4_6__text-column .template-paragraph {
        font-size: clamp(0.88rem, 1.45svh, 1rem);
        line-height: 1.32;
    }

    #anchor-4-6 .section4_6__infographic-column {
        gap: clamp(1rem, 1.9svh, 1.5rem);
    }

    #anchor-4-6 .section4_6__images-grid {
        grid-template-columns: repeat(5, minmax(0, max-content));
        justify-content: start;
        gap: clamp(0.55rem, 0.9vw, 0.95rem);
    }

    #anchor-4-6 .section4_6__image-item {
        min-width: 0;
    }

    #anchor-4-6 .section4_6__icon {
        width: 100%;
        max-width: min(20vw, 290px);
        height: auto;
        object-fit: contain;
    }

    #anchor-4-6 .section4_6__stats {
        justify-content: flex-start;
        gap: clamp(0.3rem, 0.5vw, 0.55rem);
        margin-left: 10%;
    }

    #anchor-4-6 .section4_6__stat {
        padding-top: clamp(0.85rem, 1.4svh, 1.1rem);
    }

    #anchor-4-6 .section4_6__stat-prefix {
        font-size: clamp(0.72rem, 1.2svh, 0.85rem);
    }

    #anchor-4-6 .section4_6__stat-number {
        font-size: clamp(3.2rem, 6.1svh, 4.7rem);
    }

    #anchor-4-6 .section4_6__stat-unit {
        font-size: clamp(1.3rem, 2.4svh, 1.9rem);
    }

    #anchor-4-6 .section4_6__stat-text {
        font-size: clamp(0.8rem, 1.35svh, 0.95rem) !important;
        line-height: 1.17;
        margin-top: 0.3rem;
    }

    #anchor-4-6 .section4_6__stat-separator {
        font-size: clamp(2.45rem, 4.5svh, 3.1rem);
        margin-top: 20px;
    }
}

@media (min-width: 1201px) and (max-width: 1728px) and (max-height: 900px) {
    #anchor-4-6 {
        justify-content: center !important;
        padding-top: clamp(2.6rem, 4.4svh, 3.6rem);
        padding-bottom: clamp(2.3rem, 3.8svh, 3.1rem);
    }

    #anchor-4-6 .section4_6__content {
        gap: clamp(1.2rem, 2.2vw, 2rem);
    }

    #anchor-4-6 .section4_6__text-column .template-paragraph {
        font-size: clamp(0.82rem, 1.35svh, 0.92rem);
        line-height: 1.28;
    }

    #anchor-4-6 .section4_6__infographic-column {
        gap: 0.95rem;
    }

    #anchor-4-6 .section4_6__images-grid {
        gap: clamp(0.45rem, 0.8vw, 0.8rem);
    }

    #anchor-4-6 .section4_6__icon {
        max-width: min(16.9vw, 230px);
    }

    #anchor-4-6 .section4_6__stats {
        gap: clamp(0.24rem, 0.42vw, 0.48rem);
    }

    #anchor-4-6 .section4_6__stat-number {
        font-size: clamp(2.95rem, 5.65svh, 4.25rem);
    }

    #anchor-4-6 .section4_6__stat-unit {
        font-size: clamp(1.22rem, 2.34svh, 1.72rem);
    }

    #anchor-4-6 .section4_6__stat-text {
        font-size: clamp(0.77rem, 1.3svh, 0.91rem) !important;
        line-height: 1.14;
    }

    #anchor-4-6 .section4_6__stat-separator {
        font-size: clamp(2.2rem, 3.95svh, 2.8rem);
    }
}

/* Responsive */
@media screen and (max-width: 768px) {
    .section4_6__content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section4_6__images-grid {
        display: none;
    }

    .section4_6__stats {
        display: none;
    }

    .section4_6__mobile-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section4_6__mobile-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .section4_6__mobile-icon {
        width: 60%;
    }

    .section4_6__mobile-value {
        display: flex;
        align-items: baseline;
        gap: 0.25rem;
        justify-content: center;
    }

    .section4_6__mobile-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1;
    }

    .section4_6__mobile-unit {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .section4_6__mobile-text {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.25;
        color: var(--color-primary) !important;
    }

    .section4_6__mobile-result-line {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 20px;
    }

    .section4_6__mobile-result-equals {
        font-size: 5rem;
        font-weight: 700;
        color: var(--color-primary);
    }
}

/* ====== SECTION 4.8 - CADENA DE VALOR: EL PROCESO Y LOS PROVEEDORES ====== */
.section4_7__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.section4_7__left-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.section4_7__text-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section7_1_1__logos-grid {
    display: flex;
}

.section7_1_1__logos-grid .section7_1_1__logo:first-child {
  margin-right: 10px;
}

.section7_1_1__logo img {
    width: 120px;
}

.section4_7__text-column>*:last-child,
.section4_7 .end,
.section4_5 .end,
.section5_3 .end,
.section5_6_1 .end,
.section5_8 .end,
.section5_8_3 .end,
.section5_8_4 .end,
.section6_1 .end,
.section6_2 .end,
.section6_2_1 .end,
.section6_3_1_1 .end,
.section6_3_2 .end,
.section6_3_2_1 .end,
.section8_1_1 .end,
.section8_1_2 .end,
.section7_1 .end,
.section7_1_1 .end,
.section7_4 .end,
.section7_7 .end,
.section-end .end {
    margin-top: auto !important;
}

.section6_2 .end .template__list {
    margin-bottom: 40px;
}

.is-mac .section6_3_1_1 .template__column {
    height: 480px;
}

@media (min-width: 1201px) and (max-height: 1100px) {
    .is-mac #anchor-4-7 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-4-7 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-4-7 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-4-7 .template__content--4col {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.02fr) minmax(0, 0.94fr) minmax(0, 0.86fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-4-7 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-4-7 .template-paragraph {
        margin-bottom: 0.45rem;

    }

    .is-mac #anchor-4-7 .section4_7__subtitle,
    .is-mac #anchor-4-7 .template-subtitle,
    .is-mac #anchor-4-7 .template-subtitle--small {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-4-7 .template-features-block {
        gap: 0.8rem;
        padding-left: 0.6rem;
    }

    .is-mac #anchor-4-7 .section4_7__features-grid,
    .is-mac #anchor-4-7 .template-features-grid--2 {
        gap: 0.85rem 0.7rem;
    }

    .is-mac #anchor-4-7 .section4_7__feature,
    .is-mac #anchor-4-7 .template-feature {
        gap: 0.55rem;
    }

    .is-mac #anchor-4-7 .section4_7__feature-icon,
    .is-mac #anchor-4-7 .template-icon--size-80 {
        width: 62px;
        height: 62px;
    }

    .is-mac #anchor-4-7 .section4_7__feature-text,
    .is-mac #anchor-4-7 .template-feature-text {
        font-size: 0.82rem;
    }

    .is-mac #anchor-4-7 .section4_7__composition-unit {
        font-size: 0.72rem !important;
    }

    .is-mac #anchor-4-7 .section4_7__composition-table {
        border-spacing: 0.24rem;
        padding: 0.2rem 0;
    }

    .is-mac #anchor-4-7 .section4_7__composition-label {
        font-size: 1.06rem;
        padding: 0.02rem 0.44rem;
    }

    .is-mac #anchor-4-7 .section4_7__composition-value {
        font-size: 1.5rem;
        min-width: 60px;
        padding: 0.02rem 0.44rem;
    }

    .is-mac #anchor-4-7 .section4_7__composition-source {
        margin-top: 0.45rem;
        font-size: 0.74rem !important;
    }

    .is-mac #anchor-4-7 .section4_7__certifications {
        gap: 1.35rem;
    }

    .is-mac #anchor-4-7 .section4_7__certification-row {
        gap: 0.85rem;
        align-items: flex-start;
        min-width: 0;
    }

    .is-mac #anchor-4-7 .section4_7__cert-logo {
        width: 72px;
        height: 72px;
    }

    .is-mac #anchor-4-7 .section4_7__cert-text {
        font-size: clamp(0.82rem, 1.12vh, 0.9rem) !important;
        text-align: left !important;
    }

    .is-mac .section4_8_1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac .section4_8_1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac .section4_8_1 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.04fr) minmax(0, 0.98fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac .section4_8_1 .template__column {
        min-width: 0;
    }

    .is-mac .section4_8_1 .template-paragraph {
        margin-bottom: 0.45rem;
        line-height: 1.22;
    }

    .is-mac .section4_8_1 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac .section4_8_1 .section4_8_1__subtitle,
    .is-mac .section4_8_1 .template-subtitle--small {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac .section4_8_1 .template-image--large,
    .is-mac .section4_8_1 .section4_8_1__image {
        max-height: min(58vh, 580px);
        height: auto;
        object-fit: cover;
    }

    .is-mac .section4_9_1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac .section4_9_1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac .section4_9_1 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.04fr) minmax(0, 0.98fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac .section4_9_1 .template__column {
        min-width: 0;
    }

    .is-mac .section4_9_1 .template-paragraph {
        margin-bottom: 0.45rem;
        line-height: 1.22;
    }

    .is-mac .section4_9_1 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac .section4_9_1 .section4_9_1__subtitle,
    .is-mac .section4_9_1 .template-subtitle--small {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac .section4_9_1 .template-image--large,
    .is-mac .section4_9_1 .section4_9_1__image {
        max-height: min(58vh, 580px);
        height: auto;
        object-fit: cover;
    }

    .is-mac .section4_5 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac .section4_5 .container-plantilla,
    .is-mac .section4_5 .container-plantilla.services-list {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac .section4_5 .template__content--4col {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 0.86fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac .section4_5 .template__column {
        min-width: 0;
    }

    .is-mac .section4_5 .section4_5__subtitle,
    .is-mac .section4_5 .template-subtitle--small {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac .section4_5 .section4_5__paragraph,
    .is-mac .section4_5 .section4_5__feature-text,
    .is-mac .section4_5 .template-paragraph {
        margin-bottom: 0.45rem;
        line-height: 1.22;
    }

    .is-mac .section4_5 .section4_5__feature {
        gap: 0.6rem;
        margin-bottom: 0.45rem;
    }

    .is-mac .section4_5 .section4_5__feature .template-feature-icon,
    .is-mac .section4_5 .section4_5__feature .icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: 40px;
    }

    .is-mac .section4_5 .section4_5__feature-title {
        line-height: 1.1;
    }

    .is-mac .section4_5 .section4_5__image {
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac .section4_5 .section4_5__nps {
        font-size: clamp(2.25rem, 3.8vw, 3rem);
        margin-bottom: 0.45rem;
        line-height: 1;
    }

    .is-mac .section4_5 .section4_5__paragraph--nps {
        line-height: 1.18;
    }

    .is-mac #anchor-1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-1 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
    }

    .is-mac #anchor-1 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.92fr) minmax(0, 0.92fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-1 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-1 .template__number {
        margin-bottom: 0.25rem;
    }

    .is-mac #anchor-1 .template-paragraph,
    .is-mac #anchor-1 .template__column--text p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-1 .template__image-container {
        height: auto;
    }

    .is-mac #anchor-1 .template__image {
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-3 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-3 .container-plantilla {
        width: min(1640px, calc(100vw - 6rem));
    }

    .is-mac #anchor-5-3 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-5-3 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.16fr) minmax(0, 1.64fr);
        align-items: start;
    }

    .is-mac #anchor-5-3 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-3 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-5-3 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-5-3 .template-paragraph--highlight {
        margin-top: 0.2rem !important;
    }

    .is-mac #anchor-5-3 .template-paragraph--highlight-small {
        margin-top: 0.12rem;
    }

    .is-mac #anchor-5-3 .end {
        margin-top: 0.15rem !important;
    }


    .is-mac #anchor-5-8-3 .template__image {
        height: auto;
        object-fit: contain;
    }

    .is-mac #anchor-5-3 .template-image--large {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-4 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-4 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-4 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-5-4 .template__content--2col-wide-right {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.92fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-4 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-4 .template-column--end {
        justify-content: flex-start;
    }

    .is-mac #anchor-5-4 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-5-4 .template-features-block {
        gap: 0.8rem;
    }

    .is-mac #anchor-5-4 .template-features-grid--2 {
        gap: 0.85rem 0.7rem;
    }

    .is-mac #anchor-5-4 .template-feature {
        gap: 0.6rem;
        align-items: flex-start;
    
    }

    .is-mac #anchor-5-4 .template-feature-icon {
        width: 44px;
        height: 44px;
    }

    .is-mac #anchor-5-4 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-5-5 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-5 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-5 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-5-5 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.96fr) minmax(0, 1.02fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-5 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-5 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-5-5 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-5-5 .template-image--large {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-5 .template-features-block {
        gap: 0.8rem;
    }

    .is-mac #anchor-5-5 .template-features-grid {
        gap: 0.85rem 0.7rem;
    }

    .is-mac #anchor-5-5 .template-feature {
        gap: 0.6rem;
        align-items: flex-start;
    }

    .is-mac #anchor-5-5 .template-feature-icon {
        width: 44px;
        height: 44px;
    }

    .is-mac #anchor-5-7 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-7 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-7 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-5-7 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.02fr) minmax(0, 1.56fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-7 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-7 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-5-7 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-5-7 .section5_7__subtitle {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-5-7 .template__list {
        margin: 0.2rem 0 0.5rem 0;
    }

    .is-mac #anchor-5-7 .template__list li {
        margin-bottom: 0.2rem;
    }

    .is-mac #anchor-5-7 .template-features-block {
        gap: 0.8rem;
    }

    .is-mac #anchor-5-7 .template-features-grid {
        gap: 0.85rem 0.7rem;
    }

    .is-mac #anchor-5-7 .template-feature {
        gap: 0.6rem;
        align-items: flex-start;
    }

    .is-mac #anchor-5-7 .template-feature-icon {
        width: 44px;
        height: 44px;
    }

    .is-mac #anchor-5-7 .section5_7__image {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-8 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-8 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-8 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-5-8 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.96fr) minmax(0, 1.02fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-8 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-8 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-5-8 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-5-8 .template-image--large {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-8 .template-features-block {
        gap: 0.8rem;
    }

    .is-mac #anchor-5-8 .template-features-grid {
        gap: 0.85rem 0.7rem;
    }

    .is-mac #anchor-5-8 .template-feature {
        gap: 0.6rem;
        align-items: flex-start;
    }

    .is-mac #anchor-5-8 .template-feature-icon {
        width: 44px;
        height: 44px;
    }

    .is-mac #anchor-5-8 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-5-8-4 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-8-4 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-8-4 .template__title--small {
        margin-bottom: 0.75rem;
        font-size: clamp(1.35rem, 1.9vw, 1.75rem);
     
    }

    .is-mac #anchor-5-8-4 .template__content--4col {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 0.98fr) minmax(0, 0.9fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-8-4 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-8-4 .template-paragraph,
    .is-mac #anchor-5-8-4 .template__column--text p,
    .is-mac #anchor-5-8-4 p {
        margin-bottom: 0.45rem;
   
    }

    .is-mac #anchor-5-8-4 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-5-8-4 .template-subtitle,
    .is-mac #anchor-5-8-4 .template-subtitle--small {
        margin-bottom: 0.35rem;
       
    }

    .is-mac #anchor-5-8-4 .template__list {
        margin: 0.2rem 0 0.5rem 0;
    }

    .is-mac #anchor-5-8-4 .template__list li {
        margin-bottom: 0.2rem;
    }

    .is-mac #anchor-5-8-4 .template__image-container--auto {
        height: auto;
    }

    .is-mac #anchor-5-8-4 .template__image--auto {
        width: 100%;
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-8-4 .template__stat-box {
        margin-top: 0.5rem;
    }

    .is-mac #anchor-5-8-4 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-5-8-5 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-5-8-5 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-5-8-5 .template__title--small {
        margin-bottom: 0.75rem;
        font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    
    }

    .is-mac #anchor-5-8-5 .template__content--3col-wide-center {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.04fr) minmax(0, 1.08fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-5-8-5 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-5-8-5 .template__column--text p,
    .is-mac #anchor-5-8-5 .template-paragraph,
    .is-mac #anchor-5-8-5 p {
        margin-bottom: 0.45rem;
        
    }

    .is-mac #anchor-5-8-5 .template-subtitle--small {
        margin-bottom: 0.35rem;
  
    }

    .is-mac #anchor-5-8-5 .template__image-container {
        height: auto;
    }

    .is-mac #anchor-5-8-5 .template__column--image .template__image {
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-5-8-5 .template__column--text .template__image {
        max-height: min(24vh, 240px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-6-1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-6-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-6-1 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
    
    }

    .is-mac #anchor-6-1 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr) minmax(0, 1.54fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-6-1 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-6-1 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-6-1 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-6-1 .template-subtitle {
        margin-top: 0.2rem;
        margin-bottom: 0;
      
    }

    .is-mac #anchor-6-1 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-6-1 .template-image--large {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-6-3 {
        justify-content: flex-start;
        padding-top: 5.25rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-6-3 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-6-3 .template__title {
        margin-bottom: 0.45rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-6-3 .template__title--small {
        margin-bottom: 0.75rem;
        font-size: clamp(1.35rem, 1.9vw, 1.75rem);
        line-height: 1.08;
    }

    .is-mac #anchor-6-3 .template__content--3col-wide-left {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) minmax(0, 1fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-6-3 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-6-3 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-6-3 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-6-3 .section6_3_1__subtitle {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-6-3 .template__image-container,
    .is-mac #anchor-6-3 .template-image--large {
        height: auto;
    }

    .is-mac #anchor-6-3 .template__content--3col-wide-left > .template__column:nth-child(1) .template-image--large {
        max-height: min(58vh, 560px);
    }

    .is-mac #anchor-6-3 .template__content--3col-wide-left > .template__column:nth-child(3) .template__image-container {
        max-height: min(52vh, 500px);
        overflow: hidden;
    }

    .is-mac #anchor-6-3 .template__content--3col-wide-left > .template__column:nth-child(3) .template__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .is-mac #anchor-6-3 .template__image,
    .is-mac #anchor-6-3 .template-image--large,
    .is-mac #anchor-6-3 .section6_3_1__image {
        object-fit: cover;
    }

    .is-mac #anchor-7-4 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-4 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-4 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
    }

    .is-mac #anchor-7-4 .template__content--3col-wide-center {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 0.94fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-4 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-4 .template-paragraph,
    .is-mac #anchor-7-4 .template__column--text p,
    .is-mac #anchor-7-4 p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-4 .end {
        margin-top: auto !important;
    }

    .is-mac #anchor-7-4 .template__list {
        margin: 0.2rem 0 0.5rem 0;
    }

    .is-mac #anchor-7-4 .template__list li {
        margin-bottom: 0.2rem;
    }

    .is-mac #anchor-7-4 .template__image-container {
        height: auto;
    }

    .is-mac #anchor-7-4 .template__image {
        max-height: min(56vh, 540px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-4 .template-paragraph--highlight {
        margin-top: 0.2rem !important;
    }

    .is-mac #anchor-7-4 .template-paragraph--highlight-small {
        margin-top: 0.1rem;
    }

    .is-mac #anchor-7-4 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-7-1-1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-1-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-1-1 .template__content--3col-wide-center {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 0.94fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-1-1 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-1-1 .template-subtitle {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-1-1 .template-features-block {
        gap: 0.7rem;
    }

    .is-mac #anchor-7-1-1 .template-feature {
        gap: 0.55rem;
        align-items: flex-start;
    }

    .is-mac #anchor-7-1-1 .template-feature-icon {
        width: 42px;
        height: 42px;
    }

    .is-mac #anchor-7-1-1 .template-feature-text {
        font-size: 0.82rem;
    }

    .is-mac #anchor-7-1-1 .template__column--text p,
    .is-mac #anchor-7-1-1 .template-paragraph,
    .is-mac #anchor-7-1-1 p {
        margin-bottom: 0.45rem;

    }

    .is-mac #anchor-7-1-1 .template__image-container {
        height: auto;
    }

    .is-mac #anchor-7-1-1 .template__image {
        max-height: min(56vh, 520px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-1-1 .section7_1_1__logos-grid {
        gap: 1rem;
    }

    .is-mac #anchor-7-1-1 .section7_1_1__logo img {
        width: 96px;
    }

    .is-mac #anchor-7-2 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-2 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-2 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-7-2 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr) minmax(0, 1.54fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-2 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-2 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-2 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-7-2 .template-subtitle {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac #anchor-7-2 .template-image--large,
    .is-mac #anchor-7-2 .section7_2__image {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-6 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-6 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-6 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-7-6 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr) minmax(0, 1.54fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-6 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-6 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-6 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-7-6 .template-subtitle {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac #anchor-7-6 .template-image--large,
    .is-mac #anchor-7-6 .section7_6__image {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-11 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-11 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-11 .template-bottom-left__titulo {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-7-11 .template__content--3col-wide-center {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 0.94fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-11 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-11 .template-paragraph,
    .is-mac #anchor-7-11 .template__column--text p,
    .is-mac #anchor-7-11 p {
        margin-bottom: 0.45rem;

    }

    .is-mac #anchor-7-11 .template-subtitle {
        margin-bottom: 0.35rem;

    }

    .is-mac #anchor-7-11 .template__image-container {
        height: auto;
    }

    .is-mac #anchor-7-11 .template__image {
        max-height: min(56vh, 540px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-12 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-12 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-12 .template__title--small {
        margin-bottom: 0.75rem;
        font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    }

    .is-mac #anchor-7-12 .template__content--4col {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 0.98fr) minmax(0, 0.9fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-12 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-12 .template-paragraph,
    .is-mac #anchor-7-12 .template__column--text p,
    .is-mac #anchor-7-12 p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-12 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-7-12 .template-subtitle {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-7-12 .template__image-container--auto {
        height: auto;
    }

    .is-mac #anchor-7-12 .template__image--auto {
        width: 100%;
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-12 .template-paragraph--highlight {
        margin-top: 0.2rem !important;
    }

    .is-mac #anchor-7-12 .template-paragraph--highlight-small {
        margin-top: 0.1rem;
    }

    .is-mac #anchor-7-12 .end {
        margin-top: 0.15rem !important;
    }

    .is-mac #anchor-7-12-1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-7-12-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-12-1 .template__content--4col {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) minmax(0, 0.98fr) minmax(0, 0.9fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-12-1 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-12-1 .template-paragraph,
    .is-mac #anchor-7-12-1 .template__column--text p,
    .is-mac #anchor-7-12-1 p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-12-1 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-7-12-1 .template-subtitle {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-7-12-1 .template__list {
        margin: 0.2rem 0 0.5rem 0;
    }

    .is-mac #anchor-7-12-1 .template__list li {
        margin-bottom: 0.2rem;
    }

    .is-mac #anchor-7-12-1 .template__image-container--auto {
        height: auto;
    }

    .is-mac #anchor-7-12-1 .template__image--auto {
        width: 100%;
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-6-1 {
        justify-content: center;
        padding-top: 2.6rem;
        padding-bottom: 1rem;
    }

    .is-mac #anchor-7-6-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-7-6-1 .template__content--4col {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.02fr) minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-7-6-1 .template__content--4col > * {
        min-width: 0;
    }

    .is-mac #anchor-7-6-1 .template-paragraph,
    .is-mac #anchor-7-6-1 .template__list p,
    .is-mac #anchor-7-6-1 .template__list--numbers p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-7-6-1 .template-subtitle {
        margin-top: 0.5rem;
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-7-6-1 .template__list,
    .is-mac #anchor-7-6-1 .template__list--numbers {
        margin: 0 0 0.4rem;
        padding-left: 1.1rem;
    }

    .is-mac #anchor-7-6-1 .template__image {
        max-height: min(54vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-7-6-1-1 {
        justify-content: center;
        padding-top: 2.75rem;
        padding-bottom: 1rem;
    }

    .is-mac #anchor-7-6-1-1 .container-plantilla {
        width: min(1660px, calc(100vw - 9rem));
    }

    .is-mac #anchor-7-6-1-1 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-7-6-1-1 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(0, 1.7fr);
        gap: 0.7rem;
        align-items: start;
    }

    .is-mac #anchor-7-6-1-1 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-7-6-1-1 .section7_6_1_1__subtitle {
        gap: 0.55rem;
        margin-bottom: 0.3rem;
    }

    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-table {
        margin-bottom: 0.55rem;
    }

    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-table td {
        padding-bottom: 0.2rem;
    }

    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-table,
    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-table *,
    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-text,
    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-value {
        font-size: clamp(0.84rem, 1.03vw, 0.95rem) !important;
        line-height: 1.2;
    }

    .is-mac #anchor-7-6-1-1 .section7_6_1_1__score-value {
        width: 3.45rem;
        padding-left: 0.55rem !important;
    }

    .is-mac #anchor-7-6-1-1 .template-image--large,
    .is-mac #anchor-7-6-1-1 .section7_6_1_1__image {
        max-height: min(58vh, 620px);
        height: auto;
        object-fit: contain;
    }

    .is-mac #anchor-8-1 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-8-1 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-8-1 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
    }

    .is-mac #anchor-8-1 .template__content--4col {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.02fr) minmax(0, 1.1fr) minmax(0, 0.98fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-8-1 .template__content--4col > .template__column--text {
        min-width: 0;
    }

    .is-mac #anchor-8-1 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-8-1 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-8-1 .section8_1__subtitle,
    .is-mac #anchor-8-1 .template-subtitle--small {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-8-1 .template__image {
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-8-1-1 {
        justify-content: center;
        padding-top: 2.7rem;
        padding-bottom: 1rem;
    }

    .is-mac #anchor-8-1-1 .container-plantilla.w-100 {
        width: min(1660px, calc(100vw - 10rem));
    }

    .is-mac #anchor-8-1-1 .section8_1_1__content {
        height: min(72vh, 690px);
        padding: 2rem 2.4rem;
        align-items: flex-end;
        background-position: center center;
    }

    .is-mac #anchor-8-1-1 .section8_1_1__text-overlay {
        align-items: flex-end;
    }

    .is-mac #anchor-8-1-1 .section8_1_1__white-box {
        max-width: min(37vw, 470px);
        padding: 1rem 1.15rem;
        max-height: min(58vh, 560px);
        overflow: auto;
    }

    .is-mac #anchor-8-1-1 .section8_1_1__white-box .template-subtitle {
        font-size: clamp(1.55rem, 1.95vw, 2rem);
        line-height: 1.05;
        margin-bottom: 0.55rem;
        padding: 0;
    }

    .is-mac #anchor-8-1-1 .section8_1_1__white-box .template__list,
    .is-mac #anchor-8-1-1 .section8_1_1__white-box .template__list p {
        margin-bottom: 0.4rem;
        line-height: 1.28;
        font-size: clamp(0.86rem, 1.02vw, 0.98rem);
    }

    .is-mac #anchor-8-1-1 .end {
        margin-top: 0 !important;
    }

    .is-mac #anchor-8-2 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-8-2 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-8-2 .template__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.85rem, 2.35vw, 2.2rem);
        line-height: 1.08;
    }

    .is-mac #anchor-8-2 .template__content--3col-wide-right {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr) minmax(0, 1.54fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-8-2 .template__column {
        min-width: 0;
    }

    .is-mac #anchor-8-2 .template-paragraph {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-8-2 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-8-2 .template-subtitle,
    .is-mac #anchor-8-2 .template-subtitle--small {
        margin-bottom: 0.35rem;
        line-height: 1.1;
    }

    .is-mac #anchor-8-2 .template-image--large,
    .is-mac #anchor-8-2 .section8_2__image {
        height: auto;
        object-fit: cover;
    }

    .is-mac #anchor-8-2-2 {
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 1.1rem;
    }

    .is-mac #anchor-8-2-2 .container-plantilla {
        width: min(1640px, calc(100vw - 10rem));
    }

    .is-mac #anchor-8-2-2 .template__content--4col {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr) minmax(0, 0.98fr) minmax(0, 0.96fr);
        gap: 0.8rem;
        align-items: start;
    }

    .is-mac #anchor-8-2-2 .template__content--4col > * {
        min-width: 0;
    }

    .is-mac #anchor-8-2-2 .template-paragraph,
    .is-mac #anchor-8-2-2 p {
        margin-bottom: 0.45rem;
    }

    .is-mac #anchor-8-2-2 .template-paragraph--continue {
        margin-top: 0 !important;
    }

    .is-mac #anchor-8-2-2 .template-subtitle,
    .is-mac #anchor-8-2-2 .template-subtitle--small {
        margin-bottom: 0.35rem;
    }

    .is-mac #anchor-8-2-2 .template__list {
        margin: 0.2rem 0 0.5rem 0;
    }

    .is-mac #anchor-8-2-2 .template__list li {
        margin-bottom: 0.2rem;
    }

    .is-mac #anchor-8-2-2 .template__image {
        max-height: min(56vh, 560px);
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 1200px) {
    .section6_3_1_1 .end {
        margin-top: 1.5rem;
    }

    .is-mac .section6_3_1_1 .template__column {
        height: auto;
    }
}

.section6_1 .template-subtitle {
    padding: 0px;
}

.section5_8_4 .template__stat-box {
    margin-top: 30px;
}

.section4_7__image-column {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.section4_7__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section4_7__right-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section4_7__certifications {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.section4_7__certification-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section4_7__composition-column {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.section4_7__composition-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.section4_7__composition-head .template-subtitle {
    margin: 0;
    padding: 0;
}

.section4_7__composition-unit {
    margin: 0;
    color: var(--color-tertiary) !important;
    font-weight: 100 !important;
    font-size: 0.85rem !important;
    text-align: right;
}

.section4_7__composition-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.3rem;
    padding: 10px 0px;
}

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

.section4_7__composition-label,
.section4_7__composition-value {
    padding: 0rem 0.55rem;
    background: var(--color-green);
    color: var(--color-tertiary);
    vertical-align: middle;
}

.section4_7__composition-label {
    font-weight: 600;
    font-size: 1.25rem;
}

.section4_7__composition-value {
    min-width: 72px;
    text-align: left;
    font-weight: 100;
    font-size: 1.8rem;
}

.section4_7__composition-source {
    margin: 0.9rem 0 0;
    color: var(--color-tertiary) !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
}

@media (min-width: 1201px) and (max-height: 900px) {
    #anchor-4-6 {
        justify-content: center;
        padding-top: 2.8rem;
        padding-bottom: 2rem;
    }

    #anchor-4-6 .container-plantilla {
        width: min(1560px, calc(100vw - 7rem));
    }

    #anchor-4-6 .template__title {
        font-size: clamp(2rem, 2.7vw, 2.45rem);
        line-height: 1.1;
        margin-bottom: 1.1rem;
    }

    #anchor-4-6 .template__content--4col {
        grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.98fr) minmax(0, 0.96fr) minmax(0, 0.72fr);
        gap: 0.95rem;
        align-items: start;
    }

    #anchor-4-6 .template__content--4col > .template__column {
        min-width: 0;
    }

    #anchor-4-6 .template-paragraph {
        font-size: clamp(0.84rem, 1.18vh, 0.93rem) !important;
        margin-bottom: 0.6rem;
    }

    #anchor-4-6 .template-features-block {
        gap: 0.85rem;
        padding-left: 0.6rem;
    }

    #anchor-4-6 .template-features-grid--2 {
        gap: 1rem 0.75rem;
    }

    #anchor-4-6 .template-feature {
        gap: 0.7rem;
    }

    #anchor-4-6 .template-icon--size-80 {
        width: 62px;
        height: 62px;
    }

    #anchor-4-6 .template-feature-text {
        font-size: 0.84rem;
        line-height: 1.22;
    }

    #anchor-4-6 .section4_6__certifications {
        gap: 1.35rem;
    }

    #anchor-4-6 .section4_6__certification-row {
        gap: 0.85rem;
        align-items: flex-start;
        min-width: 0;
    }

    #anchor-4-6 .template__content--4col > .template__column:nth-child(4) {
        justify-self: start;
        max-width: 260px;
    }

    #anchor-4-6 .section4_6__cert-logo {
        width: 72px;
        height: 72px;
    }

    #anchor-4-6 .section4_6__cert-text {
        font-size: clamp(0.82rem, 1.12vh, 0.9rem) !important;
        line-height: 1.24;
        text-align: left !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }

    #anchor-4-6 .section4_6__composition-unit {
        font-size: 0.72rem !important;
    }

    #anchor-4-6 .section4_6__composition-table {
        border-spacing: 0.24rem;
        padding: 0.2rem 0;
    }

    #anchor-4-6 .section4_6__composition-label {
        font-size: 1.06rem;
        padding: 0.02rem 0.44rem;
    }

    #anchor-4-6 .section4_6__composition-value {
        font-size: 1.5rem;
        min-width: 60px;
        padding: 0.02rem 0.44rem;
    }

    #anchor-4-6 .section4_6__composition-source {
        margin-top: 0.45rem;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
    }

    #anchor-4-6 .section4_6__text-column > *:last-child {
        margin-top: 0.4rem !important;
    }
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .section4_7__content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section4_7__left-section {
        grid-template-columns: 1fr;
    }

    .section4_7__composition-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .section4_7__composition-unit {
        text-align: left;
        margin-bottom: 10px;
    }

    .section4_7__composition-label {
        font-size: 1.45rem;
    }

    .section4_7__composition-value {
        font-size: 1.4rem;
        min-width: 64px;
    }
}

/* ====== CLASES GENERICAS PARA PLANTILLAS ====== */
.template .template-content--stretch {
    align-items: stretch;
}

.template .template-column--stack {
    display: flex;
    flex-direction: column;
}

.template .template-column--stack.template-column--end {
    justify-content: flex-end;
}

.template .template-paragraph {
    color: var(--color-body-text);
    line-height: 1.6;
    text-align: justify;
    margin: 0 0 1rem 0;
}

.template .template-paragraph:last-child {
    margin-bottom: 0;
}

.template .template-paragraph--highlight {
    font-size: 1.125rem;
    color: var(--color-tertiary);
    font-weight: 900;
    font-family: 'Lucida Bright', 'Libre Baskerville', Georgia, serif;
}

.template .template-paragraph--highlight-small {
    font-size: 1rem;
    color: var(--color-tertiary);
    font-weight: 900;
    font-family: 'Lucida Bright', 'Libre Baskerville', Georgia, serif;
}

.template .template-paragraph--continue {
    margin-top: 0 !important;
}

.template-taglines {
    gap: 0;
}

.template .template-taglines p {
    margin: 0;
}

.template .template-highlight {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.3;
    text-align: left;
    margin: 0;
}

.template .template-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-top: 1rem;
}

.template .template-image--large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    flex: 1;
}

.template .template-features-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-left: 2px solid var(--color-primary);
    padding-left: 0.75rem;
}

.template .template-features-block .template-subtitle {
    font-size: 1.25rem;
    line-height: normal;
    font-weight: 700;
    color: var(--color-primary);
    padding: 0;
}

.template .template-features-grid {
    display: grid;
    gap: 2rem 1.5rem;
    align-items: start;
}

.template .template-features-grid--1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-content: start;
}

.template .template-features-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template .template-features-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template .template-feature {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.template .template-feature-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.template .template-feature-text {
    font-size: 0.9rem;
    color: var(--color-body-text);
    line-height: 1.4;
    margin: 0;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .template .template-highlight {
        font-size: 1.25rem;
    }

    .template .template-features-block {
        border-left: none;
        padding-left: 0;
        padding-top: 0.75rem;
    }

    .template .template-feature-icon {
        width: 60px;
        height: 60px;
    }

    .template .template-feature--centered {
        flex-direction: row !important;
        align-items: center !important;
        text-align: start !important;
    }

    .template .template-features-grid--1 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.8rem;
    }

    .template .template-features-grid--2 {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .template .template-features-grid--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .template .template-features-block .template-subtitle {
        padding: 0 0 1rem 0;
        border-bottom: 2px solid var(--color-primary);
    }
}

/* Variantes de highlight */
.template .template-highlight--tertiary {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-tertiary);
    line-height: 1.4;
}

.template .template-highlight--small {
    font-size: 1rem;
    color: var(--color-tertiary);
}

/* Utilidades para iconos e imágenes */
.template .template-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.template .template-icon--size-80 {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.template .template-icon--size-60 {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Variante de subtitle */
.template .template-subtitle--secondary {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* Variante de feature centrado */
.template .template-feature--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
}

/* Responsive para nuevas utilidades */
@media screen and (max-width: 1024px) {
    .template .template-paragraph--continue {
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .template .template-highlight--tertiary {
        font-size: 1.25rem;
    }

    .template .template-icon--size-80 {
        width: 60px;
        height: 60px;
    }

    .template .template-icon--size-60 {
        width: 50px;
        height: 50px;
    }

    .template .template-paragraph--continue {
        margin-top: 0 !important;
    }
}

/* ====== SECTION 7.7 - CLAVES ====== */
.section7_7 .template-features-grid--2 {
    row-gap: 1.9rem;
    column-gap: 1.6rem;
}

.section7_7 .template-feature {
    align-items: flex-start;
    gap: 1rem;
}

@media screen and (max-width: 1200px) {
    .section7_7 .template-features-grid--2 {
        row-gap: 1.3rem;
    }
}

/* ====== SECTION 7.6.1.1 - MATRIZ DE MATERIALIDAD ====== */

.section7_6_1_1__subtitle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section7_6_1_1__subtitle--env::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #0f8f73;
    flex-shrink: 0;
}

.section7_6_1_1__subtitle--social::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #2645a0;
    flex-shrink: 0;
}

.section7_6_1_1__subtitle--gov::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: #d0472c;
    flex-shrink: 0;
}

.section7_6_1_1__score-table {
    width: auto;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
    font-size: 1rem !important;
    table-layout: fixed;
    text-align: left;
}

.section7_6_1_1__score-table tr {
    vertical-align: top;
}

.section7_6_1_1__score-table,
.section7_6_1_1__score-table * {
    font-size: 1rem !important;
    color: var(--color-body-text) !important;
    word-spacing: normal;
    letter-spacing: normal;
}

.section7_6_1_1__score-table td {
    padding: 0 0 0.35rem 0;
    font-size: 1rem !important;
}

.section7_6_1_1__score-table tr:last-child td {
    padding-bottom: 0;
}

.section7_6_1_1__score-text {
    font-size: 1rem !important;
    line-height: 1.35;
    text-align: left;
    word-spacing: normal;
    font-weight: 300;
}

.section7_6_1_1__score-text b {
    color: var(--color-body-text) !important;
}

.section7_6_1_1__score-value {
    width: 4.2rem;
    text-align: right !important;
    font-weight: 300;
    color: var(--color-body-text);
    font-size: 1rem !important;
    line-height: 1.2;
    white-space: nowrap;
    padding-left: 1rem !important;
}

@media screen and (max-width: 768px) {
    .section7_6_1_1__score-value {
        width: 3.8rem;
    }
}

/* ====== SECTION 4.10 - COMPROMETIDOS CON NUESTROS CLIENTES ====== */
.section4_10__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section4_10__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
}

.section4_10__subtitle--end {
    margin-top: 0;
}

.section4_10__highlight {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
    text-align: left;
    margin: 0;
}

.section4_10__paragraph {
    font-size: 0.95rem;
}

/* ====== SECTION 8.1.1 - CÓDIGO DE CONDUCTA ====== */
.section8_1_1__content {
    height: 800px;
    position: relative;
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px;
}

.section8_1_1__text-overlay {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.section8_1_1__white-box {
    background: #ffffff;
    padding: 20px;
    max-width: 380px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 1024px) {
    .section8_1_1__content {
        height: auto;
        min-height: 500px;
        padding: 40px;
    }

    .section8_1_1__white-box {
        max-width: 480px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .section8_1_1__content {
        justify-content: center;
        padding: 30px 20px;
        min-height: 600px;
    }

    .section8_1_1__white-box {
        max-width: 100%;
        padding: 25px;
    }

    .section8_1_1__white-box .template-subtitle {
        font-size: 1.3rem;
    }
}

.section4_10__paragraph {
    font-size: 0.95rem;
    color: var(--color-body-text);
    line-height: 1.6;
    text-align: justify;
    margin: 0 0 1.5rem 0;
}

.section4_10__paragraph:last-child {
    margin-bottom: 0;
}

.section4_10__paragraph--highlight {
    font-size: 0.9rem;
    line-height: 1.5;
}

.section4_10__paragraph--highlight b {
    font-weight: 700;
    color: var(--color-tertiary);
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .section4_10__subtitle {
        font-size: 1.25rem;
    }

    .section4_10__highlight {
        font-size: 1.25rem;
    }

    .section4_10__paragraph {
        font-size: 1.25rem;
    }

    .section4_10__paragraph--highlight {
        font-size: 1.25rem;
    }
}

/* ====== SECTION 4.10.1 - SERVICIO Y EXPERIENCIA DE CLIENTE ====== */
.section4_5__subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
    margin: 0 0 1.2rem 0;
}

.section4_5__paragraph {
    font-size: 0.95rem;
    color: var(--color-body-text);
    line-height: 1.45;
    text-align: justify;
    margin: 0 0 1rem 0;
}

.section4_5__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.section4_5__feature:last-child {
    margin-bottom: 0;
}

.section4_5__feature .template-feature-icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    flex-shrink: 0;
    object-fit: contain;
}

.section4_5__feature .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    font-size: 50px;
    flex-shrink: 0;
    color: var(--color-primary);
    display: block;
    margin-right: 0;
}

.section4_5__feature-text {
    font-size: 0.95rem;
    color: var(--color-body-text);
    line-height: 1.45;
    text-align: justify;
    margin: 0;
}

.section4_5__feature-title {
    font-weight: 700;
    color: var(--color-body-text);
}

.section4_5__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section4_5__nps {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-top: auto;
    padding-bottom: 15px;
}

.section4_5__paragraph--nps {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .section4_5__subtitle {
        font-size: 1.5rem;
    }

    .section4_5__paragraph,
    .section4_5__feature-text {
        font-size: 0.9rem;
    }

    .section4_5__feature-icon {
        font-size: 1.3rem;
    }

    .section4_5__nps {
        font-size: 2.5rem;
    }
}

/* ====== SECTION 4 GRID 2 (estructura exacta) ====== */
.section4grid2 .container-plantilla {
    display: flex;
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
}

.section4grid2__grid {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    /* grid-template-rows: repeat(3, 1fr); */
    width: 1420px;
    height: 750px;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.cell2--1 {
    grid-area: 1 / 1 / 2 / 2;
}

.cell2--2 {
    grid-area: 1 / 2 / 2 / 3;
    background: #fff;
}

.cell2--3 {
    grid-area: 1 / 3 / 2 / 4;
    background: #fff;
}

.cell2--4 {
    grid-area: 1 / 4 / 2 / 5;
    background: #fff;
}

.cell2--5 {
    grid-area: 2 / 1 / 3 / 2;
}

.cell2--6 {
    grid-area: 2 / 2 / 3 / 3;
}

.cell2--7 {
    grid-area: 2 / 3 / 3 / 4;
}

.cell2--8 {
    grid-area: 2 / 4 / 4 / 5;
}

.cell2--9 {
    grid-area: 3 / 1 / 4 / 2;
}

.cell2--10 {
    grid-area: 3 / 2 / 4 / 3;
}

.cell2--11 {
    grid-area: 3 / 3 / 4 / 4;
}

/* Responsive para tablets */
@media (max-width: 1200px) {
    .section4grid2__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        min-height: auto;
        height: auto;
    }

    .cell2--1,
    .cell2--2,
    .cell2--3,
    .cell2--4,
    .cell2--5,
    .cell2--6,
    .cell2--7,
    .cell2--8,
    .cell2--9,
    .cell2--10,
    .cell2--11 {
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
    }

    /* Ocultar celdas blancas en tablets */
    .cell2--2,
    .cell2--3,
    .cell2--4 {
        display: none;
    }
}

/* Responsive una columna desde <= 1024px */
@media (max-width: 1024px) {
    .section4grid2 .container-plantilla {
        height: auto;
    }

    .section4grid2 {
        padding-top: 0;
    }

    .section4grid2__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .cell2--1,
    .cell2--2,
    .cell2--3,
    .cell2--4,
    .cell2--5,
    .cell2--6,
    .cell2--7,
    .cell2--8,
    .cell2--9,
    .cell2--10,
    .cell2--11 {
        grid-column: 1;
        grid-row: auto;
        min-height: 100px;
        padding: 24px 20px;
    }

    /* Ocultar celdas blancas en móviles */
    .cell2--2,
    .cell2--3,
    .cell2--4 {
        display: none;
    }
}

/* ============================================
   SISTEMA DE BOTELLINES - ANIMACIÓN
   ============================================ */

.sistema-botellines {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sistema-botellines .template__title {
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.botellines-animation {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 0rem 2rem;
    overflow: visible;
}

.botellines-sequence-item {
    opacity: 1;
}

.panel.active .botellines-sequence-item {
    opacity: 0;
    animation-duration: 0.32s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-delay: var(--botellines-delay, 0s);
}

.panel.active .botellines-step.botellines-sequence-item {
    animation-name: botellinesRevealStep;
}

.panel.active .botellines-arrow--horizontal.botellines-sequence-item {
    animation-name: botellinesRevealArrowHorizontal;
}

.panel.active .botellines-arrow--vertical-down.botellines-sequence-item {
    animation-name: botellinesRevealArrowVertical;
}

.panel.active .botellines-arrow--vertical-up.botellines-sequence-item {
    animation-name: botellinesRevealArrowVerticalUp;
}

@keyframes botellinesRevealStep {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes botellinesRevealArrowHorizontal {
    from {
        opacity: 0;
        transform: translateX(-18px) scaleX(0.75);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

@keyframes botellinesRevealArrowVertical {
    from {
        opacity: 0;
        transform: translateY(-18px) scaleY(0.75);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes botellinesRevealArrowVerticalUp {
    from {
        opacity: 0;
        transform: translateY(18px) scaleY(0.75);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Filas de pasos */
.botellines-row {
    display: grid;
    grid-template-columns: 140px 100px 140px 100px 140px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.botellines-row--top {
    margin-bottom: 1rem;
}

.botellines-row--bottom {
    margin-top: 1rem;
}

/* Paso individual */
.botellines-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.3rem;
    transition: transform 0.3s ease;
    gap: 0.5rem;
    max-width: 140px;
}

.botellines-step:hover {
    transform: scale(1.05);
}

.botellines-step__image {
    width: 100%;
    max-width: 60px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.botellines-step__text {
    width: 100%;
    max-width: 140px;
    text-align: center;
}

.botellines-step__text p {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-tertiary);
    margin: 0;
}

.botellines-step__text b {
    font-weight: 700;
    color: var(--color-tertiary);
}

/* Flechas horizontales y verticales */
.botellines-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.5rem;
    border-radius: 8px;
}

.botellines-arrow__image {
    width: 100%;
    max-width: 40px;
    min-width: 40px;
    height: auto;
    object-fit: contain;
    opacity: 1;
}

/* Asegurar que los SVG de flechas tengan color visible */
.botellines-arrow__image path,
.botellines-arrow__image .cls-1 {
    stroke: var(--color-primary) !important;
    stroke-width: 3.5 !important;
    fill: none;
}

.botellines-arrow__image--rotate {
    transform: rotate(180deg);
}

/* Contenedor de flechas verticales */
.botellines-vertical-arrows {
    position: relative;
    margin: 0.8rem 0;
}

.botellines-arrow--vertical-left {
    position: absolute;
    left: -80px;
    top: 40px;
}

.botellines-arrow--vertical-right {
    position: absolute;
    right: -80px;
    top: 40px;
}

.botellines-arrow--vertical-left .botellines-arrow__image,
.botellines-arrow--vertical-right .botellines-arrow__image {
    max-width: 40px;
    min-width: 40px;
}

/* Responsive - Tablets */
@media (max-width: 1024px) {
    .sistema-botellines .template__title {
        font-size: 2rem;
    }

    .botellines-row {
        grid-template-columns: 120px 80px 120px 80px 120px;
    }

    .botellines-vertical-arrows {
        margin: 0.6rem 0;
    }

    .botellines-arrow--vertical-left {
        left: -70px;
    }

    .botellines-arrow--vertical-right {
        right: -70px;
    }

    .botellines-step {
        max-width: 120px;
    }

    .botellines-step__image {
        max-width: 60px;
    }

    .botellines-step__text {
        max-width: 100px;
    }

    .botellines-step__text p {
        font-size: 0.65rem;
    }

    .botellines-arrow__image {
        max-width: 40px;
        min-width: 40px;
    }
}

/* Responsive - Móviles */
@media (max-width: 768px) {
    .sistema-botellines .template__title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }

    .botellines-animation {
        max-width: 100%;
    }

    .botellines-row {
        grid-template-columns: 140px 80px 140px 80px 140px;
    }

    .botellines-vertical-arrows {
        margin: 0.6rem 0;
    }

    .botellines-arrow--vertical-left {
        left: -70px;
    }

    .botellines-arrow--vertical-right {
        right: -70px;
    }

    .botellines-step__image {
        max-width: 60px;
    }

    .botellines-step {
        max-width: 140px;
    }

    .botellines-step__text {
        max-width: 120px;
    }

    .botellines-step__text p {
        font-size: 0.7rem;
    }
}

/* Responsive - Móviles pequeños */
@media (max-width: 480px) {
    .sistema-botellines .template__title {
        font-size: 1.5rem;
    }

    .botellines-animation {
        max-width: 100%;
    }

    /* Cambiar a layout vertical en móviles pequeños */
    .botellines-row {
        grid-template-columns: 1fr;
        margin-bottom: 1rem;
    }

    .botellines-vertical-arrows {
        display: none;
    }

    .botellines-arrow {
        transform: rotate(90deg);
        margin: 0.3rem 0;
    }

    .botellines-arrow__image {
        max-width: 40px;
    }

    .botellines-arrow__image--rotate {
        transform: rotate(270deg);
    }

    .botellines-step__image {
        max-width: 60px;
    }

    .botellines-step {
        max-width: 130px;
        padding: 0.2rem;
    }

    .botellines-step__text {
        max-width: 110px;
    }

    .botellines-step__text p {
        font-size: 0.65rem;
    }
}

/* ====== SECTION 5.3.1 - CLAVES DE EMPLEO Y DESARROLLO ====== */
.template__stats-container {
    display: flex;
    flex-direction: column;
}

.template__stat-box {
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
    border-top: 1px solid var(--color-primary);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.template__stat-box:last-child {
    border-bottom: 1px solid var(--color-primary);
}

.template__stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.template__stat-number {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.template__stat-unit {
    font-size: 2rem;
    color: var(--color-primary);
}

.template__stat-text {
    font-size: 0.9rem;
    color: var(--color-primary) !important;
    line-height: 1.3;
}

.bg-cyan .template__stat-box p:first-child {
    color: var(--color-tertiary) !important;
    text-align: justify;
    margin-bottom: 20px;
}

.bg-cyan .template__stats-container {
    padding: 40px;
}

.bg-cyan .template__stat-box {
    border-left: 1px solid var(--color-tertiary);
    border-right: 1px solid var(--color-tertiary);
    border-top: 1px solid var(--color-tertiary);
}

.bg-cyan .template__stat-box:last-child {
    border-bottom: 1px solid var(--color-tertiary);
}

.bg-cyan .template__stat-number {
    color: var(--color-tertiary);
}

.bg-cyan .template__stat-text {
    color: var(--color-tertiary) !important;
}

.bg-cyan .template__stat-unit {
    color: var(--color-tertiary);
}

.bg-cyan img {
    height: 800px;
}

.template__stats-container.section5_8_6_3__stats-container {
    padding: 40px;
}

.template__content.template__content--2col-wide-right.bg-cyan {
    gap: 0px;
}

.section5_8_6_3__stats-container .template__stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.section5_8_6_3__stats-container .template__stat-unit {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-tertiary);
}

.section5_8_6_3 img {
    height: 100%;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .template__stat-number {
        font-size: 4rem;
    }

    .template__stat-box {
        padding: 1rem;
    }
}

/* ============================================
   SECCIÓN 5.7 - ACTIVIDADES CULTURALES
   ============================================ */
.template__list {
    list-style: none;
    font-size: 1rem;
    color: var(--color-body-text);
    line-height: 1.6;
}

.template__list li {
    padding-left: 1rem;
    position: relative;
    line-height: 1.6;
}

.template__list li::before {
    content: '•';
    color: var(--orange);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.template__list p {
    margin-bottom: 0px !important;
}

.template__list+p {
    margin-top: 1.2rem !important;
}

.template__list+.template-subtitle--small,
.template__list+.template-subtitle {
    margin-top: 1.2rem !important;
}

.template__content {
    counter-reset: template-numbered-list;
}

.template__list--numbers {
    list-style: none;
    font-size: 1rem;
    color: var(--color-body-text);
    line-height: 1.6;
    counter-reset: template-numbered-list var(--template-list-start, 0);
}

.template__list--numbers li {
    padding-left: 1.6rem;
    position: relative;
    line-height: 1.6;
    counter-increment: template-numbered-list;
}

.template__list--numbers li::before {
    content: counter(template-numbered-list) '.';
    font-weight: 100;
    position: absolute;
    left: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.template__list--numbers p {
    margin-bottom: 0px !important;
}

.template__list--numbers+p {
    margin-top: 1.2rem !important;
}

.template__list--numbers+.template-subtitle--small {
    margin-top: 1.2rem !important;
}

.section5_7__subtitle.template-subtitle--small {
    font-size: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 1200px) {
    .section5_7__subtitle {
        font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
        margin: 1.2rem 0 0.6rem 0;
    }

    .section5_7__subtitle.template-subtitle--small, .section7_6_1_1__score-table *, .section7_6_1_1__score-table td {
        font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem) !important;
    }

    .template__list--numbers li {
        padding-left: 1.8rem;
    }
}

@media (max-width: 1200px) {

    .section1,
    .section5_8_5,
    .section5_8_1,
    .section5_8_6,
    .section5_8_6_1 {
        padding-bottom: 0px;
    }

    .section1_2,
    .section5_8_1,
    .section5_8_6_1,
    .section5_8_6_2 {
        padding-top: 0px;
    }

    .section1_2 {
        margin-top: 1.25rem;
    }

    .bg-cyan img {
        height: auto;
    }

    .grid__img--medium {
        max-height: 200px;
    }

    .template__content--2col,
    .template__content--2col-narrow-left,
    .template__content--2col-wide-right,
    .template__content--3col,
    .template__content--3col-wide-left,
    .template__content--3col-wide-center,
    .template__content--3col-wide-right,
    .template__content--4col,
    .plantilla2-contenido,
    .plantilla2b-contenido,
    .plantilla2c-contenido,
    .plantilla2d-contenido,
    .plantilla3-contenido,
    .plantilla3b-contenido,
    .plantilla3c-contenido,
    .plantilla3d-contenido,
    .plantilla4-contenido,
    .plantilla4b-contenido,
    .plantilla4c-contenido,
    .templateport1-contenido,
    .templateport2-contenido,
    .section4_8__content,
    .section4_6__content,
    .section4_6__images-grid,
    .section4_7__content,
    .section4_7__left-section,
    .grid-container,
    .grid4,
    .section4grid2__grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        margin-top: 0px;
    }

    .template .template-features-grid--1,
    .template .template-features-grid--2,
    .template .template-features-grid--3 {
        grid-template-columns: 1fr !important;
    }

    .cell2--2,
    .cell2--3,
    .cell2--4 {
        display: none;
    }

    .section7_1_1__logo img {
        width: 100%;
    }
}

/* ============================================
   DESHABILITAR ANIMACIONES EN MÓVILES
   ============================================ */
@media (max-width: 768px) {

    /* Desactivar todas las animaciones CSS */
    *,
    *::before,
    *::after {
        animation: none !important;
        animation-delay: 0s !important;
        animation-duration: 0s !important;
        transition: none !important;
    }

    /* Desactivar todas las clases de animación */
    .fade-in,
    .fade-out,
    .fade-left,
    .fade-right,
    .fade-up,
    .fade-down,
    .slide-left,
    .slide-right,
    .slide-up,
    .slide-down,
    .zoom-in,
    .zoom-out,
    .delay-1,
    .delay-2,
    .delay-3,
    .delay-4,
    .delay-5,
    .delay-6,
    .delay-7,
    .delay-8,
    .delay-9,
    .delay-10,
    .delay-11,
    .delay-12 {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        animation-delay: 0s !important;
        transition: none !important;
    }

    /* Asegurar que los elementos sean visibles desde el inicio */
    .panel:not(.active) .fade-in,
    .panel:not(.active) .fade-out,
    .panel:not(.active) .fade-left,
    .panel:not(.active) .fade-right,
    .panel:not(.active) .fade-up,
    .panel:not(.active) .fade-down,
    .panel:not(.active) .slide-left,
    .panel:not(.active) .slide-right,
    .panel:not(.active) .slide-up,
    .panel:not(.active) .slide-down,
    .panel:not(.active) .zoom-in,
    .panel:not(.active) .zoom-out {
        opacity: 1 !important;
    }

    /* Desactivar animaciones del sistema de botellines */
    .botellines-step,
    .botellines-arrow {
        animation: none !important;
        animation-delay: 0s !important;
    }

    /* Desactivar hover effects */
    .template__image-container:hover,
    .template__video:hover,
    .nav-arrow:hover,
    .language-switcher__button:hover,
    .menu-toggle:hover {
        transform: none !important;
    }

    /* Desactivar transformaciones en elementos interactivos */
    .video-modal-trigger:hover img,
    .template__column--image img:hover {
        transform: none !important;
    }

    /* Mantener solo las transformaciones necesarias para layout */
    .scroll-indicator,
    .translate-x-center {
        transform: translateX(-50%) !important;
        transition: none !important;
    }

    .translate-y-center {
        transform: translateY(-50%) !important;
        transition: none !important;
    }

    .nav-arrow {
        transform: translateY(-50%) !important;
        transition: opacity 0.2s ease !important;
    }

    .nav-arrow:hover {
        transform: translateY(-50%) !important;
    }
}