/* En la web las fuentes vienen de Google Fonts (20 KB en vez de 400 KB).
   El ZIP que descarga el cliente las lleva incrustadas. */
/* ==========================================================================
   CLÍNICA VETERINARIA PREMIUM
   Leuname Software · leunamesoftware.com
   ========================================================================== */

:root{
  --verde:#12786a; --verde-osc:#0b5a4f; --verde-cla:#3aa392; --verde-suave:#e3f2ee;
  --melo:#f2915b; --melo-osc:#d9743d; --melo-suave:#fdeadd;
  --crema:#fdfbf7; --crema2:#f6f1e9; --blanco:#fff;
  --tinta:#14322d; --tinta2:#2c4a44; --apagado:#7b8f8a; --linea:#e4ece9;
  --ok:#2e8b57; --error:#c0492f;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radio:18px; --ancho:1300px;
  --sombra:0 6px 26px rgba(20,50,45,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--melo);outline-offset:3px}

.env{max-width:var(--ancho);margin:0 auto;padding:0 26px}
section{padding:74px 0}

h1,h2,h3{font-weight:800;line-height:1.16;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.1vw,36px)}
h3{font-size:18px}

.rotulo{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:99px;
  background:var(--verde-suave);color:var(--verde-osc);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.cab-sec{margin-bottom:36px}
.cab-sec.centro{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.cab-sec p{color:var(--apagado);margin-top:12px}

/* ---------------- Botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:2px solid transparent;border-radius:99px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;
  cursor:pointer;transition:.2s;white-space:nowrap}
.btn svg{flex-shrink:0}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 8px 22px rgba(18,120,106,.26)}
.btn-verde:hover{background:var(--verde-osc);transform:translateY(-2px)}
.btn-melo{background:var(--melo);color:#fff;box-shadow:0 8px 22px rgba(242,145,91,.3)}
.btn-melo:hover{background:var(--melo-osc);transform:translateY(-2px)}
.btn-linea{border-color:var(--verde);color:var(--verde);background:transparent}
.btn-linea:hover{background:var(--verde);color:#fff}
.btn-blanco{background:#fff;color:var(--verde-osc);border-color:var(--linea)}
.btn-blanco:hover{border-color:var(--verde)}
.btn-peq{padding:10px 20px;font-size:13.5px}

/* ---------------- Barra superior ---------------- */
.barra-top{background:var(--verde-osc);color:#d6ebe6;font-size:12.5px}
.barra-top .env{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.barra-top .izq{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.barra-top span,.barra-top a{display:inline-flex;align-items:center;gap:7px}
.barra-top a:hover{color:#fff}
.barra-top svg{color:var(--melo);flex-shrink:0}
.urgencia{display:inline-flex;align-items:center;gap:8px;background:var(--melo);color:#fff;
  padding:5px 14px;border-radius:99px;font-weight:700}

/* ---------------- Cabecera ---------------- */
.cab{position:sticky;top:0;z-index:80;background:rgba(253,251,247,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marca-txt strong{display:block;font-family:var(--serif);font-size:23px;font-weight:700;line-height:1}
.marca-txt span{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--verde);margin-top:3px}
.menu{display:flex;gap:28px;margin:0 auto}
.menu a{font-size:14.5px;font-weight:500;color:var(--tinta2);padding:5px 0;
  border-bottom:2px solid transparent;transition:.2s}
.menu a:hover,.menu a.act{color:var(--verde);border-color:var(--melo)}
.abrir-menu{display:none;background:none;border:1px solid var(--linea);border-radius:12px;
  width:44px;height:44px;color:var(--tinta);cursor:pointer;align-items:center;justify-content:center}
.menu-movil{display:none;border-top:1px solid var(--linea);background:#fff}
.menu-movil.ver{display:block}
.menu-movil a{display:block;padding:13px 26px;border-bottom:1px solid var(--linea);font-size:15px}

/* ---------------- Portada ---------------- */
.portada{position:relative;overflow:hidden;padding:0;
  background:linear-gradient(160deg,var(--verde-suave) 0%,var(--crema) 62%)}
.portada .env{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;
  padding-top:58px;padding-bottom:58px}
.portada h1{font-size:clamp(33px,4.4vw,52px);margin-bottom:18px}
.portada h1 em{font-style:normal;color:var(--verde)}
.portada p{font-size:17px;color:var(--tinta2);max-width:450px;margin-bottom:28px}
.portada-botones{display:flex;gap:13px;flex-wrap:wrap}
.portada-sellos{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.sello{display:flex;align-items:center;gap:10px}
.sello svg{color:var(--verde);flex-shrink:0}
.sello strong{display:block;font-size:15px;line-height:1.2}
.sello span{font-size:12.5px;color:var(--apagado)}
.portada-arte{position:relative;max-width:470px;margin-left:auto}
.portada-arte svg{width:100%;height:auto}
.portada-foto{border-radius:var(--radio);overflow:hidden;box-shadow:0 20px 46px rgba(20,50,45,.16)}
.portada-foto img{width:100%;height:420px;object-fit:cover}

/* ---------------- Servicios ---------------- */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.servicio{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:28px 24px;transition:.24s;position:relative;overflow:hidden}
.servicio:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(20,50,45,.12);
  border-color:var(--verde-cla)}
.servicio-ic{width:56px;height:56px;border-radius:16px;background:var(--verde-suave);
  color:var(--verde);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:.24s}
.servicio:hover .servicio-ic{background:var(--melo-suave);color:var(--melo-osc)}
.servicio h3{margin-bottom:8px}
.servicio p{font-size:14px;color:var(--apagado);line-height:1.6}

/* ---------------- Urgencias ---------------- */
.franja-urg{background:linear-gradient(120deg,var(--verde-osc),var(--verde));color:#fff;padding:0;
  position:relative;overflow:hidden}
.franja-urg .env{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-top:34px;padding-bottom:34px;flex-wrap:wrap;position:relative;z-index:2}
.franja-urg h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.franja-urg p{color:#c6e3dc;max-width:520px}
.franja-urg .patas{position:absolute;inset:0;opacity:.09;z-index:1}

/* ---------------- Planes ---------------- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.plan{background:#fff;border:2px solid var(--linea);border-radius:var(--radio);padding:30px 26px;
  transition:.24s;position:relative}
.plan:hover{border-color:var(--verde-cla)}
.plan.destacado{border-color:var(--melo);box-shadow:0 16px 40px rgba(242,145,91,.18)}
.plan-eti{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--melo);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 16px;border-radius:99px;white-space:nowrap}
.plan h3{font-size:20px;margin-bottom:6px}
.plan-para{font-size:13.5px;color:var(--apagado);margin-bottom:18px}
.plan-precio{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--verde);line-height:1}
.plan-precio small{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--apagado)}
.plan ul{list-style:none;margin:20px 0 24px}
.plan li{display:flex;gap:10px;font-size:14px;margin-bottom:11px;color:var(--tinta2)}
.plan li svg{color:var(--verde);flex-shrink:0;margin-top:3px}
.plan .btn{width:100%}

/* ---------------- Equipo ---------------- */
.equipo{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ficha{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 20px;text-align:center;transition:.22s}
.ficha:hover{box-shadow:var(--sombra);border-color:var(--verde-cla)}
.ficha-foto{width:96px;height:96px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  background:var(--verde-suave);display:flex;align-items:center;justify-content:center;color:var(--verde)}
.ficha-foto img{width:100%;height:100%;object-fit:cover}
.ficha h3{font-size:16.5px;margin-bottom:3px}
.ficha .cargo{font-size:13px;color:var(--melo-osc);font-weight:600;margin-bottom:9px}
.ficha p{font-size:13px;color:var(--apagado);line-height:1.55}

/* ---------------- Cita ---------------- */
.cita{background:var(--verde-suave)}
.cita-rejilla{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.cita-lista{list-style:none;margin-top:22px}
.cita-lista li{display:flex;gap:13px;margin-bottom:16px}
.cita-lista svg{color:var(--verde);flex-shrink:0;margin-top:3px}
.cita-lista strong{display:block;font-size:15px}
.cita-lista span{font-size:13.5px;color:var(--apagado)}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:32px 28px;box-shadow:var(--sombra)}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:12px;background:var(--crema);color:var(--tinta);font-family:inherit;
  font-size:14.5px;transition:.18s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);
  background:#fff;box-shadow:0 0 0 3px rgba(18,120,106,.13)}
.campo textarea{resize:vertical;min-height:76px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}
.mascotas{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.mascota{position:relative}
.mascota input{position:absolute;opacity:0;pointer-events:none}
.mascota span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;
  border:1.5px solid var(--linea);border-radius:14px;background:var(--crema);cursor:pointer;
  font-size:12.5px;font-weight:600;transition:.18s;color:var(--tinta2)}
.mascota input:checked + span{border-color:var(--verde);background:var(--verde-suave);color:var(--verde-osc)}
.mascota input:focus-visible + span{outline:2px solid var(--melo);outline-offset:2px}
.aviso-form{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:13.5px;display:none}
.aviso-form.ok{display:block;background:rgba(46,139,87,.1);border:1px solid rgba(46,139,87,.35);color:var(--ok)}
.aviso-form.mal{display:block;background:rgba(192,73,47,.09);border:1px solid rgba(192,73,47,.3);color:var(--error)}

/* ---------------- Opiniones ---------------- */
.opiniones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.opinion{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px}
.estrellas{color:var(--melo);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.opinion p{font-size:14.5px;color:var(--tinta2);margin-bottom:18px}
.opinion-quien{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--linea)}
.opinion-ini{width:42px;height:42px;border-radius:50%;background:var(--verde-suave);color:var(--verde);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.opinion-quien strong{display:block;font-size:14px}
.opinion-quien span{font-size:12.5px;color:var(--apagado)}

/* ---------------- Preguntas ---------------- */
.faq-lista{max-width:820px;margin:0 auto}
.faq{background:#fff;border:1px solid var(--linea);border-radius:14px;margin-bottom:11px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--verde);flex-shrink:0;line-height:1}
.faq[open] summary::after{content:"−"}
.faq[open] summary{color:var(--verde)}
.faq p{padding:0 22px 20px;font-size:14.5px;color:var(--apagado)}

/* ---------------- Contacto y pie ---------------- */
.cont-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cont-dato{display:flex;gap:14px;margin-bottom:20px}
.cont-dato svg{color:var(--verde);flex-shrink:0;margin-top:3px}
.cont-dato strong{display:block;font-size:14.5px;margin-bottom:2px}
.cont-dato span{font-size:13.5px;color:var(--apagado)}
.horario{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px}
.horario h3{margin-bottom:14px}
.horario-fila{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--linea);font-size:14px}
.horario-fila:last-child{border-bottom:none}
.horario-fila span{color:var(--apagado)}

.pie{background:var(--tinta);color:#cfdcd9;padding:50px 0 0}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px}
.pie .marca-txt strong{color:#fff}
.pie .marca-txt span{color:var(--melo)}
.pie h4{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--melo);margin-bottom:14px}
.pie p,.pie a{font-size:13.5px;color:rgba(207,220,217,.8)}
.pie a{display:block;margin-bottom:8px;transition:.2s}
.pie a:hover{color:#fff}
.pie-abajo{border-top:1px solid rgba(255,255,255,.12);padding:17px 0;font-size:12.5px;
  color:rgba(207,220,217,.55);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.aviso-demo{background:var(--melo-suave);color:#8a4a1e;text-align:center;padding:9px 20px;
  font-size:12.5px;font-weight:600}

.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.4);transition:.2s}
.wa:hover{transform:scale(1.08)}

/* ---------------- Pantallas pequeñas ---------------- */
@media(max-width:1100px){
  .servicios{grid-template-columns:repeat(2,1fr)}
  .equipo{grid-template-columns:repeat(2,1fr)}
  .planes{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .opiniones{grid-template-columns:1fr}
}
@media(max-width:900px){
  .menu{display:none}
  .cab .btn{display:none}
  .abrir-menu{display:flex}
  .menu-movil .btn{display:flex;margin:14px 26px 18px}
  .portada .env{grid-template-columns:1fr;gap:30px;padding-top:38px}
  .portada-arte{max-width:420px;margin:0 auto}
  .portada-foto img{height:280px}
  .cita-rejilla,.cont-rejilla{grid-template-columns:1fr;gap:30px}
  .franja-urg .env{flex-direction:column;align-items:flex-start}
  .pie-rejilla{grid-template-columns:1fr 1fr}
  .barra-top .izq span:nth-child(n+3){display:none}
}
@media(max-width:640px){
  section{padding:52px 0}
  .env{padding:0 18px}
  .servicios{grid-template-columns:1fr}
  .equipo{grid-template-columns:1fr}
  .mascotas{grid-template-columns:repeat(2,1fr)}
  .dos{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr;gap:24px}
  .portada-botones .btn{flex:1}
  .portada-sellos{gap:18px}
}