/* =============================================================================
   SEGURJURÍDICA MEDIACIONES — HOJA DE ESTILOS MAESTRA
   Colores extraídos del logo corporativo · Tipografía Poppins
   Compatible con todas las páginas del sitio (navbar, hero, tarjetas, footer…)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* ----- Paleta de marca (del logo) ----- */
  --navy:        #003F7E;   /* azul marino "SEGURJURÍDICA" */
  --navy-dark:   #002C58;
  --navy-light:  #1B4870;
  --cyan:        #4FB0D0;   /* cian del icono estetoscopio-corazón */
  --cyan-dark:   #2F95B5;
  --cyan-soft:   #E8F5FA;

  /* ----- Neutros ----- */
  --gray-100: #F4F8FB;
  --gray-200: #DCE7EF;
  --gray-500: #6B7888;
  --gray-900: #0F1B2A;
  --white: #ffffff;
  --text: #324155;

  /* ----- Sistema ----- */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,63,126,0.08);
  --shadow-lg: 0 18px 50px rgba(0,63,126,0.16);
  --max: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--text);
  line-height:1.65;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

.container{ max-width:var(--max); margin:0 auto; padding:0 22px; }

h1,h2,h3,h4{ color:var(--navy); font-weight:800; line-height:1.2; letter-spacing:-0.01em; }
h2{ font-size:2rem; }
h3{ font-size:1.2rem; margin-bottom:8px; }
p{ margin-bottom:1rem; }
a{ color:var(--navy); }
strong{ color:var(--navy); font-weight:600; }
/* En fondos oscuros, el texto en negrita debe ser blanco para que se lea */
.hero strong, .hero-product strong, .footer strong, .cta-band strong{ color:#fff; }
/* Cobertura para secciones oscuras creadas con estilos en línea (solo cuando navy es FONDO) */
[style*="background:linear-gradient(135deg,var(--navy)"] strong,
[style*="background-color: var(--navy)"] strong,
[style*="background-color:var(--navy)"] strong,
[style*="background-color: var(--navy-dark)"] strong,
[style*="background:var(--navy-dark)"] strong,
[style*="background-color: var(--navy-light)"] strong,
[style*="background-color:var(--navy-light)"] strong{ color:#fff; }
ul,ol{ margin-bottom:1rem; }

/* =========================== NAVBAR =========================== */
.navbar{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gray-200);
  position:sticky; top:0; z-index:100;
}
.navbar-inner{
  max-width:var(--max); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.navbar-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.navbar-logo-img{ height:48px; width:auto; display:block; }
.navbar-logo-text{ font-weight:800; color:var(--navy); font-size:1.15rem; letter-spacing:-0.02em; }
.navbar-toggle{ display:none; }
.navbar-links{ display:flex; align-items:center; gap:26px; }
.nav-link{
  text-decoration:none; color:var(--navy); font-weight:500; font-size:.95rem;
  transition:color .2s ease;
}
.nav-link:hover{ color:var(--cyan-dark); }

/* =========================== BOTONES =========================== */
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:1rem;
  padding:13px 26px; border-radius:999px; cursor:pointer; border:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-align:center;
}
.btn-cyan{ background:var(--cyan); color:var(--navy-dark); box-shadow:var(--shadow); }
.btn-cyan:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); background:var(--cyan-dark); color:#fff; }
.btn-secondary{ background:transparent; color:var(--navy); border:1.5px solid var(--gray-200); }
.hero .btn-secondary, .hero-product .btn-secondary{ color:#fff; border-color:rgba(255,255,255,0.5); }
.btn-secondary:hover{ border-color:var(--cyan); transform:translateY(-2px); }

/* =========================== HERO (home) =========================== */
.hero{
  background:
    radial-gradient(1100px 500px at 90% -10%, rgba(79,176,208,0.12), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:80px 0;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
.hero-content h1{ color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:18px; }
.hero-content h1 em{ font-style:normal; color:var(--cyan); }
.eyebrow{
  display:inline-block; background:rgba(79,176,208,0.18); color:var(--cyan);
  font-weight:600; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px; margin-bottom:20px;
}
.hero-subtitle{ font-size:1.15rem; color:rgba(255,255,255,0.85); margin-bottom:30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-image img{ width:100%; }

/* =========================== HERO PRODUCTO (subpáginas) =========================== */
.hero-product{ background-color:var(--navy); color:#fff; padding:80px 0; }
.hero-product h1{ color:#fff; }

/* =========================== TRUST BAND =========================== */
.trust-band{ background:var(--cyan-soft); padding:22px 0; text-align:center; }
.trust-band p{ margin:0; color:var(--navy); font-size:1.02rem; }

/* =========================== SERVICIOS / TARJETAS =========================== */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.service-card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:24px; transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* =========================== FORMULARIOS =========================== */
label{ display:block; margin-bottom:6px; font-weight:600; color:var(--navy); font-size:.92rem; }
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--gray-200); border-radius:8px;
  font-family:inherit; font-size:.95rem; color:var(--text); background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(79,176,208,0.15);
}
.contact-grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:60px; }
.contact-form-card{
  background:#fff; padding:40px; border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05); border:1px solid var(--gray-200);
}
.contact-form{ display:grid; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-status{ margin:0 0 20px; padding:14px; border-radius:8px; font-size:.95rem; text-align:center; }
.form-status-success{ background:#E8F5EE; color:#1B7F4B; }
.form-status-error{ background:#FDECEC; color:#A3261F; }
.hp-field{
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================== FOOTER =========================== */
.footer{ background:var(--gray-900); color:#fff; padding:34px 0; font-size:.85rem; }
.footer .container{ opacity:0.75; }
.footer a{ color:var(--cyan); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* =========================== PÁGINAS LEGALES =========================== */
.legal-page{ background:var(--gray-100); }
.legal-page .container{ max-width:820px; background:#fff; border:1px solid var(--gray-200);
  border-radius:16px; box-shadow:var(--shadow); margin-top:40px; margin-bottom:40px; }
.legal-page h1{ font-size:2.2rem; margin-bottom:8px; }
.legal-page h2{ font-size:1.3rem; margin:34px 0 12px; padding-top:20px; border-top:1px solid var(--gray-200); }
.legal-page section:first-of-type h2{ border-top:none; padding-top:0; }
.legal-meta{ color:var(--gray-500); font-size:.9rem; margin-bottom:10px; }
.legal-page code{ background:var(--cyan-soft); padding:2px 7px; border-radius:5px; color:var(--navy); font-size:.9em; }
.legal-page ul{ padding-left:22px; }
.legal-page li{ margin-bottom:8px; }

/* =========================== BOTÓN FLOTANTE WHATSAPP =========================== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:58px; height:58px;
  display:grid; place-items:center;
  transition:transform .2s ease;
}
.wa-float img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,0.25));
}
.wa-float:hover{ transform:scale(1.08); }

/* =========================== COOKIES =========================== */
.cookie-banner{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:400;
  background:#fff; border:1px solid var(--gray-200); border-radius:18px;
  box-shadow:0 18px 60px rgba(15,27,42,.2); padding:22px;
}
.cookie-banner-content{
  max-width:var(--max); margin:0 auto; display:flex; gap:28px;
  align-items:center; justify-content:space-between;
}
.cookie-banner h2{ font-size:1.25rem; margin-bottom:6px; }
.cookie-banner p{ margin:0 0 8px; font-size:.92rem; max-width:700px; }
.cookie-banner a{ font-size:.88rem; font-weight:600; }
.cookie-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; flex-shrink:0; }
.cookie-actions .btn, .cookie-panel-actions .btn{ padding:10px 18px; font-size:.92rem; }
.cookie-settings-link{
  position:fixed; left:18px; bottom:18px; z-index:250;
  background:#fff; color:var(--navy); border:1px solid var(--gray-200);
  border-radius:999px; padding:8px 14px; font:600 .78rem 'Poppins', system-ui, sans-serif;
  cursor:pointer; box-shadow:var(--shadow);
}
.cookie-overlay{
  position:fixed; inset:0; z-index:410; background:rgba(15,27,42,.45);
}
.cookie-panel{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:420;
  background:#fff; border-radius:18px; box-shadow:0 22px 65px rgba(15,27,42,.3);
  width:min(560px, calc(100% - 36px)); padding:26px;
}
.cookie-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cookie-panel-head h2{ font-size:1.45rem; margin-bottom:12px; }
.cookie-close{
  border:0; background:transparent; color:var(--gray-500); font-size:1.8rem;
  cursor:pointer; line-height:1; padding:0 4px;
}
.cookie-option{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  border:1px solid var(--gray-200); border-radius:12px; padding:16px; margin:14px 0;
}
.cookie-option strong{ display:block; margin-bottom:3px; }
.cookie-option p{ margin:0; font-size:.84rem; color:var(--gray-500); }
.cookie-option input{ width:20px; height:20px; flex-shrink:0; }
.cookie-panel-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cookie-manager-open{ overflow:hidden; }

/* =========================== ANIMACIÓN =========================== */
@keyframes rise{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none; } }
.reveal{ animation:rise .6s ease both; }

/* =========================== RESPONSIVE =========================== */
@media (max-width:860px){
  .container[style*="padding:"],
  section.container[style*="padding:"]{
    padding-left:22px !important;
    padding-right:22px !important;
  }
  /* Las composiciones de contenido definidas en línea pasan a lectura vertical. */
  [style*="grid-template-columns"]:not([style*="60px 1fr"]){
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-image{ order:-1; }
  .hero-product h1[style]{ font-size:clamp(2rem,10vw,2.4rem) !important; }
  .navbar-inner{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
    padding:12px 16px;
  }
  .navbar-logo{ justify-content:flex-start; }
  .navbar-logo-img{ height:42px; max-width:100%; }
  .navbar-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:42px; border:1px solid var(--gray-200); border-radius:8px;
    color:var(--navy); background:var(--gray-100); cursor:pointer;
  }
  .navbar-toggle-icon,
  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after{
    display:block; width:22px; height:2px; border-radius:2px;
    background:currentColor; transition:transform .2s ease, opacity .2s ease;
  }
  .navbar-toggle-icon{ position:relative; }
  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after{ content:""; position:absolute; left:0; }
  .navbar-toggle-icon::before{ top:-7px; }
  .navbar-toggle-icon::after{ top:7px; }
  .navbar.is-open .navbar-toggle-icon{ background:transparent; }
  .navbar.is-open .navbar-toggle-icon::before{ transform:translateY(7px) rotate(45deg); }
  .navbar.is-open .navbar-toggle-icon::after{ transform:translateY(-7px) rotate(-45deg); }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .navbar-links{
    grid-column:1 / -1;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px; width:100%;
  }
  .navbar.navbar-enhanced .navbar-links{ display:none; }
  .navbar.navbar-enhanced.is-open .navbar-links{ display:grid; }
  .navbar-links .nav-link{
    display:flex; align-items:center; justify-content:center;
    min-height:42px; padding:8px 4px; border-radius:8px;
    background:var(--gray-100); font-size:.8rem; text-align:center;
  }
  .navbar-links .btn{
    display:flex; align-items:center; justify-content:center;
    min-height:42px; padding:8px 4px; width:100%;
    border-radius:8px; font-size:.8rem; box-shadow:none;
  }
  .navbar-links .btn:hover{ transform:none; }
  .contact-grid, .form-row{ grid-template-columns:1fr; }
  .contact-grid{ gap:36px; }
  .contact-form-card{ padding:26px 20px; }
  .cookie-banner{ left:10px; right:10px; bottom:10px; padding:18px; }
  .cookie-banner-content{ display:block; }
  .cookie-actions{ justify-content:stretch; margin-top:16px; }
  .cookie-actions .btn{ flex:1 1 auto; }
  .cookie-panel{ padding:20px; }
  .cookie-panel-actions .btn{ width:100%; }
  h2{ font-size:1.6rem; }
}