/* ================================
   Alisios Soluciones 360 · v3.3.3
   ================================ */

:root{
  --azul:#0ea5e9;
  --amarillo:#fbbf24;
  --texto:#222;
  --gris:#f7f7f7;
  --grad:linear-gradient(90deg,var(--azul),var(--amarillo));
}

*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.6}
a{color:var(--azul);text-decoration:none} a:hover{text-decoration:underline}
.container{width:90%;max-width:1100px;margin:auto}
.section{padding:60px 0}
.title{color:#0d2d59;text-align:center;margin:0 0 12px}
.lead{text-align:center;color:#444;margin:0 auto 30px;max-width:850px}

/* Topbar */
.topbar{background:var(--grad);color:#fff;padding:10px 0}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.nav{display:flex;gap:16px}
.nav a{color:#fff;font-weight:700}
.nav a.active,.nav a:hover{opacity:.85}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer}
.burger span{width:24px;height:3px;background:#fff;border-radius:2px}

/* Hero */
.hero {
  position: relative;
  background-image: url('../img/hero-farmacia.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto parallax */
  text-align: center;
  color: #003366;
  padding: 140px 20px 320px;
}
.hero .overlay{position:absolute;inset:0;background:rgba(255,255,255,.25)}
.hero-inner{position:relative;z-index:1}
.hero h1{font-size:2.6rem;margin:0 0 .5em}
.hero p{margin:0 0 1.2em}

/* Cuadros portada, montados sobre hero */
.cards.over-hero{position:relative;margin-top:-90px;z-index:2}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{
  background:#fff;border-radius:12px;padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  border:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
}

/* Servicios – fondo con parallax difuminado */
.services-wrapper{
  position:relative;
  background:url('img/hero-farmacia.jpg') center/cover no-repeat fixed;
}
.services-wrapper::before{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.85);backdrop-filter:blur(3px);z-index:1
}
.services-box{position:relative;z-index:2;padding:80px 0 100px;text-align:center}
.services-box .grid4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.services-box .card{min-height:320px;padding:28px}

/* Iconos SVG en servicios */
.icon-box{display:flex;justify-content:center;align-items:center;margin-bottom:12px}
.icon{width:46px;height:46px;stroke:#0ea5e9}
.card:hover .icon{stroke:#fbbf24;transition:.25s}

/* Trabajos – galería (sin bordes redondeados y bien encajadas) */
.gallery3{display:flex;justify-content:center;gap:30px;flex-wrap:nowrap;margin:40px auto;max-width:1200px}
.gallery3 img{width:380px;height:250px;object-fit:cover;border:none;border-radius:0;display:block;box-shadow:0 4px 8px rgba(0,0,0,.15)}
/* Lightbox (si lo usas) puede ir en tu JS */

/* Quiénes somos – fondo y cuadro centrado */
.about-wrapper{
  position:relative;padding:80px 20px;
  background:url('img/hero-farmacia.jpg') center/cover no-repeat fixed;
}
.about-wrapper::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.75);backdrop-filter:blur(3px);z-index:1}
.about-box{position:relative;z-index:2;max-width:900px;margin:auto;text-align:justify;padding:40px;border-radius:12px;
  border:2px solid transparent;background-clip:padding-box,border-box;background-origin:border-box;
  background-image:linear-gradient(#fff,#fff),var(--grad);box-shadow:0 4px 20px rgba(0,0,0,.05)}

/* Formularios */
.form label{display:block;margin-bottom:14px}
input,textarea,select{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--grad);color:#fff;border:0}
.btn.outline{border:2px solid var(--azul);color:var(--azul);background:#fff}

/* Footer */
.footer{background:var(--grad);color:#fff;text-align:center;padding:20px 0}
.footer a{color:#fff;text-decoration:underline}

/* WhatsApp */
.wa{position:fixed;right:20px;bottom:24px;background:#25D366;color:#fff;padding:12px 16px;border-radius:30px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* Cookies */
.cookie{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--azul);padding:10px;z-index:50}
.cookie .cookie-actions{display:flex;gap:8px}

/* Responsive */
@media (max-width: 900px){
  .hero{padding-bottom:260px;background-attachment:scroll}
  .cards.over-hero{margin-top:-60px}
  .gallery3{flex-wrap:wrap}
  .gallery3 img{width:100%;height:auto}
}
@media (max-width: 680px){
  .nav{display:none;flex-direction:column;background:var(--grad);position:absolute;left:0;right:0;top:60px;padding:16px}
  .nav.open{display:flex}
  .burger{display:flex}
}
/* Fondo farmacia reutilizable para páginas interiores */
.fondo-farmacia {
  background-image: url('../img/hero-farmacia.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* === Servicios (6 cuadros con iconos) === */
.services {
  text-align: center;
  padding: 60px 20px;
}

.services .title {
  font-size: 1.8rem;
  color: #0076b6;
  margin-bottom: 10px;
}

.services .lead {
  max-width: 800px;
  margin: 0 auto 50px auto;
  line-height: 1.6;
  color: #333;
}

/* Cuadrícula 3x2 */
.grid3x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
  justify-items: center;
}

/* Tarjetas */
.card {
  background: #fff;
  border-radius: 20px;
  padding: 35px 25px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.grad-border {
  border: 3px solid;
  border-image: linear-gradient(45deg, #0099cc, #ffcc00) 1;
}

/* Iconos */
.icon {
  font-size: 2.8rem;
  margin-bottom: 15px;
  color: #0099cc;
  transition: color 0.3s ease, transform 0.3s ease;
}

.card:hover .icon {
  color: #ffcc00;
  transform: scale(1.1);
}

/* Texto dentro de las tarjetas */
.card h3 {
  font-size: 1.1rem;
  color: #002b40;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}

/* === SERVICIOS (6 cuadros estilo portada) === */
.cards.over-hero {
  text-align: center;
  padding: 60px 20px;
}

.cards .title {
  color: #0076b6;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.cards .lead {
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.6;
  color: #333;
}

.grid6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  justify-items: center;
}

.card {
  background: white;
  border-radius: 20px;
  padding: 35px 25px;
  max-width: 320px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
}

.grad-border {
  border: 3px solid;
  border-image: linear-gradient(45deg, #0099cc, #ffcc00) 1;
}

/* Iconos */
.icon {
  font-size: 2.6rem;
  margin-bottom: 10px;
  color: #0076b6;
}

.card h3 {
  font-size: 1.1rem;
  color: #003366;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
}