/* Variables: cambia estos valores para personalizar toda la paleta. */
:root{--teal:#087e8b;--ink:#173d3f;--lime:#c2d63d;--cream:#f8f9f3;--muted:#4e6563;--line:#dce4de;--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:6px}
p{line-height:1.75}
h1,h2,h3,p{margin-top:0}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1.08}
h1{font-size:clamp(2.5rem,1.1rem + 4.2vw,5.125rem);margin-bottom:26px}
h2{font-size:clamp(2rem,1.2rem + 2.8vw,3.4375rem);margin-bottom:24px}
em{font-family:Georgia,serif;font-weight:400;color:var(--teal)}
.section{max-width:1280px;margin:auto;padding:96px 48px}
.eyebrow{font-size:.75rem;letter-spacing:1px;font-weight:700;margin-bottom:25px}
.demo-bar{background:var(--ink);color:#edf3e5;text-align:center;font-size:.75rem;letter-spacing:.8px;padding:10px 16px}
.demo-bar span{color:#d5e2db;letter-spacing:.5px}
.header{max-width:1440px;margin:auto;padding:26px 6%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:31px;letter-spacing:-1.5px;font-weight:750;position:relative;padding-left:45px;line-height:1;display:inline-block}
.brand>span:not(.brand-icon){font-weight:350}
.brand-icon{position:absolute;left:0;top:1px;background:var(--teal);color:var(--lime);width:35px;height:35px;display:grid;place-items:center;border-radius:50%;font-size:24px}
.brand small{display:block;letter-spacing:1px;font-size:.75rem;font-weight:600;margin-top:9px}
.header nav{display:flex;gap:24px;align-items:center;font-size:.9375rem;font-weight:600}
.header nav>a:not(.button):hover,.text-link:hover{color:var(--teal);text-decoration:underline;text-underline-offset:6px}
.button{background:var(--teal);color:white;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:18px 24px;border-radius:7px;font-size:.9375rem;font-weight:600;line-height:1.4;min-height:48px;max-width:100%;text-align:center;transition:background .2s,transform .2s}
.button:hover{background:#086773;transform:translateY(-2px)}
.button span{font-size:20px}
.button.small{padding:11px 18px;gap:26px}
.menu-toggle{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:48px;padding-bottom:66px}
.hero .eyebrow{font-size:.75rem;letter-spacing:1px}
.dot{display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:50%;margin-right:7px}
.lead{color:var(--muted);max-width:430px;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:32px}
.text-link{font-size:13px;font-weight:600}
.hero-note{display:flex;gap:14px;align-items:center;margin-top:42px}
.hero-note>span{font-size:30px;color:var(--teal)}
.hero-note p{font-size:.8125rem;color:var(--muted);margin:0}
.hero-note strong{font-weight:500;color:var(--ink)}
.hero-art{position:relative;padding-bottom:25px}
.pet-art{display:block;width:100%;border-radius:44% 44% 22px 22px}
.art-label{position:absolute;top:30px;left:0;width:100%;text-align:center;font-size:.75rem;letter-spacing:.5px;color:var(--ink);padding:0 24px;z-index:1}
.floating-note{position:absolute;bottom:57px;left:-28px;display:flex;align-items:center;gap:14px;padding:18px 23px;background:#fffdf5;border:1px solid #e0e4d8;box-shadow:0 12px 35px #244d3b12;border-radius:12px;transform:rotate(-4deg);font-size:.8125rem;max-width:calc(100% - 12px)}
.floating-note>span{background:var(--lime);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:20px}
.floating-note strong{display:block;margin-top:5px;font-size:.9375rem}
.art-caption{display:block;text-align:right;margin-top:12px;font-size:.75rem;letter-spacing:.5px;color:var(--muted)}
.values-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 6%;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:.9375rem}
.values-strip i{font-size:25px;color:var(--teal);font-style:normal}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:24px}
.section-heading>p{font-size:1rem;color:var(--muted);margin-bottom:26px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fffefa;position:relative;transition:transform .25s,border-color .25s}
.service-card:hover{transform:translateY(-5px);border-color:var(--teal)}
.service-icon{width:49px;height:49px;display:grid;place-items:center;border-radius:14px;background:#eaf0df;color:var(--teal);font-size:30px;margin-bottom:36px}
.card-number{position:absolute;right:28px;top:39px;font-size:.8125rem;color:var(--muted)}
h3{font-size:21px;letter-spacing:-.5px;margin-bottom:15px;font-weight:600}
.service-card p{font-size:1rem;color:var(--muted);margin-bottom:30px}
.card-tag{font-size:.75rem;letter-spacing:.7px;font-weight:600}
.section-disclaimer{font-size:.8125rem;color:var(--muted);margin:20px 0 0}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;padding-top:25px;align-items:center}
.about-visual{background:#e7ecd9;border-radius:var(--radius);padding:38px;position:relative;overflow:hidden}
.about-visual .eyebrow{font-size:.75rem}
.large-heart{font-size:150px;color:var(--teal);line-height:1.2;transform:rotate(-12deg);margin:16px 0 22px 35px}
.about-visual>p:not(.eyebrow){font-size:28px;line-height:1.3;letter-spacing:-1px}
.about-visual em{font-size:29px}
.visual-foot{font-size:.75rem;letter-spacing:.5px}
.about-copy>p:not(.eyebrow){font-size:1rem;color:var(--muted)}
.principles{list-style:none;padding:0;margin:26px 0 0}
.principles li{font-size:.9375rem;padding:13px 0;border-bottom:1px solid var(--line)}
.principles li:before{content:'↗';margin-right:16px;color:var(--teal)}
.spotlight{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center;padding:85px 24px}
.spotlight h2{font-size:clamp(2rem,1.2rem + 3.3vw,4rem)}
.spotlight em{color:var(--lime)}
.spotlight .eyebrow{color:#c4d4c9;font-size:.75rem}
.button.light{background:var(--lime);color:var(--ink);margin-top:15px}
.button.light:hover{background:#d4e45e}
.deco-paw{position:absolute;left:4%;top:50px;font-size:250px;color:#2a5050;transform:rotate(20deg);line-height:1;pointer-events:none}
.spotlight>p,.spotlight h2,.spotlight a{position:relative}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px}
.faq>div>p:not(.eyebrow){color:var(--muted);font-size:1rem;max-width:34ch}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 30px 24px 0;font-size:1rem;font-weight:600;position:relative;line-height:1.6}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:0;font-size:22px;top:18px;color:var(--teal)}
details[open] summary:after{content:'−'}
details p{font-size:1rem;color:var(--muted);margin:0 25px 24px 0}
.contact{background:#eaf0e0;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:40px;padding:55px 48px;margin-bottom:80px;max-width:1184px}
.contact h2{font-size:clamp(2rem,1.2rem + 2.8vw,2.75rem)}
.contact p:not(.eyebrow){font-size:1rem;color:var(--muted);margin-bottom:0}
.contact-action{max-width:300px;flex-shrink:0}
.contact .contact-action p{font-size:.875rem;margin-top:14px}
footer{max-width:1280px;margin:auto;padding:0 48px 28px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:40px}
.footer-top p{font-size:.9375rem;color:var(--muted);margin:0}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:25px;font-size:.8125rem;color:var(--muted)}
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:var(--ink);color:white;padding:14px}
.skip-link:focus{top:12px}
dialog{border:1px solid var(--line);border-radius:24px;padding:42px;max-width:520px;width:calc(100% - 32px);color:var(--ink);background:var(--cream)}
dialog::backdrop{background:#133e3dcc;backdrop-filter:blur(5px)}
dialog h2{font-size:clamp(1.75rem,1.2rem + 2.5vw,2.375rem)}
dialog p:not(.eyebrow){font-size:1rem;color:var(--muted)}
.close-dialog{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:30px;color:var(--ink);padding:4px 10px}
.dialog-icon{font-size:50px;color:var(--teal);display:block;margin-bottom:20px}
dialog .eyebrow{font-size:.75rem}

/* Microinteracciones de contacto: solo escala y opacidad, sin mover el diseño. */
#whatsapp-demo {
  transition: background .2s, transform .2s,
    scale 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
#whatsapp-demo.is-pointer-pressed { scale: .98; }
#demo-dialog { transform-origin: center; }
#demo-dialog.is-entering {
  animation: contact-dialog-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
#demo-dialog.is-leaving {
  animation: contact-dialog-out 160ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes contact-dialog-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes contact-dialog-out {
  from {
    opacity: var(--contact-exit-opacity, 1);
    transform: var(--contact-exit-transform, scale(1));
  }
  to { opacity: 0; transform: scale(.98); }
}

.hero-copy{animation:arrive .7s ease-out}
.hero-art{animation:arrive .9s ease-out}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:translateY(0)}
}

/* Foco visible sobre superficies claras y oscuras. */
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
  box-shadow: 0 0 0 3px var(--cream);
}
.spotlight a:focus-visible, .skip-link:focus-visible {
  outline-color: var(--lime);
  box-shadow: none;
}
::selection { background: var(--lime); color: var(--ink); }
.hero > *, .section-heading > *, .about > *, .faq > *, .contact > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
.button span, .floating-note > span { flex-shrink: 0; }
.service-card p, .about-copy p { max-width: 65ch; }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.close-dialog-action { width: 100%; gap: 12px; }

/* Tabletas: menú compacto y tarjetas con más espacio de lectura. */
@media (max-width: 1000px) {
  .header { padding: 24px 32px; flex-wrap: wrap; position: relative; z-index: 10; }
  .menu-toggle {
    display: block; min-width: 48px; min-height: 48px;
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 12px; font-size: 23px; background: transparent; color: var(--ink);
  }
  /* Panel fuera del flujo: abrirlo no cambia la altura del encabezado. */
  .header nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 32px; right: 32px; width: auto;
    padding: 12px; background: var(--cream); border: 1px solid var(--line);
    border-radius: 12px;
  }
  .header nav.is-open, .header nav.is-closing { display: flex; }
  .header nav.is-closing { pointer-events: none; }
  .header nav > a { padding: 16px 12px; }
  .header nav > .button { margin-top: 8px; }
  .section { padding: 72px 32px; }
  .hero { gap: 32px; padding-top: 36px; }
  .actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { padding: 28px; }
  .service-card:last-child { grid-column: 1 / -1; }
  .about, .faq { gap: 40px; }
  .contact { margin: 0 32px 64px; padding: 40px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .contact-action { max-width: 36ch; }
  .values-strip { display: grid; grid-template-columns: 1fr 1fr; text-align: center; padding: 24px 32px; gap: 20px; }
  .values-strip i { display: none; }
  .section-heading { display: block; }
  .section-heading > p { margin-bottom: 0; }
}

/* Entre 700 y 820 px, priorizamos columnas amplias y una ilustración contenida. */
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-copy { max-width: 42rem; }
  .hero h1 { font-size: clamp(2.5rem,1.25rem + 6vw,4rem); }
  .lead { max-width: 52ch; }
  .actions { flex-direction: row; align-items: center; }
  .hero-art { width: 100%; max-width: 470px; margin: auto; padding-left: 10px; }
  .floating-note { left: 0; bottom: 60px; padding: 14px 18px; }
  .about, .faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about { padding-top: 24px; }
  .about-visual { padding: 32px; }
  .about-copy { padding-top: 8px; }
  .large-heart { font-size: 115px; margin: 10px 0 20px 25px; }
  .faq > div > p:not(.eyebrow) { max-width: 52ch; }
  .footer-top { flex-wrap: wrap; gap: 28px; }
  .footer-bottom { flex-wrap: wrap; }
}

/* Teléfonos: no reducimos el tamaño de lectura para hacer caber el contenido. */
@media (max-width: 640px) {
  .demo-bar { font-size: .75rem; }
  .demo-bar span { display: none; }
  .header { padding: 22px 24px; }
  .header nav { left: 24px; right: 24px; }
  .brand { font-size: 28px; }
  .section { padding: 56px 24px; }
  .hero { padding-top: 28px; }
  .hero-note { margin-top: 28px; }
  .hero h1 { font-size: clamp(2.5rem,1.25rem + 6vw,3.5rem); }
  .hero .eyebrow { line-height: 1.6; }
  .art-label { top: 24px; }
  .art-caption { text-align: center; }
  .floating-note { transform: rotate(-2deg); }
  .values-strip { padding: 24px; gap: 16px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card:last-child { grid-column: auto; }
  .service-icon { margin-bottom: 24px; }
  .about { padding-top: 16px; }
  .about-visual { padding: 28px; }
  .spotlight { padding: 64px 24px; }
  .deco-paw { font-size: 180px; left: -70px; }
  .contact { margin: 0 20px 56px; padding: 32px 24px; }
  .contact-action { max-width: 100%; }
  footer { padding: 0 24px 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  dialog { padding: 52px 24px 28px; }
  .close-dialog-action { padding: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #whatsapp-demo { scale: 1 !important; }
}