/* =========================================================
   FUENTES LOCALES
   Coloca los archivos dentro de assets/fonts/
   ========================================================= */

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marydale";
    src: url("assets/fonts/Marydale Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --rpm-blue: #1F62E8;
    --rpm-light: #FFFDFA;
    --rpm-dark: #001A49;
    --rpm-gray: #515456;
    --rpm-pink: #E54193;
    --rpm-pink-light: #FDC6E5;
    --rpm-card-bg: rgba(255, 253, 250, 0.50);
    --rpm-nav-bg: rgba(255, 253, 250, 0.80);
    --rpm-card-radius-mobile: 28px;
    --rpm-card-radius-desktop: 48px;
    --rpm-card-blur: 10px;

    --soft-shadow:
        0 10px 24px rgba(32, 76, 160, 0.18),
        0 3px 8px rgba(20, 50, 100, 0.10);

    --nav-height: 62px;
}


/* =========================================================
   ESTILOS GENERALES
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 18px);
    background-color: #CAE2FF;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;

    color: var(--rpm-gray);

    background-color: #CAE2FF;
    background-image:
        url("assets/fondo01.png"),
        linear-gradient(
            180deg,
            #CAE2FF 0%,
            #1F62E8 18%,
            #4A79ED 36%,
            #9FC6FF 55%,
            #61A1FF 69%,
            #CAE2FF 84%,
            #4A79ED 100%
        );

    background-position: center top;
    background-repeat: no-repeat;
    background-size: calc(100% + 64px) 100%;

    font-family: "Poppins", Arial, sans-serif;
    font-weight: 300;

    opacity: 1;

    animation: rpm-page-enter 0.42s ease both;
    transition: opacity 0.23s ease;
}

body.menu-open {
    overflow: hidden;
}

body.is-page-leaving {
    opacity: 0;
    pointer-events: none;
}

@keyframes rpm-page-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--rpm-light);
    outline-offset: 4px;
}

.page-container {
    width: min(calc(100% - 32px), 1180px);
    margin-inline: auto;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    height: var(--nav-height);

    background: var(--rpm-nav-bg);
    box-shadow:
        0 8px 22px rgba(24, 59, 130, 0.23),
        0 3px 8px rgba(20, 50, 100, 0.13);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-inner {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
}

.nav-brand img {
    width: 100%;
    height: 44px;
    object-fit: contain;
}

.menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1002;

    display: grid;
    gap: 5px;

    width: 42px;
    height: 42px;
    padding: 10px 7px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    cursor: pointer;

    transform: translateY(-50%);
}

.menu-toggle span {
    display: block;

    width: 27px;
    height: 2px;

    border-radius: 99px;
    background: var(--rpm-blue);

    transform-origin: center;

    transition:
        transform 0.32s ease,
        opacity 0.22s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-links {
    display: none;
}

.nav-indicator {
    position: absolute;
    left: 0;
    bottom: 4px;

    width: 32px;
    height: 2px;

    border-radius: 999px;
    background: var(--rpm-blue);

    opacity: 0;
    pointer-events: none;

    transform: translate3d(0, 0, 0);

    transition:
        transform 0.66s cubic-bezier(0.22, 0.75, 0.24, 1),
        width 0.66s cubic-bezier(0.22, 0.75, 0.24, 1),
        opacity 0.28s ease;
}

.nav-indicator.is-visible {
    opacity: 1;
}

.nav-indicator.is-initializing {
    transition: none;
}

.mobile-menu {
    position: fixed;
    inset: var(--nav-height) 0 0;
    z-index: 1001;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: clamp(24px, 6vh, 44px);
    padding: 28px;

    background: rgba(255, 253, 250, 0.97);
    color: var(--rpm-dark);

    font-size: 1.28rem;
    font-weight: 700;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-18px);

    transition:
        opacity 0.34s ease,
        transform 0.34s ease,
        visibility 0.34s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu a {
    position: relative;
    padding: 6px 12px;
}

.mobile-menu a::after,
.nav-links a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 2px;
    background: var(--rpm-blue);

    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.mobile-menu a.is-active::after,
.nav-links a.is-active::after {
    width: 32px;
}

.mobile-menu a.is-active,
.nav-links a.is-active {
    color: var(--rpm-blue);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 238px;
    padding: 88px 16px 38px;

    text-align: center;
}

.hero-logo {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;

    width: clamp(205px, 58vw, 270px);
    height: auto;
    object-fit: contain;

    transform: translate(-50%, -50%);
}

.hero h1 {
    margin: 0;

    color: var(--rpm-light);

    font-size: clamp(1.55rem, 7vw, 1.85rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;

    text-shadow: 0 2px 8px rgba(32, 75, 151, 0.12);

    transform: translateY(-10px);
}


/* =========================================================
   CARRUSEL
   ========================================================= */

.gallery-section {
    position: relative;
    width: 100%;
}

.carousel {
    position: relative;

    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;

    overflow: hidden;

    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.carousel.is-dragging {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    height: 100%;

    will-change: transform;

    transition:
        transform 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carousel.is-dragging .carousel-track {
    transition: none;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;
}

.carousel-dots {
    position: absolute;
    top: 11px;
    left: 50%;
    bottom: auto;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 4px;

    transform: translateX(-50%);
}

.carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;

    border: 1px solid rgba(255, 253, 250, 0.9);
    border-radius: 50%;

    background: rgba(255, 253, 250, 0.52);
    cursor: pointer;

    transition:
        width 0.25s ease,
        transform 0.25s ease,
        background-color 0.25s ease;
}

.carousel-dot.is-active {
    width: 13px;

    border-radius: 6px;
    background: var(--rpm-light);
    transform: scale(1.04);
}


/* =========================================================
   TARJETA ¿POR QUÉ RPM?
   ========================================================= */

.why-section {
    padding-top: 31px;
}

.why-card {
    width: min(88%, 560px);
    margin-inline: auto;
    padding: 18px 18px 30px;

    border-radius: var(--rpm-card-radius-mobile);

    background: var(--rpm-card-bg);
    box-shadow: 0 12px 28px rgba(20, 50, 120, 0.20);

    text-align: center;

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.why-artwork {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    height: 160px;
}

.why-artwork img {
    object-fit: contain;
}

.why-artwork video {
    display: block;
    object-fit: contain;
    background: transparent;
    pointer-events: none;
}

.rpm-gauge {
    width: 58%;
    height: 142px;
}

.rpm-dog {
    width: 34%;
    height: 152px;
}

.why-card p {
    max-width: 420px;
    margin: 8px auto 0;

    color: var(--rpm-gray);

    font-size: clamp(0.78rem, 3.35vw, 0.93rem);
    line-height: 1.38;
}

.why-card strong {
    color: var(--rpm-dark);
    font-weight: 700;
}

.desktop-break {
    display: none;
}


/* =========================================================
   BOTÓN DE WHATSAPP
   ========================================================= */

.appointment-wrap {
    position: relative;

    display: flex;
    justify-content: center;

    margin: 49px auto 38px;
}

.appointment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: min(77vw, 290px);
    min-height: 52px;
    padding: 10px 22px;

    border-radius: 999px;

    color: var(--rpm-light);
    background: var(--rpm-blue);

    box-shadow: 0 8px 18px rgba(31, 98, 232, 0.30);

    font-size: clamp(1.15rem, 5.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.appointment-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 21px rgba(31, 98, 232, 0.34);
}

.appointment-note {
    position: absolute;
    top: -24px;
    left: max(-4px, calc(50% - 196px));

    width: 88px;

    color: var(--rpm-light);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: 1.05rem;
    line-height: 1;

    transform: rotate(2deg);
}

.appointment-note img {
    width: 55px;
    height: 22px;
    margin: 6px 0 0 10px;

    object-fit: contain;
}


/* =========================================================
   TARJETAS DE CARACTERÍSTICAS
   ========================================================= */

.features {
    display: grid;
    gap: 23px;

    padding-bottom: 48px;
}

.feature-card {
    display: grid;
    grid-template-columns: 44% 1fr;
    align-items: center;

    width: min(82%, 430px);
    min-height: 158px;
    margin-inline: auto;
    padding: 12px 19px 12px 12px;

    border-radius: var(--rpm-card-radius-mobile);

    background: var(--rpm-card-bg);
    box-shadow: var(--soft-shadow);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 13px 28px rgba(32, 76, 160, 0.20),
        0 4px 9px rgba(20, 50, 100, 0.11);
}

.feature-card img {
    width: 100%;
    height: 134px;

    object-fit: contain;
}

.feature-copy {
    min-width: 0;
    padding-left: 3px;
}

.feature-card h2 {
    margin: 0 0 7px;

    color: var(--rpm-dark);

    font-size: clamp(0.76rem, 3.3vw, 0.96rem);
    font-weight: 700;
    line-height: 1.2;
}

.feature-card p {
    margin: 0;

    color: var(--rpm-gray);

    font-size: clamp(0.67rem, 2.8vw, 0.84rem);
    line-height: 1.28;
}


/* =========================================================
   UBICACIÓN
   ========================================================= */

.location-section {
    width: 100%;
    padding: 41px 0 34px;

    background: rgba(255, 253, 250, 0.30);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.location-inner {
    position: relative;
}

.location-note {
    position: relative;

    width: min(78%, 880px);
    height: 21px;
    margin: 0 auto;

    color: var(--rpm-blue);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: 1rem;
}

.location-note span {
    position: absolute;
    left: 0;
    bottom: 3px;
}

.location-note img {
    position: absolute;
    left: -29px;
    top: 1px;

    width: 28px;
    height: 50px;

    object-fit: contain;
}

.map-frame {
    position: relative;

    width: min(75%, 880px);
    height: clamp(175px, 48vw, 260px);
    margin: 0 auto;

    border-top: 1px solid rgba(31, 98, 232, 0.55);
}

.map-frame::before,
.map-frame::after {
    content: "";

    position: absolute;
    top: 0;
    z-index: 1;

    width: 1px;
    height: 100%;

    background: rgba(31, 98, 232, 0.55);

    pointer-events: none;
}

.map-frame::before {
    left: 0;
}

.map-frame::after {
    right: 0;
}

.map-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

.address {
    width: min(90%, 760px);
    margin: 13px auto 0;

    color: var(--rpm-gray);

    font-size: clamp(0.58rem, 2.3vw, 0.76rem);
    line-height: 1.45;
    text-align: center;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    position: relative;
    z-index: 1;

    min-height: 118px;
    padding: 26px 0 18px;

    color: var(--rpm-light);
    background-color: var(--rpm-pink);
    background-image: url("assets/fondo02.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow:
        0 -14px 30px rgba(32, 76, 160, 0.28),
        0 -5px 12px rgba(20, 50, 100, 0.14);

    overflow: visible;
}

.footer-inner {
    position: relative;

    width: min(calc(100% - 24px), 1180px);
}

.footer-discover {
    position: absolute;
    top: -91px;
    left: 4%;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    color: var(--rpm-pink);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: var(--handwritten-note-size);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;

    pointer-events: none;
}

.footer-discover span {
    transform: translateY(-2px);
}

.footer-discover img {
    flex: 0 0 auto;

    width: 68px;
    height: 38px;

    object-fit: contain;
}

.footer-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;

    width: min(100%, 960px);
    margin-inline: auto;
    padding: 0 4px 14px;

    border-bottom: 1px solid rgba(255, 253, 250, 0.58);

    gap: clamp(10px, 3.2vw, 30px);
}

.footer-links a {
    color: var(--rpm-light);

    font-size: clamp(0.61rem, 2.55vw, 0.88rem);
    font-weight: 700;
    white-space: nowrap;

    transition:
        transform 0.23s ease,
        opacity 0.23s ease;
}

.footer-links a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.legal-copy {
    margin: 10px auto 0;

    color: var(--rpm-light);

    font-size: clamp(0.58rem, 2vw, 0.74rem);
    font-weight: 300;
    line-height: 1.45;
    text-align: center;
}

.legal-copy a {
    color: inherit;
    text-decoration: none;
}

.legal-copy a strong {
    font-weight: 700;
}

.legal-copy a em {
    font-style: italic;
}


/* =========================================================
   ANIMACIONES DE APARICIÓN
   ========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.76s cubic-bezier(0.22, 0.68, 0.24, 1),
        transform 0.76s cubic-bezier(0.22, 0.68, 0.24, 1);

    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.feature-card:nth-child(2),
.footer-links a:nth-child(2) {
    transition-delay: 0.12s;
}

.feature-card:nth-child(3),
.footer-links a:nth-child(3) {
    transition-delay: 0.24s;
}

.footer-links a:nth-child(4) {
    transition-delay: 0.32s;
}

.footer-links a:nth-child(5) {
    transition-delay: 0.40s;
}


/* =========================================================
   MÓVILES AMPLIOS
   ========================================================= */

@media (min-width: 480px) {
    .hero {
        min-height: 252px;
        padding-top: 96px;
    }

    .why-card {
        padding-inline: 30px;
    }

    .appointment-note {
        left: calc(50% - 226px);
    }
}


/* =========================================================
   TABLET Y ESCRITORIO
   ========================================================= */

@media (min-width: 768px) {
    :root {
        --nav-height: 100px;
    }

    .nav-inner {
        justify-content: space-between;
        width: min(80%, 1180px);
    }

    .nav-brand {
        width: 104px;
    }

    .nav-brand img {
        height: 72px;
    }

    .menu-toggle,
    .mobile-menu {
        display: none;
    }

    .nav-links {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: calc(100% - 158px);
        max-width: 730px;

        color: var(--rpm-blue);

        font-size: 1rem;
        font-weight: 700;
    }

    .nav-links a {
        position: relative;
        padding: 11px 5px;
    }

    .nav-links.has-nav-indicator a::after {
        display: none;
    }

    .hero {
        min-height: 245px;
        padding: 98px 16px 42px;
    }

    .hero-logo {
        width: 315px;
    }

    .hero h1 {
        margin: 0;
        font-size: 2.8rem;
        line-height: 1.04;
    }

    .why-section {
        padding-top: 61px;
    }

    .why-card {
        width: min(94%, 1120px);
        min-height: 315px;
        padding: 20px 60px 34px;

        border-radius: 28px;
    }

    .why-artwork {
        height: 210px;
        gap: 35px;
    }

    .rpm-gauge {
        width: 340px;
        height: 205px;
    }

    .rpm-dog {
        width: 185px;
        height: 215px;
    }

    .why-card p {
        max-width: 670px;
        margin-top: 5px;

        font-size: 1rem;
    }

    .desktop-break {
        display: inline;
    }

    .appointment-wrap {
        margin: 66px auto 66px;
    }

    .appointment-button {
        width: 320px;
        min-height: 59px;

        font-size: 1.55rem;
    }

    .appointment-note {
        top: -12px;
        left: calc(50% - 276px);

        width: 115px;
        font-size: 1.35rem;
    }

    .appointment-note img {
        width: 78px;
        height: 28px;
    }

    .features {
        grid-template-columns: repeat(3, 1fr);

        gap: 27px;
        padding-bottom: 68px;
    }

    .feature-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        min-height: 355px;
        padding: 15px 22px 29px;

        border-radius: 25px;
    }

    .feature-card img {
        width: 100%;
        height: 225px;
    }

    .feature-copy {
        padding: 0;
    }

    .feature-card h2 {
        margin-bottom: 9px;
        font-size: 1rem;
    }

    .feature-card p {
        font-size: 0.84rem;
    }

    .location-section {
        padding: 58px 0 41px;
    }

    .location-note {
        font-size: 1.18rem;
    }

    .location-note img {
        left: -42px;

        width: 34px;
        height: 62px;
    }

    .map-frame {
        width: min(78%, 880px);
        height: 340px;
    }

    .site-footer {
        min-height: 164px;
        padding: 42px 0 24px;
    }

    .footer-discover {
        top: -132px;
        left: 0;

        gap: 20px;
    }

    .footer-discover img {
        width: 112px;
        height: 64px;
    }

    .footer-links {
        gap: clamp(28px, 6vw, 82px);
        padding-bottom: 20px;
    }

    .footer-links a {
        font-size: clamp(1rem, 1.84vw, 1.56rem);
    }

    .legal-copy {
        margin-top: 16px;

        font-size: clamp(0.72rem, 1.2vw, 1rem);
    }
}


/* =========================================================
   ESCRITORIO
   ========================================================= */

@media (min-width: 1024px) {
    .hero {
        min-height: 268px;
        padding-top: 105px;
    }

    .hero-logo {
        width: 330px;
    }

    .hero h1 {
        font-size: 2.9rem;
    }

    .carousel-slide img {
        object-position: center center;
    }

    .why-card {
        min-height: 330px;
    }

    .features {
        gap: 30px;
    }
}


/* =========================================================
   ESCRITORIO AMPLIO
   ========================================================= */

@media (min-width: 1440px) {
    .page-container {
        width: min(calc(100% - 48px), 1180px);
    }

    .hero {
        min-height: 280px;
    }

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) {
    .appointment-button:hover,
    .feature-card:hover,
    .footer-links a:hover {
        transform: none;
    }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   PÁGINA DE TÉRMINOS Y CONDICIONES
   ========================================================= */

.legal-page {
    color: var(--rpm-gray);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 12px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--rpm-light);
    background: var(--rpm-blue);
    box-shadow: var(--soft-shadow);
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.legal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 218px;
    padding: 46px 16px 52px;
    color: var(--rpm-light);
    text-align: center;
}

.legal-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 9vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-shadow: 0 3px 12px rgba(22, 64, 146, 0.18);
}

.legal-card {
    width: min(calc(100% - 32px), 960px);
    margin: 0 auto 72px;
    padding: 24px 22px 32px;
    border-radius: var(--rpm-card-radius-mobile);
    background: rgba(255, 253, 250, 0.88);
    box-shadow:
        0 14px 35px rgba(24, 59, 130, 0.18),
        0 4px 10px rgba(24, 59, 130, 0.08);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.legal-document-header {
    padding-bottom: 8px;
}

.legal-document-header h2 {
    margin: 0 0 17px;
    color: var(--rpm-dark);
    font-size: clamp(1.3rem, 5.5vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
}

.legal-document-header p,
.legal-clause p {
    margin: 0.7em 0;
}

.legal-index {
    margin: 26px 0 35px;
    padding: 20px 18px;
    border: 1px solid rgba(31, 98, 232, 0.13);
    border-radius: 18px;
    background: rgba(31, 98, 232, 0.065);
}

.legal-index h2 {
    margin: 0 0 14px;
    color: var(--rpm-dark);
    font-size: 1.08rem;
    font-weight: 700;
}

.legal-index ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-index a {
    display: inline-block;
    color: var(--rpm-blue);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.legal-index a:hover {
    color: #174fbd;
    transform: translateX(3px);
}

.legal-section {
    padding-top: 8px;
    scroll-margin-top: calc(var(--nav-height) + 24px);
}

.legal-section + .legal-section {
    margin-top: 40px;
}

.legal-section > h2 {
    margin: 0 0 25px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(31, 98, 232, 0.24);
    color: var(--rpm-blue);
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
}

.legal-clause + .legal-clause {
    margin-top: 30px;
}

.legal-clause h3 {
    margin: 0 0 9px;
    color: var(--rpm-dark);
    font-size: clamp(1.02rem, 4.2vw, 1.16rem);
    font-weight: 700;
    line-height: 1.45;
}

.clause-number {
    color: var(--rpm-blue);
}

.legal-list {
    margin: 13px 0 18px;
    padding-left: 24px;
}

.legal-list li {
    padding-left: 3px;
}

.legal-list li + li {
    margin-top: 7px;
}

.legal-list li::marker {
    color: var(--rpm-blue);
}

.legal-highlight {
    margin: 17px 0;
    padding: 13px 15px;
    border-left: 4px solid var(--rpm-blue);
    border-radius: 0 14px 14px 0;
    background: rgba(31, 98, 232, 0.08);
}

.legal-highlight p {
    margin: 0;
}

.legal-card strong {
    color: var(--rpm-dark);
    font-weight: 700;
}

.legal-card a:not(.legal-return-button) {
    color: var(--rpm-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.legal-card a:not(.legal-return-button):hover {
    text-decoration: underline;
}

.legal-card a:focus-visible {
    outline-color: var(--rpm-blue);
}

.legal-return {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.legal-return-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 50px;
    padding: 12px 25px;
    border-radius: 999px;
    color: var(--rpm-light);
    background: var(--rpm-blue);
    box-shadow: 0 8px 18px rgba(31, 98, 232, 0.30);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.legal-return-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 21px rgba(31, 98, 232, 0.34);
}

.legal-section.reveal {
    transform: translateY(20px);
}

.legal-section.reveal.is-visible {
    transform: translateY(0);
}

@media (min-width: 480px) {
    .legal-card {
        padding: 30px 30px 40px;
    }
}

@media (min-width: 768px) {
    .legal-hero {
        min-height: 250px;
        padding: 58px 24px 66px;
    }

    .legal-card {
        margin-bottom: 94px;
        padding: 50px 54px 58px;
        border-radius: 28px;
    }

    .legal-index {
        padding: 24px 25px;
    }

    .legal-index ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
    }

    .legal-section + .legal-section {
        margin-top: 52px;
    }

    .legal-clause + .legal-clause {
        margin-top: 34px;
    }

    .legal-highlight {
        padding: 16px 18px;
    }

}

@media (hover: none) {
    .legal-index a:hover,
    .legal-return-button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-section.reveal {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   PÁGINA DE CONTACTO
   ========================================================= */

.contact-page {
    color: var(--rpm-gray);
}

.contact-hero {
    padding: 44px 0 28px;
}

.contact-hero > h1 {
    margin: 0 0 35px;
    padding-inline: 16px;

    color: var(--rpm-light);

    font-size: clamp(2.1rem, 10vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 0 3px 12px rgba(28, 67, 145, 0.16);
}

.contact-actions {
    display: grid;
    gap: 28px;
}

.contact-action-wrap {
    position: relative;

    width: min(88%, 620px);
    margin-inline: auto;
}

.contact-action {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 82px;
    padding: 18px 20px;

    border-radius: 30px;

    color: var(--rpm-blue);
    background: rgba(255, 253, 250, 0.90);
    box-shadow:
        0 13px 23px rgba(24, 59, 130, 0.24),
        0 4px 8px rgba(24, 59, 130, 0.09);

    font-size: clamp(1.02rem, 5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.contact-action:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 27px rgba(24, 59, 130, 0.26),
        0 5px 10px rgba(24, 59, 130, 0.10);
}

.contact-hand-note {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: var(--rpm-blue);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: 1rem;
    line-height: 1;
}

.contact-hand-note img {
    width: 54px;
    height: 19px;
    object-fit: contain;
}

.contact-hand-note--left {
    justify-content: flex-start;
    padding-left: 3px;
}

.contact-method-card {
    display: grid;
    gap: 11px;

    width: min(86%, 620px);
    margin: 56px auto 0;
    padding: 30px 20px;

    border-radius: 30px;

    background: rgba(255, 253, 250, 0.80);
    box-shadow: var(--soft-shadow);

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.contact-method {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;

    width: min(100%, 370px);
    min-height: 53px;
    margin-inline: auto;
    padding: 7px 13px;

    border-radius: 999px;

    color: var(--rpm-light);
    background: var(--rpm-blue);
    box-shadow: 0 5px 12px rgba(31, 98, 232, 0.19);

    font-size: clamp(1.1rem, 5.2vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.contact-method::after {
    content: "";
}

.contact-method:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(31, 98, 232, 0.25);
}

.contact-method--whatsapp {
    background: #2d870d;
}

.contact-method-icon {
    width: 38px;
    height: 38px;

    object-fit: contain;
}

.contact-method-icon--whatsapp {
    width: 40px;
    height: 40px;
}

.contact-method-icon--phone {
    width: 35px;
    height: 35px;
}

.contact-method-icon--email {
    width: 42px;
    height: 32px;
}

.contact-phone-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    font-size: 0.64em;
    line-height: 1.05;
    white-space: nowrap;
}

.contact-phone-links a {
    color: inherit;
    font-weight: 700;
}

.contact-phone-links a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-social-list {
    display: grid;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.contact-social-list a {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--rpm-blue);

    font-size: clamp(0.66rem, 3.1vw, 0.9rem);
    font-weight: 700;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.contact-social-list a > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-social-list a:hover {
    opacity: 0.88;
    transform: translateX(3px);
}

.social-network-icon {
    display: grid;
    flex: 0 0 30px;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--rpm-blue);
}

.social-network-icon img {
    width: 18px;
    height: 18px;

    object-fit: contain;
}

@media (min-width: 480px) {
    .contact-action {
        min-height: 94px;
    }

    .contact-method-card {
        padding: 36px 30px;
    }
}

@media (min-width: 768px) {
    .contact-hero {
        padding: 57px 0 35px;
    }

    .contact-hero > h1 {
        margin-bottom: 58px;
    }

    .contact-actions {
        gap: 42px;
    }

    .contact-action-wrap {
        width: min(61%, 620px);
    }

    .contact-action {
        min-height: 142px;
        padding: 25px 34px;

        border-radius: 51px;

        font-size: clamp(1.65rem, 3.1vw, 2.2rem);
    }

    .contact-action-wrap--clinic .contact-action {
        font-size: clamp(1.55rem, 2.8vw, 1.95rem);
    }

    .contact-hand-note {
        position: absolute;
        z-index: 2;

        display: block;
        width: 164px;
        margin: 0;

        font-size: 1.65rem;
    }

    .contact-hand-note span {
        display: block;
        white-space: nowrap;
    }

    .contact-hand-note img {
        display: block;
        width: 116px;
        height: 34px;
        margin-top: 11px;
    }

    .contact-hand-note--left {
        top: -16px;
        left: -190px;
        padding: 0;
        text-align: right;
    }

    .contact-method-card {
        gap: 12px;

        width: 620px;
        margin-top: 72px;
        padding: 51px 34px;

        border-radius: 50px;
    }

    .contact-method {
        min-height: 64px;
        font-size: 1.65rem;
    }

    .contact-social-list {
        gap: 15px;
    }

    .contact-social-list a {
        gap: 13px;
        font-size: 1.45rem;
    }

    .social-network-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    .social-network-icon img {
        width: 24px;
        height: 24px;
    }
}

@media (hover: none) {
    .contact-action:hover,
    .contact-method:hover,
    .contact-social-list a:hover {
        transform: none;
    }
}


/* =========================================================
   AJUSTES COMPARTIDOS: CONTACTO Y SERVICIOS
   ========================================================= */

.contact-page,
.services-page,
.therapies-page {
    background-image:
        linear-gradient(
            rgba(255, 253, 250, 0.60),
            rgba(255, 253, 250, 0.60)
        ),
        url("assets/fondo01.png"),
        linear-gradient(
            180deg,
            #CAE2FF 0%,
            #1F62E8 18%,
            #4A79ED 36%,
            #9FC6FF 55%,
            #61A1FF 69%,
            #CAE2FF 84%,
            #4A79ED 100%
        );
}


/* =========================================================
   LLAMADOS DE CITA: RESPIRACIÓN Y ONDA SUAVE
   ========================================================= */

.appointment-button,
.contact-action-wrap--appointment .contact-action {
    position: relative;
    z-index: 0;

    overflow: visible;
    isolation: isolate;

    animation: appointment-breathe 2.8s ease-in-out infinite;
}

.appointment-button::after,
.contact-action-wrap--appointment .contact-action::after {
    content: "";

    position: absolute;
    inset: -3px;
    z-index: -1;

    border: 2px solid rgba(31, 98, 232, 0.20);
    border-radius: inherit;

    pointer-events: none;

    animation: appointment-wave 2.8s ease-out infinite;
}

@keyframes appointment-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

@keyframes appointment-wave {
    0%,
    38% {
        opacity: 0;
        transform: scale(1);
    }

    48% {
        opacity: 0.18;
    }

    78%,
    100% {
        opacity: 0;
        transform: scale(1.12, 1.22);
    }
}

.contact-page {
    --contact-handwritten-size: 1rem;
}

.contact-hand-note {
    font-size: var(--contact-handwritten-size);
}


/* =========================================================
   PÁGINA DE SERVICIOS
   ========================================================= */

.services-page {
    color: var(--rpm-gray);
}

.services-main {
    min-height: calc(100vh - var(--nav-height));
    padding-bottom: 72px;
}

.services-container {
    width: min(86.5%, 940px);
    margin-inline: auto;
}

.patient-services {
    padding: 36px 0 0;
}

.services-title {
    margin: 0 0 27px;

    color: var(--rpm-blue);

    font-size: clamp(1.08rem, 4.6vw, 1.52rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.service-card-list {
    display: grid;
    gap: 14px;
}

.service-card {
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;

    min-height: clamp(166px, 32vw, 190px);
    padding: 10px 16px 10px 8px;

    border-radius: 25px;

    background: rgba(255, 253, 250, 0.88);
    box-shadow:
        0 13px 23px rgba(24, 59, 130, 0.24),
        0 4px 8px rgba(24, 59, 130, 0.09);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    overflow: hidden;
}

.service-card:nth-child(3n + 2) {
    transition-delay: 70ms;
}

.service-card:nth-child(3n) {
    transition-delay: 130ms;
}

.service-card-visual {
    display: grid;
    place-items: center;

    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 153px;
    padding: 6px;

    overflow: hidden;
}

.service-card-visual img {
    width: 88%;
    height: 145px;
    max-width: 100%;

    object-fit: contain;
}

.service-card-visual--logo img {
    width: 83%;
    height: 115px;
}

.service-card-copy {
    min-width: 0;
    padding-left: 10px;
}

.service-card-copy h2 {
    margin: 0 0 9px;

    color: var(--rpm-dark);

    font-size: clamp(0.75rem, 2.75vw, 0.96rem);
    font-weight: 700;
    line-height: 1.25;
}

.service-card-copy p {
    margin: 0;

    color: var(--rpm-gray);

    font-size: clamp(0.66rem, 2.45vw, 0.82rem);
    font-weight: 300;
    line-height: 1.28;
}

@media (min-width: 480px) {
    .service-card {
        padding-inline: 18px 25px;
    }

    .service-card-visual {
        height: 168px;
    }

    .service-card-visual img {
        height: 158px;
    }

    .service-card-copy {
        padding-left: 17px;
    }
}

@media (min-width: 768px) {
    .contact-page {
        --contact-handwritten-size: 1.65rem;
    }

    .services-main {
        padding-bottom: 105px;
    }

    .patient-services {
        padding-top: 48px;
    }

    .services-title {
        margin-bottom: 42px;
    }

    .service-card-list {
        gap: 20px;
    }

    .service-card {
        min-height: 240px;
        padding: 16px 40px 16px 22px;

        border-radius: 39px;
    }

    .service-card-visual {
        height: 210px;
    }

    .service-card-visual img {
        width: 82%;
        height: 198px;
    }

    .service-card-visual--logo img {
        width: 72%;
        height: 142px;
    }

    .service-card-copy {
        padding-left: 30px;
    }

    .service-card-copy h2 {
        margin-bottom: 13px;
        font-size: 1.08rem;
    }

    .service-card-copy p {
        max-width: 390px;
        font-size: 0.92rem;
    }

}

@media (min-width: 1024px) {
    .service-card {
        min-height: 250px;
    }

    .service-card-visual {
        height: 220px;
    }

    .service-card-visual img {
        height: 208px;
    }

    .service-card-visual--logo img {
        height: 150px;
    }
}


/* =========================================================
   AJUSTES FINALES DE ANOTACIONES, TÍTULOS Y FOOTERS
   ========================================================= */

:root {
    --handwritten-note-size: 1rem;
}

.services-title.services-page-title {
    margin: 0 0 35px;
    padding-inline: 16px;

    color: var(--rpm-light);

    font-size: clamp(2.1rem, 10vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 0 3px 12px rgba(28, 67, 145, 0.16);
}

.contact-hand-note--left img {
    transform: rotate(12deg);
    transform-origin: left center;
}

@media (min-width: 768px) {
    :root {
        --handwritten-note-size: 1.35rem;
    }

    .services-title.services-page-title {
        margin-bottom: 58px;
    }

    .contact-hand-note--left img {
        margin-left: 44px;
    }
}


/* =========================================================
   PÁGINA DE TERAPIAS
   ========================================================= */

.therapies-page {
    color: var(--rpm-gray);
}

.therapies-main {
    min-height: calc(100vh - var(--nav-height));
    padding-bottom: 92px;
}

.therapies-page-title {
    margin: 0;
    padding: 44px 16px 35px;

    color: var(--rpm-light);

    font-size: clamp(2.1rem, 10vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 0 3px 12px rgba(28, 67, 145, 0.16);
}

.therapy-list {
    display: grid;
    gap: 40px;

    width: 100%;
    margin-inline: auto;
}

.therapy-card {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1.02;

    border-radius: 28px;

    box-shadow: var(--soft-shadow);

    perspective: 1200px;
}

.therapy-media {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.02;
    padding: 0;

    border: 0;
    border-radius: 28px;

    color: var(--rpm-light);
    background: #7b9cc0;

    font: inherit;
    text-align: left;

    cursor: pointer;
    overflow: hidden;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: rotateY(0);
    transform-style: preserve-3d;

    transition: transform 1.05s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.therapy-photo,
.therapy-patient {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
}

.therapy-photo {
    z-index: 1;
}

.therapy-patient {
    z-index: 3;
}

.therapy-name {
    position: absolute;
    top: 7%;
    left: 50%;
    z-index: 2;

    color: var(--rpm-light);

    font-size: clamp(3rem, 16vw, 6rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.015em;
    text-transform: uppercase;

    opacity: 0;
    transform: translate(-82%, -18px);

    transition:
        opacity 0.72s ease 0.18s,
        transform 0.9s cubic-bezier(0.2, 0.76, 0.25, 1) 0.18s;
}

.therapy-card.is-visible .therapy-name {
    opacity: 1;
    transform: translate(-50%, 0);
}

.therapy-touch-label {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 4;

    color: var(--rpm-light);

    font-size: clamp(0.83rem, 3.7vw, 1rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);

    transform: translateX(-50%);
}

.therapy-details {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 14px 18px 52px;

    border-radius: 28px;

    background: rgba(255, 253, 250, 0.80);
    box-shadow: var(--soft-shadow);

    opacity: 1;
    overflow: auto;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: rotateY(180deg);
    transform-style: preserve-3d;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: transform 1.05s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.therapy-card.is-open .therapy-media {
    transform: rotateY(-180deg);
}

.therapy-card.is-open .therapy-details {
    transform: rotateY(0);
}

.therapy-details h2 {
    margin: 0 0 10px;

    color: var(--rpm-blue);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.therapy-benefits {
    display: grid;
    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.therapy-benefits li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    font-size: clamp(0.9rem, 4vw, 1.08rem);
    font-weight: 300;
    line-height: 1.28;
}

.therapy-benefits img {
    width: 38px;
    height: 38px;

    object-fit: contain;
}

.therapy-close {
    position: absolute;
    left: 50%;
    bottom: 8px;

    min-height: 36px;
    margin: 0;
    padding: 8px 16px;

    border: 0;

    color: var(--rpm-blue);
    background: transparent;

    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;

    transform: translateX(-50%);
}

@media (min-width: 768px) {
    .therapies-main {
        padding-bottom: 145px;
    }

    .therapies-page-title {
        padding: 57px 16px 52px;
    }

    .therapy-list {
        gap: 64px;
        width: 100%;
    }

    .therapy-card {
        display: grid;
        grid-template-columns: 58% 42%;
        align-items: stretch;

        aspect-ratio: auto;
        border-radius: 48px;

        perspective: none;
    }

    .therapy-media {
        height: auto;
        aspect-ratio: 1.1 / 1;

        border-radius: 48px 0 0 48px;

        cursor: default;

        backface-visibility: visible;
        -webkit-backface-visibility: visible;

        transform: none;
    }

    .therapy-name {
        top: 7%;
        left: 49%;

        font-size: clamp(4.1rem, 8vw, 6.8rem);
    }

    .therapy-touch-label {
        display: none;
    }

    .therapy-details,
    .therapy-card.is-open .therapy-details {
        position: static;

        display: flex;
        flex-direction: column;
        justify-content: center;

        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 38px 28px 38px 32px;

        border-radius: 0 48px 48px 0;

        opacity: 1;
        overflow: visible;

        backface-visibility: visible;
        -webkit-backface-visibility: visible;

        transform: none;
    }

    .therapy-details h2 {
        position: absolute;

        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;

        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        overflow: hidden;
    }

    .therapy-close {
        display: none;
    }

    .therapy-benefits {
        gap: 33px;
    }

    .therapy-benefits li {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 18px;

        font-size: clamp(1.15rem, 2.5vw, 1.75rem);
        line-height: 1.18;
    }

    .therapy-benefits img {
        width: 64px;
        height: 64px;
    }
}

@media (min-width: 1200px) {
    .therapy-details,
    .therapy-card.is-open .therapy-details {
        padding-inline: 42px;
    }
}

@media (hover: hover) and (min-width: 768px) {
    .therapy-card:hover .therapy-name {
        transform: translate(-50%, -3px) scale(1.015);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appointment-button,
    .contact-action-wrap--appointment .contact-action,
    .appointment-button::after,
    .contact-action-wrap--appointment .contact-action::after {
        animation: none;
    }

    .therapy-media,
    .therapy-name,
    .therapy-details {
        transition: none;
    }
}


/* =========================================================
   INICIO: COMPOSICIÓN DEFINITIVA SEGÚN INICIO.AI / INICIO.PDF
   ========================================================= */

.home-page {
    background-color: #D0E2FE;
    background-image:
        url("assets/fondo01.png"),
        linear-gradient(
            180deg,
            #D7E7FF 0%,
            #C5DBFD 19%,
            #AFC9FA 42%,
            #F6F5FC 73%,
            #AFC5F8 100%
        );
    background-position: center top;
    background-repeat: no-repeat;
    background-size: calc(100% + 64px) 100%;
}

.home-page .navbar {
    background: rgba(255, 253, 250, 0.82);
}

.home-page .carousel-swipe-note {
    position: absolute;
    left: 5.5%;
    bottom: 6.5%;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 3px;

    color: var(--rpm-light);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: var(--handwritten-note-size);
    font-weight: 400;
    line-height: 1;

    pointer-events: none;
}

.home-page .carousel-swipe-note img {
    width: 62px;
    height: 32px;

    object-fit: contain;
}

.home-page .hero {
    min-height: 126px;
    padding: 0;
}

.home-page .hero-logo {
    width: clamp(205px, 58vw, 245px);
}

.home-page .why-section {
    width: 100%;
    padding-top: 32px;
}

.home-page .why-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: min(calc(100% - 28px), 560px);
    min-height: 335px;
    padding: 27px 18px 25px;

    border-radius: 27px;

    background: rgba(255, 253, 250, 0.80);
}

.home-page .why-card h1 {
    margin: 0;

    color: var(--rpm-blue);

    font-size: clamp(1.45rem, 7vw, 2.1rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-align: center;
}

.home-page .why-artwork {
    align-items: center;
    gap: 3%;

    width: 100%;
    height: 166px;
    margin-top: 3px;
}

.home-page .rpm-dog {
    width: 38%;
    height: 160px;
}

.home-page .rpm-gauge {
    width: 54%;
    height: 148px;
}

.home-page .why-card p {
    max-width: 500px;
    margin: 4px auto 0;

    font-size: clamp(0.72rem, 3.15vw, 0.9rem);
    line-height: 1.38;
}

.home-page .why-card strong {
    color: var(--rpm-dark);
    font-weight: 700;
}

.home-page .why-label-desktop {
    display: inline;
}

.home-page .why-label-mobile {
    display: none;
}

.home-page .appointment-wrap {
    margin: 61px auto 58px;
}

.home-page .appointment-button {
    width: min(54vw, 290px);
    min-height: 43px;

    background: linear-gradient(90deg, var(--rpm-pink) 0%, var(--rpm-pink-light) 100%);
    box-shadow: 0 9px 20px rgba(180, 49, 119, 0.25);
}

.home-page .appointment-note {
    top: -41px;
    right: max(1px, calc(50% - 171px));
    left: auto;

    width: 120px;
    height: 50px;

    color: var(--rpm-pink);
    transform: rotate(-2deg);
}

.home-page .appointment-note span {
    position: absolute;
    top: 10px;
    right: 0;
}

.home-page .appointment-note img {
    position: absolute;
    top: 0;
    left: 0;

    width: 68px;
    height: 38px;
    margin: 0;

    filter: none;
}

.home-page .features {
    gap: 24px;

    width: 100%;
    padding-bottom: 70px;
}

.home-page .feature-card {
    width: min(80%, 440px);
    min-height: 122px;

    background: rgba(255, 253, 250, 0.80);
}

.home-page .feature-card img {
    height: 105px;
}

.home-page .location-section {
    padding: 52px 0 57px;

    background: rgba(255, 253, 250, 0.28);
}

.home-page .location-note {
    width: min(75%, 1026px);
    height: auto;
    margin: 0 auto 18px;

    color: var(--rpm-blue);

    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.home-page .location-note span {
    position: static;
}

.home-page .map-frame {
    width: min(75%, 1026px);
    height: clamp(122px, 34vw, 170px);
}

@media (min-width: 480px) {
    .home-page .hero {
        min-height: 155px;
    }

    .home-page .why-card {
        min-height: 380px;
        padding-inline: 30px;
    }

    .home-page .why-artwork {
        height: 195px;
    }

    .home-page .rpm-dog {
        height: 190px;
    }

    .home-page .rpm-gauge {
        height: 172px;
    }
}

@media (min-width: 768px) {
    .home-page .carousel-swipe-note {
        left: 6.5%;
        bottom: 7.5%;
    }

    .home-page .carousel-swipe-note img {
        width: 90px;
        height: 46px;
    }

    .home-page .hero {
        min-height: clamp(190px, 17vw, 235px);
    }

    .home-page .hero-logo {
        width: clamp(315px, 31.5vw, 430px);
    }

    .home-page .why-section {
        padding-top: 23px;
    }

    .home-page .why-card {
        width: min(calc(100% - 52px), 1294px);
        min-height: clamp(600px, 64vw, 875px);
        padding: clamp(38px, 4.3vw, 63px) clamp(40px, 6vw, 82px) clamp(45px, 5vw, 70px);

        border-radius: clamp(30px, 3.5vw, 48px);
    }

    .home-page .why-card h1 {
        font-size: clamp(2.65rem, 4.9vw, 4.16rem);
    }

    .home-page .why-artwork {
        gap: clamp(30px, 6vw, 82px);

        height: clamp(330px, 35vw, 478px);
        margin-top: 8px;
    }

    .home-page .rpm-dog {
        width: 31%;
        height: clamp(300px, 29vw, 397px);
    }

    .home-page .rpm-gauge {
        width: 47%;
        height: clamp(270px, 25vw, 345px);
    }

    .home-page .why-card p {
        max-width: 1120px;
        margin-top: 5px;

        font-size: clamp(1.35rem, 2.45vw, 2.18rem);
        line-height: 1.42;
    }

    .home-page .why-label-desktop {
        display: inline;
    }

    .home-page .why-label-mobile {
        display: none;
    }

    .home-page .appointment-wrap {
        margin: clamp(95px, 11vw, 150px) auto clamp(90px, 9vw, 126px);
    }

    .home-page .appointment-button {
        width: min(54vw, 730px);
        min-height: clamp(82px, 8.8vw, 120px);

        font-size: clamp(2rem, 4.25vw, 3.65rem);
    }

    .home-page .appointment-note {
        top: -57px;
        right: calc(50% - min(39vw, 530px));

        width: 190px;
        height: 82px;

        font-size: var(--handwritten-note-size);
    }

    .home-page .appointment-note span {
        top: 15px;
    }

    .home-page .appointment-note img {
        width: 108px;
        height: 58px;
    }

    .home-page .features {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        width: min(calc(100% - 52px), 1294px);
        gap: clamp(22px, 2.3vw, 32px);
        padding-bottom: clamp(110px, 10vw, 145px);
    }

    .home-page .feature-card {
        width: 100%;
        min-height: clamp(450px, 47vw, 640px);
        padding: clamp(24px, 2.5vw, 35px) clamp(25px, 2.6vw, 36px) clamp(34px, 3vw, 42px);

        border-radius: clamp(27px, 3vw, 42px);
    }

    .home-page .feature-card img {
        height: clamp(280px, 30vw, 410px);
    }

    .home-page .feature-card h2 {
        font-size: clamp(1.15rem, 2.18vw, 1.87rem);
    }

    .home-page .feature-card p {
        font-size: clamp(0.98rem, 1.9vw, 1.62rem);
        line-height: 1.38;
    }

    .home-page .location-section {
        padding: clamp(90px, 9vw, 125px) 0 clamp(90px, 8vw, 112px);
    }

    .home-page .location-note {
        margin-bottom: 38px;

        font-size: clamp(2.8rem, 4.9vw, 4.16rem);
    }

    .home-page .map-frame {
        height: clamp(330px, 31vw, 425px);
    }

    .home-page .address {
        width: min(90%, 1026px);
        margin-top: 26px;

        font-size: clamp(0.85rem, 1.9vw, 1.63rem);
    }
}

@media (min-width: 1024px) {
    .home-page {
        --nav-height: 144px;
    }

    .home-page .nav-inner {
        width: min(82%, 1120px);
    }

    .home-page .nav-brand {
        width: 155px;
    }

    .home-page .nav-brand img {
        height: 102px;
    }

    .home-page .nav-links {
        width: calc(100% - 205px);
        max-width: 850px;

        font-size: clamp(1.1rem, 1.83vw, 1.56rem);
    }
}

@media (min-width: 1440px) {
    .home-page .why-card,
    .home-page .features {
        width: min(calc(100% - 72px), 1360px);
    }
}


/* =========================================================
   INICIO: PROPORCIONES FINALES 1440 / 720
   ========================================================= */

.home-page {
    --nav-height: clamp(54px, 11.1vw, 80px);
}

.home-page .nav-brand {
    width: clamp(64px, 12.5vw, 90px);
}

.home-page .nav-brand img {
    height: clamp(42px, 8.4vw, 60px);
}

.home-page .carousel {
    aspect-ratio: 16 / 9;
}

.home-page .carousel-slide {
    flex-basis: 100%;
}

.home-page .hero {
    min-height: clamp(58px, 14.7vw, 106px);
}

.home-page .hero-logo {
    width: clamp(150px, 36vw, 260px);
}

.home-page .why-section {
    padding-top: 0;
}

.home-page .why-card {
    width: min(89%, 640px);
    min-height: clamp(195px, 49.9vw, 359px);
    padding:
        clamp(13px, 2.8vw, 20px)
        clamp(14px, 3vw, 22px)
        clamp(14px, 3.2vw, 23px);

    border-radius: var(--rpm-card-radius-mobile);
    background: var(--rpm-card-bg);

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.home-page .why-card h1 {
    font-size: clamp(1.05rem, 4.2vw, 1.9rem);
    letter-spacing: -0.025em;
}

.home-page .why-artwork {
    height: clamp(86px, 21.7vw, 156px);
    margin-top: 2px;
}

.home-page .rpm-dog {
    width: 34%;
    height: clamp(82px, 21vw, 151px);
}

.home-page .rpm-gauge {
    width: 52%;
    height: clamp(76px, 19.5vw, 140px);
}

.home-page .why-card p {
    max-width: 560px;
    margin-top: 3px;

    font-size: clamp(0.66rem, 1.95vw, 0.88rem);
    line-height: 1.3;
}

.home-page .why-label-desktop {
    display: none;
}

.home-page .why-label-mobile {
    display: inline;
}

.home-page .appointment-wrap {
    margin:
        clamp(34px, 8.6vw, 62px)
        auto
        clamp(52px, 13.5vw, 97px);
}

.home-page .appointment-button {
    width: min(54vw, 276px);
    min-height: clamp(40px, 6.25vw, 45px);

    font-size: clamp(1rem, 3.9vw, 1.75rem);
}

.home-page .appointment-note {
    width: 180px;
}

.home-page .appointment-note span {
    right: auto;
    left: 80px;

    white-space: nowrap;
}

.home-page .features {
    gap: clamp(13px, 3.35vw, 24px);
    padding-bottom: clamp(40px, 9.7vw, 70px);
}

.home-page .feature-card {
    width: min(89%, 640px);
    min-height: clamp(122px, 31.25vw, 225px);

    border-radius: var(--rpm-card-radius-mobile);
    background: var(--rpm-card-bg);

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.home-page .feature-card img {
    height: clamp(92px, 23.6vw, 170px);
}

.home-page .feature-card h2 {
    font-size: clamp(0.78rem, 2.5vw, 1.12rem);
}

.home-page .feature-card p {
    font-size: clamp(0.68rem, 2vw, 0.9rem);
    line-height: 1.32;
}

.home-page .location-section {
    padding: 0 0 clamp(56px, 12vw, 86px);

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-page .location-note {
    width: min(89.4%, 1026px);
    margin: 0 auto clamp(17px, 3.7vw, 27px);

    font-size: clamp(1.5rem, 4.5vw, 2.05rem);
    text-align: left;
}

.home-page .map-frame {
    width: min(89.4%, 1026px);
    height: auto;
    aspect-ratio: 2.275 / 1;
}

.home-page .address {
    width: min(90%, 1026px);
    margin-top: clamp(13px, 2.7vw, 20px);

    font-size: clamp(0.62rem, 1.85vw, 0.84rem);
}

@media (min-width: 768px) {
    .home-page {
        --nav-height: 116px;
    }

    .home-page .nav-inner {
        width: min(80%, 1180px);
    }

    .home-page .nav-brand {
        width: 132px;
    }

    .home-page .nav-brand img {
        height: 88px;
    }

    .home-page .nav-links {
        width: calc(100% - 190px);
        max-width: none;

        font-size: 1.08rem;
    }

    .home-page .carousel {
        aspect-ratio: 32 / 9;

        cursor: grab;
        touch-action: pan-y;
    }

    .home-page .carousel-slide {
        flex-basis: 50%;
    }

    .home-page .carousel-dots {
        top: 16px;
    }

    .home-page .carousel-swipe-note {
        left: 3.7%;
        bottom: 11%;
    }

    .home-page .hero {
        min-height: 172px;
    }

    .home-page .hero-logo {
        width: 390px;
    }

    .home-page .why-card {
        width: min(calc(100% - 76px), 1364px);
        min-height: 529px;
        padding: 38px 70px 35px;

        border-radius: var(--rpm-card-radius-desktop);
    }

    .home-page .why-card h1 {
        font-size: 3rem;
    }

    .home-page .why-artwork {
        gap: 68px;

        height: 300px;
        margin-top: 4px;
    }

    .home-page .rpm-dog {
        width: 31%;
        height: 260px;
    }

    .home-page .rpm-gauge {
        width: 47%;
        height: 230px;
    }

    .home-page .why-card p {
        max-width: 1100px;

        font-size: 1.25rem;
        line-height: 1.36;
    }

    .home-page .why-label-desktop {
        display: inline;
    }

    .home-page .why-label-mobile {
        display: none;
    }

    .home-page .appointment-wrap {
        margin: 95px auto 138px;
    }

    .home-page .appointment-button {
        width: 438px;
        min-height: 72px;

        font-size: 2rem;
    }

    .home-page .appointment-note {
        top: -54px;
        right: calc(50% - 360px);

        width: 250px;
        height: 74px;
    }

    .home-page .appointment-note span {
        left: 120px;
    }

    .home-page .features {
        width: min(calc(100% - 88px), 1352px);
        gap: 72px;
        padding-bottom: 140px;
    }

    .home-page .feature-card {
        min-height: 584px;
        padding: 30px 54px 38px;

        border-radius: var(--rpm-card-radius-desktop);
    }

    .home-page .feature-card img {
        height: 280px;
    }

    .home-page .feature-card h2 {
        font-size: 1.65rem;
    }

    .home-page .feature-card p {
        font-size: 1.45rem;
        line-height: 1.38;
    }

    .home-page .location-section {
        padding: 0 0 150px;
    }

    .home-page .location-note {
        margin-bottom: 38px;

        font-size: 3rem;
    }

    .home-page .address {
        margin-top: 26px;

        font-size: 1.3rem;
    }
}


/* =========================================================
   TERAPIAS: COMPOSICIÓN FINAL SEGÚN TERAPIAS.AI / PDF
   ========================================================= */

.therapies-page {
    background-color: #D4E5FE;
}

.therapies-main {
    padding-bottom: 0;
}

.therapies-page-title {
    padding: 43px 16px 37px;
}

.therapy-list {
    gap: 39px;
}

.therapy-card,
.therapy-media {
    aspect-ratio: 1.1 / 1;
}

.therapy-card {
    border-radius: 27px;
}

.therapy-media {
    border-radius: 27px;

    transition: transform 1.18s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.therapy-name {
    top: 17%;

    font-size: clamp(3.45rem, 17vw, 6rem);

    transition:
        opacity 0.82s ease 0.16s,
        transform 1.05s cubic-bezier(0.2, 0.76, 0.25, 1) 0.16s;
}

.therapy-touch-label {
    bottom: 18px;

    color: rgba(255, 253, 250, 0.78);

    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.34);

    animation: therapy-touch-pulse 2.7s ease-in-out infinite;
}

.therapy-details {
    justify-content: center;

    padding: 24px 22px 55px;

    border-radius: 27px;

    background: rgba(255, 253, 250, 0.80);

    overflow: hidden;

    transition: transform 1.18s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.therapy-details h2 {
    margin-bottom: 18px;

    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
}

.therapy-benefits {
    gap: clamp(10px, 3vw, 17px);
}

.therapy-benefits li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;

    font-size: clamp(0.94rem, 4.15vw, 1.12rem);
    line-height: 1.25;
}

.therapy-benefits img {
    width: 44px;
    height: 44px;
}

.therapy-close {
    bottom: 12px;

    color: var(--rpm-blue);

    font-size: 0.84rem;
}

.therapies-appointment {
    position: relative;

    display: flex;
    justify-content: center;

    width: 100%;
    margin: 112px auto 175px;
}

.therapies-appointment .appointment-button {
    width: min(54vw, 290px);
    min-height: 43px;

    background-color: var(--rpm-pink);
    background-image: url("assets/fondo02.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: 0 9px 20px rgba(180, 49, 119, 0.25);

    font-size: clamp(1.05rem, 5vw, 1.35rem);
}

.therapies-appointment-note {
    position: absolute;
    top: -45px;
    right: calc(50% - min(39vw, 150px));

    width: 120px;
    height: 50px;

    color: var(--rpm-pink);

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: var(--handwritten-note-size);
    line-height: 1;

    pointer-events: none;
}

.therapies-appointment-note span {
    position: absolute;
    top: 10px;
    right: 0;
}

.therapies-appointment-note img {
    position: absolute;
    top: 0;
    left: 0;

    width: 66px;
    height: 37px;

    object-fit: contain;
}

@keyframes therapy-touch-pulse {
    0%,
    100% {
        opacity: 0.74;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.92;
        transform: translateX(-50%) scale(1.045);
    }
}

@media (min-width: 768px) {
    .therapies-main {
        padding-bottom: 0;
    }

    .therapies-page-title {
        padding: 57px 16px 52px;
    }

    .therapy-list {
        gap: clamp(50px, 5.2vw, 72px);

        width: calc(100% - 40px);
        margin-right: 40px;
        margin-left: 0;
    }

    .therapy-card {
        grid-template-columns: 58% 42%;

        min-height: clamp(510px, 50vw, 685px);

        border-radius: 0 48px 48px 0;
    }

    .therapy-media {
        height: 100%;
        aspect-ratio: auto;

        border-radius: 0;
    }

    .therapy-name {
        top: 18%;
        left: 49%;

        font-size: clamp(4rem, 7.7vw, 6.55rem);
    }

    .therapy-details,
    .therapy-card.is-open .therapy-details {
        height: 100%;
        padding: 45px clamp(28px, 3.3vw, 45px);

        border-radius: 0 48px 48px 0;
    }

    .therapy-benefits {
        gap: clamp(26px, 3vw, 39px);
    }

    .therapy-benefits li {
        grid-template-columns: clamp(58px, 5.3vw, 72px) minmax(0, 1fr);
        gap: clamp(17px, 2vw, 25px);

        font-size: clamp(1.18rem, 2.15vw, 1.8rem);
        line-height: 1.22;
    }

    .therapy-benefits img {
        width: clamp(58px, 5.3vw, 72px);
        height: clamp(58px, 5.3vw, 72px);
    }

    .therapies-appointment {
        margin: clamp(130px, 12vw, 170px) auto clamp(180px, 16vw, 225px);
    }

    .therapies-appointment .appointment-button {
        width: min(54vw, 730px);
        min-height: clamp(82px, 8.8vw, 120px);

        font-size: clamp(2rem, 4.25vw, 3.65rem);
    }

    .therapies-appointment-note {
        top: -55px;
        right: calc(50% - min(39vw, 530px));

        width: 190px;
        height: 82px;

        font-size: var(--handwritten-note-size);
    }

    .therapies-appointment-note span {
        top: 15px;
    }

    .therapies-appointment-note img {
        width: 108px;
        height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .therapy-touch-label {
        animation: none;
    }
}

/* =========================================================
   CONTACTO: COMPOSICIÓN FINAL SEGÚN CONTACTO.AI / PDF
   ========================================================= */

.contact-page main {
    padding-bottom: 132px;
}

.contact-page .contact-hero {
    padding: 43px 0 34px;
}

.contact-page .contact-hero > h1 {
    margin-bottom: 33px;
}

.contact-page .contact-actions {
    gap: 16px;
}

.contact-page .contact-action-wrap {
    width: min(54vw, 290px);
}

.contact-page .contact-action {
    min-height: 43px;
    padding: 9px 15px;

    border-radius: 999px;

    color: var(--rpm-light);
    background-color: var(--rpm-pink);
    background-image: url("assets/fondo02.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: 0 9px 20px rgba(180, 49, 119, 0.25);

    font-size: clamp(0.9rem, 4.6vw, 1.22rem);
    line-height: 1.05;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.contact-page .contact-action-wrap--clinic .contact-action {
    font-size: clamp(0.78rem, 3.9vw, 1.05rem);
}

.contact-page .contact-hand-note--left {
    position: absolute;
    top: -37px;
    left: -74px;
    z-index: 2;

    display: block;

    width: 120px;
    height: 48px;
    margin: 0;
    padding: 0;

    color: var(--rpm-light);

    pointer-events: none;
}

.contact-page .contact-hand-note--left span {
    position: absolute;
    top: 6px;
    left: 0;

    white-space: nowrap;
}

.contact-page .contact-hand-note--left img {
    position: absolute;
    top: 0;
    right: 0;

    width: 66px;
    height: 37px;
    margin: 0;

    object-fit: contain;

    transform: scaleY(-1);
}

.contact-page .contact-method-card {
    gap: 7px;

    width: min(54vw, 290px);
    margin-top: 49px;
    padding: 29px 31px;

    border-radius: 27px;
}

.contact-page .contact-method {
    grid-template-columns: 34px 1fr 34px;

    width: min(100%, 215px);
    min-height: 38px;
    padding: 5px 10px;

    background: linear-gradient(
        90deg,
        rgba(31, 98, 232, 0.98) 0%,
        rgba(126, 179, 248, 0.88) 100%
    );

    box-shadow: none;

    font-size: clamp(0.82rem, 4vw, 1.05rem);
}

.contact-page .contact-method-icon,
.contact-page .contact-method-icon--whatsapp,
.contact-page .contact-method-icon--phone {
    width: 27px;
    height: 27px;
}

.contact-page .contact-method-icon--email {
    width: 31px;
    height: 23px;
}

.contact-page .location-section {
    padding: 64px 0 54px;

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.contact-page .location-note {
    width: min(75%, 1026px);
    height: auto;
    margin: 0 auto 18px;

    color: var(--rpm-blue);

    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    text-align: left;
}

.contact-page .location-note span {
    position: static;
}

.contact-page .map-frame {
    width: min(75%, 1026px);
    height: clamp(122px, 34vw, 170px);
}

@media (min-width: 768px) {
    .contact-page main {
        padding-bottom: 170px;
    }

    .contact-page .contact-hero {
        padding: 68px 0 42px;
    }

    .contact-page .contact-hero > h1 {
        margin-bottom: 102px;
    }

    .contact-page .contact-actions {
        gap: 30px;
    }

    .contact-page .contact-action-wrap {
        width: min(54vw, 730px);
    }

    .contact-page .contact-action {
        min-height: clamp(82px, 8.8vw, 120px);
        padding: 18px 30px;

        font-size: clamp(2rem, 4.25vw, 3.65rem);
    }

    .contact-page .contact-action-wrap--clinic .contact-action {
        font-size: clamp(1.45rem, 2.8vw, 2.35rem);
    }

    .contact-page .contact-hand-note--left {
        top: -82px;
        left: -250px;

        width: 330px;
        height: 94px;

        font-size: clamp(2rem, 3.4vw, 2.85rem);
        text-align: left;
    }

    .contact-page .contact-hand-note--left span {
        top: 12px;
    }

    .contact-page .contact-hand-note--left img {
        width: 135px;
        height: 70px;
    }

    .contact-page .contact-method-card {
        gap: 12px;

        width: min(54vw, 730px);
        margin-top: 96px;
        padding: 79px 145px;

        border-radius: 55px;
    }

    .contact-page .contact-method {
        grid-template-columns: 58px 1fr 58px;

        width: min(100%, 430px);
        min-height: 75px;
        padding: 8px 20px;

        font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    }

    .contact-page .contact-method-icon,
    .contact-page .contact-method-icon--whatsapp,
    .contact-page .contact-method-icon--phone {
        width: 48px;
        height: 48px;
    }

    .contact-page .contact-method-icon--email {
        width: 52px;
        height: 39px;
    }

    .contact-page .location-section {
        padding: 118px 0 92px;
    }

    .contact-page .location-note {
        margin-bottom: 38px;

        font-size: clamp(2.8rem, 4.9vw, 4.16rem);
    }

    .contact-page .map-frame {
        height: clamp(330px, 31vw, 425px);
    }

    .contact-page .address {
        width: min(90%, 1026px);
        margin-top: 26px;

        font-size: clamp(0.85rem, 1.9vw, 1.63rem);
    }
}

@media (min-width: 1024px) {
    .contact-page {
        --nav-height: 144px;
    }
}


/* =========================================================
   USUARIOS: PROTOTIPO DE INICIO DE SESIÓN
   Referencia: USUARIO01 / USUARIO02
   ========================================================= */

.user-page {
    color: var(--rpm-gray);

    background-color: #DCE9FF;
    background-image:
        linear-gradient(
            rgba(255, 253, 250, 0.76),
            rgba(255, 253, 250, 0.76)
        ),
        url("assets/fondo01.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: calc(100% + 64px) 100%;
}

.user-main {
    display: grid;
    place-items: center;

    min-height: calc(100vh - var(--nav-height) - 52px);
    padding: 28px 16px;
}

.user-login-card {
    position: relative;

    width: min(89%, 640px);
    min-height: 0;
    padding: 24px 32px 22px;

    border-radius: var(--rpm-card-radius-mobile);
    background: var(--rpm-card-bg);

    box-shadow:
        0 24px 45px rgba(31, 73, 154, 0.22),
        0 7px 16px rgba(20, 50, 100, 0.12);

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));

    transform: translateY(-2vh);
}

.user-login-card h1 {
    margin: 0 0 28px;

    color: var(--rpm-blue);

    font-size: clamp(1.55rem, 7vw, 1.8rem);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
}

.user-login-form {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(100%, 730px);
    margin-inline: auto;
}

.user-field {
    width: 100%;
    margin-bottom: 24px;
}

.user-field:last-of-type {
    margin-bottom: 16px;
}

.user-field label {
    display: block;
    margin-bottom: 7px;

    color: var(--rpm-dark);

    font-size: clamp(0.9rem, 4vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
}

.user-field input {
    display: block;

    width: 100%;
    height: 26px;
    padding: 1px 2px 5px;

    border: 0;
    border-bottom: 0.65px solid var(--rpm-dark);
    border-radius: 0;

    background: transparent;
    color: var(--rpm-dark);

    font-size: 0.95rem;
    font-weight: 400;

    outline: none;
}

.user-field input:focus-visible {
    border-bottom-color: var(--rpm-blue);
    box-shadow: 0 1px 0 rgba(31, 98, 232, 0.36);
}

.user-login-button {
    width: min(58%, 180px);
    min-height: 42px;
    margin-top: 0;
    padding: 9px 20px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2F76EE 0%,
            #9BC5FB 100%
        );
    color: var(--rpm-light);

    box-shadow:
        0 16px 22px rgba(28, 48, 92, 0.30),
        0 5px 9px rgba(20, 50, 100, 0.16);

    font-size: clamp(0.9rem, 4vw, 1rem);
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.user-login-button:hover {
    filter: saturate(1.05);
    transform: translateY(-2px);

    box-shadow:
        0 18px 25px rgba(28, 48, 92, 0.32),
        0 6px 10px rgba(20, 50, 100, 0.17);
}

.user-recovery {
    margin: 16px 0 0;
    padding: 5px 8px;

    border: 0;
    background: transparent;
    color: var(--rpm-dark);

    font-size: clamp(0.86rem, 4vw, 0.98rem);
    font-weight: 300;

    cursor: pointer;
}

.user-recovery:hover {
    color: var(--rpm-blue);
}

.user-prototype-message {
    max-height: 0;
    margin: 0;
    overflow: hidden;

    color: var(--rpm-blue);

    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;

    opacity: 0;
    transform: translateY(5px);

    transition:
        max-height 0.25s ease,
        margin 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.user-prototype-message.is-visible {
    max-height: 70px;
    margin-top: 9px;

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

@media (min-width: 768px) {
    .user-page {
        --nav-height: 116px;
    }

    .user-page .nav-brand {
        width: 132px;
    }

    .user-page .nav-brand img {
        height: 88px;
    }

    .user-page .nav-links {
        width: calc(100% - 190px);
        max-width: none;

        font-size: 1.08rem;
    }

    .user-main {
        min-height: calc(100vh - var(--nav-height) - 100px);
        padding: 0 16px;
    }

    .user-login-card {
        width: min(78%, 392px);
        min-height: 368px;
        padding: 28px 42px 24px;

        border-radius: var(--rpm-card-radius-desktop);

        transform: none;
    }

    .user-login-card h1 {
        margin-bottom: 35px;

        font-size: 1.78rem;
    }

    .user-field {
        margin-bottom: 34px;
    }

    .user-field:last-of-type {
        margin-bottom: 20px;
    }

    .user-field label {
        margin-bottom: 9px;
        font-size: 1rem;
    }

    .user-field input {
        height: 28px;
        font-size: 0.95rem;
    }

    .user-login-button {
        width: 172px;
        min-height: 40px;
        margin-top: 0;
        font-size: 0.9rem;
    }

    .user-recovery {
        margin-top: 16px;
        font-size: 0.94rem;
    }

    .user-prototype-message {
        width: 100%;
        font-size: 0.7rem;
    }
}

@media (hover: none) {
    .user-login-button:hover {
        filter: none;
        transform: none;
    }
}

/* =========================================================
   TERAPIAS — COMPOSICIÓN FINAL DE ESCRITORIO (PDF 2026)
   Conserva sin cambios el acomodo y giro de las tarjetas móviles.
   ========================================================= */
@media (min-width: 768px) {
    .therapies-page {
        --nav-height: 116px;
    }

    .therapies-page .nav-inner {
        width: min(80%, 1180px);
    }

    .therapies-page .nav-brand {
        width: 132px;
    }

    .therapies-page .nav-brand img {
        height: 88px;
    }

    .therapies-page .nav-links {
        width: calc(100% - 190px);
        max-width: none;
        font-size: 1.08rem;
    }

    .therapies-page-title {
        display: grid;
        place-items: center;
        min-height: 124px;
        padding: 24px 16px 20px;
        font-size: clamp(3.2rem, 4.45vw, 4rem);
        line-height: 1;
    }

    .therapy-list {
        width: 100%;
        margin: 0;
        gap: 34px;
    }

    .therapy-card {
        grid-template-columns: 46.5% 53.5%;
        width: min(68.75%, 990px);
        height: 416px;
        min-height: 416px;
        margin-right: auto;
        margin-left: 18.05%;

        aspect-ratio: auto;
        overflow: visible;
        border-radius: 0 var(--rpm-card-radius-desktop)
            var(--rpm-card-radius-desktop) 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .therapy-media {
        width: 100%;
        height: 416px;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .therapy-photo,
    .therapy-patient {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .therapy-name {
        top: 11%;
        left: 50%;
        width: 94%;
        font-size: clamp(3.35rem, 5.2vw, 4.7rem);
        line-height: 0.94;
    }

    .therapy-details {
        position: relative;
        inset: auto;
        z-index: 1;

        display: flex;
        height: 416px;
        padding: 44px clamp(38px, 4.5vw, 64px)
            42px clamp(52px, 6.6vw, 96px);

        opacity: 1;
        overflow: hidden;
        border-radius: 0 var(--rpm-card-radius-desktop)
            var(--rpm-card-radius-desktop) 0;
        background: var(--rpm-card-bg);
        box-shadow: var(--soft-shadow);
        backdrop-filter: blur(var(--rpm-card-blur));
        -webkit-backdrop-filter: blur(var(--rpm-card-blur));
        transform: none;
        pointer-events: auto;
    }

    .therapy-details h2,
    .therapy-close {
        display: none;
    }

    .therapy-benefits {
        width: 100%;
        gap: clamp(24px, 2.2vw, 32px);
    }

    .therapy-benefits li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 20px;
        font-size: clamp(1.12rem, 1.52vw, 1.38rem);
        line-height: 1.18;
    }

    .therapy-benefits img {
        width: 52px;
        height: 52px;
    }

    .therapies-appointment {
        width: 100%;
        margin: 215px auto 224px;
    }

    .therapies-appointment .appointment-button {
        width: min(438px, 42vw);
        min-height: 72px;
        font-size: clamp(1.7rem, 2.25vw, 2rem);
    }

    .therapies-appointment-note {
        top: -58px;
        right: calc(50% - 360px);
        width: 252px;
        height: 94px;
    }

    .therapies-appointment-note span {
        top: 0;
        right: 0;
        font-size: var(--handwritten-note-size);
    }

    .therapies-appointment-note img {
        right: 18px;
        bottom: 0;
        width: 108px;
        height: 48px;
        object-fit: contain;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .therapy-card {
        grid-template-columns: 45% 55%;
        width: 90%;
        height: 320px;
        min-height: 320px;
        margin-inline: 5%;
    }

    .therapy-media,
    .therapy-details {
        height: 320px;
    }

    .therapy-details {
        padding: 28px 32px 26px 40px;
    }

    .therapy-benefits {
        gap: 16px;
    }

    .therapy-benefits li {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        font-size: 1rem;
    }

    .therapy-benefits img {
        width: 42px;
        height: 42px;
    }

    .therapy-name {
        font-size: clamp(2.8rem, 7.1vw, 4rem);
    }
}

@media (min-width: 1440px) {
    .therapy-card {
        margin-left: calc(50% - 460px);
    }
}

/* =========================================================
   AJUSTES GLOBALES DE MOVIMIENTO, BOTONES Y FOOTERS
   ========================================================= */

.therapy-name {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
    text-align: center;
}

.appointment-button,
.contact-action,
.contact-method,
.legal-return-button,
.user-login-button {
    transition:
        transform 0.48s cubic-bezier(0.22, 0.68, 0.24, 1),
        box-shadow 0.48s cubic-bezier(0.22, 0.68, 0.24, 1),
        filter 0.48s ease;
}

@media (hover: hover) {
    .appointment-button:hover,
    .contact-action:hover,
    .contact-method:hover,
    .legal-return-button:hover,
    .user-login-button:hover {
        transform: translateY(-1px);
    }
}

.site-header .navbar {
    background: rgba(255, 253, 250, 0.80);
}

@media (max-width: 767px) {
    .site-header {
        transform: none;
    }

    .mobile-menu {
        height: calc(100dvh - var(--nav-height));
        min-height: calc(100vh - var(--nav-height));
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   CONTACTO — COMPOSICIÓN FINAL MÓVIL Y ESCRITORIO
   Referencias: CONTACTO_Movil.pdf / CONTACTO_Escritorio.pdf
   ========================================================= */

.contact-page {
    --nav-height: 62px;
}

.contact-page main {
    padding-bottom: 0;
}

.contact-page .contact-hero {
    padding: clamp(34px, 6vw, 43px) 0 0;
}

.contact-page .contact-hero > h1 {
    margin: 0 0 clamp(48px, 8vw, 58px);
    font-size: clamp(2.1rem, 6vw, 3rem);
}

.contact-page .contact-actions {
    gap: clamp(12px, 2.3vw, 17px);
}

.contact-page .contact-action-wrap {
    width: min(54vw, 385px);
}

.contact-page .contact-action {
    min-height: clamp(43px, 8.75vw, 63px);
    padding: 9px 18px;
    font-size: clamp(1.2rem, 4.4vw, 2rem);
}

.contact-page .contact-action-wrap--clinic .contact-action {
    font-size: clamp(0.94rem, 3.35vw, 1.5rem);
}

.contact-page .contact-hand-note--left {
    top: clamp(-50px, -7vw, -37px);
    left: clamp(-76px, -10.5vw, -48px);
    width: 132px;
    height: 52px;
}

.contact-page .contact-hand-note--left img {
    width: 72px;
    height: 41px;
}

.contact-page .contact-method-card,
.contact-page .contact-social-card {
    width: min(54vw, 385px);
    border-radius: var(--rpm-card-radius-mobile);
    background: var(--rpm-card-bg);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.contact-page .contact-method-card {
    gap: clamp(7px, 1.2vw, 10px);
    min-height: clamp(182px, 30.25vw, 218px);
    margin-top: clamp(48px, 7.2vw, 52px);
    padding: clamp(31px, 5.8vw, 42px) 22px;
}

.contact-page .contact-method {
    grid-template-columns: 34px 1fr 34px;
    width: min(100%, 230px);
    min-height: clamp(35px, 5.4vw, 39px);
    padding: 5px 10px;
    font-size: clamp(0.86rem, 2.75vw, 1.2rem);
}

.contact-page .contact-social-card {
    min-height: clamp(182px, 30.25vw, 218px);
    margin: clamp(22px, 3.75vw, 27px) auto 0;
    padding: clamp(31px, 5.8vw, 42px)
        clamp(24px, 6.2vw, 45px);
}

.contact-page .contact-social-list {
    align-content: center;
    gap: clamp(10px, 1.6vw, 13px);
    height: 100%;
}

.contact-page .contact-social-list a {
    gap: 12px;
    color: var(--rpm-blue);
    font-size: clamp(0.8rem, 3vw, 1.35rem);
    line-height: 1.1;
    white-space: nowrap;
}

.contact-page .social-network-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    background: transparent;
}

.contact-page .social-network-icon img {
    width: 34px;
    height: 34px;
}

.contact-page .location-section {
    padding: clamp(68px, 12vw, 87px) 0
        clamp(52px, 8vw, 58px);
}

.contact-page .location-note,
.contact-page .map-frame {
    width: min(76%, 795px);
}

.contact-page .location-note {
    margin-bottom: clamp(22px, 3.5vw, 27px);
    font-size: clamp(2rem, 6vw, 3rem);
}

.contact-page .map-frame {
    height: auto;
    aspect-ratio: 2.42 / 1;
}

.contact-page .address {
    width: min(90%, 1026px);
    margin-top: clamp(13px, 2.5vw, 20px);
    font-size: clamp(0.62rem, 1.85vw, 0.86rem);
}

@media (min-width: 768px) {
    .contact-page {
        --nav-height: 116px;
    }

    .contact-page .nav-inner {
        width: min(80%, 1180px);
    }

    .contact-page .nav-brand {
        width: 132px;
    }

    .contact-page .nav-brand img {
        height: 88px;
    }

    .contact-page .nav-links {
        width: calc(100% - 190px);
        max-width: none;
        font-size: 1.08rem;
    }

    .contact-page .contact-hero {
        padding: 36px 0 0;
    }

    .contact-page .contact-hero > h1 {
        margin-bottom: 76px;
        font-size: 3rem;
    }

    .contact-page .contact-actions {
        gap: 16px;
    }

    .contact-page .contact-action-wrap {
        width: clamp(320px, 25.35vw, 365px);
    }

    .contact-page .contact-action {
        min-height: 59px;
        padding: 10px 24px;
        font-size: 2rem;
    }

    .contact-page .contact-action-wrap--clinic .contact-action {
        font-size: 1.2rem;
    }

    .contact-page .contact-hand-note--left {
        top: -52px;
        left: -136px;
        width: 150px;
        height: 58px;
        font-size: var(--handwritten-note-size);
    }

    .contact-page .contact-hand-note--left span {
        top: 8px;
    }

    .contact-page .contact-hand-note--left img {
        width: 88px;
        height: 48px;
    }

    .contact-page .contact-method-card,
    .contact-page .contact-social-card {
        width: min(55.2vw, 795px);
        min-height: 103px;
        border-radius: var(--rpm-card-radius-desktop);
    }

    .contact-page .contact-method-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: 59px;
        padding: 32px 39px;
    }

    .contact-page .contact-method {
        grid-template-columns: 38px 1fr 38px;
        width: 100%;
        min-height: 39px;
        padding: 5px 12px;
        font-size: 1rem;
    }

    .contact-page .contact-method--email {
        order: 2;
    }

    .contact-page .contact-method--phone {
        order: 3;
    }

    .contact-page .contact-method-icon,
    .contact-page .contact-method-icon--whatsapp,
    .contact-page .contact-method-icon--phone {
        width: 29px;
        height: 29px;
    }

    .contact-page .contact-method-icon--email {
        width: 32px;
        height: 24px;
    }

    .contact-page .contact-social-card {
        margin-top: 25px;
        padding: 32px 39px;
    }

    .contact-page .contact-social-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 27px;
    }

    .contact-page .contact-social-list a {
        gap: 10px;
        font-size: 1rem;
    }

    .contact-page .social-network-icon,
    .contact-page .social-network-icon img {
        width: 30px;
        height: 30px;
    }

    .contact-page .social-network-icon {
        flex-basis: 30px;
    }

    .contact-page .location-section {
        padding: 70px 0 80px;
    }

    .contact-page .location-note,
    .contact-page .map-frame {
        width: min(55.2vw, 795px);
    }

    .contact-page .location-note {
        margin-bottom: 38px;
        font-size: 4rem;
    }

    .contact-page .map-frame {
        height: 325px;
        aspect-ratio: auto;
    }

    .contact-page .address {
        margin-top: 26px;
        font-size: 1.18rem;
    }
}

/* =========================================================
   LEGALES — FORMATO VISUAL COMPARTIDO
   ========================================================= */

.legal-page {
    --nav-height: 62px;

    color: var(--rpm-gray);
    background-color: #D4E5FE;
    background-image:
        linear-gradient(
            rgba(255, 253, 250, 0.60),
            rgba(255, 253, 250, 0.60)
        ),
        url("assets/fondo01.png"),
        linear-gradient(
            180deg,
            #CAE2FF 0%,
            #1F62E8 18%,
            #4A79ED 36%,
            #9FC6FF 55%,
            #61A1FF 69%,
            #CAE2FF 84%,
            #4A79ED 100%
        );
    background-position: center top;
    background-repeat: no-repeat;
    background-size: calc(100% + 64px) 100%;
}

.legal-page .legal-hero {
    min-height: 132px;
    padding: 38px 16px 34px;
}

.legal-page .legal-hero h1 {
    color: var(--rpm-light);
    font-size: clamp(2rem, 7vw, 3rem);
    text-transform: uppercase;
}

.legal-page .legal-card {
    width: min(calc(100% - 32px), 960px);
    margin-bottom: 72px;
    border-radius: var(--rpm-card-radius-mobile);
    background: var(--rpm-card-bg);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.legal-page .legal-index {
    border-color: rgba(31, 98, 232, 0.14);
    background: rgba(255, 253, 250, 0.28);
}

.legal-page .legal-highlight {
    background: rgba(255, 253, 250, 0.32);
}

/* El contenido legal debe estar visible desde el primer cuadro. */
.legal-page .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

/* Ilustraciones animadas de las tarjetas de Inicio */
.feature-card video.feature-illustration {
    display: block;
}

.feature-card video.feature-illustration,
.feature-card img[data-static-illustration] {
    width: 100%;
    height: clamp(92px, 23.6vw, 170px);
    object-fit: contain;
    background: transparent;
    pointer-events: none;
}

.static-illustration-fallback {
    display: none;
}

video[data-animated-illustration] {
    -webkit-appearance: none;
}

video[data-animated-illustration]::-webkit-media-controls,
video[data-animated-illustration]::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

html.use-static-illustrations video[data-animated-illustration] {
    display: none !important;
}

html.use-static-illustrations img[data-static-illustration] {
    display: block;
}

/* Respaldo previo a JavaScript para Safari móvil y navegadores de iOS. */
@supports (-webkit-touch-callout: none) {
    @media (hover: none) and (pointer: coarse) {
        video[data-animated-illustration] {
            display: none !important;
        }

        img[data-static-illustration] {
            display: block;
        }
    }
}

.home-page .feature-illustration--review {
    transform: scale(1.16);
}

.home-page .feature-illustration--digital {
    transform: scale(1.12);
}

@media (min-width: 768px) {
    .legal-page {
        --nav-height: 116px;
    }

    .legal-page .nav-inner {
        width: min(80%, 1180px);
    }

    .legal-page .nav-brand {
        width: 132px;
    }

    .legal-page .nav-brand img {
        height: 88px;
    }

    .legal-page .nav-links {
        width: calc(100% - 190px);
        max-width: none;
        font-size: 1.08rem;
    }

    .legal-page .legal-hero {
        min-height: 156px;
        padding: 47px 24px 43px;
    }

    .legal-page .legal-hero h1 {
        font-size: 3rem;
    }

    .legal-page .legal-card {
        margin-bottom: 94px;
        border-radius: var(--rpm-card-radius-desktop);
    }

    .home-page .feature-card video.feature-illustration,
    .home-page .feature-card img[data-static-illustration] {
        height: 280px;
    }

    .home-page .feature-illustration--review {
        transform: scale(1.12);
    }

    .home-page .feature-illustration--digital {
        transform: scale(1.10);
    }

    .home-page .feature-card .feature-copy {
        margin-top: 48px;
    }
}


/* =========================================================
   SERVICIOS: VERSIÓN FINAL 2026
   ========================================================= */

.services-page .services-main {
    padding-bottom: 0;
}

.services-page .services-container {
    width: 100%;
}

.services-page .patient-services {
    padding: 42px 0 112px;
}

.services-page .services-page-title {
    margin-bottom: 38px;

    color: var(--rpm-light);

    font-size: clamp(2rem, 9vw, 3.3rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.services-page .service-card-list {
    width: min(calc(100% - 32px), 860px);
    margin-inline: auto;
    gap: 26px;
}

.services-page .service-card {
    grid-template-columns: minmax(118px, 40%) minmax(0, 60%);

    width: 100%;
    min-height: 232px;
    padding: 18px 18px 18px 12px;

    border-radius: 31px;

    background: var(--rpm-card-bg);
    box-shadow:
        0 13px 25px rgba(32, 76, 160, 0.18),
        0 4px 9px rgba(20, 50, 100, 0.09);

    backdrop-filter: blur(var(--rpm-card-blur));
    -webkit-backdrop-filter: blur(var(--rpm-card-blur));
}

.services-page .service-card-visual {
    height: 190px;
    padding: 4px;
}

.services-page .service-card-visual img {
    width: 94%;
    height: 184px;
}

.services-page .service-card-visual--logo img {
    width: 90%;
    height: 112px;
}

.services-page .service-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding-left: 10px;
}

.services-page .service-card-copy h2 {
    margin-bottom: 8px;

    font-size: clamp(0.78rem, 3.2vw, 1rem);
    line-height: 1.2;
}

.services-page .service-card-copy > p:not(.service-card-requirement) {
    max-width: 100%;

    font-size: clamp(0.68rem, 2.8vw, 0.88rem);
    line-height: 1.28;
}

.services-page .service-card-copy .service-card-requirement {
    margin: 10px 0 0;

    color: var(--rpm-pink);

    font-size: clamp(0.76rem, 3.2vw, 1rem);
    font-weight: 700;
    line-height: 1.1;
}

.service-card-button {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;
    align-self: center;

    width: min(100%, 168px);
    min-height: 34px;
    margin-top: 11px;
    padding: 7px 14px;

    border-radius: 999px;

    color: var(--rpm-light);
    background:
        url("assets/fondo02.png") center / cover no-repeat,
        linear-gradient(90deg, var(--rpm-pink), var(--rpm-pink-light));
    box-shadow:
        0 8px 16px rgba(122, 54, 110, 0.25),
        0 3px 6px rgba(20, 50, 100, 0.12);

    font-size: clamp(0.7rem, 2.7vw, 0.88rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;

    animation: appointment-breathe 2.8s ease-in-out infinite;

    transition:
        transform 0.48s cubic-bezier(0.22, 0.68, 0.24, 1),
        box-shadow 0.48s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.service-card-button::after {
    position: absolute;
    inset: -5px;
    z-index: -1;

    border: 2px solid rgba(229, 65, 147, 0.20);
    border-radius: inherit;

    content: "";
    pointer-events: none;

    animation: appointment-wave 2.8s ease-out infinite;
}

.professional-services-preview {
    display: grid;
    align-items: center;

    min-height: 150px;
    padding: 28px 0 31px;

    color: var(--rpm-light);
    background: linear-gradient(
        90deg,
        #2F70EB 0%,
        #65A0F5 52%,
        #A8CEFF 100%
    );

    box-shadow:
        0 -6px 18px rgba(31, 98, 232, 0.09),
        0 7px 18px rgba(31, 76, 160, 0.10);
}

.professional-services-preview__inner {
    width: min(86%, 860px);
}

.professional-services-preview p {
    margin: 0 0 13px;

    font-family: "Marydale", "Segoe Print", cursive;
    font-size: clamp(1.18rem, 5vw, 1.55rem);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.professional-services-preview h2 {
    margin: 0;

    font-size: clamp(1.25rem, 4.7vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.home-page .appointment-note {
    top: -56px;
}

@media (max-width: 767px) {
    .home-page .appointment-wrap {
        margin-top: clamp(84px, 22vw, 100px);
    }

    .home-page .appointment-note {
        top: -61px;
    }
}

.therapies-appointment-note {
    top: -58px;

    width: 170px;
    height: 58px;
}

.therapies-appointment-note span {
    top: 4px;
    right: auto;
    left: 82px;
}

.therapies-appointment-note img {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;

    width: 70px;
    height: 42px;
}

.contact-page .contact-hand-note--left {
    top: -58px;
    left: -48px;

    width: 160px;
    height: 58px;
}

.contact-page .contact-hand-note--left span {
    top: 4px;
    left: 0;
}

.contact-page .contact-hand-note--left img {
    top: 0;
    right: 0;

    width: 72px;
    height: 41px;
}


/* Estado destacado de la tarjeta Expediente digital */

.feature-status {
    display: block;

    width: 100%;
    margin-top: 10px;

    color: var(--rpm-pink);

    font-size: clamp(0.69rem, 2.6vw, 0.9rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;

    transform-origin: center;
    animation: feature-status-soft 3.6s ease-in-out infinite;
}

.user-login-card .user-coming-soon {
    margin-top: 18px;
}

@keyframes feature-status-soft {
    0%,
    100% {
        opacity: 0.86;
        text-shadow: 0 0 0 rgba(229, 65, 147, 0);
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(229, 65, 147, 0.16);
        transform: translateY(-1px);
    }
}

@media (hover: hover) {
    .service-card-button:hover {
        transform: translateY(-1px);
        box-shadow:
            0 10px 19px rgba(122, 54, 110, 0.28),
            0 4px 7px rgba(20, 50, 100, 0.13);
    }
}

@media (min-width: 768px) {
    .services-page .patient-services {
        padding: 56px 0 150px;
    }

    .services-page .services-page-title {
        margin-bottom: 66px;

        font-size: clamp(3.1rem, 5.2vw, 4.2rem);
    }

    .services-page .service-card-list {
        width: min(calc(100% - 64px), 860px);
        gap: 24px;
    }

    .services-page .service-card {
        grid-template-columns: 47% 53%;

        min-height: 270px;
        padding: 20px 48px 20px 34px;

        border-radius: 50px;
    }

    .services-page .service-card-visual {
        height: 238px;
    }

    .services-page .service-card-visual img {
        width: 91%;
        height: 232px;
    }

    .services-page .service-card-visual--logo img {
        width: 82%;
        height: 156px;
    }

    .services-page .service-card-copy {
        justify-content: center;

        padding-left: 22px;
    }

    .services-page .service-card-copy h2 {
        margin-bottom: 13px;

        font-size: clamp(1.15rem, 1.65vw, 1.48rem);
    }

    .services-page .service-card-copy > p:not(.service-card-requirement) {
        max-width: 390px;

        font-size: clamp(1rem, 1.45vw, 1.28rem);
        line-height: 1.34;
    }

    .services-page .service-card-copy .service-card-requirement {
        margin-top: 16px;

        font-size: clamp(1.08rem, 1.55vw, 1.36rem);
    }

    .service-card-button {
        width: min(90%, 260px);
        min-height: 46px;
        margin-top: 17px;
        padding: 10px 24px;

        font-size: clamp(0.92rem, 1.25vw, 1.08rem);
    }

    .professional-services-preview {
        min-height: 190px;
        padding: 38px 0 42px;
    }

    .professional-services-preview__inner {
        width: min(calc(100% - 64px), 860px);
    }

    .professional-services-preview p {
        margin-bottom: 19px;

        font-size: 1.65rem;
    }

    .professional-services-preview h2 {
        font-size: clamp(2rem, 2.6vw, 2.35rem);
    }

    .home-page .appointment-note {
        top: -78px;
    }

    .therapies-appointment-note {
        top: -78px;

        width: 250px;
        height: 76px;
    }

    .therapies-appointment-note span {
        top: 8px;
        right: auto;
        left: 128px;
    }

    .therapies-appointment-note img {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;

        width: 108px;
        height: 58px;
    }

    .contact-page .contact-hand-note--left {
        top: -76px;
        left: -210px;

        width: 230px;
        height: 72px;
    }

    .contact-page .contact-hand-note--left span {
        top: 6px;
    }

    .contact-page .contact-hand-note--left img {
        width: 88px;
        height: 48px;
    }

    .feature-status {
        margin-top: 17px;

        font-size: 1rem;
    }

    .user-login-card .user-coming-soon {
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card-button,
    .service-card-button::after,
    .feature-status {
        animation: none;
    }
}