/* ========================================================= Centro Veterinario Torrejón — Propuesta de rediseño Estética de clínica veterinaria consolidada: azul-verde salud (petróleo/teal) + acento cálido ámbar. Confianza profesional, 24 años de trayectoria — sobrio y cercano, sin infantilismo. ========================================================= */ :root { /* Marca */ --teal-900: #0a3733; --teal-700: #106b60; --teal-500: #17977f; --teal-300: #8fcabe; --teal-050: #e9f5f2; --amber: #de8438; --amber-dark: #b8621f; --amber-light: #f0ab6c; /* Neutros — clínicos pero cálidos, no blanco frío de "app" */ --ink: #17231f; --ink-soft: #526059; --line: #dde7e2; --bg: #fbfdfc; --bg-soft: #f0f6f4; --bg-dark: #0d2b27; --white: #ffffff; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 4px 16px rgba(10, 55, 51, .07); --shadow: 0 16px 38px rgba(10, 55, 51, .13); --shadow-lg: 0 28px 64px rgba(10, 55, 51, .22); --maxw: 1180px; --ease: cubic-bezier(.22, .61, .36, 1); --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Outfit', 'Manrope', system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x va en , no en : en iOS Safari, un overflow en body rompe los elementos position:fixed (como el header) durante el scroll. */ html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.14; font-weight: 700; letter-spacing: -.01em; } .wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); background: var(--teal-050); padding: 7px 16px; border-radius: var(--radius-pill); } .section { padding: clamp(60px, 8vw, 112px) 0; } .section-head { max-width: 660px; margin-bottom: 50px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 16px 0 14px; } .section-head p { color: var(--ink-soft); font-size: 1.05rem; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; padding: 14px 26px; border-radius: var(--radius); cursor: pointer; border: 1.5px solid transparent; transition: transform .3s var(--ease), background .25s var(--ease), color .25s, border-color .25s, box-shadow .25s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--teal-700); color: #fff; box-shadow: 0 10px 22px rgba(16, 107, 96, .32); } .btn-primary:hover { background: var(--teal-900); box-shadow: 0 14px 30px rgba(16, 107, 96, .4); } .btn-wa { background: transparent; color: var(--ink); border-color: var(--line); } .btn-wa:hover { border-color: #25D366; color: #1a8f47; } .btn-ghost { background: #fff; color: var(--teal-900); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--teal-300); } .btn svg { width: 19px; height: 19px; } /* ---------- Header ---------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 18px 0; transition: padding .35s var(--ease), background .35s, box-shadow .35s; } .header.scrolled { background: rgba(251,253,252,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 22px rgba(10,55,51,.08); padding: 11px 0; } /* Header sobre el hero (fondo oscuro propio, sin foto): texto claro fijo hasta hacer scroll, momento en el que pasa a la versión clara sobre fondo blanco. */ .header--hero:not(.scrolled) .brand, .header--hero:not(.scrolled) .nav-links > a, .header--hero:not(.scrolled) .burger { color: #fff; } .header--hero:not(.scrolled) .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32); box-shadow: none; } .header--hero:not(.scrolled) .btn-ghost:hover { background: rgba(255,255,255,.24); } /* La barra de marca + hamburguesa debe quedar SIEMPRE por encima del panel desplegable (aunque esté abierto), si no el botón para cerrarlo queda tapado. */ .header .nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--teal-900); } .brand img { width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); } .brand span b { color: var(--amber); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-weight: 600; font-size: .94rem; color: var(--ink); position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--amber); border-radius: 2px; transition: width .3s var(--ease); } .nav-links a:hover::after { width: 100%; } .header--hero:not(.scrolled) .nav-links a::after { background: var(--amber-light); } .nav-cta { display: flex; align-items: center; gap: 12px; } .burger { display: none; position: relative; background: none; border: 0; width: 28px; height: 28px; cursor: pointer; color: var(--teal-900); } .burger svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; transition: opacity .2s; } .burger .icon-close { opacity: 0; } .header.menu-open .burger .icon-menu { opacity: 0; } .header.menu-open .burger .icon-close { opacity: 1; } .header.menu-open .brand, .header.menu-open .burger { color: var(--teal-900); } /* El panel exterior es el que anima max-height: sin padding propio, porque el padding no se comprime por debajo de max-height y dejaría una barra visible tapando la cabecera incluso "cerrado". El padding real vive en .mobile-menu-inner. z-index por debajo de .header .nav (5) para que la marca y la hamburguesa (que también cierra el menú) queden siempre visibles y pulsables encima. */ .mobile-menu { display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 2; background: #fff; box-shadow: var(--shadow-lg); max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .mobile-menu.open { max-height: 100vh; overflow-y: auto; } .mobile-menu-inner { display: flex; flex-direction: column; gap: 2px; padding: 88px 24px 26px; } .mm-link { padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 1rem; color: var(--ink); } .mobile-menu-inner > .mm-link:last-of-type { border-bottom: 0; } .mm-cta { justify-content: center; margin-top: 16px; } @media (max-width: 900px) { .nav-links { display: none; } .nav-cta .btn-ghost { display: none; } .burger { display: block; } .mobile-menu { display: flex; } } /* ---------- Hero (sin foto grande: colección de fotos reales de pacientes) ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 128px 0 70px; background: linear-gradient(155deg, var(--teal-900) 0%, var(--teal-700) 62%, #0e544c 100%); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: radial-gradient(circle at 15% 20%, #fff 0, transparent 40%), radial-gradient(circle at 85% 80%, #fff 0, transparent 45%); } .hero .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; } .hero-inner { color: #fff; } .hero .eyebrow { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.26); } .hero-inner h1 { color: #fff; font-size: clamp(2.3rem, 4.8vw, 3.6rem); margin: 20px 0 18px; } .hero-inner h1 em { font-style: normal; color: var(--amber-light); } .hero-inner p.lead { font-size: 1.12rem; color: rgba(255,255,255,.86); max-width: 46ch; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero .btn-wa { color: #fff; border-color: rgba(255,255,255,.35); } .hero .btn-wa:hover { border-color: #25D366; color: #4ee08a; } .hero-since { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.68); font-size: .9rem; flex-wrap: wrap; } .hero-since b { color: var(--amber-light); font-family: var(--font-display); font-size: 1.14rem; } .hero-since .div { width: 1px; height: 20px; background: rgba(255,255,255,.28); } /* Mosaico de fotos reales de pacientes: varias fotos pequeñas en vez de forzar una sola imagen grande — las fotos originales del negocio son de baja resolución (fotos de un constructor web muy básico), así que un collage de varias en formato cuadrado disimula mejor esa limitación que una foto heroica a pantalla completa, que pixelaría. */ .hero-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .hero-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1/1; border: 3px solid rgba(255,255,255,.18); transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease); } .hero-photo:hover { transform: rotate(0deg) scale(1.03); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; } .hero-photo:nth-child(1) { --r: -2.5deg; margin-top: 26px; } .hero-photo:nth-child(2) { --r: 2deg; } .hero-photo:nth-child(3) { --r: 1.5deg; } .hero-photo:nth-child(4) { --r: -1.5deg; margin-top: -26px; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-photos { max-width: 380px; margin: 0 auto; } } @media (max-width: 620px) { .hero { min-height: auto; padding-top: 118px; padding-bottom: 50px; } .hero-photo:nth-child(1), .hero-photo:nth-child(4) { margin-top: 0; } } /* ---------- Stats ---------- */ .stats-strip { background: var(--bg-dark); padding: 30px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .stat { border-right: 1px solid rgba(255,255,255,.12); } .stat:last-child { border-right: 0; } .stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--amber-light); line-height: 1; } .stat .lbl { margin-top: 8px; font-size: .84rem; color: rgba(255,255,255,.68); } @media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } .stat { border-right: 0; } .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); } } /* ---------- El centro (texto + fotos reales del interior) ---------- */ .about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; } .about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .about-photos figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3/4; } .about-photos figure:first-child { margin-top: 34px; } .about-photos img { width: 100%; height: 100%; object-fit: cover; } .about-text .section-head { margin-bottom: 26px; } .about-text > p { color: var(--ink-soft); margin-bottom: 26px; font-size: 1.02rem; } .trait-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); } .trait { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); } .trait .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--teal-050); color: var(--teal-700); display: grid; place-items: center; flex-shrink: 0; } .trait .ico svg { width: 20px; height: 20px; } .trait h4 { font-size: 1.01rem; margin-bottom: 4px; } .trait p { color: var(--ink-soft); font-size: .92rem; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 34px; } .about-photos { max-width: 420px; } } .zones { background: var(--bg-soft); } /* ---------- Servicios ---------- */ .serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .serv { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .serv:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--teal-300); } .serv .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-050); color: var(--teal-700); display: grid; place-items: center; margin-bottom: 16px; } .serv .ico svg { width: 24px; height: 24px; } .serv h3 { font-size: 1.08rem; margin-bottom: 8px; } .serv p { color: var(--ink-soft); font-size: .92rem; } .serv.highlight { background: linear-gradient(165deg, var(--teal-700), var(--teal-900)); border-color: transparent; color: #fff; } .serv.highlight .ico { background: rgba(255,255,255,.16); color: var(--amber-light); } .serv.highlight h3 { color: #fff; } .serv.highlight p { color: rgba(255,255,255,.82); } /* ---------- Equipo ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; } .team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; } .team-avatar { width: 62px; height: 62px; border-radius: 50%; background: var(--teal-050); color: var(--teal-700); display: grid; place-items: center; margin: 0 auto 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; } .team-card h4 { font-size: 1rem; margin-bottom: 4px; } .team-card .role { color: var(--amber-dark); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Galería de pacientes ---------- */ .gallery-teaser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .gallery-teaser figure, .gallery figure { border-radius: var(--radius); overflow: hidden; cursor: pointer; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); } .gallery-teaser img, .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .gallery-teaser figure:hover img, .gallery figure:hover img { transform: scale(1.08); } @media (max-width: 720px) { .gallery-teaser { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 460px) { .gallery-teaser { grid-template-columns: repeat(2, 1fr); } } /* ---------- Info práctica (horarios) ---------- */ .info-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } .hours-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-sm); } .hours-card h3 { font-size: 1.15rem; margin-bottom: 18px; } .hours-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: .96rem; } .hours-row:last-child { border-bottom: 0; } .hours-row span:first-child { color: var(--ink-soft); } .hours-row b { font-family: var(--font-display); color: var(--teal-900); } .hours-note { margin-top: 16px; background: var(--teal-050); border-radius: var(--radius); padding: 14px 16px; font-size: .88rem; color: var(--teal-900); } .emergency-card { background: linear-gradient(165deg, var(--teal-700), var(--teal-900)); color: #fff; border-radius: var(--radius-lg); padding: 28px 30px; } .emergency-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .emergency-card h3 svg { width: 22px; height: 22px; color: var(--amber-light); } .emergency-card p { color: rgba(255,255,255,.85); font-size: .92rem; margin-bottom: 16px; } .emergency-list { list-style: none; display: grid; gap: 10px; margin-bottom: 18px; } .emergency-list li { font-size: .88rem; color: rgba(255,255,255,.9); padding-left: 18px; position: relative; } .emergency-list li::before { content: '—'; position: absolute; left: 0; color: var(--amber-light); } @media (max-width: 880px) { .info-grid { grid-template-columns: 1fr; } } /* ---------- Contacto ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; } .contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-sm); } .contact-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 8px; } .contact-card > p { color: var(--ink-soft); margin-bottom: 24px; } .contact-line { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); } .contact-line:first-of-type { border-top: 0; } .contact-line .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--teal-050); color: var(--teal-700); display: grid; place-items: center; flex: 0 0 auto; } .contact-line .ico svg { width: 21px; height: 21px; } .contact-line small { display: block; color: var(--ink-soft); font-size: .82rem; } .contact-line b { font-family: var(--font-display); font-size: 1.02rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 400px; } .map-card iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } /* ---------- CTA final ---------- */ .cta-final { background: var(--bg-dark); } .cta-box { text-align: center; color: #fff; } .cta-box h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin-bottom: 14px; } .cta-box p { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 auto 28px; font-size: 1.05rem; } .cta-box .btn-ghost { background: #fff; color: var(--teal-900); } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 54px 0 26px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; margin-bottom: 40px; } .footer .brand { color: #fff; margin-bottom: 14px; } .footer .brand span b { color: var(--amber-light); } .footer p { font-size: .92rem; opacity: .78; max-width: 36ch; } .footer h5 { color: #fff; font-family: var(--font-display); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 15px; font-weight: 600; } .footer ul { list-style: none; display: grid; gap: 9px; } .footer ul a { font-size: .92rem; opacity: .82; transition: opacity .2s, color .2s; } .footer ul a:hover { opacity: 1; color: var(--amber-light); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; opacity: .68; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Llamar flotante ---------- */ /* Botón de llamada directa, no WhatsApp: el negocio no tiene WhatsApp Business publicado (ver config.js), así que en móvil el CTA persistente debe ser "llamar" (tel:), que sí funciona siempre con un toque. */ .call-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--amber); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(222,132,56,.45); border: 1.5px solid rgba(255,255,255,.3); transition: transform .3s var(--ease); animation: pulse 2.8s infinite; } .call-float:hover { transform: scale(1.08); background: var(--amber-dark); } .call-float svg { width: 27px; height: 27px; } @keyframes pulse { 0% { box-shadow: 0 12px 28px rgba(222,132,56,.45), 0 0 0 0 rgba(222,132,56,.4); } 70% { box-shadow: 0 12px 28px rgba(222,132,56,.45), 0 0 0 16px rgba(222,132,56,0); } 100% { box-shadow: 0 12px 28px rgba(222,132,56,.45), 0 0 0 0 rgba(222,132,56,0); } } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,43,39,.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox img { max-width: min(92vw, 900px); max-height: 86vh; border-radius: 10px; } .lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; } .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); } .lb-close { top: 22px; right: 22px; } .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); } .lb-next { right: 22px; top: 50%; transform: translateY(-50%); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }