.servicio-pagina {
    --tinta: var(--color-carbon);
    --negro-tramo: #0B0D0C;
    --acento: var(--color-naranja);
    --tinta-suave: rgba(28, 28, 28, 0.74);
    --tinta-tenue: rgba(28, 28, 28, 0.52);
    --linea: rgba(28, 28, 28, 0.18);

    position: relative;
    color: var(--tinta);
}

.servicio-pagina--eucalipto {
    background-color: var(--color-eucalipto);
}

.servicio-pagina--naranja {
    --acento: var(--color-blanco);

    background-color: var(--color-naranja);
}

.servicio-pagina--claro {
    --acento: var(--color-eucalipto);

    background-color: var(--color-claro);
}

.servicio-pagina .contenedor {
    --ancho-contenedor: 1440px;
}

@media (min-width: 1101px) {
    .servicio-pagina .contenedor {
        --margen-contenedor-base: max(calc(var(--margen-lateral) + 4rem), 11rem);
    }
}

/* ---------- Portada ---------- */

.servicio-apertura {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    color: var(--color-blanco);
}

/* El velo: oscuro del lado del texto, transparente sobre la foto. */
.servicio-apertura::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(90deg, rgba(8, 10, 9, 0.82) 0%, rgba(8, 10, 9, 0.62) 34%, rgba(8, 10, 9, 0.28) 60%, rgba(8, 10, 9, 0.08) 82%, rgba(8, 10, 9, 0.2) 100%),
        linear-gradient(180deg, rgba(8, 10, 9, 0.45) 0%, transparent 30%, transparent 74%, rgba(8, 10, 9, 0.45) 100%);
    pointer-events: none;
}

.servicio-portada {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(6rem, calc(14 * var(--vh-estable, 1vh)), 9rem) clamp(3rem, calc(8 * var(--vh-estable, 1vh)), 5rem);
}

.servicio-portada__texto {
    position: relative;
    z-index: 2;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.9rem, calc(2.2 * var(--vh-estable, 1vh)), 1.4rem);
}

.servicio-portada__titulo {
    color: var(--color-blanco);
    font-family: var(--fuente-sans);
    font-size: clamp(2rem, 6.45cqi, 3.4rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.servicio-portada__renglon {
    display: block;
}

.servicio-portada__bajada {
    max-width: min(40ch, 84%);
    font-size: var(--texto-lg);
    line-height: 1.55;
    text-align: left;
    text-wrap: pretty;
    color: rgba(255, 255, 255, 0.82);
}

.servicio-portada__accion {
    margin-top: clamp(0.5rem, calc(1.6 * var(--vh-estable, 1vh)), 1rem);
}

.servicio-portada__figura {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    overflow: hidden;
}

.servicio-portada__figura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Las fotos se turnan en un ciclo sin fin: la que manda es la visible. */
.servicio-portada__foto {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s var(--curva-suave);
}

.servicio-portada__foto.esta-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .servicio-portada__foto {
        transition: none;
    }
}

/* ---------- Qué incluye ---------- */

.servicio-items {
    padding-block: clamp(3.5rem, calc(9 * var(--vh-estable, 1vh)), 6rem) clamp(4rem, calc(10 * var(--vh-estable, 1vh)), 7rem);
    background-color: var(--color-blanco);
    box-shadow: 0 0 0 100vmax var(--color-blanco);
    clip-path: inset(-1px -100vmax);
}

.servicio-items__titulo {
    margin-bottom: clamp(3.25rem, calc(8 * var(--vh-estable, 1vh)), 5rem);
}

.servicio-pagina .servicio-items__titulo {
    color: var(--color-carbon);
}

.servicio-pagina .servicio-items__titulo::before,
.servicio-pagina .servicio-items__titulo::after {
    background-color: var(--color-naranja);
}

.servicio-items__titulo,
.servicio-casos__titulo {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.6vw, 1.5rem);
    margin-bottom: clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3.25rem);
    font-family: var(--fuente-sans);
    font-size: var(--texto-titulo-seccion);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    justify-content: center;
}

.servicio-items__titulo::before,
.servicio-items__titulo::after,
.servicio-casos__titulo::before,
.servicio-casos__titulo::after {
    content: "";
    flex: none;
    width: clamp(32px, 3.5vw, 56px);
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-naranja);
}

.incluye {
    width: min(100%, 64rem);
    margin-inline: auto;
}

.incluye__visor {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.incluye__riel {
    display: flex;
    align-items: stretch;
    transition: transform 0.6s cubic-bezier(0.22, 0.75, 0.25, 1);
}

.incluye__lamina {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 3px;
}

.incluye__titulo {
    max-width: 22ch;
    min-height: 2.1em;
    font-family: var(--fuente-sans);
    font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.incluye__escena {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(1.5rem, calc(4 * var(--vh-estable, 1vh)), 2.25rem);
    flex: 1;
}

.incluye__columna {
    display: flex;
    flex-direction: column;
}

.incluye__texto {
    font-size: var(--texto-base);
    line-height: 1.75;
    color: var(--tinta-suave);
    text-wrap: pretty;
}

.incluye__numero {
    font-family: var(--fuente-sans);
    font-size: clamp(5rem, 11vw, 9.5rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.06em;
    color: rgba(28, 28, 28, 0.16);
    user-select: none;
}

/* El bloque conserva su ancho y se apoya en el borde derecho, a la par de
   las flechas. */
.incluye__columna {
    max-width: 30rem;
    margin-left: auto;
    gap: clamp(1.5rem, calc(4 * var(--vh-estable, 1vh)), 2.25rem);
}

/* ---------- El entregable ---------- */

.entregable {
    margin: 0;
    padding: clamp(0.9rem, calc(2.2 * var(--vh-estable, 1vh)), 1.15rem) clamp(1rem, 2.5vw, 1.4rem);
    border: 1px solid rgba(28, 28, 28, 0.14);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-sm);
    background-color: rgba(28, 28, 28, 0.035);
}

.entregable__nombre {
    margin-top: 0.4rem;
    font-size: var(--texto-base);
    font-weight: 500;
    line-height: 1.4;
    color: var(--tinta);
}

/* ---------- La navegación del carrusel ---------- */

.incluye__navegacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: clamp(1.5rem, calc(4 * var(--vh-estable, 1vh)), 2rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea);
}

.incluye__indice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.incluye__paso {
    min-width: 2.5rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: var(--texto-sm);
    color: var(--tinta-tenue);
    cursor: pointer;
    transition:
        color 0.25s var(--curva-suave),
        border-color 0.25s var(--curva-suave);
}

.incluye__paso[aria-pressed="true"] {
    border-bottom-color: var(--acento);
    color: var(--tinta);
}

.incluye__flechas {
    display: flex;
    gap: 0.5rem;
}

.incluye__flecha {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--tinta);
    cursor: pointer;
    transition:
        color 0.25s var(--curva-suave),
        transform 0.25s var(--curva-suave);
}

.incluye__flecha:disabled {
    opacity: 0.3;
    cursor: default;
}

@media (hover: hover) {
    .incluye__paso:hover {
        color: var(--tinta);
    }

    .incluye__flecha:hover:not(:disabled) {
        color: var(--acento);
        transform: translateX(2px);
    }
}

.incluye__paso:focus-visible,
.incluye__flecha:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .incluye__riel {
        transition: none;
    }
}

/* ---------- Proyectos relacionados ---------- */

/* El fondo negro se derrama hacia los costados sin tocar el ancho de la
   página: así no aparece una barra horizontal. */
.servicio-casos,
.servicio-cierre {
    background-color: var(--negro-tramo);
    box-shadow: 0 0 0 100vmax var(--negro-tramo);
    clip-path: inset(-1px -100vmax);
}

.servicio-casos {
    /* Arriba, el mismo aire que queda abajo del botón. */
    padding-block: clamp(5rem, calc(13 * var(--vh-estable, 1vh)), 9rem) clamp(4rem, calc(9 * var(--vh-estable, 1vh)), 6rem);
}

.servicio-casos__titulo {
    margin-bottom: clamp(3rem, calc(7 * var(--vh-estable, 1vh)), 4.5rem);
}

.servicio-pagina .servicio-casos__titulo {
    color: var(--color-blanco);
}

.servicio-pagina .servicio-casos__titulo::before,
.servicio-pagina .servicio-casos__titulo::after {
    background-color: var(--color-naranja);
}

/* Tres por fila, pero en flex: si la última fila queda incompleta, se centra
   en lugar de dejar una ficha suelta a la izquierda. */
.servicio-casos__lista {
    --hueco-casos: clamp(1.5rem, 4vw, 3.5rem);
    /* Un sello redondo necesita más alto que un logotipo apaisado para pesar
       igual; el marco guarda el alto del más grande para que los nombres de
       toda la fila queden a la misma altura. */
    --alto-caso: clamp(3.5rem, 6.4vw, 5.25rem);
    --alto-caso-sello: clamp(4.6rem, 8.4vw, 6.9rem);
    --aire-caso: clamp(0.75rem, 2vw, 1.25rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3.5rem) var(--hueco-casos);
    width: min(100%, 64rem);
    margin-inline: auto;
    list-style: none;
    padding: 0;
}

.caso-marca {
    flex: 0 1 calc((100% - var(--hueco-casos) * 2) / 3);
    min-width: 9rem;
}

.caso-marca__enlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}

.caso-marca__marco {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: calc(var(--alto-caso-sello) + var(--aire-caso) * 2);
    padding-block: var(--aire-caso);
}

.caso-marca__logo {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 14rem;
    height: var(--alto-caso);
    object-fit: contain;
    filter: none;
    transition:
        filter 0.45s var(--curva-suave),
        opacity 0.45s var(--curva-suave),
        scale 0.5s var(--curva-suave);
}

/* La silueta del archivo original se colorea sin generar halos. */
@supports (mask-image: linear-gradient(#000, #000)) {
    .caso-marca__marco--color::after {
        content: "";
        grid-area: 1 / 1;
        width: 100%;
        max-width: 14rem;
        height: var(--alto-logo-caso, var(--alto-caso));
        background-color: var(--color-marca, #fff);
        mask: var(--logo-marca) center / contain no-repeat;
        mask-mode: luminance;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s var(--curva-suave), scale 0.5s var(--curva-suave);
    }

    .caso-marca__enlace:focus-visible .caso-marca__marco--color .caso-marca__logo {
        opacity: 0;
    }

    .caso-marca__enlace:focus-visible .caso-marca__marco--color::after {
        opacity: 1;
        scale: 1.05;
    }

    @media (hover: hover) {
        .caso-marca__enlace:hover .caso-marca__marco--color .caso-marca__logo {
            opacity: 0;
        }

        .caso-marca__enlace:hover .caso-marca__marco--color::after {
            opacity: 1;
            scale: 1.05;
        }
    }
}

.caso-marca__logo--sello {
    height: var(--alto-caso-sello);
}

.caso-marca__nombre {
    font-size: var(--texto-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.4s var(--curva-suave);
}

.caso-marca__enlace:focus-visible .caso-marca__logo {
    scale: 1.05;
    filter: brightness(0) invert(1);
}

.caso-marca__enlace:focus-visible .caso-marca__nombre {
    color: var(--color-blanco);
}

@media (hover: hover) {
    .caso-marca__enlace:hover .caso-marca__logo {
        scale: 1.05;
        filter: brightness(0) invert(1);
    }

    .caso-marca__enlace:hover .caso-marca__nombre {
        color: var(--color-blanco);
    }
}

/* ---------- Cierre ---------- */

.servicio-cierre {
    display: flex;
    justify-content: center;
    padding-block: 0 clamp(5rem, calc(13 * var(--vh-estable, 1vh)), 9rem);
}

.servicio-portada__accion {
    border-color: transparent;
    color: var(--color-carbon);
    letter-spacing: 0.08em;
    transition: transform 0.35s var(--curva-suave);
}

.servicio-pagina--eucalipto .servicio-portada__accion {
    background-color: var(--color-naranja);
}

.servicio-pagina--naranja .servicio-portada__accion {
    background-color: var(--color-naranja);
}

.servicio-pagina--claro .servicio-portada__accion {
    background-color: var(--color-naranja);
}

.servicio-pagina .servicio-cierre__accion {
    border-color: transparent;
    background-color: var(--color-naranja);
    color: var(--color-carbon);
}

.servicio-portada__accion:hover,
.servicio-portada__accion:focus-visible,
.servicio-pagina .servicio-cierre__accion:hover,
.servicio-pagina .servicio-cierre__accion:focus-visible {
    transform: scale(1.05);
    color: var(--color-carbon);
}

.servicio-portada__accion:active,
.servicio-cierre__accion:active {
    transform: scale(1.02);
}

/* ---------- Entradas ---------- */

.animar .servicio-portada__titulo,
.animar .servicio-portada__bajada,
.animar .servicio-portada__accion {
    opacity: 0;
    translate: 0 20px;
    animation: servicio-entrar 0.9s var(--curva-entrada) forwards;
}

.animar .servicio-portada__bajada {
    animation-delay: 110ms;
}

.animar .servicio-portada__accion {
    animation-delay: 330ms;
}

.animar .servicio-portada__figura {
    opacity: 0;
    scale: 1.08;
    animation: servicio-fondo-entrar 1.4s var(--curva-entrada) forwards;
}

@keyframes servicio-fondo-entrar {
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes servicio-entrar {
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.animar [data-revelar] {
    opacity: 0;
    translate: 0 24px;
    transition:
        opacity 0.7s var(--curva-suave),
        translate 0.8s var(--curva-entrada);
    transition-delay: calc(var(--indice-item, 0) * 90ms);
}

.animar [data-revelar].esta-visible {
    opacity: 1;
    translate: 0 0;
}

.animar [data-revelar="zoom"] {
    translate: none;
    scale: 0.88;
    transition:
        opacity 0.7s var(--curva-suave),
        scale 0.9s var(--curva-resorte);
}

.animar [data-revelar="zoom"].esta-visible {
    scale: 1;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 1000px) {
    .servicio-portada {
        grid-template-columns: minmax(0, 1fr);
        padding-block: clamp(7rem, calc(16 * var(--vh-estable, 1vh)), 9rem) clamp(3rem, calc(8 * var(--vh-estable, 1vh)), 4rem);
    }

    .servicio-portada__figura img {
        object-position: 28% center;
    }

    .servicio-apertura::after {
        background-image:
            linear-gradient(90deg, rgba(8, 10, 9, 0.86) 0%, rgba(8, 10, 9, 0.68) 60%, rgba(8, 10, 9, 0.5) 100%),
            linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, transparent 35%, transparent 70%, rgba(8, 10, 9, 0.5) 100%);
    }

    .incluye__escena {
        grid-template-columns: minmax(0, 1fr);
    }

    .incluye__numero {
        display: none;
    }

    .entregable {
        margin-inline: 4px 15px;
        min-height: 19rem;
    }
}

@media (max-width: 760px) {
    .caso-marca {
        flex-basis: calc((100% - var(--hueco-casos)) / 2);
    }
}

/* Mobile y tablet: el contenido ocupa la zona superior de la portada. */
@media (max-width: 1100px) {
    .servicio-apertura {
        justify-content: flex-start;
    }

    .servicio-portada {
        grid-template-columns: minmax(0, 1fr);
        padding-block: calc(76px + 1.5rem) calc(45 * var(--svh-estable, 1svh));
    }

    .servicio-portada__texto {
        align-items: center;
        width: min(100%, 42rem);
        margin-inline: auto;
        text-align: center;
    }

    .servicio-portada__titulo {
        font-size: clamp(1.75rem, 5.6vw, 2.75rem);
        line-height: 1.1;
    }

    .servicio-portada__bajada {
        max-width: 42ch;
        text-align: center;
    }

    .servicio-portada__accion {
        display: none;
    }

    .servicio-portada__figura img {
        object-position: center bottom;
    }

    .servicio-apertura::after {
        background-image: linear-gradient(180deg, rgba(8, 10, 9, 0.75), rgba(8, 10, 9, 0.5) 35%, transparent 65%);
    }

    .servicio-casos__titulo {
        text-align: center;
        justify-content: center;
    }

    .servicio-casos__lista {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .caso-marca {
        min-width: 0;
    }

    .servicio-casos__mas {
        display: flex;
        width: fit-content;
        margin: 2rem auto 0;
        padding-inline: 0.35rem;
        border: 0;
        background: transparent;
        color: var(--color-blanco);
    }
}

@media (max-width: 760px) {
    .servicio-casos__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .animar .servicio-portada__titulo,
    .animar .servicio-portada__bajada,
    .animar .servicio-portada__accion,
    .animar .servicio-portada__figura,
    .animar [data-revelar] {
        translate: 0 0;
    }

    .animar [data-revelar="zoom"] {
        scale: 1;
    }
}

/* ---------- Mientras pasan por el tramo oscuro ---------- */

.tema-claro .indice-navegacion.esta-sobre-oscuro {
    --color-linea: rgba(255, 255, 255, 0.28);
    --color-linea-activa: rgba(255, 255, 255, 0.72);
    --color-linea-seccion: rgba(255, 255, 255, 0.22);
    --color-etiqueta: rgba(255, 255, 255, 0.64);
    --color-etiqueta-activa: #EDEDED;
    --color-red-hover: var(--color-naranja);
}

.tema-claro .cabecera__logo.esta-sobre-oscuro img {
    filter: none;
    opacity: 1;
}

/* ---------- Acordeón de los puntos (Contenido y producción) ---------- */

.acordeon-puntos {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(100%, 58rem);
    margin-inline: auto;
}

.panel {
    overflow: hidden;
    border-radius: var(--radio-sm);
    background-color: var(--color-naranja);
    transition: background-color 0.45s var(--curva-suave);
}

.panel.esta-abierto {
    background-color: var(--color-claro);
    box-shadow: 0 18px 40px -30px rgba(28, 28, 28, 0.6);
}

.panel__titulo {
    font: inherit;
    margin: 0;
}

.panel__boton {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.5vw, 1.75rem);
    width: 100%;
    padding: clamp(1rem, calc(2.6 * var(--vh-estable, 1vh)), 1.4rem) clamp(1.1rem, 3vw, 1.75rem);
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    color: var(--tinta);
    cursor: pointer;
}

.panel.esta-abierto .panel__boton {
    border-bottom: 1px solid rgba(28, 28, 28, 0.14);
}

.panel__nombre {
    font-family: var(--fuente-sans);
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* El signo: una cruz que se vuelve raya al abrir */
.panel__signo {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: auto;
}

.panel__signo::before,
.panel__signo::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background-color: currentColor;
    transition: rotate 0.45s var(--curva-suave);
}

.panel__signo::after {
    rotate: 90deg;
}

.panel.esta-abierto .panel__signo::after {
    rotate: 0deg;
}

.panel__cuerpo {
    padding: clamp(1.25rem, calc(3.5 * var(--vh-estable, 1vh)), 1.75rem) clamp(1.1rem, 3vw, 1.75rem);
}

.panel:not(.esta-abierto) .panel__cuerpo {
    display: none;
}

.panel.esta-abierto .panel__cuerpo {
    animation: panel-abrir 0.45s var(--curva-entrada) both;
}

@keyframes panel-abrir {
    from {
        opacity: 0;
        translate: 0 -8px;
    }
}

.panel__texto {
    max-width: 62ch;
    font-size: var(--texto-base);
    line-height: 1.75;
    color: var(--tinta-suave);
    text-wrap: pretty;
}

/* Ejemplos de Contenido y producción: el espacio no depende de la imagen. */
.acordeon-puntos--visual .panel__boton {
    min-height: 4.5rem;
    background-color: var(--color-naranja);
}

.panel__contenido {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    min-height: 22rem;
}

.panel__contenido > .panel__texto {
    margin: 0;
}

.panel__ejemplo {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    height: 22rem;
    margin: 0;
    padding-left: clamp(1rem, 2vw, 1.5rem);
}

.panel__visual {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
}

.panel__imagen {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.panel__imagen--enmarcada {
    height: auto;
    max-height: 100%;
    border-radius: var(--radio-sm);
    box-shadow: 0 12px 24px -18px rgba(28, 28, 28, 0.45);
}

@media (max-width: 760px) {
    .acordeon-puntos--visual .panel__boton {
        min-height: 5.5rem;
    }

    .panel__contenido {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(10rem, auto) 18rem;
        gap: 1rem;
        min-height: 0;
    }

    .panel__ejemplo {
        height: 18rem;
        padding: 1rem 0 0;
    }
}

@media (max-width: 480px) {
    .acordeon-puntos--visual .panel__boton {
        min-height: 7rem;
    }

    .panel__contenido {
        grid-template-rows: minmax(12rem, auto) 18rem;
    }
}

@media (max-width: 360px) {
    .acordeon-puntos--visual .panel__boton {
        min-height: 8rem;
    }
}

@media (hover: hover) {
    .panel:not(.esta-abierto) .panel__boton:hover {
        background-color: rgba(255, 255, 255, 0.18);
    }
}

.panel__boton:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .panel.esta-abierto .panel__cuerpo {
        animation: none;
    }
}