/* Cubiertas Coruña - Landing Page Styles */

/* Reset y base */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --hdr: 72px; }

body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header{
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color:#fff; padding: 1rem 0;
  position: fixed; width: 100%; top: 0; left: 0; z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.nav-container{
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: nowrap;
}
.logo h1{ font-size: 1.8rem; font-weight: bold; color:#fff; }

.nav-menu{ display:flex; list-style:none; gap:2rem; }
.nav-menu a{ color:#fff; text-decoration:none; font-weight:500; transition: color .3s ease; }
.nav-menu a:hover{ color:#f39c12; }

.cta-phone{ flex-shrink:0; }
.phone-btn{
  background:#e74c3c; color:#fff; padding:.7rem 1.5rem; border-radius:25px; text-decoration:none; font-weight:bold;
  transition: background .3s ease; display:inline-flex; align-items:center; gap:.4rem; white-space: nowrap;
}
.phone-btn:hover{ background:#c0392b; }

/* Hero */
.hero{
  background: linear-gradient(rgba(44,62,80,.8), rgba(52,152,219,.8)),
  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%232c3e50" width="1200" height="400"/><path fill="%233498db" opacity="0.3" d="M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,154.7C672,149,768,171,864,186.7C960,203,1056,213,1152,208C1248,203,1344,181,1392,170.7L1440,160L1440,400L1392,400C1344,400,1248,400,1152,400C1056,400,960,400,864,400C768,400,672,400,576,400C480,400,384,400,288,400C192,400,96,400,48,400L0,400Z"/></svg>');
  background-size: cover; background-position: center; color:#fff;
  min-height: calc(100svh - var(--hdr));
  padding: calc(var(--hdr) + 20px) 0 80px;
  text-align:center; display:flex; align-items:center;
}
.hero-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.hero h1{ font-size:3.2rem; margin-bottom:1rem; text-shadow:2px 2px 4px rgba(0,0,0,.3); }
.hero-subtitle{ font-size:1.4rem; margin-bottom:1.2rem; opacity:.95; }

.hero-features{
  display:flex; justify-content:center; gap:2rem; margin:1.2rem 0 0; flex-wrap:wrap;
}
.feature-item{
  display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1);
  padding:1rem 1.5rem; border-radius:25px; backdrop-filter: blur(10px);
}
.feature-item i{ color:#f39c12; font-size:1.2rem; }

/* Botones */
.hero-cta{ margin-top:1rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn{
  padding:1rem 2rem; border:none; border-radius:30px; font-size:1.1rem; font-weight:bold; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; transition: all .3s ease; cursor:pointer;
}
.btn-primary{ background:#e74c3c; color:#fff; }
.btn-primary:hover{ background:#c0392b; transform: translateY(-2px); box-shadow:0 5px 15px rgba(231,76,60,.4); }
.btn-secondary{ background:transparent; color:#fff; border:2px solid #fff; }
.btn-secondary:hover{ background:#fff; color:#2c3e50; }

/* Servicios */
.services{ padding:80px 0; background:#fff; }
.section-title{ text-align:center; font-size:2.5rem; color:#2c3e50; margin-bottom:1rem; }
.section-subtitle{ text-align:center; font-size:1.2rem; color:#7f8c8d; margin:0 auto 3rem; max-width:600px; }
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; margin-top:3rem; }
.service-card{
  background:#fff; padding:2rem; border-radius:15px; text-align:center; box-shadow:0 5px 20px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease; border-top:4px solid #3498db;
}
.service-card:hover{ transform: translateY(-10px); box-shadow:0 15px 40px rgba(0,0,0,.15); }
.service-icon{ width:80px; height:80px; background:linear-gradient(135deg,#3498db,#2c3e50); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; }
.service-icon i{ font-size:2rem; color:#fff; }
.service-card h3{ font-size:1.5rem; color:#2c3e50; margin-bottom:1rem; }
.service-card p{ color:#7f8c8d; line-height:1.6; }

/* Testimonios */
.testimonials{ padding:80px 0; background:#f8f9fa; }
.testimonials-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:2rem; margin-top:3rem; }
.testimonial-card{ background:#fff; padding:2rem; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,.1); position:relative; }
.testimonial-card::before{ content:'"'; position:absolute; top:-10px; left:20px; font-size:4rem; color:#3498db; opacity:.3; }
.stars{ color:#f39c12; margin-bottom:1rem; }
.testimonial-card p{ font-style:italic; margin-bottom:1.5rem; color:#555; }
.testimonial-author strong{ color:#2c3e50; display:block; }
.testimonial-author span{ color:#7f8c8d; font-size:.9rem; }

/* Contacto */
.contact{ padding:80px 0; background:#fff; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:4rem; margin-top:3rem; }
.contact-info h3, .contact-form h3{ color:#2c3e50; margin-bottom:2rem; font-size:1.8rem; }
.contact-item{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:2rem; }
.contact-item i{ color:#3498db; font-size:1.5rem; margin-top:.2rem; }
.contact-item a{ color:#3498db; text-decoration:none; }
.contact-item a:hover{ text-decoration:underline; }
.contact-form{ background:#f8f9fa; padding:2rem; border-radius:15px; }
.form-group{ margin-bottom:1.5rem; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:1rem; border:2px solid #e9ecef; border-radius:8px; font-size:1rem; transition: border-color .3s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:#3498db; }
.btn-full{ width:100%; justify-content:center; }
.form-msg{ margin-top:12px; font-size:.95rem; }

/* Mapa */
.map-section{ background:#f8f9fa; padding:60px 0 0; }
.map-wrap{
  width:100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  background:#eaeef2;
}
.map-wrap iframe{
  width:100%; height:100%; border:0; display:block;
}
.map-links{ padding:14px 20px 40px; }
.map-btn{
  display:inline-block; background:#2c3e50; color:#fff; text-decoration:none; padding:.7rem 1rem; border-radius:10px; font-weight:700;
}
.map-btn:hover{ opacity:.9; }

/* Footer */
.footer{ background:#2c3e50; color:#fff; padding:3rem 0 1rem; }
.footer-content{ display:grid; grid-template-columns: 2fr 1fr; gap:3rem; margin-bottom:2rem; }
.footer-section h3{ margin-bottom:1rem; color:#3498db; }
.footer-section h4{ margin-bottom:1rem; color:#fff; }
.footer-section a{ color:#bdc3c7; text-decoration:none; }
.footer-section a:hover{ color:#3498db; }
.rating{ margin-top:1rem; color:#f39c12; }
.rating span{ color:#bdc3c7; margin-left:.5rem; }
.footer-bottom{ text-align:center; padding-top:2rem; border-top:1px solid #34495e; color:#bdc3c7; }

/* WhatsApp flotante */
.whatsapp-float{ position:fixed; bottom:20px; right:20px; z-index:1000; }
.whatsapp-float a{
  display:flex; align-items:center; justify-content:center; width:60px; height:60px; background:#25d366; border-radius:50%;
  color:#fff; font-size:2rem; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,.4); transition: transform .3s ease;
}
.whatsapp-float a:hover{ transform: scale(1.1); }

/* Responsive */
@media (max-width: 768px){
  :root{ --hdr: 58px; }
  .header{ padding:.6rem 0; }
  .logo h1{ font-size:1.3rem; }
  .nav-menu{ display:none; }
  .phone-btn{ padding:.5rem .9rem; font-size:.95rem; }
  .nav-container{ gap:.5rem; }

  .hero{ padding: calc(var(--hdr) + 8px) 0 28px; }
  .hero h1{ font-size: clamp(2rem, 5.5vw, 2.2rem); margin-bottom:.6rem; }
  .hero-subtitle{ font-size:1rem; margin-bottom:.9rem; }

  .hero-cta{ margin-top:.9rem; gap:.6rem; }
  .btn{ padding:.7rem 1rem; font-size:1rem; border-radius:24px; }
  .btn-secondary{ border-width:1.5px; }

  .hero-features{ gap:.6rem; margin:1rem 0 0; }
  .feature-item{ padding:.5rem .8rem; border-radius:18px; }

  .contact-grid{ grid-template-columns: 1fr; gap:2rem; }
  .footer-content{ grid-template-columns: 1fr; gap:2rem; }
  .services-grid{ grid-template-columns: 1fr; }
  .testimonials-grid{ grid-template-columns: 1fr; }

  .map-wrap{ min-height: 320px; }
}

/* ===== Mapa + Ficha (parte baja) ===== */
.map-info-section{ background:#f8f9fa; padding:60px 0; }
.map-info-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: stretch;
}
.map-col{ min-width: 0; }
.map-embed{
  width:100%;
  aspect-ratio: 21 / 9;     /* similar a 21:9 del ejemplo */
  min-height: 360px;
  background:#eaeef2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

.info-col{ display:flex; }
.biz-card{
  background:#fff;
  border-radius:14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  width:100%;
}
.biz-card-body{ padding: 20px 22px; }
.biz-title{ font-size:1.25rem; margin: 4px 0 6px; color:#2c3e50; }
.biz-area{ margin:0 0 6px; color:#6b7280; }
.biz-phone{ margin:0 0 18px; }
.biz-phone a{ color:#2c3e50; text-decoration:none; font-weight:700; }
.biz-phone a:hover{ text-decoration:underline; }

/* botón pequeño, estilo “warning” del ejemplo pero con tu estética */
.biz-btn{
  display:inline-block;
  background:#f39c12;
  color:#2c3e50;
  padding:.6rem .9rem;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
}
.biz-btn:hover{ filter: brightness(0.95); }

.map-link{
  display:inline-block;
  margin-left:12px;
  color:#3498db;
  text-decoration:none;
  font-weight:600;
}
.map-link:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 992px){
  .map-info-grid{ grid-template-columns: 1fr; }
  .map-embed{ aspect-ratio: 16 / 9; min-height: 320px; }
}