/* =========================================================
   Arizona Pharmacy — estilos compartidos por todas las páginas
   ========================================================= */
:root{
  --red: rgb(186, 12, 29);
  --red-hover: #C82333;
  --cyan: rgb(11, 169, 196);
  --text: #0d141a;
  --text-body: rgb(86, 88, 94);
  --max: 1224px;
  --font-title: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--text);background:#fff;line-height:1.5;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:600;line-height:1.3;margin:0;}

.container{width:min(var(--max), calc(100% - 32px));margin:0 auto;}
.section{padding:48px 0;}
.red{color:var(--red);}
.cyan{color:var(--cyan);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:50px;
  padding:10px 24px;font:500 16px var(--font-body);text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--red-hover);border-color:var(--red-hover);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eee;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:73px;flex-wrap:wrap;}
.logo img{width:193px;height:73px;object-fit:contain;}
.main-nav{display:flex;gap:24px;flex-wrap:wrap;}
.main-nav a{color:var(--red);text-decoration:none;font-size:16px;padding:8px 4px;}
.main-nav a:hover{color:var(--text);}
.main-nav a[aria-current="page"]{font-weight:700;}

/* ---------- Hero (Home) ---------- */
.hero{
  background:url('Imagenes/title-pageee-AE07D6rPlyhgxago.png') center/cover no-repeat;
  min-height:clamp(260px, 56vw, 686px);
  padding:clamp(24px, 9vw, 109px) 0 24px;
}
.hero .container{display:flex;justify-content:flex-end;}
.hero-banner{width:min(503px, 100%);height:auto;}

/* ---------- Bloque About (Home y About Us) ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,366px) 1fr 1fr;gap:24px;align-items:center;}
.about-copy h2{font-size:clamp(28px, 4vw, 48px);}
.about-copy p{color:var(--red);margin:16px 0 32px;}
.about-grid > img{width:100%;aspect-ratio:400/464;object-fit:cover;border-radius:20px;}

/* ---------- Subscribe (Home) ---------- */
.subscribe{text-align:center;}
.subscribe h2{color:var(--red);font-size:clamp(24px, 3.3vw, 40px);}
.subscribe .lead{font-family:var(--font-title);font-size:18px;margin:4px 0 20px;}
.subscribe form{width:min(300px, 100%);margin:0 auto;text-align:left;}
.subscribe label{display:block;font-size:14px;font-weight:700;margin-bottom:5px;}
.subscribe input{width:100%;padding:10px 12px;border:1px solid #1a1a1a;background:rgb(241,241,241);font:14px var(--font-body);}
.subscribe .btn{margin-top:12px;}

/* ---------- Mapa ---------- */
.map-band{background:var(--red);padding:16px 0;}
.map-band iframe,.map-wrap iframe{display:block;width:100%;height:320px;border:0;}
.map-wrap iframe{border-radius:8px;}

/* ---------- Intro (About Us) ---------- */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.intro-grid > img{width:100%;aspect-ratio:612/440;object-fit:cover;border-radius:20px;}
.stars{color:var(--red);font-size:22px;letter-spacing:2px;margin-bottom:8px;}
.intro-text h1{color:var(--red);font-size:24px;margin-bottom:16px;}
.intro-text p{font-size:18px;margin:0 0 16px;}

/* ---------- FAQ ---------- */
.faq h2{color:var(--red);font-size:clamp(24px, 3.3vw, 40px);margin-bottom:24px;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;}
.faq-item h3{font-size:20px;margin-bottom:4px;}
.faq-item p{margin:0;}

/* ---------- Testimonio ---------- */
.testimonial{background:var(--red);color:#fff;padding:40px 0;text-align:center;}
.testimonial .stars{color:#fff;}
.testimonial blockquote{margin:0 auto;max-width:800px;font-family:var(--font-title);font-size:22px;font-weight:600;line-height:1.3;}

/* ---------- Productos (collage) ---------- */
.products-block{padding:16px 0 40px;}
.collage{position:relative;width:100%;container-type:inline-size;}
.collage h1,.collage p{position:absolute;margin:0;text-align:center;}
.collage h1{color:var(--text);}
.collage p{color:var(--text-body);}
.collage img{position:absolute;width:100%;height:100%;object-fit:cover;border-radius:16px;}

/* Escritorio: lienzo 1224 x 380 */
.collage.desktop{aspect-ratio:1224/380;}
.collage.desktop h1{top:0.8%;left:16.83%;width:66.34%;font-size:48px;font-size:3.92cqw;}
.collage.desktop p{top:17.11%;left:16.83%;width:66.34%;font-size:16px;font-size:max(12px, 1.31cqw);}
.collage.desktop .img-ok3{top:27.63%;left:0;width:15.85%;height:65.26%;z-index:3;}
.collage.desktop .img-ok1{top:27.63%;left:33.66%;width:14.38%;height:63.95%;z-index:4;}
.collage.desktop .img-ok2{top:23.42%;left:18.46%;width:15.85%;height:69.47%;z-index:5;}
.collage.desktop .img-tribe{top:48.68%;left:50%;width:26.47%;height:43.68%;z-index:6;}
.collage.desktop .img-ok4{top:55%;left:78.68%;width:15.85%;height:37.89%;z-index:7;}

/* Móvil: lienzo 328 x 311 */
.collage.mobile{display:none;aspect-ratio:328/311;}
.collage.mobile h1{top:0;left:0;width:100%;font-size:24px;font-size:7.32cqw;}
.collage.mobile p{top:9.97%;left:0;width:100%;font-size:14px;font-size:4.27cqw;}
.collage.mobile .img-ok3{top:17.68%;left:0;width:30.18%;height:40.51%;z-index:3;}
.collage.mobile .img-ok1{top:17.68%;left:71.95%;width:22.87%;height:37.94%;z-index:4;}
.collage.mobile .img-ok2{top:56.27%;left:57.62%;width:26.22%;height:39.23%;z-index:5;}
.collage.mobile .img-tribe{top:63.66%;left:7.32%;width:48.17%;height:28.62%;z-index:6;}
.collage.mobile .img-ok4{top:27.65%;left:33.23%;width:33.54%;height:28.62%;z-index:7;}

/* ---------- Visit Us ---------- */
.visit{display:flex;flex-direction:column;}
.visit h1{font-size:clamp(24px, 4vw, 48px);margin-bottom:12px;}
.visit .subtitle{color:var(--red);font-weight:700;margin:0 0 24px;}
.visit .section-heading{color:var(--red);font-size:24px;margin-bottom:16px;order:1;}
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:24px;order:2;}
.branch h3{font-size:18px;margin-bottom:8px;}
.branch p{margin:0;}
.visit .map-wrap{order:3;}

/* ---------- Footer ---------- */
.site-footer{background:#000;color:#fff;padding:40px 0 24px;}
.site-footer a{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px;}
.site-footer h2{font-size:24px;margin-bottom:16px;}
.site-footer h3{font-size:18px;margin-bottom:4px;}
.site-footer p{margin:0;}
.social{display:flex;gap:24px;margin-top:16px;}
.social svg{width:24px;height:24px;fill:#fff;}
.social a:hover svg{fill:var(--red-hover);}
.branch-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;font-size:14px;line-height:1.5;}
.hours{font-size:14px;margin-bottom:24px !important;}
.newsletter label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;}
.newsletter input{width:100%;padding:10px 12px;border:1px solid #b8c0cc;border-radius:10px;font:14px var(--font-body);}
.newsletter .btn{margin-top:12px;}
.form-msg{font-size:14px;margin:8px 0 0;min-height:1.5em;}
.copyright{font-size:12px;margin-top:32px !important;}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .section{padding:32px 0;}
  .about-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .about-copy{grid-column:1 / -1;}
  .about-copy p{margin:4px 0 16px;}
  .about-grid > img{aspect-ratio:158/108;}
  .intro-grid{grid-template-columns:1fr;gap:24px;}
  .intro-text p{font-size:15px;}
  .faq-grid{grid-template-columns:1fr;gap:16px;}
  .faq-item h3{font-size:16px;}
  .testimonial blockquote{font-size:18px;}
  .collage.desktop{display:none;}
  .collage.mobile{display:block;}
  .branches{grid-template-columns:1fr 1fr;}
  .visit .map-wrap{order:1;margin-bottom:24px;}
  .visit .section-heading{order:2;font-size:18px;}
  .visit .branches{order:3;}
  .map-band iframe,.map-wrap iframe{height:240px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-contact{grid-column:1 / -1;order:2;}
  .footer-extra{order:1;}
}

@media (max-width: 600px){
  .site-header .container{flex-direction:column;padding:12px 0;}
  .logo img{width:189px;height:71px;}
  .main-nav{gap:16px;justify-content:center;}
  .main-nav a{font-size:14px;}
  .branches{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .branch-list{grid-template-columns:1fr;}
}