/* Reset minimal */
:root{
  --white: #FDFDFD;
  --white-2: #FDFDFD;
  --white-3: #FCFCFC;
  --green-bright: #2BA763;
  --green-olive: #7E9D54;
  --turquoise: #0594C4;
  --blue-strong: #006EB3;
  --dark: #372D2A;
  --muted: #6b7280;
  --max-width: 1100px;
  --radius: 12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Accesibilidad: tamaño base legible */
html{font-size:16px}
body{font-family:Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.5;color:var(--dark);background-color:var(--white);-webkit-font-smoothing:antialiased}
/* Fondo creativo: más contundente y moderno con degradado vibrante y blobs definidos */
body{
  background-image:linear-gradient(160deg, rgba(5,148,196,0.06) 0%, rgba(0,110,179,0.05) 40%, rgba(5,148,196,0.04) 100%);
}

body::before{
  content:"";position:fixed;inset:-8% -18% -8% -18%;pointer-events:none;z-index:0;
  background:
    radial-gradient(36rem 28rem at 6% 18%, rgba(5,148,196,0.22), transparent 24%),
    radial-gradient(32rem 26rem at 88% 82%, rgba(0,110,179,0.20), transparent 20%);
  filter:blur(40px);opacity:0.95;transform:translate3d(0,0,0);
  animation:blobFloat 16s ease-in-out infinite;
}

@keyframes blobFloat{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(-6px,-10px,0) scale(1.02) rotate(2deg)}
  100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}
.site-header{background:#fff;border-bottom:1px solid #e6e6e6;position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{display:flex;align-items:center}
.logo .emblem{width:72px;height:72px;border-radius:10px;background:linear-gradient(135deg,var(--turquoise),var(--blue-strong));display:flex;align-items:center;justify-content:center;color:var(--white);font-size:32px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.logo-img{width:72px;height:72px;object-fit:contain;border-radius:10px}
.company-name{font-size:20px;margin-bottom:4px}
.company-name .script{font-family:'Great Vibes', cursive;font-size:26px;color:var(--dark);display:inline-block}
.tagline{font-size:13px;color:var(--muted);letter-spacing:0.6px}
.uppercase{text-transform:uppercase}
.contact-quick{display:flex;gap:12px;align-items:center}
.phone{color:#111;text-decoration:none;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:var(--radius);text-decoration:none;cursor:pointer;border:none;font-size:16px;line-height:1;box-sizing:border-box}
.btn-primary{background:var(--turquoise);color:var(--white);border:none}
.btn-outline{border:1px solid var(--turquoise);color:var(--turquoise);background:transparent}

/* WhatsApp styles */
.whatsapp-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,var(--turquoise), #0097bb);color:var(--white);box-shadow:0 10px 28px rgba(0,165,202,0.18);text-decoration:none;gap:10px}
.whatsapp-link .icon-whatsapp{width:22px;height:22px;display:block}
.whatsapp-link .label{font-weight:600;color:var(--white);font-size:14px}

/* Call button (same shape as whatsapp but blue) */
.call-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,var(--blue-strong), #005a9a);color:var(--white);box-shadow:0 10px 28px rgba(0,110,179,0.18);text-decoration:none;gap:10px}
.call-link .icon-phone{width:22px;height:22px;display:block}
.call-link .label{font-weight:600;color:var(--white);font-size:14px}

/* Icon boxed button to match the WhatsApp square icon in header */
.icon-box{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--turquoise), #0097bb);color:var(--white);box-shadow:0 10px 28px rgba(0,165,202,0.18);text-decoration:none}
.icon-box img{width:26px;height:26px;display:block}
.icon-box .label{font-weight:600;color:var(--white);font-size:14px}

/* phone-specific variant removed: both buttons share same WhatsApp background */

@media (max-width:699px){
  .whatsapp-link .label{display:none}
  /* Hide icon-box labels on small screens to avoid overlap */
  .icon-box .label{display:none}
  /* reduce icon-box size on small screens */
  .icon-box{width:44px;height:44px;padding:8px 10px}
}

/* Floating WhatsApp button */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:80;background:linear-gradient(90deg,#25D366,#1EBE57);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,0.18)}
.whatsapp-float img{width:36px;height:36px}
.btn-cta{background:var(--dark);color:var(--white);border:none}

/* Focus visible for keyboard users */
a:focus, button:focus, .btn:focus{outline:none}
:focus-visible{outline:4px solid rgba(5,148,196,0.14);outline-offset:4px}
.hero{padding:64px 0;background:linear-gradient(120deg,var(--blue-strong) 10%, var(--turquoise) 85%);color:var(--white);position:relative;overflow:visible}
.hero-inner{display:flex;gap:28px;align-items:center;justify-content:space-between}
.hero-text{flex:1;min-width:260px}
.hero-image{flex:1;display:flex;justify-content:center}
.hero-image{flex:1;display:flex;justify-content:center}
.hero-art{max-width:720px;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 30px 80px rgba(2,6,23,0.28);object-fit:cover}
.hero-text h2{font-size:clamp(24px,4.2vw,44px);margin-bottom:12px;color:var(--white);line-height:1.05}
.hero-text p{color:rgba(254,254,254,0.96);margin-bottom:18px;font-weight:500}
.hero .hero-cta{margin-top:6px}
.hero .btn-cta{padding:18px 26px;font-size:20px}
.hero-image{flex:1;display:flex;justify-content:center}
.ambulance-mock{font-size:84px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.card{background:rgba(255,255,255,0.92);backdrop-filter: blur(6px);padding:20px;border-radius:14px;border-left:6px solid rgba(0,165,202,0.12);box-shadow:0 12px 28px rgba(2,6,23,0.08)}
.card h4{color:var(--dark);margin-bottom:8px;font-weight:600}
.card p{color:#334155}
.about, .services, .contact{padding:36px 0}
.contact-form{display:grid;gap:10px;max-width:540px}
.contact-form label{display:block;font-size:14px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #d1d5db}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.form-note{font-size:13px;color:var(--muted);margin-top:8px}
.contact-form.is-sending{opacity:0.9}
.contact-form button[disabled]{opacity:0.6;cursor:not-allowed}
.form-result{margin-top:10px;color:green}
.form-result.success{color:var(--green-bright);font-weight:600}
.form-result.error{color:crimson;font-weight:600}
.form-result.info{color:#0b78a6}
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:20px 0;margin-top:24px;background:var(--white)}
.small{font-size:13px;color:#6b7280}
.form-result{margin-top:10px}
.form-result.success{color:var(--green-bright)}
.form-result.error{color:crimson}

/* Detalles y enlaces */
a {color:var(--blue-strong)}
a:hover{color:var(--turquoise)}

/* Botones y CTAs */
.btn{transition:all .18s ease;text-transform:capitalize}
.btn-primary{background:linear-gradient(90deg,var(--turquoise), #0097bb);color:var(--white);box-shadow:0 10px 28px rgba(0,165,202,0.18);padding:12px 18px;border-radius:12px}
.btn-primary:focus,.btn-primary:hover{filter:brightness(.96);transform:translateY(-2px);outline:4px solid rgba(0,165,202,0.10);outline-offset:4px}
.btn-cta{background:linear-gradient(90deg,var(--blue-strong), #005a9a);color:var(--white);box-shadow:0 12px 40px rgba(0,110,179,0.20);padding:18px 26px;border-radius:12px;font-size:20px}
.btn-cta:focus,.btn-cta:hover{filter:brightness(.96);transform:translateY(-2px);outline:4px solid rgba(0,110,179,0.10);outline-offset:4px}
.btn-outline{border:1px solid var(--turquoise);color:var(--turquoise);background:transparent}

/* Header accents */
.site-header{background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(2,6,23,0.06);box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.site-header::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--turquoise),var(--blue-strong));border-bottom-left-radius:6px;border-bottom-right-radius:6px}

/* Usar el logo como fondo grande en la franja del header (marca de agua) en pantallas grandes */
.site-header{position:relative;overflow:visible}
.site-header::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-repeat:no-repeat;background-position:left center;background-size:720px auto;opacity:0.08}

/* Mostrar el logo como fondo solo en pantallas anchas y ocultar la imagen inline para evitar duplicidad */
@media (min-width:1000px){
  /* Mostrar logo grande en pantallas anchas; marca de agua más sutil */
  .site-header::after{background-image:url("/assets/images/logo-sin-fondo.png");background-position:left 80px center;background-size:900px auto;opacity:0.03}
  .logo-img{display:block;width:220px;height:220px;border-radius:14px}
  .header-inner{position:relative;z-index:20;padding-left:320px}
}

/* En móvil mantenemos el logo inline visible y más pequeño */
@media (max-width:699px){
  .site-header::after{background-image:none}
  .logo-img{display:block}
}

/* Logo image: si es PNG con transparencia, no forzar fondo */
.logo-img{width:220px;height:220px;object-fit:contain;border-radius:12px;background:transparent;display:block}
.brand{gap:18px;align-items:center}
.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}
.brand{align-items:center}

/* Fondo y secciones con tono corporativo suave */
body::after{
  /* sutil textura adicional para profundidad */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 10% 10%, rgba(0,165,202,0.02), transparent 18%), radial-gradient(circle at 90% 90%, rgba(0,110,179,0.015), transparent 16%);
}

.section--muted{background:linear-gradient(180deg,rgba(0,165,202,0.03),rgba(0,110,179,0.02));}

.services{padding:48px 0}
.services .cards .card{border-left:4px solid rgba(0,165,202,0.12);padding-left:14px}

.about{padding:44px 0;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}

.about .lead{font-size:18px;font-weight:600;margin-bottom:10px}
.about p{max-width:900px;text-align:justify;color:#3b2f2c;line-height:1.6}

.contact{padding:40px 0}

/* Footer más moderno */
.site-footer{background:linear-gradient(180deg,var(--white),rgba(0,110,179,0.02));}

/* Pequeños refinamientos */
.company-name .script{letter-spacing:0.2px}
.contact-quick .phone{display:inline-block;padding:6px 8px;border-radius:8px;background:rgba(5,148,196,0.06);color:var(--dark);font-weight:600}
.contact-quick .phone + .phone{margin-left:8px}

/* Asegurar que overlays y z-index no oculten contenido principal */
.site-header, .site-footer, main{position:relative;z-index:10}
/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column}
  .hero{padding:40px 0}
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:640px){
  .hero-art{max-width:100%;height:auto;border-radius:10px}
  .logo-img{width:96px;height:96px}
}