/* ===== Traumatología Veterinaria — style.css ===== */
:root{
  --rose-900:#5c0a2e;
  --rose-800:#7a0f3c;
  --rose-700:#93124a;
  --rose-600:#b3175a;
  --rose-500:#d1206b;
  --rose-400:#e05b90;
  --rose-300:#ee94b7;
  --rose-200:#f6c2d6;
  --rose-100:#fbe1eb;
  --rose-50:#fdf2f7;
  --bg:#ffffff;
  --bg-alt:#fff5f9;
  --text:#33131f;
  --text-muted:#7a5566;
  --border:#f0d3e0;
  --shadow-color:rgba(147,18,74,0.16);
  --focus:#0b6cff;
  --radius:18px;
  --font-main:'Dosis', system-ui, -apple-system, sans-serif;
}
[data-theme="dark"]{
  --bg:#210812;
  --bg-alt:#2c0b19;
  --text:#fbe6ee;
  --text-muted:#d3a4b8;
  --border:#4a1226;
  --rose-100:#4a1226;
  --rose-50:#33101d;
  --shadow-color:rgba(0,0,0,0.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#210812;
    --bg-alt:#2c0b19;
    --text:#fbe6ee;
    --text-muted:#d3a4b8;
    --border:#4a1226;
    --rose-100:#4a1226;
    --rose-50:#33101d;
    --shadow-color:rgba(0,0,0,0.5);
  }
}
*{box-sizing:border-box;}
html{font-size:107%; scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-main);
  background:var(--bg);
  color:var(--text);
  font-weight:500;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-main); font-weight:700; line-height:1.2; color:var(--text); margin:0 0 14px;}
h1{font-size:clamp(2rem,4.5vw,3rem);}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.25rem;}
p{margin:0 0 14px;}
.lead{font-size:1.14rem; color:var(--text-muted);}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--rose-700); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 0; z-index:10000; font-weight:700;
}
.skip-link:focus{left:0; top:0;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; text-decoration:none; color:var(--rose-700);}
[data-theme="dark"] .brand{color:var(--rose-300);}
.brand-mark{width:38px; height:38px; border-radius:50%;}
.main-nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap;}
.main-nav a{text-decoration:none; font-weight:600; color:var(--text-muted); transition:color 0.2s ease, border-color 0.2s ease; padding-bottom:3px; border-bottom:2px solid transparent;}
.main-nav a:hover, .main-nav a.active{color:var(--rose-700); border-color:var(--rose-500);}
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a.active{color:var(--rose-300); border-color:var(--rose-300);}
.header-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle, .nav-toggle{
  background:var(--rose-50); border:1px solid var(--border); border-radius:12px;
  width:40px; height:40px; font-size:1.1rem; cursor:pointer; color:var(--text);
}
.nav-toggle{display:none;}
@media (max-width:900px){
  .main-nav{position:fixed; top:70px; left:0; right:0; background:var(--bg); flex-direction:column; padding:18px 24px; border-bottom:1px solid var(--border); display:none;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:block;}
  .header-actions .btn-primary{display:none;}
}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;}
.btn-primary{background:linear-gradient(135deg, var(--rose-600), var(--rose-800)); color:#fff; box-shadow:0 10px 24px var(--shadow-color);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px var(--shadow-color);}
.btn-outline{background:transparent; border-color:var(--rose-600); color:var(--rose-700);}
[data-theme="dark"] .btn-outline{color:var(--rose-200); border-color:var(--rose-300);}
.btn-outline:hover{background:var(--rose-50);}
.btn-whatsapp{background:#25D366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,0.35);}
.btn-whatsapp:hover{transform:translateY(-2px);}

/* ===== Hero ===== */
@keyframes fade-up{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.hero{padding:64px 0 40px; background:linear-gradient(180deg, var(--bg-alt), var(--bg));}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(120deg, var(--rose-200), var(--rose-100)); color:var(--rose-800); font-weight:700; padding:7px 16px; border-radius:999px; font-size:0.9rem; margin-bottom:16px; animation:fade-up 0.6s ease both;}
[data-theme="dark"] .eyebrow{background:linear-gradient(120deg, rgba(238,148,183,0.25), rgba(238,148,183,0.1)); color:var(--rose-200);}
.hero h1{animation:fade-up 0.7s ease both;}
.hero .lead{animation:fade-up 0.7s ease 0.08s both;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; animation:fade-up 0.7s ease 0.16s both;}
.gradient-text{background:linear-gradient(120deg, var(--rose-600), var(--rose-400)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-media{animation:fade-up 0.8s ease 0.1s both;}
.hero-media img{border-radius:26px; box-shadow:0 24px 50px var(--shadow-color);}
.wave-divider{line-height:0;}
.wave-divider svg{width:100%; height:44px; display:block;}

/* ===== Sections ===== */
section{padding:56px 0;}
.section-alt{background:var(--bg-alt);}
.section-head{max-width:680px; margin:0 auto 36px; text-align:center;}
.section-head h2{position:relative; display:inline-block; margin-bottom:14px;}
.section-head h2::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px; width:56px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--rose-600), var(--rose-400));}
.section-head p{color:var(--text-muted);}

/* ===== Cards / Grids ===== */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 36px var(--shadow-color); border-color:var(--rose-300);}
.card-body{padding:26px;}
.card img{width:100%; height:170px; object-fit:cover;}
.icon-badge{width:52px; height:52px; border-radius:16px; background:linear-gradient(150deg, var(--rose-100), var(--rose-50)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--rose-700); margin-bottom:14px; transition:transform 0.25s ease;}
.card:hover .icon-badge{transform:scale(1.08) rotate(-3deg);}
[data-theme="dark"] .icon-badge{background:linear-gradient(150deg, rgba(238,148,183,0.22), rgba(238,148,183,0.08)); color:var(--rose-200);}
.icon-badge-lg{width:78px; height:78px; border-radius:22px; background:linear-gradient(150deg, var(--rose-100), var(--rose-50)); display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 16px;}

/* Breed / species mini cards */
.mini-card{display:flex; align-items:center; gap:14px; background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:14px; text-decoration:none; color:var(--text); transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.mini-card:hover{transform:translateY(-3px); box-shadow:0 12px 26px var(--shadow-color); border-color:var(--rose-300);}
.mini-card img, .mini-card .collage{width:64px; height:64px; border-radius:12px; object-fit:cover; flex-shrink:0;}
.collage{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; overflow:hidden;}
.collage img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.mini-card-name{font-weight:700;}
.mini-card-tag{font-size:0.85rem; color:var(--text-muted);}

/* Breadcrumb */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-muted); margin-bottom:18px; flex-wrap:wrap;}
.breadcrumb a{text-decoration:none; color:var(--rose-700);}
[data-theme="dark"] .breadcrumb a{color:var(--rose-300);}
.breadcrumb i{font-size:0.7rem;}

.species-hero{text-align:center; max-width:760px; margin:0 auto;}

.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;}
.about-grid img{border-radius:22px; box-shadow:0 18px 40px var(--shadow-color);}
.about-list{list-style:none; padding:0; margin:18px 0 0;}
.about-list li{display:flex; gap:10px; margin-bottom:12px; align-items:flex-start;}
.about-list .check{color:var(--rose-600); font-weight:800; flex-shrink:0;}
@media (max-width:900px){.about-grid, .hero-grid{grid-template-columns:1fr;}}

/* CTA banner */
.cta-banner{background:linear-gradient(135deg, var(--rose-700), var(--rose-900)); color:#fff; border-radius:28px; padding:48px; text-align:center;}
.cta-banner h2{color:#fff;}
.cta-banner p{color:rgba(255,255,255,0.85);}

/* Trust strip */
.trust-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; padding:18px 0; margin-top:8px;}
.trust-strip-item{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--text-muted); font-size:0.95rem;}
.trust-strip-item i{color:var(--rose-600);}

/* Tables */
table{width:100%; border-collapse:collapse; margin:18px 0;}
th,td{padding:12px 14px; border-bottom:1px solid var(--border); text-align:left;}
th{color:var(--rose-700); font-weight:700;}

/* Accordion (FAQ) */
.accordion-item{border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden;}
.accordion-q{width:100%; text-align:left; background:var(--bg); border:none; padding:18px 22px; font-weight:700; font-size:1.02rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--text); font-family:var(--font-main);}
.accordion-a{max-height:0; overflow:hidden; transition:max-height 0.3s ease; padding:0 22px; color:var(--text-muted);}
.accordion-item.open .accordion-a{max-height:600px; padding-bottom:20px;}
.accordion-item.open .accordion-q i{transform:rotate(180deg);}
.accordion-q i{transition:transform 0.2s ease;}

/* Legal */
.legal-hero{padding:48px 0 24px; background:var(--bg-alt); text-align:center;}
.legal-updated{color:var(--text-muted); font-size:0.9rem;}
.legal-content h2{margin-top:32px; color:var(--rose-700);}
.legal-content{max-width:820px; margin:0 auto;}
.form-note{font-size:0.85rem; color:var(--text-muted); border-top:1px solid var(--border); padding-top:18px; margin-top:28px;}

/* ===== Footer ===== */
footer.site-footer{background:linear-gradient(160deg, var(--rose-900), #290616 70%); color:#f7dde8; padding:52px 0 22px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:32px;}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand h4{margin:0;}
.footer-logo{width:42px; height:42px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,0.1), 0 4px 14px rgba(0,0,0,0.25); transition:transform 0.25s ease;}
.footer-brand:hover .footer-logo{transform:rotate(-6deg) scale(1.05);}
footer.site-footer h4{color:#fff; margin-bottom:14px;}
footer.site-footer p{color:rgba(255,255,255,0.75); font-size:0.92rem;}
footer.site-footer ul{list-style:none; padding:0; margin:0;}
footer.site-footer li{margin-bottom:9px;}
footer.site-footer a{color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.92rem;}
footer.site-footer a:hover{color:#fff; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.85rem; color:rgba(255,255,255,0.6);}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;}}

/* ===== WhatsApp floating button ===== */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:800;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,0.45); text-decoration:none;
  transition:transform 0.2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:32px; height:32px;}
body.has-cookie-banner .whatsapp-float, body.has-cookie-banner .tools-float{bottom:104px;}

/* ===== Accessibility + translate floating tools ===== */
.tools-float{position:fixed; left:22px; bottom:22px; z-index:800; display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.tools-fab{width:56px; height:56px; border-radius:50%; border:none; background:var(--rose-700); color:#fff; font-size:1.4rem; cursor:pointer; box-shadow:0 10px 24px var(--shadow-color); display:flex; align-items:center; justify-content:center;}
.tools-panel{display:none; background:var(--bg); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 40px var(--shadow-color); padding:16px; width:250px; max-height:70vh; overflow-y:auto;}
.tools-panel.open{display:block;}
.tools-panel h5{margin:0 0 8px; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted);}
.tools-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.tools-row button{flex:1; min-width:40px; border:1px solid var(--border); background:var(--bg-alt); color:var(--text); border-radius:10px; padding:9px 6px; cursor:pointer; font-size:0.85rem; font-weight:700; font-family:var(--font-main);}
.tools-row button.active{background:var(--rose-700); color:#fff; border-color:var(--rose-700);}
.tools-fontsize{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px;}
.tools-fontsize button{width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--bg-alt); font-weight:800; cursor:pointer; color:var(--text);}
.lang-list{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.lang-list button{border:1px solid var(--border); background:var(--bg-alt); border-radius:10px; padding:8px; cursor:pointer; font-size:0.85rem; font-weight:700; color:var(--text); font-family:var(--font-main);}
.lang-list button.active{background:var(--rose-700); color:#fff;}
.tools-reset{width:100%; text-align:center; padding:8px; border-radius:10px; border:1px dashed var(--border); background:transparent; cursor:pointer; color:var(--text-muted); font-family:var(--font-main); font-weight:700;}

/* High contrast mode */
[data-a11y-contrast="high"]{--bg:#000000; --bg-alt:#0a0a0a; --text:#ffffff; --text-muted:#f2f2f2; --border:#ffffff; --rose-100:#3a0018; --rose-50:#1a0008; --rose-600:#ff4f9a; --rose-700:#ff4f9a; --shadow-color:rgba(255,255,255,0.2);}
[data-theme="dark"][data-a11y-contrast="high"]{--bg:#000000; --bg-alt:#0a0a0a;}

/* Underline links accessibility mode */
.a11y-underline-links a{text-decoration:underline !important;}

/* Reduce motion toggle */
.a11y-reduce-motion *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* Translating overlay */
.translating-overlay{position:fixed; inset:0; background:rgba(33,8,18,0.82); color:#fff; z-index:9999; display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; font-size:1.1rem; font-weight:700;}
.translating-overlay.show{display:flex;}
.translating-spinner{width:42px; height:42px; border-radius:50%; border:4px solid rgba(255,255,255,0.3); border-top-color:#fff; animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#google_translate_element{display:none !important;}
.goog-te-banner-frame, .skiptranslate > iframe{display:none !important;}
body{top:0 !important;}

/* ===== Cookie consent ===== */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--bg); border-top:1px solid var(--border); box-shadow:0 -10px 30px var(--shadow-color); padding:18px 0;}
.cookie-banner-inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.cookie-banner-inner p{margin:0; flex:1; min-width:220px; font-size:0.92rem; color:var(--text-muted);}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-btn-accept{background:var(--rose-700); color:#fff; border:none; padding:11px 20px; border-radius:999px; font-weight:700; cursor:pointer; font-family:var(--font-main);}
.cookie-btn-reject, .cookie-btn-config{background:transparent; border:1.5px solid var(--border); color:var(--text); padding:11px 20px; border-radius:999px; font-weight:700; cursor:pointer; font-family:var(--font-main);}
.cookie-modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:950; display:none; align-items:center; justify-content:center; padding:20px;}
.cookie-modal-backdrop.open{display:flex;}
.cookie-modal{background:var(--bg); border-radius:20px; max-width:520px; width:100%; padding:28px; max-height:85vh; overflow-y:auto;}
.cookie-cat{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);}
.switch{position:relative; width:46px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch-track{position:absolute; inset:0; background:var(--border); border-radius:999px; cursor:pointer; transition:background 0.2s ease;}
.switch-track::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s ease;}
.switch input:checked + .switch-track{background:var(--rose-600);}
.switch input:checked + .switch-track::before{transform:translateX(20px);}
.switch input:disabled + .switch-track{opacity:0.6; cursor:not-allowed;}
.cookie-modal-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.cookie-footer-link{background:none; border:none; color:rgba(255,255,255,0.8); text-decoration:underline; cursor:pointer; font-family:var(--font-main); font-size:0.92rem; padding:0;}

@media (max-width:600px){
  .cta-banner{padding:32px 22px;}
  .tools-panel{width:220px;}
}