/* === Paleta CEVET === */
:root{
  --azul:#0072a3;
  --azul-claro:#35a7d6;
  --gris:#f5f7fa;
  --gris-osc:#4f4f4f;
  --negro:#222;
  --suave:#ffffffcc;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}
body{scroll-behavior:smooth;background:var(--gris);color:var(--negro);}
img{max-width:100%;display:block;}
a{color:var(--azul);text-decoration:none;}
a:hover{color:var(--azul-claro);} 

/* NAVBAR */
.navbar{box-shadow:0 2px 4px rgb(0 0 0 /.05);background:#fff;}
.navbar-brand img{height:48px;}

/* HERO */
#hero{background:url('../img/hero.webp') center/cover no-repeat;height:88vh;display:flex;align-items:center;color:#fff;}
#hero .contenido{backdrop-filter:blur(4px);background:var(--suave);padding:2rem;border-radius:1rem;}

/* SECCIONES GENERALES */
section{padding:4rem 0;}
section h2{color:var(--azul);margin-bottom:2rem;text-align:center;font-weight:600;}

/* CARDS */
.card{border:none;border-radius:1rem;overflow:hidden;box-shadow:0 4px 8px rgb(0 0 0 /.06);transition:transform .3s;}
.card:hover{transform:translateY(-6px);} 
.card-icon{font-size:3rem;color:var(--azul);}

/* ALIMENTOS carrusel */
.marcas{display:flex;gap:2rem;overflow-x:auto;padding:1rem 0;scroll-snap-type:x mandatory;}
.marcas img{width:160px;height:90px;object-fit:contain;filter:grayscale(1);transition:filter .4s,transform .4s;scroll-snap-align:center;}
.marcas img:hover{filter:grayscale(0);transform:scale(1.1);} 

/* PLANES */
.plan{border:2px solid var(--azul-claro);border-radius:1rem;padding:2rem;text-align:center;transition:.3s;}
.plan:hover{box-shadow:0 6px 12px rgb(0 0 0 /.12);transform:translateY(-4px);} 
.plan h3{margin-bottom:1rem;color:var(--azul);}
.plan-price{font-size:2rem;font-weight:700;margin-bottom:1rem;}

/* CONTACTO */
.contact-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;}
.contact-card{width:100%;max-width:520px;background:#fff;padding:3rem;border-radius:1rem;box-shadow:0 4px 10px rgb(0 0 0 /.08);}  

/* FOOTER */
footer{background:#fff;padding:3rem 0;margin-top:4rem;border-top:1px solid #e5e5e5;}
footer a{margin:0 .5rem;font-size:1.5rem;}
@media(max-width:576px){#hero{height:70vh;} .navbar .form-control{width:100px;}}

/* ---- LAB tabs ---- */
.nav-pills .nav-link { border-radius: 30px; }
.nav-pills .nav-link.active { background: var(--cevet-blue); }

/* ---- Hospitalización ---- */
.bg-hosp {
  background: linear-gradient(120deg, var(--cevet-blue) 0%, var(--cevet-blue-light) 100%);
}
.timeline {
  list-style:none; padding-left:0; border-left:3px solid var(--cevet-blue-light);
}
.timeline li { position:relative; padding:0 0 1.2rem 1rem; }
.timeline li span {
  position:absolute; left:-3.2rem; top:0; width:2.5rem;
  text-align:right; font-weight:600; color:var(--cevet-blue-light);
}

/* ---- Eutanasia ---- */
.bg-petals {
  position:absolute; top:-20%; right:-30%; width:70%; opacity:.08; pointer-events:none;
}
blockquote { border-left:4px solid var(--cevet-blue-light); padding-left:.75rem; }
/* Banner hospitalización */
.bg-hosp{
  background:linear-gradient(120deg,var(--cevet-blue) 0%,var(--cevet-blue-light) 100%);
}

/* Timeline pulido */
.timeline{
  list-style:none; padding-left:0; border-left:3px solid var(--cevet-blue-light);
}
.timeline li{position:relative; padding:0 0 1.2rem 1rem;}
.timeline li:last-child{padding-bottom:0;}
.timeline li span{
  position:absolute; left:-3.2rem; top:0;
  width:2.5rem; text-align:right;
  font-weight:600; color:var(--cevet-blue-light);
}
/*  HERO  ------------------------------------------------- */
#hero{
  position:relative;
  min-height:60vh;                     /* alto visible */
  background:url("../img/hero.webp") center/cover no-repeat;
  display:flex; align-items:center;    /* centra vertical */
  color:#fff;                          /* texto blanco sobre overlay */
}
#hero::before{                         /* overlay oscuro */
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);          /* ajusta la opacidad a tu gusto */
}
#hero .contenido{
  position:relative;                   /* para quedar sobre el overlay */
  max-width:620px;                     /* ancho del bloque */
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}