/* =========================================================
   TIPOGRAFÍAS PROPIAS

   Jost e Inter servidas desde este mismo servidor, no desde
   Google. Así ninguna visita envía su IP a un tercero, y la
   página no depende de una conexión externa para pintar el
   texto.

   Las dos son fuentes VARIABLES: un mismo fichero contiene
   todos los grosores del 100 al 900, y el navegador saca el
   que se le pida. Por eso aquí hay cuatro ficheros y no doce.
   El `font-weight: 100 900` es lo que le dice al navegador que
   puede interpolar; si se pusiera un número suelto, dibujaría
   siempre el grosor por defecto.

   Los ficheros están recortados a los caracteres que esta web
   necesita: todo el ASCII más los acentos y signos de español,
   francés, alemán, portugués, italiano y catalán. Se conservan
   el kerning y las ligaduras, que es lo que se nota al leer.

   La cursiva de Inter es de grosor fijo porque la web solo la
   usa en redonda normal; si algún día hiciera falta una cursiva
   negrita, el navegador la engorda él.
========================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jost.woff2') format('woff2');
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/jost-italic.woff2') format('woff2');
}


/* =========================================================
   1. VARIABLES — los dos colores de marca VetMove
========================================================= */

:root {

    /* Teal (color principal del logo) */
    --teal: #0E7B76;
    --teal-dark: #0A5B57;
    --teal-deep: #063C3A;
    --teal-soft: #D9EAE8;
    --teal-mist: #EFF6F5;

    /* Dorado (color de acento del logo) */
    --gold: #C79A50;
    --gold-dark: #A87F3B;
    --gold-soft: #F0E3CB;

    /* Neutros cálidos */
    --cream: #F6F2EA;
    --cream-light: #FBF9F5;
    --white: #FFFFFF;

    --ink: #11201E;
    --muted: #5E6E6B;

    /* Variables que consume el SVG del logo */
    --logo-teal: var(--teal);
    --logo-gold: var(--gold);

    --radius-lg: 40px;
    --radius-md: 24px;
    --radius-sm: 14px;

    --container: 1240px;

    --shadow-sm: 0 6px 20px rgba(6, 60, 58, .06);
    --shadow-md: 0 18px 45px rgba(6, 60, 58, .10);

    --ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   2. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--cream-light);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

button {
    font: inherit;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-family: "Jost", "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.1;
}

::selection {
    background: var(--teal);
    color: #fff;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--teal);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 10px 0;
    font-size: 14px;
}

.skip-link:focus {
    left: 0;
}

.container {
    width: min(90%, var(--container));
    margin: 0 auto;
}

.section {
    padding: clamp(70px, 9vw, 130px) 0;
}


/* =========================================================
   3. LOGO — archivo original de VetMove
========================================================= */

.logo {
    display: inline-block;
    z-index: 10;
    line-height: 0;
}

.logo img {
    height: 62px;
    max-height: 62px;
    width: auto;
    max-width: none;
    transition: transform .4s var(--ease), height .35s var(--ease);
}

.logo:hover img {
    transform: translateX(3px);
}

.header.scrolled .logo img {
    height: 52px;
    max-height: 52px;
}

.footer-logo img {
    max-height: none;
}


/* =========================================================
   4. HEADER
========================================================= */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background .35s var(--ease), padding .35s var(--ease),
        box-shadow .35s var(--ease);
}

.header.scrolled {
    background: rgba(251, 249, 245, .93);
    backdrop-filter: blur(14px);
    padding: 9px 0;
    box-shadow: 0 6px 28px rgba(6, 60, 58, .07);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-left: auto;
}

.nav-menu a {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
}

.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width .3s var(--ease);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

.nav-menu a.active {
    color: var(--teal);
}


/* =========================================================
   5. BOTONES
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    padding: 15px 28px;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    transition: transform .3s var(--ease), background .3s var(--ease),
        color .3s var(--ease), border-color .3s var(--ease),
        box-shadow .3s var(--ease);
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-nav {
    background: var(--gold);
    color: #fff;
    padding: 12px 24px;
    box-shadow: 0 8px 22px rgba(199, 154, 80, .3);
}

.btn-nav:hover {
    background: var(--gold-dark);
}

.btn-primary {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 10px 28px rgba(14, 123, 118, .28);
}

.btn-primary:hover {
    background: var(--teal-dark);
}

.btn-primary span {
    transition: transform .3s var(--ease);
}

.btn-primary:hover span {
    transform: translateX(4px);
}

.btn-secondary {
    border: 1.5px solid rgba(14, 123, 118, .35);
    color: var(--teal);
}

.btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.btn-light {
    background: var(--gold);
    color: #fff;
}

.btn-light:hover {
    background: #fff;
    color: var(--teal-deep);
}

.btn-outline-light {
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.btn-outline-light:hover {
    border-color: var(--gold);
    background: var(--gold);
}


/* =========================================================
   6. TIPOGRAFÍA DE SECCIÓN
========================================================= */

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 22px;
}

.eyebrow.dark {
    color: var(--teal);
}

.section-number {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 600;
}

.intro h2,
.section-heading h2,
.home-care h2,
.about h2,
.faq h2,
.cta h2 {
    font-size: clamp(36px, 4.6vw, 68px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px;
}

.section-heading > p {
    max-width: 380px;
    color: var(--muted);
    font-size: 15.5px;
}


/* =========================================================
   7. IMÁGENES (con marcador si el archivo aún no existe)
========================================================= */

.media {
    display: block;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 0%, var(--teal-soft), transparent 60%),
        linear-gradient(160deg, var(--cream) 0%, var(--gold-soft) 100%);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.media:hover img {
    transform: scale(1.04);
}

.media.is-missing img {
    display: none;
}

.media.is-missing::after {
    content: "Añade tu foto en " attr(data-media);
    position: absolute;
    inset: auto 12% 12% 12%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .85);
    border: 1px dashed var(--teal);
    border-radius: 12px;
    color: var(--teal-dark);
    font-size: 12.5px;
    text-align: center;
    line-height: 1.4;
}


/* =========================================================
   8. HERO
========================================================= */

.hero {
    background:
        radial-gradient(70% 60% at 85% 10%, rgba(199, 154, 80, .12), transparent 65%),
        radial-gradient(60% 55% at 5% 85%, rgba(14, 123, 118, .10), transparent 65%),
        var(--cream);
    padding: 150px 0 90px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(42px, 5.4vw, 80px);
    line-height: 1.02;
    letter-spacing: -2px;
    max-width: 14ch;
}

.hero h1 span {
    color: var(--gold);
    font-style: italic;
    font-weight: 300;
}

.hero-text {
    font-size: 17.5px;
    max-width: 55ch;
    color: var(--muted);
    margin: 28px 0 34px;
}

.hero-text strong {
    color: var(--teal);
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-info {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid rgba(14, 123, 118, .18);
}

.hero-info li {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 16px;
}

.hero-info li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}

.hero-info strong {
    font-size: 13.5px;
    font-weight: 600;
}

.hero-info span {
    font-size: 12.5px;
    color: var(--muted);
}

.hero-figure {
    max-width: 560px;
    margin-left: auto;
    width: 100%;
}

/* Proporción exacta de la foto: se ve entera, sin recortes
   laterales y sin nada superpuesto encima. */
.hero-image {
    display: block;
    aspect-ratio: 1672 / 940;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.hero-figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--teal-deep);
    text-align: center;
    text-wrap: balance;
}

.hero-figure figcaption span {
    color: var(--gold);
    font-size: 16px;
}


/* =========================================================
   9. SELLO DE MARCA
========================================================= */

.stamp {
    background: var(--teal);
    color: #fff;
    padding: 34px 0;
}

.stamp-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.stamp .paw svg {
    width: 30px;
    fill: var(--gold);
}

.stamp p {
    font-family: "Jost", sans-serif;
    font-size: clamp(17px, 2.4vw, 26px);
    font-weight: 300;
    letter-spacing: .3px;
}

.stamp em {
    color: var(--gold);
    font-weight: 400;
}


/* =========================================================
   10. INTRO
========================================================= */

.intro {
    background: var(--cream-light);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.intro-content {
    max-width: 880px;
}

.intro p {
    margin-top: 26px;
    max-width: 62ch;
    font-size: 18px;
    color: var(--muted);
}


/* =========================================================
   11. SERVICIOS
========================================================= */

.services {
    background: var(--white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-card {
    position: relative;
    min-height: 350px;
    border-radius: var(--radius-md);
    padding: 28px;
    background: var(--cream-light);
    border: 1px solid rgba(14, 123, 118, .10);
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease),
        border-color .4s var(--ease);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold);
}

/* La quinta tarjeta ocupa toda la fila y es el bloque destacado */
.service-card.featured {
    grid-column: 1 / -1;
    min-height: 0;
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 26px;
    padding: 32px 36px;
}

.service-number {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--gold);
}

.service-icon {
    margin-top: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal);
}

.service-icon svg {
    width: 24px;
}

.service-card.featured .service-icon {
    margin-top: 0;
    background: rgba(255, 255, 255, .12);
    color: var(--gold);
}

.service-card h3 {
    margin-top: 18px;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.3px;
}

.service-card.featured h3 {
    margin-top: 0;
    font-size: 25px;
}

.service-card p {
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}

.service-card.featured p {
    margin-top: 6px;
    color: rgba(255, 255, 255, .78);
    max-width: 58ch;
}

.service-card.featured a {
    justify-self: end;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--gold);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
}

.service-card.featured a:hover {
    border-color: var(--gold);
}


/* =========================================================
   12. A DOMICILIO
========================================================= */

.home-care {
    background: var(--teal-deep);
    color: #fff;
}

.home-care-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.home-care-image {
    height: min(680px, 80vh);
    border-radius: 28px 200px 28px 28px;
}

.home-care-content > p {
    color: rgba(255, 255, 255, .72);
    font-size: 16.5px;
    margin: 26px 0 40px;
    max-width: 55ch;
}

.benefits {
    display: grid;
    gap: 26px;
}

.benefit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.benefit > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gold);
}

.benefit h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.benefit p {
    color: rgba(255, 255, 255, .66);
    font-size: 14.5px;
}


/* =========================================================
   13. PROCESO
========================================================= */

.process {
    background: var(--cream);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(14, 123, 118, .16);
    border: 1px solid rgba(14, 123, 118, .16);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.process-item {
    background: var(--cream);
    padding: 40px 28px;
    min-height: 250px;
    transition: background .35s var(--ease);
}

.process-item:hover {
    background: var(--white);
}

.process-item > span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold);
}

.process-item h3 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 500;
}

.process-item p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
}


/* =========================================================
   14. SOBRE MÍ
========================================================= */

.about {
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: start;
}

.about-content p {
    color: var(--muted);
    margin-top: 20px;
    max-width: 62ch;
}

.about-content strong {
    color: var(--ink);
    font-weight: 600;
}

.about-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.about-paw svg {
    width: clamp(28px, 3vw, 40px);
    fill: var(--gold);
}

.about-content .about-role {
    margin-top: 16px;
    font-family: "Jost", sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--teal);
}

.about-content h3 {
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(14, 123, 118, .14);
    font-size: 24px;
    font-weight: 500;
    color: var(--teal-deep);
}

.about-content h3 + p {
    margin-top: 14px;
}

.about-content .about-sign {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-sign strong {
    font-family: "Jost", sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--teal-deep);
}

.about-sign em {
    font-family: "Jost", sans-serif;
    font-size: 17px;
    color: var(--gold-dark);
}

.about-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.about-cv {
    background: var(--teal-mist);
    border-radius: var(--radius-md);
    padding: 30px 28px;
}

.about-cv h3 {
    font-size: 22px;
    font-weight: 500;
    color: var(--teal-deep);
    margin-bottom: 22px;
}

.about-cv ul {
    display: grid;
    gap: 18px;
}

.about-cv li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
}

.cv-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    color: var(--teal);
}

.cv-icon svg {
    width: 19px;
}

.about-cv li > div > strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.about-cv li > div > span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--muted);
}

.cv-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 100px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    vertical-align: middle;
}

.text-link {
    display: inline-block;
    margin-top: 28px;
    font-weight: 600;
    font-size: 15px;
    color: var(--teal);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 3px;
    transition: color .3s var(--ease);
}

.text-link:hover {
    color: var(--gold-dark);
}

.about-image-wrapper {
    position: relative;
}

.about-image {
    height: min(420px, 55vh);
    border-radius: 28px 150px 28px 28px;
    box-shadow: var(--shadow-md);
}

.about-label {
    position: absolute;
    top: 28px;
    bottom: auto;
    left: -34px;
    background: var(--cream);
    border-left: 4px solid var(--gold);
    padding: 18px 26px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.about-label strong {
    font-size: 15px;
}

.about-label span {
    font-size: 13px;
    color: var(--muted);
}

/* En móvil, la etiqueta queda debajo para no tapar la cara. */
@media (max-width: 768px) {
    .about-image-wrapper {
        display: flex;
        flex-direction: column;
    }

    .about-label {
        position: static;
        width: 100%;
        margin-top: 12px;
    }
}


/* =========================================================
   15. FAQ
========================================================= */

.faq {
    background: var(--teal-mist);
}

.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: start;
}

.faq-intro p {
    margin-top: 20px;
    color: var(--muted);
    max-width: 40ch;
}

.faq-list details {
    background: var(--white);
    border: 1px solid rgba(14, 123, 118, .12);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.faq-list details[open] {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 56px 20px 24px;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    font-weight: 500;
    position: relative;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    color: var(--gold);
    transition: transform .3s var(--ease);
}

.faq-list details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-list details p {
    padding: 0 24px 22px;
    color: var(--muted);
    font-size: 15px;
    max-width: 62ch;
}


/* =========================================================
   16. CTA
========================================================= */

.cta {
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(199, 154, 80, .18), transparent 70%),
        var(--teal-deep);
    color: #fff;
    text-align: center;
    padding: clamp(80px, 11vw, 150px) 0;
}

.cta-content {
    max-width: 820px;
}

.cta p {
    color: rgba(255, 255, 255, .7);
    margin: 22px auto 36px;
    max-width: 52ch;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cta-note {
    font-family: "Jost", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    color: var(--gold) !important;
    margin-top: 40px !important;
}


/* =========================================================
   17. FOOTER
========================================================= */

.footer {
    background: #051F1E;
    color: #fff;
    padding: 80px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 60px;
}

.footer-grid > * {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--gold);
}

.footer p,
.footer a {
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    transition: color .3s var(--ease);
}

.footer strong {
    color: #fff;
    font-weight: 600;
}

.footer-brand p {
    max-width: 38ch;
    line-height: 1.7;
}

/* Contacto y Horario comparten alto de fila, así las dos columnas
   casan línea a línea. Antes las de Contacto medían 44px -para
   poder pulsarlas con el dedo- y las de Horario solo lo que el
   texto, de modo que se descuadraban a partir de la segunda. */
.footer-line,
.footer-col p {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    overflow-wrap: anywhere;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 17px;
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
}

/* El área para pulsar con el dedo sigue siendo de 44px, pero se
   proyecta sin ocupar sitio: así el icono queda alineado con los
   del correo y el Instagram, que miden 17px. */
.footer-social::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.footer-instagram {
    width: fit-content;
}

.footer-line svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--gold);
}

.footer a:hover {
    color: var(--gold);
}

.footer-logo {
    margin-bottom: 18px;
}

.footer-logo img {
    height: 64px;
}

.footer-bottom {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 26px;
    display: flex;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
}


/* =========================================================
   18. ACCIONES FLOTANTES
========================================================= */

.whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 900;
    box-shadow: 0 12px 30px rgba(6, 60, 58, .3);
    transition: transform .3s var(--ease), background .3s var(--ease);
}

.whatsapp svg {
    width: 28px;
}

.whatsapp:hover {
    transform: scale(1.08);
    background: var(--gold);
}


/* =========================================================
   19. MENÚ MÓVIL
========================================================= */

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 6px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--teal);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .25s var(--ease);
}

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

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

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


/* =========================================================
   20. ANIMACIÓN DE ENTRADA
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

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


/* =========================================================
   21. RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card.featured {
        grid-template-columns: auto 1fr;
        row-gap: 16px;
    }

    .service-card.featured .service-number {
        grid-column: 1 / -1;
    }

    .service-card.featured a {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .hero-grid,
    .home-care-grid,
    .about-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .home-care-image {
        height: 500px;
    }

    .about-side {
        position: static;
    }

    .about-image {
        height: 420px;
    }

    /* La foto de marca se centra y mantiene su proporción */
    .hero-figure {
        max-width: 500px;
        margin: 0 auto;
    }

    .nav-menu {
        display: none;
    }

    /* "Pide tu cita" se mantiene en la cabecera también en móvil */
    .btn-nav {
        margin-left: auto;
        padding: 10px 18px;
        font-size: 13.5px;
    }

    .menu-toggle {
        display: block;
    }

    /* Menú desplegado */
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: calc(100% + 8px);
        left: 5%;
        right: 5%;
        background: var(--white);
        border-radius: var(--radius-sm);
        padding: 18px 22px;
        box-shadow: var(--shadow-md);
    }

    .nav-menu.open a {
        width: 100%;
        padding: 11px 0;
        border-bottom: 1px solid rgba(14, 123, 118, .1);
    }

    .nav-menu.open a:last-child {
        border-bottom: 0;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {

    .hero {
        padding-top: 120px;
    }

    .hero h1 {
        letter-spacing: -1px;
    }

    .hero-image {
        border-radius: 16px;
    }

    .hero-figure figcaption {
        font-size: 13px;
        margin-top: 13px;
    }

    .stamp-inner {
        flex-direction: column;
        gap: 10px;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .services-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .home-care-image,
    .about-image {
        height: 380px;
        border-radius: 22px;
    }

    .about-label {
        left: 16px;
        top: 16px;
        bottom: auto;
    }

    .logo img,
    .header.scrolled .logo img {
        height: 46px;
    }

    .footer-logo img {
        height: 54px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }
}


/* =========================================================
   22. BLOQUES DE CONTENIDO DEL CLIENTE
========================================================= */

/* --- Botón "Pide tu cita" de cierre de sección --- */

.section-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
}

.section-cta.align-start,
.section-cta.on-dark,
.intro-content .section-cta {
    justify-content: flex-start;
}


/* --- Frase destacada --- */

.lead-claim {
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.35;
    max-width: 26ch;
    margin-top: 46px;
    color: var(--teal-deep);
}

.lead-claim em {
    color: var(--gold);
    font-style: italic;
}

.values-section .lead-claim {
    max-width: 46ch;
    font-size: clamp(17px, 2vw, 22px);
    color: var(--muted);
    margin-top: 54px;
}


/* --- Veterinaria en casa --- */

.home-intro {
    background: var(--cream);
}


/* --- Nota bajo la rejilla de servicios --- */

.note-after-grid {
    margin-top: 34px;
    max-width: 76ch;
    color: var(--muted);
    font-size: 15.5px;
    padding-left: 18px;
    border-left: 3px solid var(--gold);
}


/* --- Detalle de cada servicio --- */

.service-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 70px;
}

.service-block {
    background: var(--cream-light);
    border: 1px solid rgba(14, 123, 118, .10);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.service-block:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.service-block header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.service-block-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal);
}

.service-block-icon svg {
    width: 22px;
}

.service-block h3 {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.3px;
}

.service-block-claim {
    font-family: "Jost", sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--teal);
    margin-bottom: 10px;
}

.service-block p {
    color: var(--muted);
    font-size: 15px;
}

.service-block p + p {
    margin-top: 10px;
}


/* --- Listas con check dorado --- */

.check-list {
    margin-top: 18px;
    display: grid;
    gap: 9px;
}

.check-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    color: var(--ink);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.check-list.light li {
    color: rgba(255, 255, 255, .85);
}


/* --- ¿Y si necesita una clínica? --- */

.clinic-note {
    margin-top: 24px;
    background: var(--teal-mist);
    border-radius: var(--radius-md);
    padding: 34px 36px;
}

.clinic-note h3 {
    font-size: 24px;
    font-weight: 500;
    color: var(--teal);
    margin-bottom: 14px;
}

.clinic-note p {
    color: var(--muted);
    font-size: 15.5px;
    max-width: 80ch;
}

.clinic-note p + p {
    margin-top: 12px;
}


/* --- Cajas de reclamo del documento --- */

.claim-box {
    margin-top: 60px;
    text-align: center;
    border: 1px solid rgba(14, 123, 118, .25);
    border-radius: var(--radius-md);
    padding: 44px 32px;
    background: var(--white);
}

.claim-box h3 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400;
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.claim-box p {
    color: var(--muted);
    max-width: 60ch;
    margin: 0 auto;
}

.claim-box p + p {
    margin-top: 10px;
}

.claim-values {
    font-family: "Jost", sans-serif;
    font-size: 18px;
    color: var(--teal) !important;
    letter-spacing: .3px;
}

.claim-question {
    margin-top: 24px !important;
    font-weight: 600;
    color: var(--ink) !important;
}

.claim-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.claim-contact {
    font-size: 18px;
    font-weight: 600;
}

.claim-contact a:hover {
    color: var(--gold);
}

.claim-place {
    margin-top: 6px !important;
}

.claim-box.on-dark {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
}

.claim-box.on-dark h3 {
    color: #fff;
}

.claim-box.on-dark p {
    color: rgba(255, 255, 255, .72);
}

.claim-box.on-dark .claim-contact,
.claim-box.on-dark .claim-question {
    color: #fff !important;
}


/* --- A domicilio: listas y cierre --- */

.benefits-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--gold);
    margin: 40px 0 6px;
}

.home-care-lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 90px;
    padding-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.home-care-lists h3 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 14px;
}

.home-care-lists > div > p {
    color: rgba(255, 255, 255, .7);
    font-size: 15.5px;
}

.list-note {
    margin-top: 20px;
    font-style: italic;
    color: var(--gold) !important;
}

.environment-note {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.environment-note h3 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400;
    margin-bottom: 18px;
}

.environment-note p {
    color: rgba(255, 255, 255, .72);
    max-width: 80ch;
}

.environment-note p + p {
    margin-top: 12px;
}


/* --- Una forma diferente de hacer veterinaria --- */

.values-section {
    background: var(--white);
}

.values-head h2 {
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.values-head h2 span {
    color: var(--gold);
    font-style: italic;
    font-weight: 300;
}

.values-head > p {
    margin-top: 20px;
    color: var(--muted);
}

.values-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 54px;
}

.values-list li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 24px;
    border-radius: var(--radius-sm);
    background: var(--teal-mist);
    font-family: "Jost", sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--teal-deep);
}

.values-list li span {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold);
}


/* --- Su bienestar empieza en casa --- */

.wellbeing {
    background: var(--teal);
    color: #fff;
}

.wellbeing-content {
    max-width: 900px;
}

.wellbeing h2 {
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.wellbeing p {
    margin-top: 24px;
    color: rgba(255, 255, 255, .78);
    max-width: 70ch;
    font-size: 16.5px;
}

.wellbeing .claim-box {
    margin-top: 56px;
}


/* --- Contacto --- */

.cta-place {
    font-family: "Jost", sans-serif;
    font-size: 20px;
    color: var(--gold) !important;
    margin: 0 auto 6px !important;
}

.cta-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 22px 0 32px;
    font-size: 16px;
    font-weight: 500;
}

.cta-data a {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

.cta-data a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.cta-question {
    font-family: "Jost", sans-serif;
    font-size: 22px;
    color: #fff !important;
    margin-bottom: 8px !important;
}


/* =========================================================
   23. RESPONSIVE DE LOS BLOQUES NUEVOS
========================================================= */

@media (max-width: 1100px) {

    .service-blocks,
    .home-care-lists,
    .values-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-care-lists {
        gap: 44px;
        margin-top: 70px;
    }

    .lead-claim {
        max-width: 34ch;
    }
}


@media (max-width: 700px) {

    .service-blocks,
    .home-care-lists,
    .values-list {
        grid-template-columns: 1fr;
    }

    .service-block,
    .clinic-note {
        padding: 26px 22px;
    }

    .claim-box {
        padding: 32px 22px;
        margin-top: 44px;
    }

    .claim-actions,
    .section-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .claim-actions .btn,
    .section-cta .btn {
        width: 100%;
    }

    .cta-data {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .environment-note,
    .home-care-lists {
        margin-top: 56px;
        padding-top: 40px;
    }
}


/* =========================================================
   24. CRÉDITO DE LA DESARROLLADORA
========================================================= */

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 56px;
}

.footer-credit span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
}

.footer-credit img {
    height: 22px;
    width: auto;
    opacity: .9;
    transition: opacity .3s var(--ease);
}

.footer-credit:hover img {
    opacity: 1;
}


@media (max-width: 700px) {

    .footer-credit {
        flex-direction: column;
        gap: 8px;
    }

    .footer-credit img {
        height: 20px;
    }
}


/* =========================================================
   25. CABECERA EN MÓVIL: logo + "Pide tu cita" + menú
========================================================= */

@media (max-width: 700px) {

    .nav {
        gap: 12px;
    }

    .btn-nav {
        padding: 9px 15px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {

    .logo img,
    .header.scrolled .logo img {
        height: 38px;
        max-height: 38px;
    }

    .btn-nav {
        padding: 8px 12px;
        font-size: 12.5px;
    }
}


/* =========================================================
   26. TU ANIMAL, SIEMPRE BAJO CONTROL
========================================================= */

.tracking {
    background: var(--teal-deep);
    color: #fff;
}

.tracking-head {
    max-width: 780px;
}

.tracking-head h2 {
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.tracking-head h2 span {
    display: block;
    color: var(--gold);
    font-style: italic;
    font-weight: 300;
}

.tracking-head > p {
    margin-top: 24px;
    max-width: 62ch;
    font-size: 16.5px;
    color: rgba(255, 255, 255, .75);
}

.tracking-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 56px;
}

.tracking-list li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 26px 30px 56px;
    position: relative;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: border-color .35s var(--ease), background .35s var(--ease);
}

.tracking-list li:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, .09);
}

/* Check dorado, el mismo gesto que el resto de listas de la web */
.tracking-list li::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 38px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.tracking-list strong {
    font-family: "Jost", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
}

.tracking-list span {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .7);
}

.tracking-note {
    margin-top: 36px;
    font-family: "Jost", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--gold);
}

/* Enlace dentro de las preguntas frecuentes */
.faq-list details p a {
    color: var(--teal);
    font-weight: 600;
    border-bottom: 1px solid var(--gold);
    transition: color .3s var(--ease);
}

.faq-list details p a:hover {
    color: var(--gold-dark);
}


@media (max-width: 1100px) {

    .tracking-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tracking-list li {
        padding: 24px 22px 24px 52px;
    }

    .tracking-list li::before {
        top: 32px;
        left: 22px;
    }
}


/* =========================================================
   27. FOTOS DE SECCIÓN

   Criterio: ninguna foto se recorta. Cada una se muestra con
   su proporción real (altura automática), así que nunca se
   corta una cara ni unas patas. El tamaño se controla con el
   ancho máximo, no forzando proporciones.
========================================================= */

.section-photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--teal-mist);
    line-height: 0;
}

.section-photo img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s var(--ease);
}

.section-photo:hover img {
    transform: scale(1.03);
}

/* Las fotos que ya tenía la web: también enteras */
.home-care-image,
.about-image {
    height: auto;
    aspect-ratio: auto;
}

.home-care-image img,
.about-image img {
    height: auto;
}


/* --- Banda de cierre de sección: centrada y contenida --- */

.photo-band {
    margin: 60px auto 0;
    max-width: 560px;
}

/* Cuando la banda lleva una foto vertical, se estrecha más:
   si no, una vertical a 560px de ancho mide casi 700px de alto. */
.photo-band-vertical {
    max-width: 400px;
}


/* --- Intro: la foto entra como tercera columna --- */

.intro-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 0 56px;
    align-items: start;
}

.intro-photo {
    border-radius: var(--radius-md) var(--radius-md) 60px var(--radius-md);
}


/* --- Servicios: foto junto a "¿Y si necesita una clínica?" --- */

.clinic-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-top: 20px;
}

.clinic-photo {
    border-radius: 60px var(--radius-md) var(--radius-md) var(--radius-md);
}

.clinic-block .clinic-note {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* --- Seguimiento: retrato junto al titular --- */

.tracking-top {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 50px;
    align-items: center;
}

.tracking-photo {
    border-radius: var(--radius-md) 60px var(--radius-md) var(--radius-md);
}


/* --- Preguntas frecuentes: el gato bajo el texto de entrada --- */

.faq-photo {
    margin-top: 34px;
    max-width: 300px;
    border-radius: 60px var(--radius-md) var(--radius-md) var(--radius-md);
}


@media (max-width: 1100px) {

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .intro-photo,
    .clinic-photo,
    .tracking-photo,
    .photo-band {
        max-width: 520px;
        margin-left: 0;
        margin-right: 0;
    }

    .clinic-block,
    .tracking-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .faq-photo {
        max-width: 280px;
    }

    /* La banda vertical no debe crecer hasta 520px: sería demasiado alta */
    .photo-band-vertical {
        max-width: 380px;
    }
}


@media (max-width: 700px) {

    .photo-band {
        margin-top: 40px;
    }

    .intro-photo,
    .clinic-photo,
    .tracking-photo,
    .photo-band,
    .faq-photo {
        max-width: 100%;
    }
}


/* =========================================================
   28. VETERINARIA EN CASA

   Antes eran cuatro piezas sueltas: el titular a la izquierda,
   un párrafo pegado abajo a la derecha, la frase destacada sola
   y la foto centrada. Ninguna compartía columna con otra.
   Ahora es un único bloque de dos columnas.
========================================================= */

.home-intro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 64px;
    align-items: center;
}

.home-intro-texto h2 {
    margin-top: 6px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: -1.5px;
    max-width: 18ch;
}

.home-intro-texto > p {
    margin-top: 26px;
    max-width: 54ch;
    color: var(--muted);
    font-size: 16px;
}

.home-intro-texto .lead-claim {
    margin-top: 30px;
    max-width: 34ch;
    font-size: clamp(19px, 2.2vw, 26px);
}

.home-intro-photo {
    justify-self: end;
    width: 100%;
    max-width: 430px;
    border-radius: var(--radius-md) 120px var(--radius-md) var(--radius-md);
}


@media (max-width: 1100px) {

    .home-intro-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .home-intro-photo {
        justify-self: start;
        max-width: 480px;
    }

    .home-intro-texto h2 {
        max-width: 22ch;
    }
}


@media (max-width: 700px) {

    .home-intro-photo {
        max-width: 100%;
        border-radius: var(--radius-md) 70px var(--radius-md) var(--radius-md);
    }

    .home-intro-texto .lead-claim {
        max-width: 100%;
    }
}


/* =========================================================
   29. FOTO EN BLANCO Y NEGRO

   Su archivo real son 720px: una ampliación posterior a 1540px
   no añadió detalle, solo peso. Por eso se limita a 430px de
   ancho, por debajo de donde empezaría a verse blanda.
========================================================= */

.photo-band-bn {
    max-width: 430px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}


@media (max-width: 700px) {

    .photo-band-bn {
        max-width: 100%;
    }
}


/* =========================================================
   30. PORTADA A SANGRE

   El texto sobre crema a la izquierda y la foto ocupando la
   mitad derecha hasta el borde de la pantalla, subiendo por
   detrás de la cabecera. La barra no se toca: sigue fija y
   transparente, así que se superpone a la foto.
========================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 130px 0 80px;
    overflow: hidden;
}

/* El contenedor deja de repartir en dos columnas: la foto ya no
   vive dentro de la rejilla, sino sobre la sección entera. */
/* Sin position:relative a propósito: si lo lleva, pasa a ser el
   marco de referencia de la foto y esta ya no puede salirse del
   contenedor. El z-index funciona igual por ser hijo de un flex. */
.hero-grid {
    display: block;
    z-index: 2;
}

/* El panel de la foto arranca en el 44% del ancho de pantalla.
   La columna de texto se queda por debajo de eso para no meterse
   debajo de la imagen. */
.hero-content {
    max-width: 40%;
    padding-right: 40px;
}

.hero-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    max-width: none;
    margin: 0;
    z-index: 1;
}

.hero-image {
    display: block;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

/* El fundido va horneado en el archivo, así que la imagen solo
   tiene que rellenar el panel. */
.hero-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Difuminado que funde la foto con el crema de la izquierda */
/* Velo que funde el panel con el crema por arriba, abajo y por la
   izquierda. La derecha se deja limpia: sale de la pantalla. */
.hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to right, var(--cream) 0, rgba(246, 242, 234, 0) 26%),
        linear-gradient(to bottom, var(--cream) 0, rgba(246, 242, 234, 0) 18%),
        linear-gradient(to top, var(--cream) 0, rgba(246, 242, 234, 0) 18%);
}

/* El pie de foto repetía literalmente la frase que ya está en el
   titular de al lado, así que en esta maqueta sobra. */
.hero-figure figcaption {
    display: none;
}


@media (max-width: 1100px) {

    .hero {
        display: block;
        min-height: 0;
        padding: 120px 0 70px;
    }

    .hero-content {
        max-width: 100%;
        padding-right: 0;
    }

    .hero-figure {
        position: relative;
        width: calc(100% + 10vw);
        margin: 44px -5vw 0;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .hero-figure::after {
        display: none;
    }

    .hero-image img {
        object-position: center 60%;
    }
}


@media (max-width: 700px) {

    .hero {
        padding: 110px 0 50px;
    }

    .hero-figure {
        aspect-ratio: 5 / 4;
        margin-top: 36px;
    }
}

/* La columna de la portada es ahora más estrecha: los tres datos
   caben en una fila si se les recorta la separación. */
.hero-info {
    gap: 22px 24px;
}

.hero-info span {
    font-size: 12px;
}

/* La foto en blanco y negro abre la sección de contacto. Sobre el
   verde oscuro el gris lee como decisión, no como descuido. Su
   archivo real son 720px, así que no pasa de 380 de ancho. */
.cta-photo {
    max-width: 380px;
    margin: 0 auto 46px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

@media (max-width: 700px) {

    .cta-photo {
        max-width: 100%;
        margin-bottom: 34px;
    }
}


/* =========================================================
   31. A DOMICILIO: LAS VENTAJAS, A TODO EL ANCHO

   Estaban dentro de la columna de texto, que así medía 1042px
   frente a los 362 de la foto: mucho texto a la derecha y una
   foto pequeña a la izquierda. Salen de la rejilla y pasan
   debajo, repartidas en tres columnas.
========================================================= */

.home-care-ventajas {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.home-care-ventajas .benefits-title {
    margin: 0 0 34px;
}

.home-care-ventajas .benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 34px;
}


@media (max-width: 1100px) {

    .home-care-ventajas {
        margin-top: 54px;
        padding-top: 40px;
    }

    .home-care-ventajas .benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {

    .home-care-ventajas .benefits {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}


/* =========================================================
   32. UNA FORMA DIFERENTE

   Eran cuatro piezas apiladas -titular, fila de cajas, foto
   suelta y frase-, cada una a todo el ancho y con aire entre
   ellas. Pasa a dos columnas: la foto a la izquierda y el
   texto con las cajas a la derecha.
========================================================= */

.values-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 62px;
    align-items: center;
}

.values-photo {
    border-radius: var(--radius-md) var(--radius-md) 120px var(--radius-md);
}

.values-content h2 {
    margin-top: 6px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: -1.5px;
}

.values-content .values-intro {
    margin-top: 18px;
    color: var(--muted);
    font-size: 16px;
}

/* Las cuatro cajas, en dos filas de dos */
.values-content .values-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.values-content .values-list li {
    padding: 22px 24px;
    font-size: 20px;
}

.values-content .lead-claim {
    margin-top: 32px;
    max-width: 46ch;
    font-size: clamp(16px, 1.8vw, 19px);
}


@media (max-width: 1100px) {

    .values-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .values-photo {
        max-width: 520px;
    }
}


@media (max-width: 700px) {

    .values-photo {
        max-width: 100%;
        border-radius: var(--radius-md) var(--radius-md) 70px var(--radius-md);
    }

    .values-content .values-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   33. CAJAS A LA MEDIDA DE SU CONTENIDO

   Las tarjetas de servicio pedían 350px de alto mínimo y los
   pasos 250, así que con textos cortos quedaba mucho hueco
   vacío debajo. Cada caja pasa a medir lo que ocupa.
========================================================= */

.service-card {
    min-height: 0;
    padding: 26px 24px;
}

.service-card h3 {
    margin-top: 16px;
}

.process-item {
    min-height: 0;
    padding: 30px 26px;
}

/* La tarjeta destacada, en pantallas medianas y móvil, a una sola
   columna: con dos, el párrafo caía en la columna estrecha y el
   titular quedaba descolgado a la derecha. */
@media (max-width: 1100px) {

    .service-card.featured {
        grid-template-columns: 1fr;
        row-gap: 14px;
    }
}


/* =========================================================
   34. AJUSTES DE MÓVIL

   Tres recortes para que la página no sea tan larga en el
   teléfono. Ninguno afecta al escritorio.
========================================================= */

/* El botón de "Leer más" solo existe en móvil */
.about-toggle {
    display: none;
    margin-top: 26px;
    padding: 13px 26px;
    border: 1.5px solid rgba(14, 123, 118, .35);
    border-radius: 100px;
    background: none;
    color: var(--teal);
    font-size: 14.5px;
    font-weight: 600;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}

.about-toggle:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}


@media (max-width: 700px) {

    /* 1. Las cinco tarjetas resumen sobran: los seis bloques de
       detalle que vienen debajo cuentan los mismos servicios. */
    .services-grid {
        display: none;
    }

    /* 2. El relato largo de Sobre mí, tras un "Leer más" */
    .about-toggle {
        display: inline-block;
    }

    .about-extra[hidden] {
        display: none;
    }

    /* 3. Menos aire entre secciones: 70px arriba y abajo por doce
       secciones son casi 1700px solo de margen. */
    .section {
        padding: 46px 0;
    }

    .cta {
        padding: 52px 0;
    }
}


/* =========================================================
   35. SUBMENÚ Y ENLACES LEGALES DEL PIE

   En el crema de la marca, no en gris: el gris apaga el pie y
   no pertenece a la paleta. Se distinguen del menú de arriba
   por el tamaño, no por el color.
========================================================= */

.footer-nav-wrap {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}

.footer-nav a,
.footer-legal-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
    transition: color .3s var(--ease);
}

.footer-nav a:hover,
.footer-legal-links a:hover {
    color: var(--gold);
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.footer-legal-links a[aria-current="page"] {
    color: var(--gold);
}

/* El pie de página pasa de una línea centrada a dos extremos */
.footer-bottom {
    justify-content: space-between;
    align-items: center;
    gap: 14px 30px;
    flex-wrap: wrap;
    text-align: left;
}


@media (max-width: 700px) {

    .footer-nav-wrap {
        margin-top: 32px;
        padding-top: 24px;
    }

    .footer-nav {
        gap: 10px 22px;
    }

    .footer-bottom {
        justify-content: flex-start;
    }
}


/* =========================================================
   36. PÁGINAS LEGALES
========================================================= */

.legal-page {
    background: var(--cream-light);
}

.legal {
    padding-top: 150px;
}

.legal-inner {
    max-width: 780px;
}

.legal h1 {
    margin-top: 6px;
    font-family: "Jost", sans-serif;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.legal-intro {
    margin-top: 22px;
    font-size: 17px;
    color: var(--muted);
    max-width: 62ch;
}

.legal h2 {
    margin-top: 52px;
    font-family: "Jost", sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--teal-deep);
}

.legal p {
    margin-top: 16px;
    color: var(--muted);
    max-width: 68ch;
    line-height: 1.7;
}

.legal p strong {
    color: var(--ink);
}

.legal a {
    color: var(--teal);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
}

.legal a:hover {
    color: var(--gold-dark);
}

/* Ficha de datos identificativos */
.legal-datos {
    display: grid;
    gap: 2px;
    margin-top: 22px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(14, 123, 118, .12);
}

.legal-datos li {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 16px 22px;
    background: var(--white);
}

.legal-datos span {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--teal);
    text-transform: uppercase;
}

.legal-datos strong {
    font-weight: 500;
    color: var(--ink);
}

/* Lo que falta por rellenar, imposible de pasar por alto */
.legal-falta,
.legal-falta-bloque {
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-style: normal;
    border-radius: 6px;
    padding: 2px 8px;
}

.legal-falta-bloque {
    display: block;
    padding: 18px 22px;
    border-left: 4px solid var(--gold);
    color: var(--gold-dark) !important;
}

.legal-aviso {
    margin-top: 34px;
    padding: 24px 26px;
    border-radius: var(--radius-md);
    background: var(--gold-soft);
    border-left: 4px solid var(--gold);
}

.legal-aviso strong {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--gold-dark);
}

.legal-aviso p {
    margin-top: 8px;
    color: var(--gold-dark);
    max-width: none;
}

.legal-fecha {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(14, 123, 118, .14);
    font-size: 14px;
}


@media (max-width: 700px) {

    .legal {
        padding-top: 120px;
    }

    .legal-datos li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* =========================================================
   37. LLAMAR Y WHATSAPP, SEPARADOS

   En el pie, el icono de WhatsApp acompañaba a un enlace
   tel:, así que prometía una cosa y hacía otra. Ahora son dos
   accesos distintos, cada uno con su icono. Y la barra ofrece
   las dos vías en vez de solo una.
========================================================= */

.nav-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.btn-llamar {
    gap: 8px;
    padding: 12px 20px;
    border: 1.5px solid rgba(14, 123, 118, .35);
    color: var(--teal);
}

.btn-llamar:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.btn-llamar svg,
.btn-nav svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.btn-nav {
    gap: 9px;
    margin-left: 0;
}


@media (max-width: 1100px) {

    .nav-acciones {
        gap: 8px;
    }

    /* En pantallas estrechas el botón de llamar se queda en icono */
    .btn-llamar span {
        display: none;
    }

    .btn-llamar {
        padding: 11px 13px;
    }
}


@media (max-width: 380px) {

    .btn-nav span {
        font-size: 12.5px;
    }
}

/* =========================================================
   38. AJUSTES DEL PIE

   El submenu sube por encima de la firma de Zalezigo, y el
   enlace legal pasa al lado izquierdo junto al copyright: el
   boton flotante de WhatsApp esta fijo a la ventana y tapaba
   la esquina inferior derecha en pantallas de menos de unos
   1400px, que es donde el contenedor llega mas a la derecha
   que el propio boton.
========================================================= */

.footer-nav-wrap {
    margin-top: 40px;
    padding-top: 30px;
    padding-bottom: 6px;
}

.footer-credit {
    margin-top: 34px;
}

.footer-bottom {
    justify-content: flex-start;
    gap: 10px 26px;
}

.footer-bottom .footer-legal-links {
    position: relative;
    padding-left: 26px;
}

/* Separador entre el copyright y los enlaces legales */
.footer-bottom .footer-legal-links::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .22);
}

@media (max-width: 700px) {

    .footer-bottom .footer-legal-links {
        padding-left: 0;
    }

    .footer-bottom .footer-legal-links::before {
        display: none;
    }
}


/* =========================================================
   39. AVISO DE COOKIES

   Aceptar y rechazar tienen el mismo peso visual, como exige
   la guía de la AEPD: no vale esconder el rechazo.
========================================================= */

/* El aviso se oculta y se muestra con el atributo [hidden] desde el JS.
   Hace falta esta regla porque el `display: flex` de abajo es más
   específico que el `display: none` que el navegador aplica por defecto
   a [hidden]: sin ella, el aviso se queda en pantalla para siempre
   aunque el JS lo dé por cerrado. */
.cookies[hidden] {
    display: none;
}

.cookies {
    position: fixed;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 26px 34px;
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 28px;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid rgba(14, 123, 118, .16);
    box-shadow: 0 20px 60px rgba(6, 60, 58, .22);
}

.cookies-texto strong {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--teal-deep);
}

.cookies-texto p {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

.cookies-texto a {
    color: var(--teal);
    font-weight: 600;
    border-bottom: 1px solid var(--gold);
}

.cookies-texto a:hover {
    color: var(--gold-dark);
}

.cookies-botones {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookies-botones .btn {
    padding: 12px 24px;
    font-size: 14px;
}


@media (max-width: 700px) {

    .cookies {
        left: 14px;
        right: 14px;
        bottom: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 20px 22px;
    }

    .cookies-botones .btn {
        flex: 1;
    }

    /* El botón flotante de WhatsApp se aparta mientras el aviso está
       en pantalla, para no pisarse con él */
    .cookies:not([hidden]) ~ .whatsapp {
        bottom: 210px;
    }
}

/* =========================================================
   40. TABLAS Y LISTAS DE LAS PAGINAS LEGALES
========================================================= */

.tabla-cookies {
    margin-top: 24px;
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(14, 123, 118, .16);
}

.tabla-cookies table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--white);
}

.tabla-cookies th,
.tabla-cookies td {
    padding: 14px 18px;
    text-align: left;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(14, 123, 118, .12);
    vertical-align: top;
}

.tabla-cookies th {
    background: var(--teal-mist);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--teal);
}

.tabla-cookies td {
    color: var(--muted);
}

.tabla-cookies tr:last-child td {
    border-bottom: 0;
}

.tabla-cookies code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--teal-deep);
    background: var(--teal-mist);
    padding: 2px 7px;
    border-radius: 5px;
}

.legal-lista {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.legal-lista li {
    position: relative;
    padding-left: 26px;
    color: var(--muted);
}

.legal-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

.legal h3 {
    margin-top: 34px;
    font-family: "Jost", sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
}

.legal .btn {
    margin-top: 6px;
}


/* =========================================================
   41. ACOMPAÑAMIENTO FINAL

   Tono deliberadamente sobrio: sin foto, sin dorados y sin
   llamadas a la acción llamativas. Es el asunto más delicado
   de la web y no debe competir con el resto.
========================================================= */

.despedida {
    background: var(--cream-light);
}

.despedida-caja {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 52px;
    border-radius: var(--radius-md);
    background: var(--teal-mist);
    border: 1px solid rgba(14, 123, 118, .14);
}

.despedida-cabecera {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 26px;
    align-items: center;
}

.despedida-icono {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal);
}

.despedida-icono svg {
    width: 38px;
    height: 38px;
}

.despedida-cabecera h2 {
    font-family: "Jost", sans-serif;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.8px;
    color: var(--teal-deep);
}

.despedida-lema {
    margin-top: 8px;
    font-family: "Jost", sans-serif;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 400;
    color: var(--teal);
}

.despedida-texto {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid rgba(14, 123, 118, .16);
}

.despedida-texto p {
    max-width: 64ch;
    color: var(--muted);
    line-height: 1.75;
}

.despedida-texto p + p {
    margin-top: 16px;
}

.despedida-texto strong {
    color: var(--ink);
    font-weight: 600;
}

.despedida-nota {
    margin-top: 24px !important;
    padding-left: 18px;
    border-left: 3px solid var(--teal);
    font-style: italic;
}


@media (max-width: 700px) {

    .despedida-caja {
        padding: 30px 24px;
    }

    .despedida-cabecera {
        grid-template-columns: 56px 1fr;
        gap: 18px;
    }

    .despedida-icono {
        width: 56px;
        height: 56px;
    }

    .despedida-icono svg {
        width: 30px;
        height: 30px;
    }

    .despedida-texto {
        margin-top: 24px;
        padding-top: 22px;
    }
}


/* =========================================================
   42. FOTOS MÁS PEQUEÑAS EN MÓVIL

   Las verticales llegaban a 527px de alto sobre una pantalla
   de 844: media pantalla para una sola foto. Se acotan y se
   centran.
========================================================= */

@media (max-width: 700px) {

    .section-photo,
    .home-care-image,
    .about-image {
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-photo {
        max-width: 240px;
    }

    .cta-photo {
        max-width: 260px;
    }

    /* La portada es a sangre: se recorta en alto, no en ancho */
    .hero-figure {
        aspect-ratio: 3 / 2;
        max-width: none;
    }
}


/* =========================================================
   43. EL NÚMERO DE TELÉFONO NO SE PARTE

   En tabletas el botón rompía "+34 620 739 / 734" en dos
   líneas.
========================================================= */

.btn-llamar,
.btn-nav {
    white-space: nowrap;
}


/* =========================================================
   44. EUTANASIA: EL CORAZÓN DEL DISEÑO

   El diseño llevaba un corazón dibujado al fondo. Va en el
   verde suave de la marca, no en el del boceto, y muy tenue:
   es un guiño, no un adorno que reclame atención.
========================================================= */

.despedida-caja {
    position: relative;
    overflow: hidden;
}


/* El texto no pasa por debajo del corazón */
.despedida-texto p {
    position: relative;
    z-index: 1;
    max-width: 58ch;
}


/* En tabletas y moviles el corazon pisaba el texto, porque la caja
   es mas estrecha. Ahi sale del rincon y pasa a cerrar la seccion,
   centrado debajo del texto. */