/* Estilos independientes para TramaViva. */

.tramaviva-page {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #1f2a24;
    background: #f7faf6;
}

.tramaviva-shell {
    width: min(100% - 32px, 960px);
    margin: 0 auto;
    padding: 48px 0;
}

/* Pantalla de acceso: estilos exclusivos, sin afectar la Home provisional. */
.tramaviva-login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    position: relative;
    isolation: isolate;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    color: #1E2D33;
    background: #F7F3EA;
    letter-spacing: 0;
    line-height: 1.6;
}

.tramaviva-login-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.tramaviva-login-motif {
    position: absolute;
    width: 390px;
    height: 390px;
    opacity: 0.08;
}

.tramaviva-login-motif--left {
    top: 12%;
    left: -145px;
    transform: rotate(-16deg);
}

.tramaviva-login-motif--right {
    right: -135px;
    bottom: 5%;
    transform: rotate(16deg);
}

.tramaviva-login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 470px;
    padding: 42px 38px 36px;
    border: 1px solid #E7DFCC;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 12px 40px rgb(30 45 51 / 5%);
}

.tramaviva-brand-header {
    text-align: center;
}

.tramaviva-brand-origin {
    margin: 0 0 26px;
    font-size: 10px;
    font-weight: 700;
    color: #5C6B73;
}

.tramaviva-brand-logo {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin: 0 auto 30px;
}

.tramaviva-login-title {
    margin: 0;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #0E4D47;
    text-wrap: balance;
}

.tramaviva-login-intro {
    margin: 14px 0 28px;
    font-size: 14px;
    color: #5C6B73;
}

.tramaviva-login-alert {
    margin: 0 0 22px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #FCE3DA;
    color: #A53F22;
}

.tramaviva-form-label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
}

.tramaviva-form-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #F2EEE4;
    color: #1E2D33;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tramaviva-form-input::placeholder {
    color: #5C6B73;
    opacity: 1;
}

.tramaviva-form-input:focus {
    border-color: #127A6E;
    outline: 2px solid #127A6E;
    outline-offset: 3px;
    background: #FFFFFF;
}

.tramaviva-form-submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    padding: 14px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #127A6E;
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.tramaviva-form-submit:hover,
.tramaviva-form-submit:active {
    background: #0E4D47;
}

.tramaviva-form-submit:focus-visible {
    outline: 2px solid #0E4D47;
    outline-offset: 3px;
}

.tramaviva-form-help {
    margin: 20px 0 0;
    font-size: 12px;
    color: #5C6B73;
    text-align: center;
}

@media (max-width: 480px) {
    .tramaviva-login-page {
        padding-block: 24px;
    }

    .tramaviva-login-card {
        padding: 32px 24px 28px;
    }

    .tramaviva-login-title {
        font-size: 24px;
    }

    .tramaviva-brand-origin {
        font-size: 9px;
        margin-bottom: 22px;
    }

    .tramaviva-brand-logo {
        margin-bottom: 26px;
    }

    .tramaviva-login-motif {
        width: 240px;
        height: 240px;
        opacity: 0.05;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tramaviva-form-input,
    .tramaviva-form-submit {
        transition: none;
    }
}

/* Home privada: selectores propios para preservar el acceso terminado. */
.tramaviva-home-page {
    margin: 0;
    background: #F7F3EA;
    color: #1E2D33;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.7;
}

.tramaviva-home-page *,
.tramaviva-home-page *::before,
.tramaviva-home-page *::after {
    box-sizing: border-box;
}

.tramaviva-home-page a:focus-visible,
.tramaviva-home-page button:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-home-container {
    width: min(100% - 64px, 1160px);
    margin-inline: auto;
}

.tramaviva-home-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E7DFCC;
}

.tramaviva-home-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 22px;
}

.tramaviva-home-brand {
    display: block;
    flex: 0 1 220px;
    min-width: 120px;
}

.tramaviva-home-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-home-account {
    min-width: 0;
    text-align: right;
}

.tramaviva-home-account p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tramaviva-home-logout {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #5C6B73;
    font-size: 12px;
    text-underline-offset: 4px;
}

/* Bienvenida: banda verde a todo el ancho. La sombra recortada extiende el fondo
   fuera del contenedor sin generar desplazamiento horizontal. */
.tramaviva-home-welcome {
    position: relative;
    isolation: isolate;
    padding-block: 56px;
    background: #0E4D47;
    box-shadow: 0 0 0 100vmax #0E4D47;
    clip-path: inset(0 -100vmax);
    color: #FFFFFF;
}

.tramaviva-home-eyebrow {
    margin: 0 0 14px;
    font-size: 10px;
    font-weight: 700;
    color: #5C6B73;
}

.tramaviva-home-welcome h1,
.tramaviva-home-intro h2,
.tramaviva-home-paths > h2,
.tramaviva-home-mission h2,
.tramaviva-home-path h3 {
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.tramaviva-home-welcome .tramaviva-home-eyebrow {
    margin-bottom: 16px;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #BFE3DC;
}

.tramaviva-home-welcome h1 {
    max-width: 900px;
    margin: 0 0 20px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.2vw + 10px, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.tramaviva-home-route {
    margin: 0 0 16px;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: clamp(17px, 0.6vw + 14px, 22px);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tramaviva-home-route span {
    padding-inline: 8px;
    color: #E0A332;
}

.tramaviva-home-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.tramaviva-home-countdown {
    margin: 0;
    padding: 6px 18px;
    border-radius: 999px;
    background: #E0A332;
    color: #1E2D33;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.tramaviva-home-dates {
    margin: 0;
    font-size: 15px;
    color: #DCEEEA;
}

.tramaviva-home-intro {
    max-width: 760px;
    margin-top: 32px;
}

.tramaviva-home-intro h2 {
    margin: 0 0 14px;
    font-size: 28px;
    color: #0E4D47;
}

.tramaviva-home-intro p {
    margin: 0 0 12px;
}

.tramaviva-home-invitation {
    color: #5C6B73;
    font-size: 13px;
}

.tramaviva-home-welcome-motif {
    position: absolute;
    right: 0;
    bottom: 42px;
    width: 180px;
    height: 180px;
    opacity: 0.30;
    z-index: -1;
}

.tramaviva-home-stage-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 24px;
}

.tramaviva-home-stage {
    position: relative;
    min-width: 0;
    padding: 38px 18px 18px;
    border-radius: 8px;
    color: #5C6B73;
}

.tramaviva-home-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 38px;
    right: -40px;
    border-top: 1px dashed #E7DFCC;
    pointer-events: none;
}

.tramaviva-home-stage-marker {
    position: absolute;
    top: 7px;
    left: 18px;
    width: 14px;
    height: 14px;
    border: 1px solid #5C6B73;
    border-radius: 50%;
    background: #F7F3EA;
    z-index: 1;
}

.tramaviva-home-stage h2 {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1.6;
}

.tramaviva-home-stage p {
    margin: 3px 0 0;
    font-size: 12px;
}

.tramaviva-home-stage--current {
    background: #E8F1EB;
    color: #0E4D47;
}

.tramaviva-home-stage--current .tramaviva-home-stage-marker {
    border-color: #127A6E;
    background: #127A6E;
}

.tramaviva-home-stage-status {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
}

html:has(#tramaviva-home-exploration) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html:has(#tramaviva-home-exploration) { scroll-behavior: auto; }
}

.tramaviva-home-paths {
    padding-block: 38px 44px;
    scroll-margin-top: 24px;
}

.tramaviva-home-paths > h2 {
    margin: 0 0 24px;
    font-size: 26px;
}

.tramaviva-home-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
}

.tramaviva-home-path {
    --path-color: #127A6E;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid #E7DFCC;
    border-top: 3px solid var(--path-color);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-home-path--territory { --path-color: #E0A332; }
.tramaviva-home-path--flora { --path-color: #5FAE45; }
.tramaviva-home-path--fauna { --path-color: #EC6A47; }
.tramaviva-home-path--activities { --path-color: #0E4D47; }
.tramaviva-home-path--life {
    --path-color: #5FAE45;
    position: relative;
}

.tramaviva-home-path--life::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -1px;
    width: calc(50% + 1px);
    height: 3px;
    border-top-left-radius: 8px;
    background: #EC6A47;
}
.tramaviva-home-path--water { --path-color: #2E95DB; }

.tramaviva-home-path-art {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin-bottom: 22px;
}

.tramaviva-home-path-icon {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: var(--path-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-home-path-icon--life {
    width: 64px;
}

.tramaviva-home-path-paw { stroke: #EC6A47; }
.tramaviva-home-path-leaf { stroke: #5FAE45; }

.tramaviva-home-path-art span {
    width: 42px;
    height: 8px;
    border-radius: 4px;
    background: var(--path-color);
    opacity: 0.45;
}

.tramaviva-home-path--life .tramaviva-home-path-art span {
    background: #5FAE45;
}

.tramaviva-home-path-label {
    margin: 0 0 10px;
    color: #5C6B73;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.tramaviva-home-path h3 {
    margin: 0 0 12px;
    font-size: 21px;
}

.tramaviva-home-path-description {
    margin: 0 0 22px;
    color: #5C6B73;
    font-size: 12px;
}

.tramaviva-home-path-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin-top: auto;
    border-top: 1px solid #E7DFCC;
    padding-top: 12px;
    color: #0E4D47;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.tramaviva-home-path-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.tramaviva-home-mission {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 32px;
    margin-bottom: 44px;
    border: 1px solid #E7DFCC;
    border-left: 3px solid #127A6E;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-home-mission-copy {
    max-width: 780px;
}

.tramaviva-home-mission h2 {
    margin: 0 0 14px;
    font-size: 26px;
    color: #0E4D47;
}

.tramaviva-home-mission-copy > p:not(.tramaviva-home-eyebrow) {
    margin: 0 0 16px;
    font-size: 13px;
}

.tramaviva-home-mission-items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    list-style: none;
    padding: 0;
    margin: 22px 0;
}

.tramaviva-home-mission-items li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
}

.tramaviva-home-mission-items li::before {
    content: "";
    flex: 0 0 7px;
    height: 18px;
    border-radius: 4px;
    background: #EC6A47;
}

.tramaviva-home-mission-items .tramaviva-home-mission-plant::before { background: #5FAE45; }
.tramaviva-home-mission-items .tramaviva-home-mission-water::before { background: #2E95DB; }
.tramaviva-home-mission-instruction { color: #5C6B73; }

.tramaviva-home-mission-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid #127A6E;
    border-radius: 8px;
    background: #127A6E;
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.tramaviva-home-mission-button:hover { background: #0E4D47; }

@media (max-width: 1050px) {
    .tramaviva-home-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tramaviva-home-welcome-motif { width: 120px; height: 120px; opacity: 0.0675; }
}

@media (max-width: 600px) {
    .tramaviva-home-container { width: calc(100% - 40px); }
    .tramaviva-home-header-inner { flex-wrap: wrap; gap: 12px; padding-block: 18px; }
    .tramaviva-home-brand { flex: 0 0 180px; }
    .tramaviva-home-account { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; }
    .tramaviva-home-logout { flex-shrink: 0; }
    .tramaviva-home-welcome { padding-block: 36px 32px; }
    .tramaviva-home-intro h2 { font-size: 26px; }
    .tramaviva-home-stage-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tramaviva-home-stage { padding: 18px 18px 18px 48px; }
    .tramaviva-home-stage-marker { top: 22px; left: 16px; }
    .tramaviva-home-stage:not(:last-child)::after { top: 42px; bottom: -32px; left: 23px; right: auto; border-top: 0; border-left: 1px dashed #E7DFCC; }
    .tramaviva-home-path-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .tramaviva-home-paths > h2, .tramaviva-home-mission h2 { font-size: 24px; }
    .tramaviva-home-path-art { margin-bottom: 16px; }
    .tramaviva-home-mission { padding: 24px 20px; }
    .tramaviva-home-mission-button { width: 100%; }
}

/* Territorio: estilos propios; la cabecera reutiliza la identidad de la Home. */
.tramaviva-territory-page {
    --territory-accent: #E0A332;
    --territory-tint: #F8EACB;
    --territory-ink: #8A5F12;
}

.tramaviva-territory-nav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.tramaviva-territory-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #5C6B73;
    font-size: 12px;
    text-underline-offset: 4px;
}

.tramaviva-territory-page h1,
.tramaviva-territory-page h2,
.tramaviva-territory-page h3 {
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.tramaviva-territory-page h2 { margin: 0 0 20px; font-size: 27px; color: #0E4D47; }
.tramaviva-territory-page h3 { margin: 14px 0 10px; font-size: 19px; }
.tramaviva-territory-page p { overflow-wrap: anywhere; }

.tramaviva-territory-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding-block: 48px 40px;
    background: transparent;
}

.tramaviva-territory-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    color: #5C6B73;
}

.tramaviva-territory-eyebrow::before {
    content: "";
    width: 26px;
    height: 8px;
    border-radius: 4px;
    background: #E0A332;
}

.tramaviva-territory-hero h1 { margin: 0 0 18px; font-size: 38px; color: #8A5F12; }
.tramaviva-territory-hero .tramaviva-territory-eyebrow { color: #8A5F12; }
.tramaviva-territory-hero-copy > p:not(.tramaviva-territory-eyebrow) { margin: 0 0 14px; }
.tramaviva-territory-subtitle { font-size: 19px; font-weight: 600; line-height: 1.5; }
.tramaviva-territory-hero-copy > p:last-child { color: #5C6B73; }
.tramaviva-territory-isotype { display: block; width: 100%; max-width: 260px; height: auto; justify-self: center; }
.tramaviva-territory-section { padding-block: 28px 38px; }
.tramaviva-territory-section-intro { margin: 0 0 28px; color: #5C6B73; }

.tramaviva-territory-section[aria-labelledby="tramaviva-territory-explorer-title"] { padding-bottom: 14px; }
.tramaviva-territory-section[aria-labelledby="tramaviva-territory-explorer-title"] > .tramaviva-territory-section-intro { margin-bottom: 16px; }

.tramaviva-territory-explorer {
    position: relative;
    isolation: isolate;
    padding: 16px 32px 8px;
    background: #F7F3EA;
}

.tramaviva-territory-explorer-course {
    display: none;
}

.tramaviva-territory-point-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

.tramaviva-territory-theme--arroyo,
.tramaviva-territory-theme--desembocadura,
.tramaviva-territory-theme--rio,
.tramaviva-territory-theme--gota { --territory-accent: #2E95DB; --territory-tint: #DCEDFA; --territory-ink: #165E91; }
.tramaviva-territory-theme--humedal { --territory-accent: #3C8F63; --territory-tint: #E1EFE5; --territory-ink: #256344; }
.tramaviva-territory-theme--cangrejal { --territory-accent: #E0A332; }
.tramaviva-territory-theme--flora { --territory-accent: #5FAE45; --territory-tint: #E2F1D8; --territory-ink: #326523; }
.tramaviva-territory-theme--fauna { --territory-accent: #EC6A47; --territory-tint: #FCE3DA; --territory-ink: #A53F22; }
.tramaviva-territory-theme--escucha { --territory-accent: #127A6E; --territory-tint: #E1F0EB; --territory-ink: #0E4D47; }

.tramaviva-territory-icon {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--territory-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-territory-point {
    min-width: 0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(30,45,51,.06);
    overflow: hidden;
}

.tramaviva-territory-point:last-child { grid-column: 2; }
.tramaviva-territory-point.tramaviva-territory-theme--arroyo { --territory-accent: #2E95DB; --point-header: #1C6FAE; }
.tramaviva-territory-point.tramaviva-territory-theme--desembocadura { --territory-accent: #247DBD; --point-header: #2477B4; }
.tramaviva-territory-point.tramaviva-territory-theme--rio { --territory-accent: #367FA8; --point-header: #327AA3; }
.tramaviva-territory-point.tramaviva-territory-theme--humedal { --point-header: #367F57; }
.tramaviva-territory-point.tramaviva-territory-theme--cangrejal { --point-header: #A26B00; }
.tramaviva-territory-point.tramaviva-territory-theme--flora { --point-header: #3A7426; }
.tramaviva-territory-point.tramaviva-territory-theme--fauna { --point-header: #C45234; }
.tramaviva-territory-point summary { display: flex; align-items: center; gap: 12px; height: 72px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.tramaviva-territory-point summary::-webkit-details-marker { display: none; }
.tramaviva-territory-point summary { background: var(--point-header, var(--territory-accent)); color: #FFFFFF; }
.tramaviva-territory-point summary .tramaviva-territory-icon { stroke: #FFFFFF; }
.tramaviva-territory-point summary:focus-visible { outline: 3px solid #127A6E; outline-offset: 4px; border-radius: 8px; }
.tramaviva-territory-point summary:hover { background: var(--point-header, var(--territory-accent)); }
.tramaviva-territory-point summary > span:first-of-type { overflow-wrap: anywhere; }
.tramaviva-territory-point p { margin: 0; padding: 18px 24px 24px; background: #FFFFFF; color: #1E2D33; font-size: 13px; }
.tramaviva-territory-point-toggle { position: relative; flex: 0 0 14px; width: 14px; height: 14px; margin-left: auto; }
.tramaviva-territory-point-toggle::before,
.tramaviva-territory-point-toggle::after { content: ""; position: absolute; background: #FFFFFF; border-radius: 1px; }
.tramaviva-territory-point-toggle::before { left: 0; top: 6px; width: 14px; height: 2px; }
.tramaviva-territory-point-toggle::after { top: 0; left: 6px; width: 2px; height: 14px; }
.tramaviva-territory-point[open] .tramaviva-territory-point-toggle::after { display: none; }

.tramaviva-territory-cangrejal-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 8px;
    color: #0E4D47;
    font-size: 13px;
    font-weight: 700;
    text-underline-offset: 4px;
}

.tramaviva-territory-cangrejal-link .tramaviva-territory-icon {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
}

.tramaviva-territory-connected { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 42px; }
.tramaviva-territory-connected > div { max-width: 860px; }
.tramaviva-territory-connected > div p { margin: 0 0 14px; }
.tramaviva-territory-connected > div p:last-child { margin-bottom: 0; }
.tramaviva-territory-muted { color: #5C6B73; }
.tramaviva-territory-connection-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 8px 0 0; }
.tramaviva-territory-connection-list .tramaviva-territory-theme--arroyo { --territory-accent: #2E95DB; }
.tramaviva-territory-connection-list .tramaviva-territory-theme--desembocadura { --territory-accent: #247DBD; }
.tramaviva-territory-connection-list .tramaviva-territory-theme--rio { --territory-accent: #367FA8; }
.tramaviva-territory-connection-list li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 36px; padding-inline: 8px; font-weight: 600; font-size: 14px; text-align: center; }
.tramaviva-territory-connection-list li::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 6px); top: 78px; width: 12px; height: 12px; border-radius: 50%; background: var(--territory-accent); box-shadow: 0 0 0 4px #F7F3EA; }
.tramaviva-territory-connection-list li:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 83px; width: 100%; border-top: 2px dashed #B8C7C0; }
.tramaviva-territory-connection-list .tramaviva-territory-icon { flex: 0 0 64px; width: 64px; height: 64px; padding: 16px; background: var(--territory-accent); stroke: #FFFFFF; border-radius: 50%; }
.tramaviva-territory-connection-list li > span { color: var(--territory-ink); overflow-wrap: anywhere; }

.tramaviva-territory-water { margin-block: 12px 22px; padding: 32px; border: 1px solid #B9D8ED; border-left: 3px solid #2E95DB; border-radius: 8px; background: #DCEDFA; }
.tramaviva-territory-water h2,
.tramaviva-territory-water-route { color: #165E91; }
.tramaviva-territory-water-route { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; list-style: none; margin: 22px 0 26px; padding: 0; font-size: 12px; }
.tramaviva-territory-water-route li { display: flex; align-items: center; }
.tramaviva-territory-water-route li:not(:last-child)::after { content: "→"; margin-inline: 14px; color: #2E95DB; }
.tramaviva-territory-water-route li:nth-child(n+6) { font-weight: 700; color: #0E4D47; }
.tramaviva-territory-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 50px; padding: 12px 20px; border-radius: 8px; background: #127A6E; color: #FFFFFF; font-size: 13px; font-weight: 700; text-decoration: none; }
.tramaviva-territory-button:hover { background: #0E4D47; }

.tramaviva-territory-four-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tramaviva-territory-observation,
.tramaviva-territory-next { min-width: 0; padding: 24px; border: 1px solid #E7DFCC; border-radius: 8px; background: #FFFFFF; }
.tramaviva-territory-observation { box-shadow: inset 0 3px var(--territory-accent); background: linear-gradient(var(--territory-tint) 68px, #FFFFFF 68px); }
.tramaviva-territory-observation h3,
.tramaviva-territory-next h3 { margin: 12px 0 8px; padding-top: 16px; }
.tramaviva-territory-observation h3 { text-transform: uppercase; font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 12px; line-height: 1.6; }
.tramaviva-territory-observation p,
.tramaviva-territory-next p { margin: 0; color: #5C6B73; font-size: 13px; }

.tramaviva-territory-question { margin-block: 24px 22px; padding: 40px 32px; border-block: 1px dashed #3C8F63; background: #E1EFE5; }
.tramaviva-territory-question h2 { color: #256344; }
.tramaviva-territory-question h2 { max-width: 760px; }
.tramaviva-territory-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; gap: 18px; padding: 0; margin: 28px 0 32px; }
.tramaviva-territory-options li { padding-left: 14px; border-left: 3px solid #3C8F63; font-weight: 600; font-size: 13px; }
.tramaviva-territory-question > p { max-width: 820px; margin: 0; color: #5C6B73; }
.tramaviva-territory-continue { padding-bottom: 56px; }
.tramaviva-territory-continue > h2 { margin-bottom: 32px; }
.tramaviva-territory-next { display: flex; flex-direction: column; align-items: flex-start; gap: 0; color: #1E2D33; border-top: 3px solid var(--territory-accent); background: linear-gradient(var(--territory-tint) 68px, #FFFFFF 68px); text-decoration: none; }
.tramaviva-territory-next-arrow { display: block; width: 100%; min-height: 44px; margin-top: auto; padding-top: 20px; color: #127A6E; }
.tramaviva-territory-next:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1050px) {
    .tramaviva-territory-hero { gap: 28px; }
    .tramaviva-territory-point-grid,
    .tramaviva-territory-four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tramaviva-territory-point:last-child { grid-column: 1 / -1; width: calc((100% - 24px) / 2); justify-self: center; }
}

@media (max-width: 700px) {
    .tramaviva-territory-connection-list { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .tramaviva-territory-connection-list li { flex-direction: row; gap: 18px; min-height: 88px; padding: 12px 0 12px 32px; text-align: left; }
    .tramaviva-territory-connection-list li::before { left: 2px; top: calc(50% - 6px); }
    .tramaviva-territory-connection-list li:not(:last-child)::after { left: 7px; top: 50%; width: 0; height: 100%; border-top: 0; border-left: 2px dashed #B8C7C0; }
    .tramaviva-territory-connection-list .tramaviva-territory-icon { flex-basis: 56px; width: 56px; height: 56px; padding: 12px; }
}

@media (max-width: 600px) {
    .tramaviva-territory-account { flex-direction: column; align-items: flex-start; gap: 0; }
    .tramaviva-territory-nav { justify-content: flex-start; }
    .tramaviva-territory-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 32px 16px; }
    .tramaviva-territory-hero h1 { font-size: 30px; }
    .tramaviva-territory-subtitle { font-size: 17px; }
    .tramaviva-territory-isotype { max-width: 180px; }
    .tramaviva-territory-page h2 { font-size: 24px; }
    .tramaviva-territory-explorer { padding: 12px 12px 8px; }
    .tramaviva-territory-point-grid,
    .tramaviva-territory-four-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tramaviva-territory-point:last-child { grid-column: auto; width: 100%; }
    .tramaviva-territory-point summary { padding: 16px 14px; gap: 10px; }
    .tramaviva-territory-point p { padding: 18px 20px 22px; }
    .tramaviva-territory-water { padding: 24px 20px; }
    .tramaviva-territory-water-route { flex-direction: column; align-items: flex-start; gap: 0; }
    .tramaviva-territory-water-route li { flex-direction: column; align-items: flex-start; }
    .tramaviva-territory-water-route li:not(:last-child)::after { content: "↓"; margin: 3px 0 3px 8px; }
    .tramaviva-territory-button { width: 100%; gap: 12px; }
    .tramaviva-territory-options { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tramaviva-territory-question { padding: 32px 20px; }
    .tramaviva-territory-options { margin-block: 24px 28px; }
}

/* Cangrejal y humedales: extension visual de Territorio, sin imagenes reales todavia. */
.tramaviva-cangrejal-page {
    --cangrejal-green: #3C8F63;
    --cangrejal-green-ink: #256344;
    --cangrejal-green-tint: #E1EFE5;
    --cangrejal-ochre: #E0A332;
    --cangrejal-ochre-ink: #8A5F12;
    --cangrejal-ochre-tint: #F8EACB;
    --cangrejal-blue: #2E95DB;
    --cangrejal-blue-tint: #DCEDFA;
    --cangrejal-coral: #EC6A47;
    --cangrejal-coral-tint: #FCE3DA;
}

.tramaviva-cangrejal-page .tramaviva-territory-eyebrow::before {
    background: var(--cangrejal-green);
}

.tramaviva-cangrejal-page .tramaviva-territory-theme--agua {
    --territory-accent: #2E95DB;
    --territory-tint: #DCEDFA;
    --territory-ink: #165E91;
}

.tramaviva-cangrejal-theme--agua {
    --territory-accent: #2E95DB;
    --territory-tint: #DCEDFA;
    --territory-ink: #165E91;
}

.tramaviva-cangrejal-theme--vida,
.tramaviva-cangrejal-theme--juncos,
.tramaviva-cangrejal-theme--escucha,
.tramaviva-cangrejal-theme--carbono {
    --territory-accent: #3C8F63;
    --territory-tint: #E1EFE5;
    --territory-ink: #256344;
}

.tramaviva-cangrejal-theme--suelo,
.tramaviva-cangrejal-theme--barro,
.tramaviva-cangrejal-theme--cuevas,
.tramaviva-cangrejal-theme--bolitas {
    --territory-accent: #E0A332;
    --territory-tint: #F8EACB;
    --territory-ink: #8A5F12;
}

.tramaviva-cangrejal-theme--cangrejo {
    --territory-accent: #EC6A47;
    --territory-tint: #FCE3DA;
    --territory-ink: #A53F22;
}

.tramaviva-cangrejal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr);
    align-items: center;
    gap: 48px;
    padding-block: 48px 34px;
}

.tramaviva-cangrejal-hero h1 {
    margin: 0 0 18px;
    color: var(--cangrejal-green-ink);
    font-size: 38px;
}

.tramaviva-cangrejal-hero .tramaviva-territory-eyebrow {
    color: var(--cangrejal-green-ink);
}

.tramaviva-cangrejal-hero-copy > p:not(.tramaviva-territory-eyebrow) {
    max-width: 760px;
    margin: 0 0 14px;
}

.tramaviva-cangrejal-hero-copy > p:last-child {
    color: #5C6B73;
}

.tramaviva-cangrejal-hero-art {
    min-width: 0;
    justify-self: end;
    width: min(100%, 360px);
}

.tramaviva-cangrejal-hero-art svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-cangrejal-art-water {
    fill: var(--cangrejal-blue-tint);
}

.tramaviva-cangrejal-art-mud {
    fill: var(--cangrejal-ochre-tint);
}

.tramaviva-cangrejal-art-line,
.tramaviva-cangrejal-art-reed {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-cangrejal-art-line {
    stroke: var(--cangrejal-blue);
    stroke-width: 3;
    stroke-dasharray: 4 10;
    opacity: .55;
}

.tramaviva-cangrejal-art-reed {
    stroke: var(--cangrejal-green);
    stroke-width: 7;
}

.tramaviva-cangrejal-art-footprints {
    fill: var(--cangrejal-coral);
    opacity: .72;
}

.tramaviva-cangrejal-lead {
    max-width: 860px;
    margin: 0 0 26px;
}

.tramaviva-cangrejal-three-grid,
.tramaviva-cangrejal-species-grid,
.tramaviva-cangrejal-next-grid {
    display: grid;
    gap: 18px;
}

.tramaviva-cangrejal-three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tramaviva-cangrejal-concept,
.tramaviva-cangrejal-signal,
.tramaviva-cangrejal-species {
    min-width: 0;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-cangrejal-concept {
    padding: 24px;
    border-top: 3px solid var(--territory-accent);
    background: linear-gradient(var(--territory-tint) 96px, #FFFFFF 96px);
}

.tramaviva-cangrejal-microtrama {
    width: 104px;
    margin: 8px 20px 0 auto;
    opacity: .3;
    pointer-events: none;
}

.tramaviva-cangrejal-microtrama svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-cangrejal-microtrama--secondary {
    margin-top: 0;
    margin-right: 48px;
}

.tramaviva-cangrejal-concept h3,
.tramaviva-cangrejal-signal h3,
.tramaviva-cangrejal-species h3 {
    margin: 12px 0 8px;
}

.tramaviva-cangrejal-concept h3,
.tramaviva-cangrejal-signal h3 {
    color: var(--territory-ink);
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-transform: uppercase;
}

.tramaviva-cangrejal-concept p,
.tramaviva-cangrejal-species p {
    margin: 0;
    color: #5C6B73;
    font-size: 13px;
}

.tramaviva-cangrejal-concept p {
    padding-top: 16px;
}

.tramaviva-cangrejal-journey {
    padding-block: 34px 42px;
}

.tramaviva-cangrejal-journey-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
}

.tramaviva-cangrejal-journey-list li {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    padding-inline: 10px;
    color: var(--territory-ink);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.tramaviva-cangrejal-journey-list li::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% - 6px);
    top: 78px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--territory-accent);
    box-shadow: 0 0 0 4px #F7F3EA;
}

.tramaviva-cangrejal-journey-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 83px;
    width: 100%;
    border-top: 2px dashed #B8C7C0;
}

.tramaviva-cangrejal-journey-list .tramaviva-territory-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 16px;
    border-radius: 50%;
    background: var(--territory-accent);
    stroke: #FFFFFF;
}

.tramaviva-cangrejal-panel {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
    gap: 28px;
    align-items: start;
    margin-block: 12px 32px;
    padding: 32px;
    border: 1px solid #E7DFCC;
    border-left: 3px solid var(--cangrejal-ochre);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-cangrejal-panel p {
    margin: 0 0 14px;
}

.tramaviva-cangrejal-panel .tramaviva-cangrejal-question {
    max-width: 560px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #E7DFCC;
    color: var(--cangrejal-ochre-ink);
    font-weight: 700;
}

.tramaviva-cangrejal-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tramaviva-cangrejal-signal {
    --territory-accent: #8A5F12;
    --territory-ink: #8A5F12;
    padding: 20px;
    background: linear-gradient(var(--territory-tint) 60px, #FFFFFF 60px);
}

.tramaviva-cangrejal-signal.tramaviva-cangrejal-theme--cuevas {
    --territory-tint: #F8EACB;
}

.tramaviva-cangrejal-signal.tramaviva-cangrejal-theme--bolitas {
    --territory-tint: #F2D89A;
}

.tramaviva-cangrejal-signal.tramaviva-cangrejal-theme--barro {
    --territory-tint: #EBC66E;
}

.tramaviva-cangrejal-signal.tramaviva-cangrejal-theme--cangrejo {
    --territory-tint: #F5E4BB;
}

.tramaviva-cangrejal-signal .tramaviva-territory-icon {
    width: 30px;
    height: 30px;
}

.tramaviva-cangrejal-signal p {
    margin: 0;
    padding-top: 10px;
    color: #5C6B73;
    font-size: 13px;
}

.tramaviva-cangrejal-four-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Bandas de texto con icono: viaje de las larvas y cuidado del cangrejal. */
.tramaviva-cangrejal-trip,
.tramaviva-cangrejal-care {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-block: 12px 32px;
    padding: 28px 32px;
    border-radius: 8px;
}

.tramaviva-cangrejal-trip {
    border: 1px solid #C9E1F2;
    background: var(--cangrejal-blue-tint);
}

.tramaviva-cangrejal-care {
    border: 1px solid #E7DFCC;
    border-left: 3px solid var(--cangrejal-coral);
    background: #FFFFFF;
}

.tramaviva-cangrejal-trip .tramaviva-territory-icon,
.tramaviva-cangrejal-care .tramaviva-territory-icon {
    width: 64px;
    height: 64px;
    padding: 16px;
    border-radius: 50%;
    stroke: #FFFFFF;
}

.tramaviva-cangrejal-trip .tramaviva-territory-icon { background: var(--cangrejal-blue); }
.tramaviva-cangrejal-care .tramaviva-territory-icon { background: var(--cangrejal-coral); }

.tramaviva-cangrejal-trip h2,
.tramaviva-cangrejal-care h2 {
    margin: 4px 0 10px;
}

.tramaviva-cangrejal-trip h2 { color: #165E91; }
.tramaviva-cangrejal-care h2 { color: #A53F22; }

.tramaviva-cangrejal-trip p,
.tramaviva-cangrejal-care p {
    max-width: 820px;
    margin: 0 0 10px;
}

.tramaviva-cangrejal-care .tramaviva-cangrejal-care-tip {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed #E7DFCC;
    color: #A53F22;
    font-weight: 700;
}

/* Para docentes: informacion ampliada, videos a pedido, agradecimiento y fuentes. */
.tramaviva-cangrejal-teachers {
    margin-block: 40px 24px;
    padding: 36px 32px;
    border: 1px solid #D5E5E1;
    border-top: 3px solid #127A6E;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-cangrejal-teachers .tramaviva-territory-eyebrow { color: #127A6E; }
.tramaviva-cangrejal-teachers .tramaviva-territory-eyebrow::before { background: #127A6E; }
.tramaviva-cangrejal-teachers h2 { margin: 0 0 12px; color: #0F5F56; }

.tramaviva-cangrejal-teachers h3 {
    margin: 0;
    color: #0F5F56;
    font-size: 18px;
}

.tramaviva-cangrejal-more {
    margin-bottom: 32px;
    border: 1px solid #D5E5E1;
    border-radius: 8px;
    background: #F4F9F7;
}

.tramaviva-cangrejal-more summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 20px;
    color: #0F5F56;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.tramaviva-cangrejal-more summary::-webkit-details-marker { display: none; }

.tramaviva-cangrejal-more summary::after {
    content: "+";
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
}

.tramaviva-cangrejal-more[open] summary::after { content: "−"; }

.tramaviva-cangrejal-more summary:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 3px;
    border-radius: 8px;
}

.tramaviva-cangrejal-more summary .tramaviva-territory-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    stroke: #127A6E;
}

.tramaviva-cangrejal-more-body {
    padding: 4px 24px 24px;
    border-top: 1px solid #D5E5E1;
}

.tramaviva-cangrejal-more-body h3 {
    margin-top: 20px;
    font-size: 15px;
}

.tramaviva-cangrejal-more-body p,
.tramaviva-cangrejal-more-body li {
    max-width: 860px;
    color: #3F4D55;
    font-size: 14px;
}

.tramaviva-cangrejal-more-body p { margin: 8px 0 0; }
.tramaviva-cangrejal-more-body ul { margin: 8px 0 0; padding-left: 20px; }
.tramaviva-cangrejal-more-body li + li { margin-top: 6px; }

.tramaviva-cangrejal-videos-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.tramaviva-cangrejal-videos-head .tramaviva-territory-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    stroke: #127A6E;
}

.tramaviva-cangrejal-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tramaviva-cangrejal-video {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-cangrejal-video-frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0F2A26;
}

.tramaviva-cangrejal-video-frame img,
.tramaviva-cangrejal-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tramaviva-cangrejal-video-frame img {
    object-fit: cover;
    transition: transform .2s ease, opacity .2s ease;
}

.tramaviva-cangrejal-video-play {
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(18, 122, 110, .92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.tramaviva-cangrejal-video-play::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 19px;
    border-block: 11px solid transparent;
    border-left: 17px solid #FFFFFF;
}

.tramaviva-cangrejal-video-duration {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.tramaviva-cangrejal-video-frame:hover img { transform: scale(1.03); opacity: .9; }

.tramaviva-cangrejal-video-frame:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: -3px;
}

.tramaviva-cangrejal-video-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.tramaviva-cangrejal-video-meta {
    margin: 0 0 6px;
    color: #127A6E;
    font-size: 12px;
    font-weight: 600;
}

.tramaviva-cangrejal-video-copy h4 {
    margin: 0 0 8px;
    color: #1F2A30;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.3;
}

.tramaviva-cangrejal-video-copy > p:not(.tramaviva-cangrejal-video-meta) {
    margin: 0 0 14px;
    color: #5C6B73;
    font-size: 13px;
}

.tramaviva-cangrejal-video-link {
    margin-top: auto;
    color: #127A6E;
    font-size: 13px;
    font-weight: 600;
}

.tramaviva-cangrejal-thanks {
    margin-top: 32px;
    padding: 24px 28px;
    border-left: 3px solid var(--cangrejal-ochre);
    border-radius: 8px;
    background: var(--cangrejal-ochre-tint);
}

.tramaviva-cangrejal-thanks h3 { color: var(--cangrejal-ochre-ink); }
.tramaviva-cangrejal-thanks p { max-width: 900px; margin: 10px 0 0; }
.tramaviva-cangrejal-thanks .tramaviva-cangrejal-thanks-note { color: #5C6B73; font-size: 13px; }

.tramaviva-cangrejal-sources { margin-top: 32px; }

.tramaviva-cangrejal-sources ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.tramaviva-cangrejal-sources li {
    padding: 10px 0;
    border-bottom: 1px solid #EEE7D8;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.tramaviva-cangrejal-sources li span {
    display: block;
    color: #5C6B73;
    font-size: 12px;
}

.tramaviva-cangrejal-sources a { color: #0F5F56; }

@media print {
    .tramaviva-cangrejal-video-frame { display: none; }
}

.tramaviva-cangrejal-species-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tramaviva-cangrejal-species {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 22px;
    padding: 20px;
    border-top: 3px solid var(--cangrejal-coral);
}

.tramaviva-cangrejal-species--juncal {
    border-top-color: var(--cangrejal-green);
}

.tramaviva-cangrejal-photo-slot {
    display: grid;
    place-items: center;
    min-height: 132px;
    border: 1px dashed #D8CDB7;
    border-radius: 8px;
    background: #F8F1E4;
}

.tramaviva-cangrejal-species--juncal .tramaviva-cangrejal-photo-slot {
    background: var(--cangrejal-green-tint);
}

.tramaviva-cangrejal-photo-slot .tramaviva-territory-icon {
    width: 58px;
    height: 58px;
    stroke: var(--cangrejal-coral);
}

.tramaviva-cangrejal-species--juncal .tramaviva-cangrejal-photo-slot .tramaviva-territory-icon {
    stroke: var(--cangrejal-green);
}

.tramaviva-cangrejal-scientific {
    margin-bottom: 8px;
    color: #5C6B73;
    font-size: 12px;
    font-style: italic;
}

.tramaviva-cangrejal-close-question {
    border-block-color: var(--cangrejal-green);
    background: var(--cangrejal-green-tint);
}

.tramaviva-cangrejal-close-question h2 {
    color: var(--cangrejal-green-ink);
}

.tramaviva-cangrejal-next-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1050px) {
    .tramaviva-cangrejal-hero {
        gap: 28px;
    }

    .tramaviva-cangrejal-three-grid,
    .tramaviva-cangrejal-four-grid,
    .tramaviva-cangrejal-species-grid,
    .tramaviva-cangrejal-next-grid,
    .tramaviva-cangrejal-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tramaviva-cangrejal-next-grid .tramaviva-territory-next:last-child {
        grid-column: 1 / -1;
        width: calc((100% - 18px) / 2);
        justify-self: center;
    }
}

@media (max-width: 760px) {
    .tramaviva-cangrejal-journey-list {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .tramaviva-cangrejal-journey-list li {
        flex-direction: row;
        gap: 18px;
        min-height: 88px;
        padding: 12px 0 12px 32px;
        text-align: left;
    }

    .tramaviva-cangrejal-journey-list li::before {
        left: 2px;
        top: calc(50% - 6px);
    }

    .tramaviva-cangrejal-journey-list li:not(:last-child)::after {
        left: 7px;
        top: 50%;
        width: 0;
        height: 100%;
        border-top: 0;
        border-left: 2px dashed #B8C7C0;
    }

    .tramaviva-cangrejal-journey-list .tramaviva-territory-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        padding: 12px;
    }

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

@media (max-width: 600px) {
    .tramaviva-cangrejal-microtrama {
        width: 64px;
        margin-right: 8px;
    }

    .tramaviva-cangrejal-microtrama--secondary {
        display: none;
    }

    .tramaviva-cangrejal-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-block: 32px 18px;
    }

    .tramaviva-cangrejal-hero h1 {
        font-size: 30px;
    }

    .tramaviva-cangrejal-hero-art {
        justify-self: center;
        width: min(100%, 280px);
    }

    .tramaviva-cangrejal-three-grid,
    .tramaviva-cangrejal-four-grid,
    .tramaviva-cangrejal-species-grid,
    .tramaviva-cangrejal-next-grid,
    .tramaviva-cangrejal-signal-grid,
    .tramaviva-cangrejal-video-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tramaviva-cangrejal-trip,
    .tramaviva-cangrejal-care {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 24px 20px;
    }

    .tramaviva-cangrejal-trip .tramaviva-territory-icon,
    .tramaviva-cangrejal-care .tramaviva-territory-icon {
        width: 52px;
        height: 52px;
        padding: 12px;
    }

    .tramaviva-cangrejal-teachers {
        padding: 28px 20px;
    }

    .tramaviva-cangrejal-more-body {
        padding: 4px 16px 20px;
    }

    .tramaviva-cangrejal-panel {
        padding: 24px 20px;
    }

    .tramaviva-cangrejal-species {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }

    .tramaviva-cangrejal-photo-slot {
        min-height: 150px;
    }

    .tramaviva-cangrejal-next-grid .tramaviva-territory-next:last-child {
        grid-column: auto;
        width: 100%;
    }
}

@media (max-width: 360px) {
    .tramaviva-cangrejal-concept,
    .tramaviva-cangrejal-signal,
    .tramaviva-cangrejal-species {
        padding-inline: 16px;
    }

    .tramaviva-cangrejal-panel {
        padding-inline: 16px;
    }
}

/* Fauna: catalogo privado y senales de vida. */
.tramaviva-fauna-page {
    --territory-accent: #EC6A47;
    --territory-tint: #FCE3DA;
    --territory-ink: #A53F22;
}

.tramaviva-fauna-page .tramaviva-territory-eyebrow {
    color: #A53F22;
}

.tramaviva-fauna-page .tramaviva-territory-eyebrow::before {
    background: #EC6A47;
}

.tramaviva-fauna-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 64px;
    padding-block: 48px 40px;
}

.tramaviva-fauna-hero h1 {
    margin: 0 0 18px;
    color: #A53F22;
    font-size: 36px;
}

.tramaviva-fauna-hero .tramaviva-territory-subtitle {
    margin: 0 0 16px;
}

.tramaviva-fauna-intro {
    max-width: 720px;
    margin: 0;
    color: #5C6B73;
}

.tramaviva-fauna-microtrama {
    pointer-events: none;
    opacity: .3;
}

.tramaviva-fauna-microtrama svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-fauna-microtrama--hero {
    width: 220px;
    max-width: 100%;
    justify-self: center;
}

.tramaviva-fauna-microtrama--small {
    width: 88px;
    margin: 24px 24px 0 auto;
}

.tramaviva-fauna-catalog {
    padding-block: 24px 16px;
}

.tramaviva-fauna-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.tramaviva-fauna-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 18px;
    border: 1px solid #E7DFCC;
    border-radius: 6px;
    background: #FFFFFF;
    color: #5C6B73;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.tramaviva-fauna-filter:hover {
    border-color: #EC6A47;
    color: #A53F22;
}

.tramaviva-fauna-filter.is-selected {
    border-color: #EC6A47;
    background: #FCE3DA;
    color: #A53F22;
}

.tramaviva-fauna-page a:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-fauna-empty {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 36px 28px;
    border-block: 1px solid #ECD5CB;
}

.tramaviva-fauna-empty > .tramaviva-territory-icon {
    width: 64px;
    height: 64px;
    padding: 14px;
    border-radius: 50%;
    background: #FCE3DA;
    stroke: #A53F22;
}

.tramaviva-fauna-empty h3 {
    margin: 0 0 12px;
    color: #A53F22;
    font-size: 22px;
}

.tramaviva-fauna-empty p {
    max-width: 660px;
    margin: 0;
    color: #5C6B73;
    font-size: 14px;
}

.tramaviva-fauna-show-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 12px;
    color: #127A6E;
    font-size: 13px;
}

.tramaviva-fauna-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.tramaviva-fauna-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgb(30 45 51 / 3%);
}

.tramaviva-fauna-card:focus-within {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-fauna-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 18px;
    color: #A53F22;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
    text-underline-offset: 3px;
}

.tramaviva-fauna-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tramaviva-fauna-card-link span {
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-fauna-card:hover {
        box-shadow: 0 5px 14px rgb(30 45 51 / 7%);
    }

    .tramaviva-fauna-card:hover .tramaviva-fauna-card-link {
        text-decoration: underline;
    }
}

.tramaviva-fauna-photo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 4 / 3;
    background: #FCE3DA;
}

.tramaviva-fauna-photo-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tramaviva-fauna-card-body {
    padding: 20px;
}

.tramaviva-fauna-card h3 {
    margin: 0 0 8px;
    color: #1E2D33;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    text-wrap: wrap;
}

.tramaviva-fauna-scientific {
    margin: 0;
    color: #5C6B73;
    font-size: 12px;
}

.tramaviva-fauna-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.tramaviva-fauna-badge {
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    background: #E1F0EB;
    color: #0E4D47;
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tramaviva-fauna-badge--grupo {
    background: #FCE3DA;
    color: #A53F22;
}

.tramaviva-fauna-badge--agua {
    background: #DCEDFA;
    color: #165E91;
}

.tramaviva-fauna-badge--humedal {
    background: #E1EFE5;
    color: #256344;
}

.tramaviva-fauna-badge--cangrejal {
    background: #F8EACB;
    color: #8A5F12;
}

.tramaviva-fauna-badge--arena {
    background: #F8EACB;
    color: #8A5F12;
}

.tramaviva-fauna-badge--monte {
    background: #E2F1D8;
    color: #326523;
}

/* Ambiente todavia sin tema asignado: neutro explicito, igual en catalogo y ficha. */
.tramaviva-fauna-badge--otro {
    background: #ECEFEE;
    color: #3F4C4A;
}

.tramaviva-fauna-section-intro {
    margin: 0 0 28px;
    color: #5C6B73;
}

.tramaviva-fauna-sign--sonido {
    --territory-accent: #127A6E;
    --territory-tint: #E1F0EB;
}

.tramaviva-fauna-sign--cueva {
    --territory-accent: #C45C35;
    --territory-tint: #F8E8DC;
}

.tramaviva-fauna-sign--restos {
    --territory-tint: #FAEAE4;
}

.tramaviva-fauna-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.tramaviva-fauna-next--humedal {
    --territory-accent: #3C8F63;
    --territory-tint: #E1EFE5;
    --territory-ink: #256344;
}

.tramaviva-fauna-next--flora {
    --territory-accent: #5FAE45;
    --territory-tint: #E2F1D8;
    --territory-ink: #326523;
}

.tramaviva-fauna-next--mapa {
    --territory-accent: #E0A332;
    --territory-tint: #F8EACB;
    --territory-ink: #8A5F12;
}

.tramaviva-fauna-page article.tramaviva-territory-next:hover h3 {
    text-decoration: none;
}

.tramaviva-fauna-coming {
    display: block;
    margin-top: auto;
    padding-top: 20px;
    min-height: 44px;
    color: #5C6B73;
    font-size: 11px;
}

/* Flora: catalogo privado y observacion vegetal. */
.tramaviva-flora-page {
    --territory-accent: #5FAE45;
    --territory-tint: #E2F1D8;
    --territory-ink: #3A7426;
}

.tramaviva-flora-page .tramaviva-territory-eyebrow {
    color: #3A7426;
}

.tramaviva-flora-page .tramaviva-territory-eyebrow::before {
    background: #5FAE45;
}

.tramaviva-flora-page a:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-flora-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 58px;
    padding-block: 48px 40px;
}

.tramaviva-flora-hero h1 {
    margin: 0 0 18px;
    color: #3A7426;
    font-size: 38px;
}

.tramaviva-flora-hero .tramaviva-territory-subtitle {
    margin: 0 0 16px;
}

.tramaviva-flora-intro {
    max-width: 720px;
    margin: 0;
    color: #5C6B73;
}

.tramaviva-flora-hero-art {
    width: 236px;
    max-width: 100%;
    justify-self: center;
    opacity: .9;
}

.tramaviva-flora-hero-art svg,
.tramaviva-flora-microtrama svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-flora-leaf-main {
    fill: #E2F1D8;
    stroke: #5FAE45;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-flora-line {
    fill: none;
    stroke: #3A7426;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-flora-catalog {
    padding-block: 24px 16px;
}

.tramaviva-flora-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.tramaviva-flora-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 18px;
    border: 1px solid #E7DFCC;
    border-radius: 6px;
    background: #FFFFFF;
    color: #5C6B73;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.tramaviva-flora-filter:hover {
    border-color: #5FAE45;
    color: #3A7426;
}

.tramaviva-flora-filter.is-selected {
    border-color: #5FAE45;
    background: #E2F1D8;
    color: #3A7426;
}

.tramaviva-flora-empty {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 38px 28px;
    border-block: 1px solid #CFE5C4;
    background:
        linear-gradient(90deg, rgb(226 241 216 / 52%), rgb(247 243 234 / 0%) 42%),
        #F7F3EA;
}

.tramaviva-flora-empty > .tramaviva-territory-icon {
    width: 70px;
    height: 70px;
    padding: 16px;
    border-radius: 50%;
    background: #E2F1D8;
    stroke: #3A7426;
}

.tramaviva-flora-empty h3 {
    margin: 0 0 12px;
    color: #3A7426;
    font-size: 22px;
}

.tramaviva-flora-empty p {
    max-width: 660px;
    margin: 0;
    color: #5C6B73;
    font-size: 14px;
}

.tramaviva-flora-show-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 12px;
    color: #127A6E;
    font-size: 13px;
}

.tramaviva-flora-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.tramaviva-flora-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgb(30 45 51 / 3%);
}

.tramaviva-flora-card:focus-within {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-flora-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 18px;
    color: #127A6E;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
    text-underline-offset: 3px;
}

.tramaviva-flora-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tramaviva-flora-card-link span {
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-flora-card {
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    .tramaviva-flora-card:hover {
        box-shadow: 0 5px 14px rgb(30 45 51 / 7%);
        transform: translateY(-1px);
    }

    .tramaviva-flora-card:hover .tramaviva-flora-card-link {
        text-decoration: underline;
    }
}

.tramaviva-flora-photo-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #E2F1D8;
}

.tramaviva-flora-photo-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tramaviva-flora-card-body {
    padding: 20px;
}

.tramaviva-flora-card h3 {
    margin: 0 0 8px;
    color: #1E2D33;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    text-wrap: wrap;
}

.tramaviva-flora-scientific {
    margin: 0;
    color: #5C6B73;
    font-size: 12px;
}

.tramaviva-flora-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.tramaviva-flora-badge {
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    background: #E2F1D8;
    color: #3A7426;
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tramaviva-flora-badge--agua {
    background: #DCEDFA;
    color: #165E91;
}

.tramaviva-flora-badge--humedal {
    background: #E1EFE5;
    color: #256344;
}

.tramaviva-flora-badge--cangrejal {
    background: #F8EACB;
    color: #8A5F12;
}

.tramaviva-flora-badge--arena {
    background: #F8EACB;
    color: #8A5F12;
}

.tramaviva-flora-badge--monte {
    background: #E2F1D8;
    color: #326523;
}

/* Ambiente todavia sin tema asignado: neutro explicito, igual en catalogo y ficha. */
.tramaviva-flora-badge--otro {
    background: #ECEFEE;
    color: #3F4C4A;
}

.tramaviva-flora-card-note {
    margin: 16px 0 0;
    color: #5C6B73;
    font-size: 12px;
    line-height: 1.65;
}

.tramaviva-flora-microtrama {
    width: 88px;
    margin: 24px 24px 0 auto;
    opacity: .32;
    pointer-events: none;
}

.tramaviva-flora-look {
    position: relative;
}

.tramaviva-flora-look .tramaviva-territory-observation {
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 3px 12px rgba(25, 55, 40, 0.06);
}

.tramaviva-flora-look-header {
    margin: -24px -24px 24px;
    padding: 24px;
    background: var(--territory-accent);
}

.tramaviva-flora-look-header .tramaviva-territory-icon {
    stroke: #FFFFFF;
}

.tramaviva-flora-look-header h3 {
    margin-bottom: 0;
    color: #FFFFFF;
}

.tramaviva-flora-look--hoja {
    --territory-accent: #3A7426;
    --territory-tint: #E2F1D8;
    --territory-ink: #3A7426;
}

.tramaviva-flora-look--tallo {
    --territory-accent: #127A6E;
    --territory-tint: #E1F0EB;
    --territory-ink: #0E4D47;
}

.tramaviva-flora-look--flor {
    --territory-accent: #AA6500;
    --territory-tint: #F8EACB;
    --territory-ink: #8A5F12;
}

.tramaviva-flora-look--suelo {
    --territory-accent: #367F57;
    --territory-tint: #E1EFE5;
    --territory-ink: #256344;
}

.tramaviva-flora-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.tramaviva-flora-next--fauna {
    --territory-accent: #EC6A47;
    --territory-tint: #FCE3DA;
    --territory-ink: #A53F22;
}

.tramaviva-flora-next--humedal {
    --territory-accent: #3C8F63;
    --territory-tint: #E1EFE5;
    --territory-ink: #256344;
}

.tramaviva-flora-next--agua {
    --territory-accent: #2E95DB;
    --territory-tint: #DCEDFA;
    --territory-ink: #165E91;
}

/* Flora: ficha dinamica de planta. */
.tramaviva-flora-ficha-page {
    --flora-green: #5FAE45;
    --flora-green-dark: #3A7426;
    --flora-green-soft: #E2F1D8;
    --flora-teal: #127A6E;
    --flora-teal-dark: #0E4D47;
    --flora-wetland: #367F57;
    --flora-coral: #EC6A47;
    --flora-blue: #2E95DB;
    --flora-ochre: #E0A332;
}

.tramaviva-flora-ficha-page main {
    overflow-wrap: anywhere;
}

.tramaviva-flora-ficha-stack {
    display: grid;
    gap: 30px;
    padding-bottom: 30px;
}

.tramaviva-flora-ficha-hero + .tramaviva-flora-ficha-stack {
    margin-top: -8px;
}

.tramaviva-flora-ficha-grid {
    display: grid;
    gap: 24px;
}

.tramaviva-flora-ficha-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tramaviva-flora-ficha-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tramaviva-flora-ficha-grid > :only-child {
    grid-column: 1 / -1;
}

.tramaviva-flora-ficha-grid > *,
.tramaviva-flora-ficha-full > *,
.tramaviva-flora-ficha-hero-copy {
    min-width: 0;
}

.tramaviva-flora-ficha-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    align-items: end;
    gap: 56px;
    padding-block: 50px 34px;
}

.tramaviva-flora-ficha-hero h1 {
    margin: 0 0 10px;
    color: var(--flora-green-dark);
    font-size: 42px;
}

.tramaviva-flora-ficha-scientific {
    margin: 0;
    color: #5C6B73;
    font-size: 18px;
    line-height: 1.5;
}

.tramaviva-flora-ficha-badges {
    margin-top: 22px;
}

.tramaviva-flora-ficha-presence {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #E1F0EB;
    color: var(--flora-teal-dark);
    font-size: 12px;
    font-weight: 700;
}

.tramaviva-flora-ficha-presence .tramaviva-territory-icon {
    width: 22px;
    height: 22px;
    stroke: var(--flora-teal);
}

.tramaviva-flora-ficha-lead {
    margin-top: 24px;
    text-align: left;
}

.tramaviva-flora-ficha-lead p {
    margin: 0;
    color: #1E2D33;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
}

.tramaviva-flora-ficha-photo {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #CFE5C4;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 5%);
}

/* Foto completa, sin recorte ni ampliacion: verticales y cuadradas se centran. */
.tramaviva-flora-ficha-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(78vh, 640px);
    margin-inline: auto;
}

.tramaviva-flora-ficha-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border: 1px solid #E7DFCC;
    border-left: 3px solid var(--flora-green);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 4%);
}

.tramaviva-flora-ficha-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tramaviva-flora-ficha-panel-heading .tramaviva-territory-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    stroke: var(--flora-green-dark);
}

.tramaviva-flora-ficha-panel h2,
.tramaviva-flora-ficha-edu h2,
.tramaviva-flora-ficha-curiosity h2,
.tramaviva-flora-ficha-territory h2 {
    margin: 0;
    font-size: 23px;
}

.tramaviva-flora-ficha-panel p,
.tramaviva-flora-ficha-edu p,
.tramaviva-flora-ficha-curiosity p,
.tramaviva-flora-ficha-territory p {
    margin: 0;
    color: #5C6B73;
    font-size: 14px;
}

.tramaviva-flora-ficha-panel--habitat {
    border-left-color: var(--flora-teal);
}

.tramaviva-flora-ficha-panel--habitat .tramaviva-territory-icon {
    stroke: var(--flora-teal);
}

.tramaviva-flora-ficha-ambient-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}

.tramaviva-flora-ficha-ambient {
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--flora-teal-dark);
    background: #E1EFE5;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tramaviva-flora-ficha-ambient--agua {
    color: #165E91;
    background: #DCEDFA;
}

.tramaviva-flora-ficha-ambient--humedal {
    color: #256344;
    background: #E1EFE5;
}

.tramaviva-flora-ficha-ambient--cangrejal {
    color: #8A5F12;
    background: #F8EACB;
}

.tramaviva-flora-ficha-ambient--arena {
    color: #8A5F12;
    background: #F8EACB;
}

.tramaviva-flora-ficha-ambient--monte {
    color: #326523;
    background: #E2F1D8;
}

/* Ambiente todavia sin tema asignado: neutro explicito, igual en catalogo y ficha. */
.tramaviva-flora-ficha-ambient--otro {
    color: #3F4C4A;
    background: #ECEFEE;
}

.tramaviva-flora-ficha-edu {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 4%);
}

.tramaviva-flora-ficha-edu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: var(--flora-green-dark);
}

.tramaviva-flora-ficha-edu-head .tramaviva-territory-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    stroke: #FFFFFF;
}

.tramaviva-flora-ficha-edu h2 {
    min-width: 0;
    color: #FFFFFF;
    font-size: 16px;
    text-transform: uppercase;
}

.tramaviva-flora-ficha-edu p {
    padding: 22px;
}

.tramaviva-flora-ficha-edu--distribucion .tramaviva-flora-ficha-edu-head {
    background: var(--flora-teal);
}

.tramaviva-flora-ficha-edu--importancia .tramaviva-flora-ficha-edu-head {
    background: var(--flora-wetland);
}

.tramaviva-flora-ficha-full {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    padding: 30px;
    border-radius: 8px;
}

.tramaviva-flora-ficha-curiosity {
    grid-template-columns: 54px minmax(0, 1fr) 112px;
    overflow: hidden;
    border: 1px solid #CFE5C4;
    background: #FFFFFF;
}

.tramaviva-flora-ficha-curiosity > .tramaviva-territory-icon {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: var(--flora-green-soft);
    stroke: var(--flora-green-dark);
}

.tramaviva-flora-ficha-curiosity h2 {
    color: var(--flora-green-dark);
    margin-bottom: 12px;
}

.tramaviva-flora-ficha-curiosity > div:last-child {
    grid-column: 2;
    grid-row: 1;
}

.tramaviva-flora-ficha-curiosity-pattern {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    width: 112px;
    opacity: .18;
}

.tramaviva-flora-ficha-curiosity-pattern svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-flora-ficha-territory {
    border-block: 1px solid #CFE5C4;
    background: transparent;
}

.tramaviva-flora-ficha-territory > .tramaviva-territory-icon {
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: var(--flora-green-soft);
    stroke: var(--flora-green-dark);
}

.tramaviva-flora-ficha-territory h2 {
    color: var(--flora-green-dark);
    margin-bottom: 10px;
}

.tramaviva-flora-ficha-territory .tramaviva-flora-ficha-question {
    max-width: 720px;
    margin-top: 16px;
    color: #1E2D33;
    font-size: 17px;
    font-weight: 700;
}

.tramaviva-flora-ficha-final-nav {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) repeat(2, minmax(220px, 1fr));
    align-items: stretch;
    gap: 18px;
    padding-block: 8px 52px;
}

.tramaviva-flora-ficha-final-nav > .tramaviva-flora-ficha-button {
    align-self: center;
    justify-self: start;
}

.tramaviva-flora-ficha-button,
.tramaviva-flora-ficha-next {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.tramaviva-flora-ficha-button {
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--flora-green);
    background: var(--flora-green);
    color: #FFFFFF;
}

.tramaviva-flora-ficha-button:hover {
    background: var(--flora-green-dark);
}

.tramaviva-flora-ficha-next {
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid #E7DFCC;
    background: #FFFFFF;
    color: var(--flora-teal-dark);
}

.tramaviva-flora-ficha-next .tramaviva-territory-icon {
    width: 34px;
    height: 34px;
    stroke: var(--flora-wetland);
}

.tramaviva-flora-ficha-next--fauna .tramaviva-territory-icon {
    stroke: var(--flora-coral);
}

.tramaviva-flora-ficha-next span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tramaviva-flora-ficha-next small {
    color: #5C6B73;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.tramaviva-flora-ficha-missing {
    display: grid;
    justify-items: start;
    max-width: 720px;
    padding-block: 64px 72px;
}

.tramaviva-flora-ficha-missing .tramaviva-flora-ficha-button {
    border-color: var(--flora-green-dark);
    background: var(--flora-green-dark);
}

.tramaviva-flora-ficha-missing > .tramaviva-territory-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 50%;
    background: var(--flora-green-soft);
    stroke: var(--flora-green-dark);
}

.tramaviva-flora-ficha-missing h1 {
    margin: 0 0 12px;
    color: var(--flora-green-dark);
    font-size: 34px;
}

.tramaviva-flora-ficha-missing p:not(.tramaviva-territory-eyebrow) {
    margin: 0 0 24px;
    color: #5C6B73;
    font-size: 16px;
}

/* Fauna: ficha completa de especie. */
.tramaviva-fauna-ficha-page {
    --fauna-coral: #EC6A47;
    --fauna-coral-ink: #A53F22;
    --fauna-coral-soft: #FCE3DA;
    --fauna-blue: #2E95DB;
    --fauna-green: #5FAE45;
    --fauna-ochre: #E0A332;
    --fauna-teal: #127A6E;
}

.tramaviva-fauna-ficha-page main {
    overflow-wrap: anywhere;
}

.tramaviva-fauna-ficha-stack {
    display: grid;
    gap: 30px;
    padding-bottom: 30px;
}

.tramaviva-fauna-ficha-grid {
    display: grid;
    gap: 24px;
}

.tramaviva-fauna-ficha-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tramaviva-fauna-ficha-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tramaviva-fauna-ficha-grid > :only-child {
    grid-column: 1 / -1;
}

.tramaviva-fauna-ficha-grid > *,
.tramaviva-fauna-ficha-full > *,
.tramaviva-fauna-ficha-hero-copy {
    min-width: 0;
}

.tramaviva-fauna-ficha-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    align-items: end;
    gap: 56px;
    padding-block: 50px 34px;
}

.tramaviva-fauna-ficha-hero h1 {
    margin: 0 0 10px;
    color: var(--fauna-coral-ink);
    font-size: 42px;
}

.tramaviva-fauna-ficha-scientific {
    margin: 0;
    color: #5C6B73;
    font-size: 18px;
    line-height: 1.5;
}

.tramaviva-fauna-ficha-badges {
    margin-top: 22px;
}

.tramaviva-fauna-ficha-presence {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #E1F0EB;
    color: #0E4D47;
    font-size: 12px;
    font-weight: 700;
}

.tramaviva-fauna-ficha-presence .tramaviva-territory-icon {
    width: 22px;
    height: 22px;
    stroke: #127A6E;
}

.tramaviva-fauna-ficha-photo {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #ECD5CB;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 5%);
}

/* Foto completa, sin recorte ni ampliacion: verticales y cuadradas se centran. */
.tramaviva-fauna-ficha-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(78vh, 640px);
    margin-inline: auto;
}

.tramaviva-fauna-ficha-lead {
    margin-top: 24px;
    text-align: left;
}

.tramaviva-fauna-ficha-lead p {
    margin: 0;
    color: #1E2D33;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
}

.tramaviva-fauna-ficha-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border: 1px solid #E7DFCC;
    border-left: 3px solid var(--fauna-coral);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 4%);
}

.tramaviva-fauna-ficha-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tramaviva-fauna-ficha-panel-heading .tramaviva-territory-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    stroke: var(--fauna-coral);
}

.tramaviva-fauna-ficha-panel h2,
.tramaviva-fauna-ficha-edu h2,
.tramaviva-fauna-ficha-important h2,
.tramaviva-fauna-ficha-curiosity h2,
.tramaviva-fauna-ficha-territory h2 {
    margin: 0;
    font-size: 23px;
}

.tramaviva-fauna-ficha-panel p,
.tramaviva-fauna-ficha-edu p,
.tramaviva-fauna-ficha-important p,
.tramaviva-fauna-ficha-curiosity p,
.tramaviva-fauna-ficha-territory p {
    margin: 0;
    color: #5C6B73;
    font-size: 14px;
}

.tramaviva-fauna-ficha-panel--habitat {
    border-left-color: var(--fauna-teal);
}

.tramaviva-fauna-ficha-panel--habitat .tramaviva-territory-icon {
    stroke: var(--fauna-teal);
}

.tramaviva-fauna-ficha-ambient-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}

.tramaviva-fauna-ficha-ambient {
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    color: #0E4D47;
    background: #E1EFE5;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tramaviva-fauna-ficha-ambient--agua {
    color: #165E91;
    background: #DCEDFA;
}

.tramaviva-fauna-ficha-ambient--humedal {
    color: #256344;
    background: #E1EFE5;
}

.tramaviva-fauna-ficha-ambient--cangrejal {
    color: #8A5F12;
    background: #F8EACB;
}

.tramaviva-fauna-ficha-ambient--arena {
    color: #8A5F12;
    background: #F8EACB;
}

.tramaviva-fauna-ficha-ambient--monte {
    color: #326523;
    background: #E2F1D8;
}

/* Ambiente todavia sin tema asignado: neutro explicito, igual en catalogo y ficha. */
.tramaviva-fauna-ficha-ambient--otro {
    color: #3F4C4A;
    background: #ECEFEE;
}

.tramaviva-fauna-ficha-edu {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgb(30 45 51 / 4%);
}

.tramaviva-fauna-ficha-edu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: #B95339;
}

.tramaviva-fauna-ficha-edu-head .tramaviva-territory-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    stroke: #FFFFFF;
}

.tramaviva-fauna-ficha-edu h2 {
    min-width: 0;
    color: #FFFFFF;
    font-size: 16px;
    text-transform: uppercase;
}

.tramaviva-fauna-ficha-edu p {
    padding: 22px;
}

.tramaviva-fauna-ficha-edu--movimiento .tramaviva-fauna-ficha-edu-head {
    background: #287D70;
}

.tramaviva-fauna-ficha-edu--rastros .tramaviva-fauna-ficha-edu-head {
    background: #936923;
}

.tramaviva-fauna-ficha-full {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    padding: 30px;
    border-radius: 8px;
}

.tramaviva-fauna-ficha-important {
    background: #E1F0EB;
}

.tramaviva-fauna-ficha-important .tramaviva-territory-icon {
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: #FFFFFF;
    stroke: var(--fauna-teal);
}

.tramaviva-fauna-ficha-important h2 {
    color: #0E4D47;
    margin-bottom: 12px;
}

.tramaviva-fauna-ficha-curiosity {
    grid-template-columns: 54px minmax(0, 1fr) 112px;
    overflow: hidden;
    border: 1px solid #ECD5CB;
    background: #FFFFFF;
}

.tramaviva-fauna-ficha-curiosity > .tramaviva-territory-icon {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: #FCE3DA;
    stroke: var(--fauna-coral);
}

.tramaviva-fauna-ficha-curiosity h2 {
    color: var(--fauna-coral-ink);
    margin-bottom: 12px;
}

.tramaviva-fauna-ficha-curiosity > div:last-child {
    grid-column: 2;
    grid-row: 1;
}

.tramaviva-fauna-ficha-curiosity-pattern {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    width: 112px;
    opacity: .18;
}

.tramaviva-fauna-ficha-media {
    display: grid;
    gap: 14px;
}

.tramaviva-fauna-ficha-media audio,
.tramaviva-fauna-ficha-media video {
    display: block;
    width: 100%;
    max-width: 720px;
}

.tramaviva-fauna-ficha-territory {
    border-block: 1px solid #ECD5CB;
    background: transparent;
}

.tramaviva-fauna-ficha-territory > .tramaviva-territory-icon {
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: #FCE3DA;
    stroke: var(--fauna-coral);
}

.tramaviva-fauna-ficha-territory h2 {
    color: var(--fauna-coral-ink);
    margin-bottom: 10px;
}

.tramaviva-fauna-ficha-territory .tramaviva-fauna-ficha-question {
    max-width: 720px;
    margin-top: 16px;
    color: #1E2D33;
    font-size: 17px;
    font-weight: 700;
}

.tramaviva-fauna-ficha-final-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding-block: 8px 52px;
}

.tramaviva-fauna-ficha-button,
.tramaviva-fauna-ficha-next {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.tramaviva-fauna-ficha-button {
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--fauna-coral);
    background: var(--fauna-coral);
    color: #FFFFFF;
}

.tramaviva-fauna-ficha-button:hover {
    background: var(--fauna-coral-ink);
}

.tramaviva-fauna-ficha-next {
    gap: 14px;
    max-width: 420px;
    padding: 14px 18px;
    border: 1px solid #E7DFCC;
    background: #FFFFFF;
    color: #0E4D47;
}

.tramaviva-fauna-ficha-next .tramaviva-territory-icon {
    width: 34px;
    height: 34px;
    stroke: var(--fauna-green);
}

.tramaviva-fauna-ficha-next span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tramaviva-fauna-ficha-next small {
    color: #5C6B73;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.tramaviva-fauna-ficha-missing {
    display: grid;
    justify-items: start;
    max-width: 720px;
    padding-block: 64px 72px;
}

.tramaviva-fauna-ficha-missing .tramaviva-fauna-ficha-button {
    border-color: #C45234;
    background: #C45234;
}

.tramaviva-fauna-ficha-missing .tramaviva-fauna-ficha-button:hover {
    background: var(--fauna-coral-ink);
}

.tramaviva-fauna-ficha-missing > .tramaviva-territory-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 50%;
    background: #FCE3DA;
    stroke: var(--fauna-coral-ink);
}

.tramaviva-fauna-ficha-missing h1 {
    margin: 0 0 12px;
    color: var(--fauna-coral-ink);
    font-size: 34px;
}

.tramaviva-fauna-ficha-missing p:not(.tramaviva-territory-eyebrow) {
    margin: 0 0 24px;
    color: #5C6B73;
    font-size: 16px;
}

@media (max-width: 1100px) {
    .tramaviva-fauna-grid,
    .tramaviva-flora-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tramaviva-fauna-hero,
    .tramaviva-flora-hero {
        grid-template-columns: minmax(0, 1fr) 180px;
        gap: 32px;
    }

    .tramaviva-fauna-ficha-hero,
    .tramaviva-flora-ficha-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        gap: 34px;
    }

    .tramaviva-fauna-ficha-hero h1,
    .tramaviva-flora-ficha-hero h1 {
        font-size: 36px;
    }

}

@media (min-width: 761px) and (max-width: 1000px) {
    .tramaviva-fauna-ficha-grid--three,
    .tramaviva-flora-ficha-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tramaviva-fauna-ficha-grid--three > :last-child:nth-child(odd),
    .tramaviva-flora-ficha-grid--three > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .tramaviva-fauna-next-grid,
    .tramaviva-flora-next-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tramaviva-fauna-ficha-hero,
    .tramaviva-flora-ficha-hero,
    .tramaviva-fauna-ficha-grid--two,
    .tramaviva-flora-ficha-grid--two,
    .tramaviva-fauna-ficha-grid--three,
    .tramaviva-flora-ficha-grid--three {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-fauna-ficha-photo,
    .tramaviva-flora-ficha-photo {
        max-width: 560px;
    }

    .tramaviva-fauna-ficha-grid,
    .tramaviva-flora-ficha-grid {
        gap: 16px;
    }

    .tramaviva-fauna-ficha-final-nav,
    .tramaviva-flora-ficha-final-nav {
        display: flex;
        flex-direction: column;
    }

    .tramaviva-fauna-ficha-button,
    .tramaviva-flora-ficha-button,
    .tramaviva-fauna-ficha-next,
    .tramaviva-flora-ficha-next {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .tramaviva-fauna-hero,
    .tramaviva-flora-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-block: 32px 24px;
    }

    .tramaviva-fauna-hero h1,
    .tramaviva-flora-hero h1 {
        font-size: 28px;
    }

    .tramaviva-fauna-microtrama--hero {
        width: 112px;
        justify-self: end;
        margin-right: 12px;
    }

    .tramaviva-fauna-microtrama--small {
        display: none;
    }

    .tramaviva-flora-hero-art {
        width: 132px;
        justify-self: end;
        margin-right: 8px;
    }

    .tramaviva-flora-microtrama {
        display: none;
    }

    .tramaviva-fauna-grid,
    .tramaviva-flora-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .tramaviva-fauna-empty,
    .tramaviva-flora-empty {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px 0;
        background: #F7F3EA;
    }

    .tramaviva-fauna-empty h3,
    .tramaviva-flora-empty h3 {
        font-size: 20px;
    }

    .tramaviva-fauna-ficha-hero,
    .tramaviva-flora-ficha-hero {
        gap: 22px;
        padding-block: 34px 24px;
    }

    .tramaviva-fauna-ficha-hero h1,
    .tramaviva-flora-ficha-hero h1 {
        font-size: 30px;
    }

    .tramaviva-fauna-ficha-scientific,
    .tramaviva-flora-ficha-scientific {
        font-size: 15px;
    }

    .tramaviva-fauna-ficha-lead p,
    .tramaviva-flora-ficha-lead p {
        font-size: 17px;
    }

    .tramaviva-fauna-ficha-panel,
    .tramaviva-flora-ficha-panel,
    .tramaviva-fauna-ficha-important,
    .tramaviva-fauna-ficha-curiosity,
    .tramaviva-flora-ficha-curiosity,
    .tramaviva-fauna-ficha-territory,
    .tramaviva-flora-ficha-territory {
        padding: 24px 20px;
    }

    .tramaviva-fauna-ficha-important,
    .tramaviva-fauna-ficha-curiosity,
    .tramaviva-flora-ficha-curiosity,
    .tramaviva-fauna-ficha-territory,
    .tramaviva-flora-ficha-territory {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-fauna-ficha-curiosity > .tramaviva-territory-icon,
    .tramaviva-flora-ficha-curiosity > .tramaviva-territory-icon,
    .tramaviva-fauna-ficha-curiosity > div:last-child,
    .tramaviva-flora-ficha-curiosity > div:last-child {
        grid-column: auto;
        grid-row: auto;
    }

    .tramaviva-fauna-ficha-curiosity-pattern,
    .tramaviva-flora-ficha-curiosity-pattern {
        display: none;
    }

    .tramaviva-fauna-ficha-panel h2,
    .tramaviva-flora-ficha-panel h2,
    .tramaviva-fauna-ficha-important h2,
    .tramaviva-fauna-ficha-curiosity h2,
    .tramaviva-flora-ficha-curiosity h2,
    .tramaviva-fauna-ficha-territory h2,
    .tramaviva-flora-ficha-territory h2 {
        font-size: 22px;
    }

    .tramaviva-fauna-ficha-curiosity-pattern,
    .tramaviva-flora-ficha-curiosity-pattern {
        width: 88px;
    }

    .tramaviva-fauna-ficha-missing,
    .tramaviva-flora-ficha-missing {
        padding-block: 42px 56px;
    }

    .tramaviva-fauna-ficha-missing h1,
    .tramaviva-flora-ficha-missing h1 {
        font-size: 28px;
    }
}

@media (max-width: 360px) {
    .tramaviva-fauna-ficha-panel,
    .tramaviva-flora-ficha-panel,
    .tramaviva-fauna-ficha-important,
    .tramaviva-fauna-ficha-curiosity,
    .tramaviva-flora-ficha-curiosity,
    .tramaviva-fauna-ficha-territory,
    .tramaviva-flora-ficha-territory,
    .tramaviva-fauna-ficha-edu p,
    .tramaviva-flora-ficha-edu p,
    .tramaviva-fauna-ficha-edu-head,
    .tramaviva-flora-ficha-edu-head {
        padding-inline: 16px;
    }

    .tramaviva-fauna-ficha-presence,
    .tramaviva-flora-ficha-presence {
        align-items: flex-start;
    }
}

/* Respuesta visual compartida de Territorio y Cangrejal. */
.tramaviva-territory-cangrejal-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    margin-top: 28px;
    border: 2px solid #A96313;
    border-radius: 14px;
    background: #F4D998;
    color: #573810;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 5px 16px rgba(138, 95, 18, .15);
}
.tramaviva-territory-cangrejal-link .tramaviva-territory-icon { width: 36px; height: 36px; }
.tramaviva-cangrejal-species-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tramaviva-cangrejal-species { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tramaviva-cangrejal-species-figure { margin: 0; }
.tramaviva-cangrejal-photo-slot { display: block; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 0; }
.tramaviva-cangrejal-photo-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tramaviva-cangrejal-species h3 a { color: inherit; text-decoration: none; }
.tramaviva-cangrejal-species-link { display: inline-block; margin-top: 14px; color: #127A6E; font-weight: 700; }
.tramaviva-cangrejal-species .tramaviva-especie-credito { font-size: 11px; line-height: 1.6; margin-top: 8px; overflow-wrap: anywhere; }
.tramaviva-flora-visit-note { padding: 18px; margin: 18px 0; border-left: 4px solid #A96313; border-radius: 0 10px 10px 0; background: #FBF0D8; }
.tramaviva-flora-visit-note h2 { font-size: 18px; margin: 0 0 12px; }
.tramaviva-flora-visit-note p { font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.tramaviva-mission-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1000; }
.tramaviva-mission-confetti span { position: absolute; width: 10px; height: 25px; border-radius: 7px; }

@media screen {
    :is(.tramaviva-cangrejal-species, .tramaviva-territory-observation, .tramaviva-territory-cangrejal-link) { transition: transform .2s ease, box-shadow .2s ease; }
    :is(.tramaviva-territory-connection-list, .tramaviva-cangrejal-journey-list) .tramaviva-territory-icon { transition: transform .2s ease, filter .2s ease; }
    :is(.tramaviva-cangrejal-species, .tramaviva-territory-cangrejal-link):focus-within { outline: 3px solid #127A6E; outline-offset: 4px; box-shadow: 0 8px 24px rgba(18, 82, 71, .16); }
    :is(.tramaviva-cangrejal-species-link, .tramaviva-cangrejal-photo-slot):focus-visible { outline: 2px solid #127A6E; outline-offset: 3px; }
}
@media (hover: hover) and (pointer: fine) {
    .tramaviva-cangrejal-species:hover, .tramaviva-territory-cangrejal-link:hover { transform: translateY(-4px); box-shadow: 0 9px 24px rgba(18, 82, 71, .16); }
    :is(.tramaviva-territory-page:not(.tramaviva-flora-page):not(.tramaviva-fauna-page)) .tramaviva-territory-observation:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(18, 82, 71, .1); }
    :is(.tramaviva-territory-connection-list, .tramaviva-cangrejal-journey-list) li:hover .tramaviva-territory-icon { transform: translateY(-3px) scale(1.07); filter: drop-shadow(0 4px 4px rgba(18, 82, 71, .14)); }
}
@media (hover: none) {
    .tramaviva-cangrejal-species:active, .tramaviva-territory-cangrejal-link:active { box-shadow: 0 0 0 3px rgba(18, 122, 110, .25); }
}
@media (max-width: 1050px) { .tramaviva-cangrejal-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tramaviva-cangrejal-species-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    :is(.tramaviva-cangrejal-species, .tramaviva-territory-observation, .tramaviva-territory-cangrejal-link),
    :is(.tramaviva-territory-connection-list, .tramaviva-cangrejal-journey-list) .tramaviva-territory-icon { transition: none !important; transform: none !important; }
}
@media print { .tramaviva-mission-confetti { display: none !important; } .tramaviva-flora-visit-note { break-inside: avoid; } }

/* Especies (flora y fauna): fotos, creditos, origen y presencia. */

/* Tarjeta cuya foto no es 4:3: se muestra entera, sin recortar bordes ni firmas. */
.tramaviva-especie-tarjeta-foto--completa {
    background: #F7F3EA;
}

.tramaviva-fauna-photo-slot.tramaviva-especie-tarjeta-foto--completa img,
.tramaviva-flora-photo-slot.tramaviva-especie-tarjeta-foto--completa img {
    object-fit: contain;
}

/* Tarjeta sin fotografia: no se estira a la altura de la fila, sin espacio vacio. */
.tramaviva-especie-tarjeta--sin-foto {
    align-self: start;
}

/* Las fotos de ficha se ven completas (a veces verticales): el texto arranca arriba. */
.tramaviva-fauna-ficha-hero,
.tramaviva-flora-ficha-hero {
    align-items: start;
}

/* Ficha sin fotografia: el texto ocupa todo el ancho, sin espacio reservado. */
.tramaviva-fauna-ficha-hero.tramaviva-especie-hero--sin-foto,
.tramaviva-flora-ficha-hero.tramaviva-especie-hero--sin-foto {
    grid-template-columns: minmax(0, 1fr);
}

.tramaviva-especie-hero--sin-foto > :first-child {
    max-width: 760px;
}

.tramaviva-especie-foto {
    min-width: 0;
    margin: 0;
}

.tramaviva-especie-foto .tramaviva-fauna-ficha-photo,
.tramaviva-especie-foto .tramaviva-flora-ficha-photo {
    background: #F7F3EA;
}

.tramaviva-especie-credito {
    margin: 10px 2px 0;
    color: #5C6B73;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.tramaviva-especie-credito a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(92 107 115 / 45%);
    text-underline-offset: 2px;
}

.tramaviva-especie-credito a:hover {
    color: #1E2D33;
}

.tramaviva-especie-credito a:focus-visible {
    outline: 2px solid #127A6E;
    outline-offset: 2px;
    border-radius: 2px;
}

.tramaviva-especie-galeria h2 {
    margin: 0 0 18px;
    font-size: 23px;
}

.tramaviva-especie-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    align-items: start;
    gap: 24px;
}

.tramaviva-especie-galeria-grid img {
    max-height: 420px;
}

.tramaviva-especie-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.tramaviva-especie-estado .tramaviva-fauna-ficha-presence,
.tramaviva-especie-estado .tramaviva-flora-ficha-presence {
    margin: 0;
}

/* Presencia no confirmada en La Floresta: tono neutro, distinto de la confirmacion. */
.tramaviva-especie-presencia--sin-confirmar {
    background: #ECEFEE;
    color: #3F4C4A;
}

.tramaviva-especie-presencia--sin-confirmar .tramaviva-territory-icon {
    stroke: #5C6B73;
}

.tramaviva-especie-presencia-nota {
    max-width: 560px;
    margin: 10px 0 0;
    color: #5C6B73;
    font-size: 13px;
    line-height: 1.6;
}

/* Origen: contorno sin relleno, para no confundirse con grupo ni ambientes. */
.tramaviva-especie-origen {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.tramaviva-especie-origen--nativa {
    color: #326523;
}

.tramaviva-especie-origen--exotica {
    color: #3F4C4A;
}

.tramaviva-especie-origen--invasora {
    color: #A53F22;
}

@media (max-width: 760px) {
    .tramaviva-especie-foto {
        max-width: 560px;
    }

    .tramaviva-especie-galeria h2 {
        font-size: 22px;
    }

    .tramaviva-especie-galeria-grid {
        gap: 16px;
    }
}

/* Agua: recorrido educativo del territorio al abastecimiento. */
.tramaviva-agua-page {
    --agua-blue: #2E95DB;
    --agua-blue-dark: #165E91;
    --agua-blue-deep: #1C6FAE;
    --agua-blue-soft: #DCEDFA;
    --agua-teal: #127A6E;
    --agua-teal-dark: #0E4D47;
    --agua-teal-soft: #E1F0EB;
    --agua-green: #5FAE45;
    --agua-green-soft: #E2F1D8;
    --agua-ochre: #E0A332;
    --agua-ochre-soft: #F8EACB;
    --agua-coral: #EC6A47;
    --agua-coral-soft: #FCE3DA;
    --territory-accent: var(--agua-blue);
    --territory-tint: var(--agua-blue-soft);
    --territory-ink: var(--agua-blue-dark);
}

.tramaviva-agua-page .tramaviva-territory-eyebrow,
.tramaviva-agua-page h1 {
    color: var(--agua-blue-dark);
}

.tramaviva-agua-page .tramaviva-territory-eyebrow::before {
    background: var(--agua-blue);
}

.tramaviva-agua-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
    align-items: center;
    gap: 52px;
    padding-block: 48px 28px;
}

.tramaviva-agua-hero h1 {
    margin: 0 0 18px;
    font-size: 38px;
}

.tramaviva-agua-hero-copy > p:not(.tramaviva-territory-eyebrow) {
    max-width: 760px;
    margin: 0 0 14px;
}

.tramaviva-agua-hero-copy > p:last-child {
    color: #5C6B73;
}

.tramaviva-agua-hero-art {
    width: min(100%, 360px);
    justify-self: end;
}

.tramaviva-agua-hero-art svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-agua-art-route,
.tramaviva-agua-art-wave {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-agua-art-route {
    stroke: var(--agua-blue);
    stroke-width: 4;
    stroke-dasharray: 5 12;
    opacity: .45;
}

.tramaviva-agua-art-drop {
    fill: var(--agua-blue-soft);
    stroke: var(--agua-blue);
    stroke-width: 3;
}

.tramaviva-agua-art-wave {
    stroke: var(--agua-teal);
    stroke-width: 5;
}

.tramaviva-agua-art-wave--soft {
    stroke: var(--agua-blue-deep);
    stroke-width: 3;
    opacity: .45;
}

.tramaviva-agua-opening {
    margin-block: 12px 26px;
    padding: 30px 32px;
    border: 1px solid #B9D8ED;
    border-left: 3px solid var(--agua-blue);
    border-radius: 8px;
    background: linear-gradient(90deg, var(--agua-blue-soft), #FFFFFF 72%);
}

.tramaviva-agua-opening h2 {
    max-width: 820px;
    margin: 0 0 10px;
    color: var(--agua-blue-dark);
    font-size: 25px;
}

.tramaviva-agua-opening p {
    margin: 0;
    color: #5C6B73;
}

.tramaviva-agua-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: 28px;
    align-items: end;
    margin-bottom: 34px;
}

.tramaviva-agua-section-head h2,
.tramaviva-agua-ose h2 {
    margin: 0;
    color: var(--agua-blue-dark);
}

.tramaviva-agua-section-head > p {
    margin: 0;
    color: #5C6B73;
}

.tramaviva-agua-kicker {
    margin: 0 0 8px;
    color: var(--agua-teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.tramaviva-agua-route {
    --route-line-width: 2px;
    --route-dashes-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 5h6' fill='none' stroke='%239BCBEF' stroke-width='2'/%3E%3C/svg%3E");
    --route-dashes-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 0v6' fill='none' stroke='%239BCBEF' stroke-width='2'/%3E%3C/svg%3E");
    --route-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m3 2 3 3-3 3' fill='none' stroke='%239BCBEF' stroke-width='2'/%3E%3C/svg%3E");
    --route-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m7 2-3 3 3 3' fill='none' stroke='%239BCBEF' stroke-width='2'/%3E%3C/svg%3E");
    --route-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 3 3 3 3-3' fill='none' stroke='%239BCBEF' stroke-width='2'/%3E%3C/svg%3E");
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(20px, auto) 32px 58px 74px auto 0
        minmax(88px, auto) 32px 58px 74px auto 0;
    gap: 0 32px;
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    isolation: isolate;
}

.tramaviva-agua-route::before {
    content: "";
    position: absolute;
    grid-column: 4;
    grid-row: 3 / 10;
    inset: 29px -16px 29px 47px;
    border-top: var(--route-line-width) dashed #9BCBEF;
    border-right: var(--route-line-width) dashed #9BCBEF;
    border-bottom: var(--route-line-width) dashed #9BCBEF;
    border-radius: 0 32px 32px 0;
    pointer-events: none;
    z-index: -2;
}

/* Keep the rounded turns; repeat the horizontal dash pattern vertically. */
.tramaviva-agua-route::after {
    content: "";
    position: absolute;
    grid-column: 4;
    grid-row: 3 / 10;
    inset: 61px -16px 61px auto;
    width: var(--route-line-width);
    background: var(--route-dashes-vertical) center top / 10px 10px repeat-y #F7F3EA;
    pointer-events: none;
    z-index: -2;
}

.tramaviva-agua-stop {
    --stop-color: var(--agua-blue);
    --stop-ink: var(--agua-blue-dark);
    --stop-tint: var(--agua-blue-soft);
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 6;
    min-width: 0;
    padding: 0;
}

/* Shared rows reserve space for labels and nodes above the card bodies. */
.tramaviva-agua-stop::before {
    content: "";
    position: absolute;
    grid-row: 3 / -1;
    inset: 74px 0 0;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: linear-gradient(var(--stop-tint) 58px, #FFFFFF 58px);
    pointer-events: none;
    z-index: -1;
}

.tramaviva-agua-stop:not(:last-child)::after {
    content: "";
    position: absolute;
    grid-row: 3;
    top: 24px;
    left: 76px;
    right: -50px;
    height: 10px;
    background-image: var(--route-arrow-right), var(--route-dashes-horizontal);
    background-size: 10px 10px;
    background-position: center, left center;
    background-repeat: no-repeat, repeat-x;
    pointer-events: none;
    z-index: -2;
}

.tramaviva-agua-stop--cangrejal::after {
    display: none;
}

.tramaviva-agua-stop--rio:not(:last-child)::after,
.tramaviva-agua-stop--captacion:not(:last-child)::after,
.tramaviva-agua-stop--potabilizacion:not(:last-child)::after {
    left: calc(-100% + 44px);
    right: calc(100% - 18px);
    background-image: var(--route-arrow-left), var(--route-dashes-horizontal);
}

.tramaviva-agua-turn-arrow {
    position: absolute;
    grid-row: 3 / -1;
    right: -21px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--route-arrow-down) center / contain no-repeat;
    pointer-events: none;
}

.tramaviva-agua-stop-body {
    grid-row: 5 / span 2;
    min-width: 0;
    padding: 18px 18px 20px;
}

.tramaviva-agua-stop--desembocadura { --stop-color: #247DBD; --stop-ink: #165E91; }
.tramaviva-agua-stop--humedal { --stop-color: #3C8F63; --stop-ink: #256344; --stop-tint: #E1EFE5; }
.tramaviva-agua-stop--cangrejal { --stop-color: var(--agua-ochre); --stop-ink: #8A5F12; --stop-tint: var(--agua-ochre-soft); }
.tramaviva-agua-stop--rio { --stop-color: #367FA8; --stop-ink: #165E91; }
.tramaviva-agua-stop--captacion,
.tramaviva-agua-stop--potabilizacion,
.tramaviva-agua-stop--hogares {
    --stop-color: var(--agua-blue-deep);
    --stop-ink: var(--agua-blue-dark);
    --stop-tint: #D5E8F7;
}
.tramaviva-agua-stop--hogares {
    --stop-color: var(--agua-teal);
    --stop-ink: var(--agua-teal-dark);
    --stop-tint: var(--agua-teal-soft);
}

.tramaviva-agua-stop--cangrejal {
    grid-column: 4;
    grid-row: 1 / span 6;
}

.tramaviva-agua-stop--rio {
    grid-column: 4;
    grid-row: 7 / span 6;
}

.tramaviva-agua-stop--captacion {
    grid-column: 3;
    grid-row: 7 / span 6;
}

.tramaviva-agua-stop--potabilizacion {
    grid-column: 2;
    grid-row: 7 / span 6;
}

.tramaviva-agua-stop--hogares {
    grid-column: 1;
    grid-row: 7 / span 6;
}

.tramaviva-agua-stop-node {
    position: relative;
    grid-row: 3;
    margin-left: 18px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--stop-color);
    box-shadow: 0 0 0 6px #F7F3EA;
}

.tramaviva-agua-stop-node .tramaviva-territory-icon {
    width: 31px;
    height: 31px;
    stroke: #FFFFFF;
}

.tramaviva-agua-stop-number {
    position: absolute;
    grid-row: 3;
    top: 92px;
    right: 18px;
    color: rgb(22 94 145 / 32%);
    font-size: 13px;
    font-weight: 800;
}

.tramaviva-agua-stop h3 {
    margin: 0 0 10px;
    color: var(--stop-ink);
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 15px;
}

.tramaviva-agua-stop p {
    margin: 0;
    color: #5C6B73;
    font-size: 13px;
    line-height: 1.65;
}

.tramaviva-agua-route-label {
    grid-row: 1;
    align-self: end;
    color: var(--agua-teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: max-content;
    max-width: 100%;
    line-height: 1.5;
}

.tramaviva-agua-route-label--people {
    color: var(--agua-blue-dark);
}

.tramaviva-agua-route-label--vertical {
    display: none;
}

.tramaviva-agua-microtrama {
    width: 112px;
    margin: 4px 32px 0 auto;
    opacity: .32;
    pointer-events: none;
}

.tramaviva-agua-microtrama svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-agua-microtrama--second {
    margin-top: 0;
    margin-right: 72px;
}

.tramaviva-agua-connected {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
    gap: 28px;
    align-items: start;
}

.tramaviva-agua-connected-copy p {
    max-width: 520px;
    margin: 0;
    color: #5C6B73;
}

.tramaviva-agua-connected-grid,
.tramaviva-agua-next-grid {
    display: grid;
    gap: 18px;
}

.tramaviva-agua-connected-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tramaviva-agua-connected-card {
    --connection-color: var(--agua-blue);
    --connection-tint: var(--agua-blue-soft);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: var(--connection-tint);
}

.tramaviva-agua-theme--territorio { --connection-color: var(--agua-ochre); --connection-tint: var(--agua-ochre-soft); }
.tramaviva-agua-theme--flora { --connection-color: var(--agua-green); --connection-tint: var(--agua-green-soft); }
.tramaviva-agua-theme--fauna { --connection-color: var(--agua-coral); --connection-tint: var(--agua-coral-soft); }
.tramaviva-agua-theme--personas { --connection-color: var(--agua-teal); --connection-tint: var(--agua-teal-soft); }

.tramaviva-agua-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 18px 20px;
    background: var(--connection-color);
    color: #FFFFFF;
}

.tramaviva-agua-card-head .tramaviva-territory-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    stroke: #FFFFFF;
}

.tramaviva-agua-card-head h3 {
    margin: 0;
    color: #FFFFFF;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
}

.tramaviva-agua-connected-card p {
    margin: 0;
    padding: 18px 20px 22px;
    color: #1E2D33;
    font-size: 13px;
}

.tramaviva-agua-look .tramaviva-territory-observation {
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    background: #FFFFFF;
}

.tramaviva-agua-look--movimiento { --territory-accent: var(--agua-blue); --territory-tint: var(--agua-blue-soft); }
.tramaviva-agua-look--color { --territory-accent: var(--agua-blue-deep); --territory-tint: #D5E8F7; }
.tramaviva-agua-look .tramaviva-agua-look--color { background: var(--territory-tint); }
.tramaviva-agua-look--orillas { --territory-accent: var(--agua-teal); --territory-tint: var(--agua-teal-soft); }
.tramaviva-agua-look--vida { --territory-accent: var(--agua-green); --territory-tint: var(--agua-green-soft); }

.tramaviva-agua-look-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 18px 20px;
    background: var(--territory-accent);
    color: #FFFFFF;
}

.tramaviva-agua-look-head .tramaviva-territory-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    stroke: #FFFFFF;
}

.tramaviva-agua-look-head h3 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}

.tramaviva-agua-look .tramaviva-territory-observation p {
    padding: 18px 20px 22px;
    background: var(--territory-tint);
}

.tramaviva-agua-ose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-block: 12px 28px;
    padding: 32px;
    border: 1px solid #B9D8ED;
    border-left: 3px solid var(--agua-blue-deep);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-agua-ose p:not(.tramaviva-agua-kicker) {
    max-width: 680px;
    margin: 12px 0 0;
    color: #5C6B73;
}

.tramaviva-agua-next-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tramaviva-agua-next--territorio {
    --territory-accent: var(--agua-ochre);
    --territory-tint: var(--agua-ochre-soft);
    --territory-ink: #8A5F12;
}

.tramaviva-agua-next--humedal {
    --territory-accent: #3C8F63;
    --territory-tint: #E1EFE5;
    --territory-ink: #256344;
}

.tramaviva-agua-next--rio {
    --territory-accent: var(--agua-blue);
    --territory-tint: var(--agua-blue-soft);
    --territory-ink: var(--agua-blue-dark);
}

.tramaviva-agua-coming {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--agua-blue-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tramaviva-agua-page article.tramaviva-territory-next:hover h3 {
    text-decoration: none;
}

@media (max-width: 1100px) {
    .tramaviva-agua-hero {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 34px;
    }
}

@media (max-width: 900px) {
    .tramaviva-agua-section-head,
    .tramaviva-agua-connected,
    .tramaviva-agua-ose {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-agua-ose .tramaviva-territory-button {
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .tramaviva-agua-route {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 0;
        padding-top: 0;
    }

    .tramaviva-agua-route::before,
    .tramaviva-agua-route::after,
    .tramaviva-agua-stop::before,
    .tramaviva-agua-turn-arrow {
        display: none;
    }

    .tramaviva-agua-stop,
    .tramaviva-agua-stop--cangrejal,
    .tramaviva-agua-stop--rio,
    .tramaviva-agua-stop--captacion,
    .tramaviva-agua-stop--potabilizacion,
    .tramaviva-agua-stop--hogares {
        grid-column: auto;
        grid-row: auto;
    }

    .tramaviva-agua-stop {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 18px;
        min-height: 118px;
        padding: 16px 18px 22px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .tramaviva-agua-stop:not(:last-child)::after {
        content: "";
        position: absolute;
        display: block;
        grid-row: auto;
        left: 24px;
        right: auto;
        top: 74px;
        bottom: -10px;
        width: 10px;
        height: auto;
        border: 0;
        background-image: var(--route-arrow-down), var(--route-dashes-vertical);
        background-size: 10px 10px;
        background-position: center, center top;
        background-repeat: no-repeat, repeat-y;
        z-index: -1;
    }

    .tramaviva-agua-stop--naturaleza:first-child,
    .tramaviva-agua-stop--captacion {
        grid-template-rows: auto auto auto auto;
    }

    .tramaviva-agua-stop--captacion {
        margin-top: 24px;
    }

    .tramaviva-agua-stop:first-child::after,
    .tramaviva-agua-stop--captacion::after {
        grid-row: 2 / -1;
    }

    .tramaviva-agua-stop-node {
        position: relative;
        left: auto;
        top: auto;
        grid-row: 1 / span 3;
        margin-left: 0;
        align-self: start;
        box-shadow: 0 0 0 5px #F7F3EA;
    }

    .tramaviva-agua-stop-number {
        position: static;
        grid-row: auto;
        align-self: end;
        color: var(--stop-color);
        font-size: 11px;
    }

    .tramaviva-agua-stop h3,
    .tramaviva-agua-stop p,
    .tramaviva-agua-stop-number {
        grid-column: 2;
        grid-row: auto;
    }

    .tramaviva-agua-stop-body {
        display: contents;
    }

    .tramaviva-agua-route-label {
        position: static;
        grid-column: 1 / -1;
        grid-row: 1;
        width: auto;
        margin: 0 0 20px;
        white-space: normal;
    }

    .tramaviva-agua-stop:first-child .tramaviva-agua-stop-node,
    .tramaviva-agua-stop--captacion .tramaviva-agua-stop-node {
        grid-row: 2 / span 3;
    }

    .tramaviva-agua-route-label--vertical {
        display: block;
    }

    .tramaviva-agua-route-label--horizontal {
        display: none;
    }
}

@media (max-width: 760px) {
    .tramaviva-agua-connected-grid,
    .tramaviva-agua-next-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .tramaviva-agua-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-block: 32px 18px;
    }

    .tramaviva-agua-hero h1 {
        font-size: 30px;
    }

    .tramaviva-agua-hero-art {
        width: min(100%, 260px);
        justify-self: center;
    }

    .tramaviva-agua-opening,
    .tramaviva-agua-ose {
        padding: 24px 20px;
    }

    .tramaviva-agua-opening h2 {
        font-size: 22px;
    }

    .tramaviva-agua-microtrama {
        width: 72px;
        margin-right: 12px;
    }

    .tramaviva-agua-microtrama--second {
        display: none;
    }

    .tramaviva-agua-ose .tramaviva-territory-button {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .tramaviva-agua-opening,
    .tramaviva-agua-ose,
    .tramaviva-agua-card-head,
    .tramaviva-agua-connected-card p,
    .tramaviva-agua-look-head,
    .tramaviva-agua-look .tramaviva-territory-observation p {
        padding-inline: 16px;
    }

    .tramaviva-agua-stop {
        column-gap: 14px;
    }
}

/* Visita a las UPA: etapas, misiones y respuesta, dentro de la paleta de Agua. */
.tramaviva-upa-page .tramaviva-upa-question {
    color: var(--agua-blue-dark);
}

.tramaviva-agua-next--flora {
    --territory-accent: var(--agua-green);
    --territory-tint: var(--agua-green-soft);
    --territory-ink: #326523;
}

.tramaviva-upa-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tramaviva-upa-step {
    position: relative;
    min-width: 0;
    padding: 22px 22px 24px;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: linear-gradient(var(--agua-blue-soft) 52px, #FFFFFF 52px);
}

.tramaviva-upa-step-node {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--agua-blue-deep);
    box-shadow: 0 0 0 5px #FFFFFF;
}

.tramaviva-upa-step-node .tramaviva-territory-icon {
    width: 30px;
    height: 30px;
    stroke: #FFFFFF;
}

.tramaviva-upa-step-number {
    position: absolute;
    top: 64px;
    right: 22px;
    color: rgb(22 94 145 / 40%);
    font-size: 13px;
    font-weight: 800;
}

.tramaviva-upa-step h3 {
    margin: 16px 0 8px;
    color: var(--agua-blue-dark);
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 15px;
}

.tramaviva-upa-step p {
    margin: 0;
    color: #5C6B73;
    font-size: 13px;
    line-height: 1.65;
}

.tramaviva-upa-missions {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tramaviva-upa-mission {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #B9D8ED;
    border-left: 3px solid var(--agua-blue);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-upa-mission-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    background: var(--agua-blue-soft);
}

.tramaviva-upa-mission-icon,
.tramaviva-upa-stop-icon {
    display: grid;
    flex: 0 0 52px;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--agua-blue);
}

.tramaviva-upa-mission-icon .tramaviva-territory-icon,
.tramaviva-upa-stop-icon .tramaviva-territory-icon {
    width: 28px;
    height: 28px;
    stroke: #FFFFFF;
}

.tramaviva-upa-mission-place,
.tramaviva-upa-mission-label {
    margin: 0 0 6px;
    color: var(--agua-teal-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.tramaviva-upa-mission h3,
.tramaviva-upa-stop h3 {
    margin: 0;
    color: var(--agua-blue-dark);
    font-size: 19px;
}

.tramaviva-upa-mission-question {
    margin: 6px 0 0;
    font-weight: 600;
}

.tramaviva-upa-mission-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
    padding: 20px 24px 24px;
}

.tramaviva-upa-mission-body p:not(.tramaviva-upa-mission-label) {
    margin: 0;
    color: #3F4D55;
    font-size: 14px;
}

.tramaviva-upa-mission-share {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--agua-teal-soft);
}

.tramaviva-upa-stop {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-left: 32px;
    padding: 18px 22px;
    border: 1px dashed var(--agua-green);
    border-radius: 8px;
    background: var(--agua-green-soft);
}

.tramaviva-upa-stop-icon {
    background: var(--agua-green);
}

.tramaviva-upa-stop h3 {
    color: #326523;
    font-size: 17px;
}

.tramaviva-upa-stop p:not(.tramaviva-upa-mission-place) {
    margin: 4px 0 0;
    color: #3F4D55;
    font-size: 14px;
}

.tramaviva-upa-stop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #326523;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.tramaviva-upa-stop-link:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 3px;
}

.tramaviva-upa-answer {
    margin-block: 24px 22px;
    padding: 36px 32px;
    border-block: 1px dashed var(--agua-blue);
    background: var(--agua-blue-soft);
}

.tramaviva-upa-answer h2 {
    max-width: 760px;
    margin: 0 0 10px;
    color: var(--agua-blue-dark);
}

.tramaviva-upa-answer > p {
    margin: 0 0 22px;
    color: #5C6B73;
}

.tramaviva-upa-answer-details {
    max-width: 860px;
    border: 1px solid #B9D8ED;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-upa-answer-details summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 20px;
    color: var(--agua-blue-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background-color 200ms ease;
}

.tramaviva-upa-answer-details summary::-webkit-details-marker { display: none; }

.tramaviva-upa-answer-details summary::after {
    content: "+";
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
}

.tramaviva-upa-answer-details[open] summary::after { content: "−"; }

.tramaviva-upa-answer-details summary:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 3px;
    border-radius: 8px;
}

.tramaviva-upa-answer-details summary .tramaviva-territory-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    stroke: var(--agua-blue);
}

.tramaviva-upa-answer-body {
    padding: 4px 24px 22px;
    border-top: 1px solid #B9D8ED;
}

.tramaviva-upa-answer-body p {
    margin: 14px 0 0;
    color: #3F4D55;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-upa-stop-link:hover {
        box-shadow: 0 4px 10px rgb(30 45 51 / 12%);
    }

    .tramaviva-upa-answer-details summary:hover {
        background: #F4F9FD;
    }
}

@media (max-width: 1050px) {
    .tramaviva-upa-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tramaviva-upa-mission-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-upa-stop {
        grid-template-columns: 52px minmax(0, 1fr);
        margin-left: 16px;
    }

    .tramaviva-upa-stop-link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .tramaviva-upa-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tramaviva-upa-mission-head {
        gap: 14px;
        padding: 18px 20px;
    }

    .tramaviva-upa-mission-icon,
    .tramaviva-upa-stop-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .tramaviva-upa-mission-icon .tramaviva-territory-icon,
    .tramaviva-upa-stop-icon .tramaviva-territory-icon {
        width: 24px;
        height: 24px;
    }

    .tramaviva-upa-mission h3 {
        font-size: 17px;
    }

    .tramaviva-upa-mission-body {
        padding: 18px 20px 22px;
    }

    .tramaviva-upa-stop {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        margin-left: 0;
        padding: 16px 18px;
    }

    .tramaviva-upa-answer {
        padding: 28px 20px;
    }

    .tramaviva-upa-answer-body {
        padding-inline: 20px;
    }
}

@media (max-width: 360px) {
    .tramaviva-upa-step,
    .tramaviva-upa-mission-head,
    .tramaviva-upa-mission-body,
    .tramaviva-upa-stop,
    .tramaviva-upa-answer-body {
        padding-inline: 16px;
    }

    .tramaviva-upa-answer-details summary {
        padding-inline: 16px;
    }
}

/* Mapa Vivo: etapa de orientacion y territorio. */
.tramaviva-mapa-page {
    --mapa-teal: #127A6E;
    --mapa-teal-dark: #0E4D47;
    --mapa-teal-soft: #DDEFEA;
    --mapa-blue: #2E95DB;
    --mapa-blue-dark: #165E91;
    --mapa-blue-soft: #DCEDFA;
    --mapa-sand: #E0A332;
    --mapa-sand-soft: #F8EACB;
}

.tramaviva-mapa-page .tramaviva-territory-eyebrow::before {
    background: var(--mapa-teal);
}

.tramaviva-mapa-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: center;
    gap: 48px;
    padding-block: 48px 36px;
}

.tramaviva-mapa-hero h1 {
    margin: 0 0 18px;
    color: var(--mapa-teal-dark);
    font-size: 38px;
}

.tramaviva-mapa-hero-copy > p:not(.tramaviva-territory-eyebrow) {
    margin: 0 0 14px;
}

.tramaviva-mapa-hero-copy > p:last-child,
.tramaviva-mapa-section-head p,
.tramaviva-mapa-connected p,
.tramaviva-mapa-origin p,
.tramaviva-mapa-question p {
    color: #5C6B73;
}

.tramaviva-mapa-hero-art svg {
    display: block;
    width: 100%;
    height: auto;
}

.tramaviva-mapa-hero-land {
    fill: #FFFFFF;
    stroke: #C9DDD7;
    stroke-width: 3;
}

.tramaviva-mapa-hero-fold,
.tramaviva-mapa-hero-route {
    fill: none;
    stroke: var(--mapa-teal);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-mapa-hero-fold {
    stroke-width: 2;
    opacity: .35;
}

.tramaviva-mapa-hero-route {
    stroke-width: 5;
}

.tramaviva-mapa-hero-pin {
    fill: var(--mapa-blue);
    stroke: #FFFFFF;
    stroke-width: 5;
}

.tramaviva-mapa-hero-pin-dot {
    fill: #FFFFFF;
}

.tramaviva-mapa-section-head {
    max-width: 760px;
    margin-bottom: 26px;
}

.tramaviva-mapa-section-head h2 {
    margin-bottom: 12px;
}

.tramaviva-mapa-section-head p {
    margin: 0;
}

.tramaviva-mapa-zoom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.tramaviva-mapa-zoom article {
    position: relative;
    min-width: 0;
    padding: 20px 20px 18px;
    border: 1px solid #D5E5DF;
    border-top: 3px solid var(--mapa-teal);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-mapa-zoom article:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    width: 24px;
    height: 2px;
    background: var(--mapa-teal);
    transform: translateY(-50%);
    z-index: 1;
}

.tramaviva-mapa-zoom article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--mapa-teal);
    border-right: 2px solid var(--mapa-teal);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

.tramaviva-mapa-zoom span {
    display: block;
    margin-bottom: 12px;
    color: var(--mapa-teal-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tramaviva-mapa-zoom svg {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--mapa-teal-soft);
    stroke: var(--mapa-teal);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-mapa-zoom circle {
    fill: var(--mapa-blue);
    stroke: #FFFFFF;
}

.tramaviva-mapa-zoom .tramaviva-mapa-zoom-highlight {
    fill: var(--mapa-blue);
    stroke: #FFFFFF;
    stroke-width: .8;
}

.tramaviva-mapa-zoom .tramaviva-mapa-zoom-guide {
    fill: none;
    stroke: var(--mapa-blue-dark);
    stroke-width: 1;
}

.tramaviva-mapa-zoom text {
    fill: var(--mapa-teal-dark);
    stroke: none;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
}

.tramaviva-mapa-zoom .tramaviva-mapa-zoom-water {
    fill: var(--mapa-blue-soft);
    stroke: none;
}

.tramaviva-mapa-zoom .tramaviva-mapa-zoom-local-coast {
    fill: none;
    stroke: var(--mapa-sand);
    stroke-width: 3;
}

.tramaviva-mapa-zoom .tramaviva-mapa-zoom-stream {
    fill: none;
    stroke: var(--mapa-blue);
    stroke-width: 3;
}

.tramaviva-mapa-source {
    margin: 12px 0 0;
    color: #5C6B73;
    font-size: 10px;
}

.tramaviva-mapa-source a {
    color: var(--mapa-teal);
    text-underline-offset: 3px;
}

.tramaviva-mapa-microtrama {
    display: flex;
    gap: 10px;
    width: fit-content;
    margin: 2px 42px 0 auto;
    opacity: .32;
    pointer-events: none;
}

.tramaviva-mapa-microtrama span {
    width: 12px;
    height: 36px;
    border-radius: 999px;
    background: var(--mapa-teal);
}

.tramaviva-mapa-microtrama span:nth-child(2) { height: 22px; margin-top: 14px; background: var(--mapa-blue); }
.tramaviva-mapa-microtrama span:nth-child(3) { height: 30px; margin-top: 4px; background: #5FAE45; }
.tramaviva-mapa-microtrama span:nth-child(4) { height: 18px; margin-top: 18px; background: var(--mapa-sand); }
.tramaviva-mapa-microtrama span:nth-child(5) { height: 28px; margin-top: 8px; background: #EC6A47; }
.tramaviva-mapa-microtrama--second {
    margin: 0 auto 4px 46px;
}

.tramaviva-mapa-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 24px;
    align-items: stretch;
}

.tramaviva-mapa-canvas {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid #D5E5DF;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(46 149 219 / 9%), transparent 34%),
        linear-gradient(140deg, #F4F1E8, #EAF3EE);
}

.tramaviva-mapa-territory-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tramaviva-mapa-geography-narrow {
    display: none;
}

.tramaviva-mapa-water,
.tramaviva-mapa-mouth {
    fill: #BBDDED;
}

.tramaviva-mapa-wetland {
    fill: #5FAE45;
    opacity: .16;
}

.tramaviva-mapa-sand-band {
    fill: var(--mapa-sand-soft);
}

.tramaviva-mapa-river,
.tramaviva-mapa-coast,
.tramaviva-mapa-dunes,
.tramaviva-mapa-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-mapa-river {
    stroke: var(--mapa-blue);
    stroke-width: 36;
    opacity: .35;
}

.tramaviva-mapa-coast {
    stroke: var(--mapa-blue-dark);
    stroke-width: 2;
    stroke-dasharray: 2 12;
    vector-effect: non-scaling-stroke;
    opacity: .34;
}

.tramaviva-mapa-dunes {
    stroke: var(--mapa-sand);
    stroke-width: 9;
    opacity: .34;
}

.tramaviva-mapa-route-line {
    stroke: var(--mapa-teal);
    stroke-width: 3;
    stroke-dasharray: 8 12;
    vector-effect: non-scaling-stroke;
    opacity: .85;
}

.tramaviva-mapa-point {
    --point-color: var(--mapa-teal);
    position: absolute;
    left: var(--point-x);
    top: var(--point-y);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 170px;
    min-height: 52px;
    padding: 7px 12px 7px 7px;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: var(--point-color);
    color: #FFFFFF;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    box-shadow: 0 8px 20px rgb(30 45 51 / 14%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.tramaviva-mapa-point span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tramaviva-mapa-point--desembocadura {
    max-width: 185px;
}

.tramaviva-mapa-point--desembocadura span {
    white-space: normal;
    overflow-wrap: normal;
}

.tramaviva-mapa-point-icon {
    display: block;
    width: 38px;
    height: 38px;
    padding: 7px;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-mapa-point:hover,
.tramaviva-mapa-point.is-selected {
    border-color: #0E4D47;
}

.tramaviva-mapa-point:focus-visible {
    outline: 3px solid #0E4D47;
    outline-offset: 4px;
}

.tramaviva-mapa-panel {
    --panel-color: var(--mapa-teal);
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
    align-content: start;
    min-width: 0;
    padding: 24px;
    border: 1px solid #D5E5DF;
    border-left: 4px solid var(--panel-color);
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-mapa-panel-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-color) 14%, #FFFFFF);
}

.tramaviva-mapa-panel-svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: var(--panel-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-mapa-panel-kicker,
.tramaviva-mapa-kicker {
    margin: 0 0 8px;
    color: var(--mapa-teal);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tramaviva-mapa-panel h3 {
    margin: 0 0 10px;
    color: var(--mapa-teal-dark);
    font-size: 22px;
}

.tramaviva-mapa-panel p:not(.tramaviva-mapa-panel-kicker) {
    margin: 0;
    color: #5C6B73;
    font-size: 13px;
}

.tramaviva-mapa-connected {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.tramaviva-mapa-route {
    display: grid;
    grid-template-columns: repeat(6, minmax(136px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tramaviva-mapa-route li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 136px;
    min-height: 68px;
    padding: 16px 10px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--mapa-teal-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px #D5E5DF;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.tramaviva-mapa-route li:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -21px;
    top: 50%;
    width: 18px;
    height: 2px;
    background: var(--mapa-teal);
    transform: translateY(-50%);
}

.tramaviva-mapa-route li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--mapa-teal);
    border-right: 2px solid var(--mapa-teal);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

.tramaviva-mapa-origin {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-block: 8px 32px;
    padding: 30px 0;
    border-block: 1px solid #D5E5DF;
}

.tramaviva-mapa-origin h2 {
    margin-bottom: 12px;
}

.tramaviva-mapa-origin p {
    margin: 0;
}

.tramaviva-mapa-origin .tramaviva-mapa-kicker {
    margin-bottom: 8px;
}

.tramaviva-mapa-group-place {
    font-size: 13px;
}

.tramaviva-mapa-journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tramaviva-mapa-journey li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 108px;
    padding: 18px 22px;
    border-left: 3px solid var(--mapa-teal);
    background: var(--mapa-teal-soft);
}

.tramaviva-mapa-journey li:last-child {
    border-color: var(--mapa-blue);
    background: var(--mapa-blue-soft);
}

.tramaviva-mapa-journey li:first-child::before,
.tramaviva-mapa-journey-photos figure:first-child::before {
    content: "";
    position: absolute;
    right: -65px;
    top: 50%;
    width: 50px;
    height: 2px;
    background: var(--mapa-teal);
    transform: translateY(-50%);
}

.tramaviva-mapa-journey li:first-child::after,
.tramaviva-mapa-journey-photos figure:first-child::after {
    content: "";
    position: absolute;
    right: -62px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--mapa-teal);
    border-right: 2px solid var(--mapa-teal);
    transform: translateY(-50%) rotate(45deg);
}

.tramaviva-mapa-journey strong {
    color: var(--mapa-teal-dark);
    font-size: 21px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tramaviva-mapa-journey span,
.tramaviva-mapa-journey small {
    color: #5C6B73;
    font-size: 12px;
}

.tramaviva-mapa-origin .tramaviva-mapa-journey-note {
    font-size: 12px;
}

.tramaviva-mapa-travel-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
    margin: 0;
}

.tramaviva-mapa-travel-metrics > div {
    min-width: 0;
    padding: 16px;
    border: 1px solid #D5E5DF;
    border-radius: 8px;
    background: #FFFFFF;
}

.tramaviva-mapa-travel-metrics dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mapa-teal-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.tramaviva-mapa-travel-metrics .tramaviva-territory-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    stroke: var(--mapa-teal);
}

.tramaviva-mapa-travel-metrics dd {
    margin: 12px 0 0;
    color: var(--mapa-teal-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.tramaviva-mapa-travel-metrics .is-pending dd {
    color: #5C6B73;
    font-size: 13px;
    font-weight: 500;
}

.tramaviva-mapa-travel-detail {
    display: block;
    margin-top: 8px;
    color: #5C6B73;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.tramaviva-mapa-travel-metric--paisajes dd {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.tramaviva-mapa-travel-metrics a {
    display: block;
    margin-top: 8px;
    color: var(--mapa-teal);
    font-size: 11px;
    font-weight: 500;
}

.tramaviva-mapa-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tramaviva-mapa-journey-photos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    width: 100%;
}

.tramaviva-mapa-journey-photos .tramaviva-mapa-photo-placeholder,
.tramaviva-mapa-journey-photos .tramaviva-mapa-photo img {
    aspect-ratio: 16 / 9;
}

.tramaviva-mapa-photo {
    position: relative;
    min-width: 0;
    margin: 0;
}

.tramaviva-mapa-photo-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.tramaviva-mapa-photo-link:focus-visible {
    outline: 3px solid var(--mapa-teal);
    outline-offset: 3px;
}

.tramaviva-mapa-photo img,
.tramaviva-mapa-photo-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #D5E5DF;
    border-radius: 8px;
}

.tramaviva-mapa-photo--durazno img {
    object-position: 50% 50%;
}

.tramaviva-mapa-photo--humedal img {
    object-position: 50% 55%;
}

.tramaviva-mapa-photo--desembocadura img {
    object-position: 50% 40%;
}

.tramaviva-mapa-photo--medano img {
    object-position: 50% 45%;
}

.tramaviva-mapa-photo--llegada img {
    object-position: 50% 75%;
}

.tramaviva-mapa-photo--estuario img {
    object-fit: cover;
    object-position: 50% 65%;
}

.tramaviva-mapa-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #E7F0EB;
    color: var(--mapa-teal);
}

.tramaviva-mapa-photo-placeholder .tramaviva-territory-icon {
    width: 32px;
    height: 32px;
    stroke: var(--mapa-teal);
    opacity: .65;
}

.tramaviva-mapa-photo-placeholder span {
    font-size: 10px;
}

.tramaviva-mapa-photo figcaption {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    overflow-wrap: anywhere;
}

.tramaviva-mapa-photo figcaption strong {
    color: var(--mapa-teal-dark);
    font-size: 12px;
    line-height: 1.5;
}

.tramaviva-mapa-photo figcaption span {
    color: #5C6B73;
    font-size: 10px;
    line-height: 1.5;
}

.tramaviva-mapa-photo figcaption a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tramaviva-mapa-read-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: none;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.tramaviva-mapa-read-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 18px 20px;
    background: var(--read-color, var(--mapa-teal));
    color: #FFFFFF;
}

.tramaviva-mapa-read-head .tramaviva-territory-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    stroke: #FFFFFF;
}

.tramaviva-mapa-read-head h3 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    text-transform: uppercase;
}

.tramaviva-mapa-read-card p {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 88px;
    margin: 0;
    padding: 18px 20px 22px;
    background: var(--read-tint, var(--mapa-teal-soft));
    transition: background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-mapa-route li:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 0 0 1px #9EBEB3, 0 6px 16px rgb(14 77 71 / 14%);
    }

    .tramaviva-mapa-read-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgb(14 77 71 / 14%);
        border-color: color-mix(in srgb, var(--read-color, var(--mapa-teal)) 35%, #E7DFCC);
    }
}

.tramaviva-mapa-read--orientacion { --read-color: var(--mapa-teal); --read-tint: var(--mapa-teal-soft); }
.tramaviva-mapa-read--referencias { --read-color: var(--mapa-blue); --read-tint: var(--mapa-blue-soft); }
.tramaviva-mapa-read--distancias { --read-color: var(--mapa-sand); --read-tint: var(--mapa-sand-soft); }
.tramaviva-mapa-read--recorridos { --read-color: #EC6A47; --read-tint: #FCE3DA; }

.tramaviva-mapa-question {
    margin-bottom: 28px;
    padding: 34px;
    border-radius: 8px;
    background: var(--mapa-teal-dark);
    color: #FFFFFF;
}

.tramaviva-mapa-question h2 {
    max-width: 780px;
    margin: 0 0 14px;
    color: #FFFFFF;
    font-size: 28px;
}

.tramaviva-mapa-question p {
    max-width: 720px;
    margin: 0;
    color: rgb(255 255 255 / 82%);
}

@media (max-width: 1100px) {
    .tramaviva-mapa-explorer {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-mapa-panel {
        grid-template-columns: 58px minmax(0, 1fr);
    }

}

@media (max-width: 1000px) {
    .tramaviva-mapa-travel-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .tramaviva-mapa-route li {
        min-width: 0;
        min-height: 52px;
        padding: 14px 16px;
    }

    .tramaviva-mapa-route li:not(:last-child)::before {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -21px;
        width: 2px;
        height: 18px;
        transform: translateX(-50%);
    }

    .tramaviva-mapa-route li:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -20px;
        transform: translateX(-50%) rotate(135deg);
    }
}

@media (max-width: 900px) {
    .tramaviva-mapa-hero,
    .tramaviva-mapa-connected,
    .tramaviva-mapa-origin {
        grid-template-columns: minmax(0, 1fr);
    }

    .tramaviva-mapa-hero-art {
        width: min(100%, 320px);
        justify-self: center;
    }

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

    .tramaviva-mapa-zoom article:not(:last-child)::before {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -28px;
        width: 2px;
        height: 24px;
        transform: translateX(-50%);
    }

    .tramaviva-mapa-zoom article:not(:last-child)::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -26px;
        transform: translateX(-50%) rotate(135deg);
    }
}

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

    .tramaviva-mapa-canvas {
        min-height: 640px;
    }

    .tramaviva-mapa-point {
        grid-template-columns: 34px minmax(0, 1fr);
        max-width: 145px;
        min-height: 48px;
        padding-right: 10px;
        font-size: 11px;
    }

    .tramaviva-mapa-point-icon {
        width: 34px;
        height: 34px;
        padding: 7px;
    }

    .tramaviva-mapa-point--desembocadura {
        max-width: 175px;
    }

}

@media (max-width: 600px) {
    .tramaviva-mapa-hero {
        gap: 12px;
        padding-block: 32px 18px;
    }

    .tramaviva-mapa-hero h1 {
        font-size: 30px;
    }

    .tramaviva-mapa-canvas {
        min-height: 700px;
    }

    .tramaviva-mapa-geography-wide { display: none; }
    .tramaviva-mapa-geography-narrow { display: inline; }

    .tramaviva-mapa-point--campamento { --point-x: 66% !important; --point-y: 12% !important; }
    .tramaviva-mapa-point--arroyo { --point-x: 30% !important; --point-y: 25% !important; }
    .tramaviva-mapa-point--humedal { --point-x: 65% !important; --point-y: 39% !important; }
    .tramaviva-mapa-point--cangrejal { --point-x: 31% !important; --point-y: 51% !important; }
    .tramaviva-mapa-point--desembocadura { --point-x: 38% !important; --point-y: 67% !important; }
    .tramaviva-mapa-point--medano { --point-x: 72% !important; --point-y: 76% !important; }
    .tramaviva-mapa-point--rio { --point-x: 49% !important; --point-y: 91% !important; }

    .tramaviva-mapa-travel-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tramaviva-mapa-travel-metrics > div:last-child {
        grid-column: 1 / -1;
    }

    .tramaviva-mapa-journey,
    .tramaviva-mapa-journey-photos {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .tramaviva-mapa-journey li:first-child::before,
    .tramaviva-mapa-journey-photos figure:first-child::before {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -33px;
        width: 2px;
        height: 26px;
        transform: translateX(-50%);
    }

    .tramaviva-mapa-journey li:first-child::after,
    .tramaviva-mapa-journey-photos figure:first-child::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -32px;
        transform: translateX(-50%) rotate(135deg);
    }

    .tramaviva-mapa-journey-photos .tramaviva-mapa-photo-placeholder,
    .tramaviva-mapa-journey-photos .tramaviva-mapa-photo img {
        aspect-ratio: 16 / 9;
    }

    .tramaviva-mapa-photo-strip .tramaviva-mapa-photo-placeholder,
    .tramaviva-mapa-photo-strip img {
        aspect-ratio: 16 / 9;
    }

    .tramaviva-mapa-origin {
        padding-block: 24px;
    }

    .tramaviva-mapa-question {
        padding: 24px 20px;
    }

    .tramaviva-mapa-question h2 {
        font-size: 23px;
    }

    .tramaviva-mapa-microtrama {
        display: none;
    }
}

@media (max-width: 360px) {
    .tramaviva-mapa-canvas {
        min-height: 760px;
    }

    .tramaviva-mapa-panel,
    .tramaviva-mapa-read-head,
    .tramaviva-mapa-read-card p {
        padding-inline: 16px;
    }
}

/* Pie global de exploracion: cierre reutilizable de paginas privadas. */
.tramaviva-exploracion-footer {
    position: relative;
    isolation: isolate;
    margin-top: 56px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgb(46 149 219 / 16%) 0 2px, transparent 2px 34px),
        radial-gradient(circle at 78% 42%, rgb(236 106 71 / 14%) 0 2px, transparent 2px 38px),
        linear-gradient(135deg, #0E4D47, #0B3D39);
    color: #FFFFFF;
}

.tramaviva-exploracion-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgb(224 163 50 / 10%) 1px, transparent 1px),
        linear-gradient(0deg, rgb(95 174 69 / 8%) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
    z-index: -1;
}

.tramaviva-exploracion-inner {
    width: min(100% - 64px, 1160px);
    margin-inline: auto;
    padding-block: 58px 52px;
}

.tramaviva-exploracion-head {
    max-width: 720px;
    margin-bottom: 30px;
}

.tramaviva-exploracion-kicker {
    margin: 0 0 10px;
    color: rgb(255 255 255 / 72%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tramaviva-exploracion-head h2 {
    margin: 0 0 10px;
    color: #FFFFFF;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.tramaviva-exploracion-head p:not(.tramaviva-exploracion-kicker) {
    margin: 0;
    color: rgb(255 255 255 / 82%);
    font-size: 14px;
}

.tramaviva-exploracion-head p.tramaviva-exploracion-current {
    margin-bottom: 12px;
    font-weight: 600;
}

.tramaviva-exploracion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.tramaviva-exploracion-card {
    --exploracion-color: #127A6E;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 188px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 8px;
    background: #FFFFFF;
    color: #1E2D33;
    text-decoration: none;
    box-shadow: 0 16px 34px rgb(0 0 0 / 12%);
}

.tramaviva-exploracion-card-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--exploracion-color);
}

.tramaviva-exploracion-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.tramaviva-exploracion-card-number {
    flex: 0 0 auto;
    margin-left: auto;
    color: color-mix(in srgb, var(--exploracion-color) 70%, #1E2D33);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 28px;
}

.tramaviva-exploracion-card-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    fill: none;
    stroke: var(--exploracion-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-exploracion-card-name {
    display: block;
    margin-bottom: 9px;
    font-family: "Quicksand", "Plus Jakarta Sans", Arial, sans-serif;
    color: #0E4D47;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.tramaviva-exploracion-card-text {
    display: block;
    color: #5C6B73;
    font-size: 12px;
    line-height: 1.6;
}

.tramaviva-exploracion-visited,
.tramaviva-exploracion-coming {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.tramaviva-exploracion-visited[hidden] {
    display: none;
}

.tramaviva-exploracion-visited {
    margin-top: auto;
    padding-top: 16px;
    color: #0E4D47;
}

.tramaviva-exploracion-visited::before {
    content: "✓";
    margin-right: 6px;
    color: var(--exploracion-color);
}

.tramaviva-exploracion-coming {
    padding: 5px 9px;
    background: color-mix(in srgb, var(--exploracion-color) 13%, #FFFFFF);
    color: #334047;
}

.tramaviva-exploracion-card.is-visited {
    border-color: color-mix(in srgb, var(--exploracion-color) 42%, #FFFFFF);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exploracion-color) 16%, transparent), 0 16px 34px rgb(0 0 0 / 12%);
}

.tramaviva-exploracion-card--pending {
    background: #F4F6F3;
    color: #5C6B73;
}

.tramaviva-exploracion-card--pending .tramaviva-exploracion-card-name,
.tramaviva-exploracion-card--pending .tramaviva-exploracion-card-icon {
    opacity: .72;
}

a.tramaviva-exploracion-card {
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    a.tramaviva-exploracion-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--exploracion-color) 58%, #FFFFFF);
        box-shadow: 0 20px 38px rgb(0 0 0 / 16%);
    }
}

a.tramaviva-exploracion-card:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
}

.tramaviva-mapa-page a.tramaviva-exploracion-card {
    transition-duration: 220ms;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-mapa-page a.tramaviva-exploracion-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--exploracion-color) 48%, #FFFFFF);
        box-shadow: 0 20px 36px rgb(0 0 0 / 15%);
    }
}

@media (hover: none), (pointer: coarse) {
    .tramaviva-mapa-page a.tramaviva-exploracion-card:hover {
        transform: none;
        border-color: rgb(255 255 255 / 18%);
        box-shadow: 0 16px 34px rgb(0 0 0 / 12%);
    }

    .tramaviva-mapa-page a.tramaviva-exploracion-card.is-visited:hover {
        border-color: color-mix(in srgb, var(--exploracion-color) 42%, #FFFFFF);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exploracion-color) 16%, transparent), 0 16px 34px rgb(0 0 0 / 12%);
    }
}

@media (max-width: 1199px) {
    .tramaviva-exploracion-inner {
        padding-bottom: 64px;
    }

    .tramaviva-exploracion-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tramaviva-exploracion-card {
        grid-column: span 2;
    }

    .tramaviva-exploracion-card:nth-last-child(2):nth-child(3n + 1),
    .tramaviva-exploracion-card:nth-last-child(2):nth-child(3n + 1) ~ .tramaviva-exploracion-card {
        grid-column: span 3;
    }
}

@media (max-width: 900px) {
    .tramaviva-exploracion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tramaviva-exploracion-card,
    .tramaviva-exploracion-card:nth-last-child(2):nth-child(3n + 1),
    .tramaviva-exploracion-card:nth-last-child(2):nth-child(3n + 1) ~ .tramaviva-exploracion-card {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .tramaviva-exploracion-footer {
        margin-top: 42px;
    }

    .tramaviva-exploracion-inner {
        width: calc(100% - 40px);
        padding-block: 44px 50px;
    }

    .tramaviva-exploracion-head h2 {
        font-size: 26px;
    }

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

@media (max-width: 360px) {
    .tramaviva-exploracion-inner {
        width: calc(100% - 32px);
    }

    .tramaviva-exploracion-card {
        padding-inline: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.tramaviva-exploracion-card {
        transition: none;
    }

    a.tramaviva-exploracion-card:hover {
        transform: none;
    }

    .tramaviva-mapa-read-card,
    .tramaviva-mapa-read-card p,
    .tramaviva-mapa-route li,
    .tramaviva-mapa-page a.tramaviva-exploracion-card {
        transition: none;
    }

    .tramaviva-mapa-page a.tramaviva-exploracion-card:hover,
    .tramaviva-mapa-route li:hover,
    .tramaviva-mapa-read-card:hover {
        transform: none;
    }
}

/* Fotos ampliables: un unico dialogo global, activado mediante atributo. */
[data-tramaviva-lightbox] {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 200ms ease;
}

[data-tramaviva-lightbox] img {
    transition: transform 200ms ease;
}

[data-tramaviva-lightbox]:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    [data-tramaviva-lightbox]:hover {
        box-shadow: 0 8px 20px rgb(14 77 71 / 20%);
    }

    [data-tramaviva-lightbox]:hover img {
        transform: scale(1.02);
    }
}

.tramaviva-lightbox {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 28px;
    border: 0;
    background: transparent;
    color: #26332F;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.tramaviva-lightbox[open] {
    display: grid;
    place-items: center;
}

.tramaviva-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.68);
}

.tramaviva-lightbox-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(950px, 100%);
    height: min(720px, 82vh, 100%);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 24px 64px rgb(0 0 0 / 25%);
}

.tramaviva-lightbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
}

.tramaviva-lightbox .tramaviva-lightbox-title {
    min-width: 0;
    margin: 0;
    color: #155A50;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tramaviva-lightbox-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #D5E5DF;
    border-radius: 6px;
    background: #F1F6F3;
    color: #155A50;
    font: 30px/1 Arial, sans-serif;
    cursor: pointer;
}

.tramaviva-lightbox-close:focus-visible {
    outline: 3px solid #127A6E;
    outline-offset: 2px;
}

.tramaviva-lightbox-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 70vh;
    object-fit: contain;
    object-position: center;
    background: #171D1B;
}

.tramaviva-lightbox-details {
    max-height: 24dvh;
    padding: 12px 16px;
    overflow: auto;
    overflow-wrap: anywhere;
}

.tramaviva-lightbox-details p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.tramaviva-lightbox-details p + p {
    margin-top: 4px;
}

.tramaviva-lightbox-error {
    align-self: center;
    padding: 24px;
    text-align: center;
}

.tramaviva-lightbox [hidden] {
    display: none;
}

@media (max-width: 600px) {
    .tramaviva-lightbox {
        padding: 12px;
    }

    .tramaviva-lightbox-content {
        height: auto;
        max-height: 100%;
    }

    .tramaviva-lightbox-head {
        padding-inline: 12px;
    }

    .tramaviva-lightbox .tramaviva-lightbox-title {
        font-size: 16px;
    }

    .tramaviva-lightbox-image {
        height: auto;
        max-height: calc(100dvh - 200px);
    }

    .tramaviva-lightbox-details {
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-tramaviva-lightbox],
    [data-tramaviva-lightbox] img {
        transition: none;
    }

    [data-tramaviva-lightbox]:hover img {
        transform: none;
    }
}

/* Actividades: cierre del recorrido, sin formularios ni guardado de respuestas. */
.tramaviva-actividades-page {
    --territory-accent: #127A6E;
    --territory-ink: #0E4D47;
    --territory-tint: #E1F0EB;
}

.tramaviva-actividades-hero {
    position: relative;
    isolation: isolate;
    padding-block: 48px 40px;
}

.tramaviva-actividades-hero-labels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 18px;
}

.tramaviva-actividades-hero-labels .tramaviva-territory-eyebrow {
    margin: 0;
    color: #0E4D47;
}

.tramaviva-actividades-hero .tramaviva-territory-eyebrow::before {
    background: #127A6E;
}

.tramaviva-actividades-stage {
    color: #5C6B73;
    font-size: 11px;
    font-weight: 700;
}

.tramaviva-actividades-hero h1 {
    max-width: 780px;
    margin: 0 0 20px;
    color: #0E4D47;
    font-size: 38px;
}

.tramaviva-actividades-hero > p {
    max-width: 780px;
    margin: 0;
    font-size: 16px;
}

.tramaviva-actividades-before {
    padding: 24px 28px;
    border-left: 3px solid #127A6E;
    background: #F2EEE4;
}

.tramaviva-actividades-before h2 {
    margin-bottom: 10px;
    font-size: 22px;
}

.tramaviva-actividades-before p {
    max-width: 900px;
    margin: 0;
}

.tramaviva-actividades-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding-block: 36px 24px;
}

.tramaviva-actividad {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #E7DFCC;
    border-radius: 8px;
    background: #FFFFFF;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.tramaviva-actividad--territorio {
    --territory-accent: #E0A332;
    --territory-ink: #8A5F12;
    --territory-tint: #F8EACB;
    --actividad-head: #A26B00;
}

.tramaviva-actividad--agua {
    --territory-accent: #2E95DB;
    --territory-ink: #165E91;
    --territory-tint: #DCEDFA;
    --actividad-head: #1C6FAE;
}

.tramaviva-actividad--vida {
    --territory-accent: #5FAE45;
    --territory-ink: #326523;
    --territory-tint: #E2F1D8;
    --actividad-head: #3A7426;
}

.tramaviva-actividad--mapa {
    --actividad-head: #127A6E;
}

.tramaviva-actividad-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-height: 132px;
    padding: 24px 28px;
    border-top: 4px solid var(--territory-accent);
    background: var(--actividad-head);
    color: #FFFFFF;
}

.tramaviva-actividad-number {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
}

.tramaviva-actividad-head h2 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: 22px;
    text-wrap: pretty;
}

.tramaviva-actividad-areas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
}

.tramaviva-actividad-areas .tramaviva-territory-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    stroke: #FFFFFF;
}

.tramaviva-actividad-areas a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #FFFFFF;
    text-underline-offset: 3px;
}

.tramaviva-actividad-areas a:focus-visible {
    outline-color: #FFFFFF;
}

.tramaviva-actividad-body {
    padding: 24px 28px;
}

.tramaviva-actividad-body p {
    margin: 0 0 20px;
}

.tramaviva-actividad-body ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 24px;
}

.tramaviva-actividad-body li {
    padding-left: 6px;
    overflow-wrap: anywhere;
}

.tramaviva-actividad-body li::marker {
    color: var(--territory-ink);
    font-weight: 700;
}

.tramaviva-actividad-question {
    display: flex;
    align-items: center;
    min-height: 96px;
    margin: 0;
    padding: 20px 28px;
    border-top: 1px solid #E7DFCC;
    background: var(--territory-tint);
    color: var(--territory-ink);
    font-weight: 700;
}

.tramaviva-actividades-microtrama {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin-block: 4px 16px;
    opacity: .18;
    pointer-events: none;
}

.tramaviva-actividades-microtrama span {
    width: 9px;
    height: 30px;
    border-radius: 5px;
    background: #127A6E;
}

.tramaviva-actividades-microtrama span:nth-child(2) { height: 20px; background: #2E95DB; }
.tramaviva-actividades-microtrama span:nth-child(3) { height: 36px; background: #5FAE45; }
.tramaviva-actividades-microtrama span:nth-child(4) { height: 18px; background: #E0A332; }
.tramaviva-actividades-microtrama span:nth-child(5) { height: 28px; background: #EC6A47; }
.tramaviva-actividades-microtrama span:nth-child(6) { height: 22px; background: #3C8F63; }
.tramaviva-actividades-microtrama span:nth-child(7) { height: 34px; background: #C9643C; }

.tramaviva-actividades-microtrama--hero {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: -1;
    margin: 0;
    opacity: .12;
}

.tramaviva-actividades-journal {
    padding-block: 28px 36px;
    border-top: 2px solid #C9643C;
}

.tramaviva-actividades-journal p {
    max-width: 820px;
    margin: 0;
}

.tramaviva-actividades-notes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.tramaviva-actividades-notes li {
    --bitacora-color: #127A6E;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-height: 120px;
    padding: 18px 16px;
    border: 1px solid var(--bitacora-color);
    border-radius: 6px;
    background: var(--bitacora-color);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
    cursor: default;
}

.tramaviva-actividades-notes li:nth-child(2) { --bitacora-color: #A26B00; }
.tramaviva-actividades-notes li:nth-child(3) { --bitacora-color: #1C6FAE; }
.tramaviva-actividades-notes li:nth-child(4) { --bitacora-color: #C45234; }

.tramaviva-actividades-note-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    opacity: .85;
}

.tramaviva-actividades-note-label {
    align-self: stretch;
    font-size: 13px;
    line-height: 1.5;
}

.tramaviva-actividades-final {
    margin-top: 12px;
    padding: 32px 36px;
    background: #0E4D47;
    color: #FFFFFF;
}

.tramaviva-actividades-final h2 {
    margin-bottom: 14px;
    color: #FFFFFF;
}

.tramaviva-actividades-kicker {
    margin: 0 0 12px;
    color: #E0A332;
    font-size: 11px;
    font-weight: 700;
}

.tramaviva-actividades-final > p:not(.tramaviva-actividades-kicker) {
    max-width: 880px;
    margin: 0;
}

.tramaviva-actividades-final ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
    margin: 28px 0;
    padding-left: 24px;
}

.tramaviva-actividades-final li {
    padding: 0 0 12px 4px;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    overflow-wrap: anywhere;
}

.tramaviva-actividades-final li::marker {
    color: #E0A332;
    font-weight: 700;
}

.tramaviva-actividades-final-note {
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-actividad:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgb(14 77 71 / 14%);
    }
}

@media (max-width: 900px) {
    .tramaviva-actividades-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .tramaviva-actividades-hero {
        padding-block: 32px;
    }

    .tramaviva-actividades-hero h1 {
        font-size: 30px;
    }

    .tramaviva-actividades-hero > p {
        font-size: 14px;
    }

    .tramaviva-actividades-microtrama--hero {
        display: none;
    }

    .tramaviva-actividades-before,
    .tramaviva-actividad-body,
    .tramaviva-actividad-question,
    .tramaviva-actividades-final {
        padding: 22px 20px;
    }

    .tramaviva-actividad-head {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
        padding: 20px;
    }

    .tramaviva-actividad-head h2 {
        font-size: 20px;
    }

    .tramaviva-actividad-number {
        font-size: 32px;
    }

    .tramaviva-actividades-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
    }

    .tramaviva-actividades-final ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .tramaviva-actividad:hover {
        transform: none;
    }
}

/* Terminacion comun de enlaces, sin alterar Mapa Vivo ni Actividades. */
.tramaviva-home-path:has(.tramaviva-home-path-link[href]:not([href="#"])),
.tramaviva-flora-card,
.tramaviva-fauna-card,
a.tramaviva-territory-next {
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.tramaviva-home-path:has(.tramaviva-home-path-link[href]:not([href="#"])) {
    position: relative;
}

.tramaviva-home-path-link[href]:not([href="#"])::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.tramaviva-home-path:has(.tramaviva-home-path-link:focus-visible),
.tramaviva-territory-point:has(summary:focus-visible) {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-territory-point summary:focus-visible {
    outline-offset: -3px;
}

.tramaviva-territory-point summary,
.tramaviva-flora-filter,
.tramaviva-fauna-filter,
.tramaviva-territory-button,
.tramaviva-flora-ficha-button,
.tramaviva-fauna-ficha-button {
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.tramaviva-ficha-photo-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.tramaviva-flora-ficha-photo:has(:focus-visible),
.tramaviva-fauna-ficha-photo:has(:focus-visible) {
    outline: 3px solid #127A6E;
    outline-offset: 4px;
}

.tramaviva-ficha-photo-trigger:focus-visible {
    outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-home-path:has(.tramaviva-home-path-link[href]:not([href="#"])):hover,
    .tramaviva-flora-card:hover,
    .tramaviva-fauna-card:hover,
    a.tramaviva-territory-next:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgb(30 45 51 / 14%);
    }

    .tramaviva-territory-point summary:hover {
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
    }

    .tramaviva-flora-filter:hover,
    .tramaviva-fauna-filter:hover,
    .tramaviva-territory-button:hover,
    .tramaviva-flora-ficha-button:hover,
    .tramaviva-fauna-ficha-button:hover {
        box-shadow: 0 4px 10px rgb(30 45 51 / 12%);
    }

    .tramaviva-home-logout:hover,
    .tramaviva-territory-nav a:hover {
        color: #0E4D47;
        text-decoration-thickness: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tramaviva-home-path,
    .tramaviva-flora-card,
    .tramaviva-fauna-card,
    a.tramaviva-territory-next,
    .tramaviva-territory-point summary,
    .tramaviva-flora-filter,
    .tramaviva-fauna-filter,
    .tramaviva-territory-button,
    .tramaviva-flora-ficha-button,
    .tramaviva-fauna-ficha-button {
        transition: none;
    }

    .tramaviva-home-path:has(.tramaviva-home-path-link[href]:not([href="#"])):hover,
    .tramaviva-flora-card:hover,
    .tramaviva-fauna-card:hover,
    a.tramaviva-territory-next:hover {
        transform: none;
    }
}

/* Imprimir ficha: control junto a "Volver" y "Cerrar sesion", con el mismo aspecto que esos enlaces. */
.tramaviva-ficha-imprimir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #5C6B73;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.tramaviva-ficha-imprimir svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tramaviva-ficha-imprimir span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .tramaviva-ficha-imprimir:hover {
        color: #0E4D47;
    }

    .tramaviva-ficha-imprimir:hover span {
        text-decoration-thickness: 2px;
    }
}

/* Impresion de fichas de Fauna y Flora: hoja A4 limpia y reconocible como TramaViva.
   Funciona sin "graficos de fondo": ningun texto depende de un fondo de color. */
@page tramaviva-ficha {
    size: A4;
    margin: 12mm 14mm 14mm;
}

@media print {
    /* Controles y navegacion: solo sirven en pantalla. */
    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) :is(
        .tramaviva-home-account,
        .tramaviva-exploracion-footer,
        .tramaviva-fauna-ficha-media,
        .tramaviva-fauna-ficha-final-nav,
        .tramaviva-flora-ficha-final-nav,
        .tramaviva-fauna-ficha-button,
        .tramaviva-flora-ficha-button,
        .tramaviva-fauna-ficha-curiosity-pattern,
        .tramaviva-flora-ficha-curiosity-pattern
    ),
    .tramaviva-lightbox {
        display: none !important;
    }

    /* Pagina con nombre: el formato A4 y los margenes valen solo para las fichas. */
    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) {
        page: tramaviva-ficha;
        background: #FFFFFF;
        color: #1E2D33;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) .tramaviva-home-container {
        width: 100%;
    }

    /* Marca discreta arriba de la hoja. */
    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) .tramaviva-home-header {
        border-bottom: 1px solid #D9D2C3;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) .tramaviva-home-header-inner {
        padding-block: 0 8px;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) .tramaviva-home-brand {
        flex: 0 0 120px;
    }

    /* Cabecera: texto y foto lado a lado (en A4 rigen reglas de pantallas chicas). */
    :is(.tramaviva-fauna-ficha-hero, .tramaviva-flora-ficha-hero) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
        align-items: start;
        gap: 18px;
        padding-block: 6px 8px;
        break-inside: avoid;
    }

    :is(.tramaviva-fauna-ficha-hero, .tramaviva-flora-ficha-hero).tramaviva-especie-hero--sin-foto {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.tramaviva-fauna-ficha-hero, .tramaviva-flora-ficha-hero) h1 {
        margin-bottom: 4px;
        font-size: 28px;
    }

    :is(.tramaviva-fauna-ficha-scientific, .tramaviva-flora-ficha-scientific) {
        font-size: 15px;
    }

    :is(.tramaviva-fauna-ficha-badges, .tramaviva-flora-ficha-badges),
    .tramaviva-especie-estado {
        margin-top: 8px;
    }

    /* Etiquetas con borde: se distinguen aunque la impresora no imprima fondos. */
    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) :is(
        .tramaviva-fauna-badge,
        .tramaviva-flora-badge,
        .tramaviva-fauna-ficha-presence,
        .tramaviva-flora-ficha-presence,
        .tramaviva-fauna-ficha-ambient,
        .tramaviva-flora-ficha-ambient
    ) {
        border: 1px solid currentColor;
    }

    :is(.tramaviva-fauna-ficha-presence, .tramaviva-flora-ficha-presence) {
        padding: 6px 10px;
    }

    .tramaviva-especie-presencia-nota,
    .tramaviva-especie-credito {
        color: #3F4C4A;
    }

    :is(.tramaviva-fauna-ficha-lead, .tramaviva-flora-ficha-lead) {
        margin-top: 10px;
    }

    :is(.tramaviva-fauna-ficha-lead, .tramaviva-flora-ficha-lead) p {
        font-size: 14px;
        line-height: 1.45;
    }

    /* Foto completa, proporcion original, nunca mas grande que su resolucion.
       Con 66 mm de alto la ficha entra en una hoja A4 en casi todas las especies. */
    .tramaviva-especie-foto {
        max-width: none;
        break-inside: avoid;
    }

    :is(.tramaviva-fauna-ficha-photo, .tramaviva-flora-ficha-photo) {
        max-width: none;
        border-color: #D9D2C3;
    }

    :is(.tramaviva-fauna-ficha-photo, .tramaviva-flora-ficha-photo) img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 66mm;
    }

    [data-tramaviva-lightbox] {
        cursor: auto;
    }

    .tramaviva-especie-galeria-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .tramaviva-especie-galeria-grid img {
        max-height: 60mm;
    }

    /* Contenido educativo: bloques compactos que no se parten entre hojas. */
    :is(.tramaviva-fauna-ficha-stack, .tramaviva-flora-ficha-stack) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-bottom: 0;
    }

    :is(.tramaviva-fauna-ficha-stack, .tramaviva-flora-ficha-stack) > * {
        grid-column: 1 / -1;
    }

    /* En pantalla las tarjetas suben sobre la cabecera; impresas quedarian pegadas al texto. */
    .tramaviva-flora-ficha-hero + .tramaviva-flora-ficha-stack {
        margin-top: 0;
    }

    /* Curiosidad y consigna final lado a lado: ahorran una fila y, si la ficha
       necesita una segunda hoja, pasan juntas en lugar de quedar un bloque solo. */
    :is(.tramaviva-fauna-ficha-stack, .tramaviva-flora-ficha-stack) > :is(
        .tramaviva-fauna-ficha-curiosity,
        .tramaviva-flora-ficha-curiosity,
        .tramaviva-fauna-ficha-territory,
        .tramaviva-flora-ficha-territory
    ) {
        grid-column: auto;
    }

    :is(.tramaviva-fauna-ficha-grid, .tramaviva-flora-ficha-grid) {
        gap: 10px;
    }

    :is(.tramaviva-fauna-ficha-grid--two, .tramaviva-flora-ficha-grid--two) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.tramaviva-fauna-ficha-grid--three, .tramaviva-flora-ficha-grid--three) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Las tres tarjetas en una fila, sea cual sea el ancho imprimible. */
    :is(.tramaviva-fauna-ficha-grid--three, .tramaviva-flora-ficha-grid--three) > :last-child:nth-child(odd) {
        grid-column: auto;
    }

    :is(
        .tramaviva-fauna-ficha-panel,
        .tramaviva-flora-ficha-panel,
        .tramaviva-fauna-ficha-edu,
        .tramaviva-flora-ficha-edu,
        .tramaviva-fauna-ficha-full,
        .tramaviva-flora-ficha-full,
        .tramaviva-especie-galeria figure
    ) {
        break-inside: avoid;
    }

    :is(.tramaviva-fauna-ficha-panel, .tramaviva-flora-ficha-panel) {
        gap: 6px;
        padding: 10px 12px;
    }

    :is(.tramaviva-fauna-ficha-full, .tramaviva-flora-ficha-full) {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    :is(.tramaviva-fauna-ficha-important, .tramaviva-flora-ficha-important) {
        border: 1px solid #CFE3DC;
        background: #FFFFFF;
    }

    :is(.tramaviva-fauna-ficha-full, .tramaviva-flora-ficha-full) > .tramaviva-territory-icon {
        width: 32px;
        height: 32px;
        padding: 6px;
        border: 1px solid #D9D2C3;
        background: #FFFFFF;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) main :is(h2, h3) {
        break-after: avoid;
    }

    :is(
        .tramaviva-fauna-ficha-panel,
        .tramaviva-flora-ficha-panel,
        .tramaviva-fauna-ficha-full,
        .tramaviva-flora-ficha-full,
        .tramaviva-especie-galeria
    ) h2 {
        font-size: 16px;
    }

    :is(.tramaviva-fauna-ficha-page, .tramaviva-flora-ficha-page) main p {
        color: #1E2D33;
        orphans: 3;
        widows: 3;
    }

    :is(.tramaviva-fauna-ficha-territory, .tramaviva-flora-ficha-territory) :is(.tramaviva-fauna-ficha-question, .tramaviva-flora-ficha-question) {
        margin-top: 8px;
        font-size: 15px;
    }

    /* Tarjetas "Que come", "Como se mueve"...: el titulo blanco sobre color pasa a
       texto oscuro con una linea del color de la tarjeta (menos tinta, legible en gris). */
    :is(.tramaviva-fauna-ficha-edu-head, .tramaviva-flora-ficha-edu-head) {
        padding: 7px 12px;
        border-bottom: 3px solid #B95339;
        background: none;
    }

    :is(.tramaviva-fauna-ficha-edu-head, .tramaviva-flora-ficha-edu-head) .tramaviva-territory-icon {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        stroke: #1E2D33;
    }

    :is(.tramaviva-fauna-ficha-edu, .tramaviva-flora-ficha-edu) h2 {
        color: #1E2D33;
        font-size: 14px;
    }

    :is(.tramaviva-fauna-ficha-edu, .tramaviva-flora-ficha-edu) p {
        padding: 8px 12px;
    }

    .tramaviva-fauna-ficha-edu--movimiento .tramaviva-fauna-ficha-edu-head {
        border-bottom-color: #287D70;
        background: none;
    }

    .tramaviva-fauna-ficha-edu--rastros .tramaviva-fauna-ficha-edu-head {
        border-bottom-color: #936923;
        background: none;
    }

    .tramaviva-flora-ficha-edu-head {
        border-bottom-color: var(--flora-green-dark);
    }

    .tramaviva-flora-ficha-edu--distribucion .tramaviva-flora-ficha-edu-head {
        border-bottom-color: var(--flora-teal);
        background: none;
    }

    .tramaviva-flora-ficha-edu--importancia .tramaviva-flora-ficha-edu-head {
        border-bottom-color: var(--flora-wetland);
        background: none;
    }
}