/* ======================= css/styles.css ======================= */
/* =============== THEME =============== */
:root{
  --red:#c01818;
  --dark:#1a1a1a;
  --gray:#f3f4f6;
  --white:#fff;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--dark);
  background:#fff;
  line-height:1.5;
}
a{color:var(--red);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* =============== HEADER =============== */
.site-header{background:var(--red);color:#fff;position:sticky;top:0;z-index:50}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;min-height:70px;gap:16px
}
.logo{font-weight:700;color:#fff;font-size:1.1rem}
.main-nav{display:flex;align-items:center;gap:18px}
.main-nav a{color:#fff}
.main-nav .cta{
  padding:8px 14px;background:#fff;color:var(--red);
  border-radius:999px;font-weight:600;white-space:nowrap
}

/* Banderitas idioma */
.lang-switch{display:flex;align-items:center;gap:10px;margin-left:8px}
.lang-switch img{width:22px;height:22px;display:block;border-radius:4px}

/* Burger (móvil) */
.nav-toggle{
  display:none;background:transparent;border:none;width:38px;height:30px;cursor:pointer
}
.nav-toggle-bar{display:block;height:3px;margin:4px 0;background:#fff;border-radius:3px}

/* Responsive header */
@media (max-width:820px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:60px 0 auto 0;background:var(--red);
    display:none;flex-direction:column;gap:14px;padding:14px 16px
  }
  .main-nav.open{display:flex}
  .lang-switch{margin-left:0}
}

/* =============== PROMO FIN DE AÑO =============== */
.promo{position:relative;background:#111;color:#fff;padding:10px 0}
.promo .container{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center
}
.promo .badge{background:#ffd60a;color:#111;font-weight:700;padding:6px 10px;border-radius:999px}
.promo .btn-white{
  background:#fff;color:#c01818;padding:8px 12px;border-radius:10px;font-weight:700;text-decoration:none
}

/* =============== HERO (2 columnas) =============== */
.hero{background:var(--gray);padding:56px 0}
.hero-grid{display:grid;grid-template-columns:460px 1fr;gap:28px;align-items:center}

/* Regla original para FOTO grande del hero */
.hero-media img{
  width:100%;height:420px;object-fit:cover;border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);background:#ddd;font-size:0;color:transparent
}

/* FIX: cuando el hero muestra el LOGO, NO usar la altura 420px */
.hero-media img.hero-logo{
  height:auto;max-height:240px;
  width:auto;max-width:100%;
  box-shadow:none;border-radius:0;background:transparent
}

.hero-copy h1{font-size:2.2rem;margin:0 0 10px}
.hero-copy h1 span{opacity:.95;font-weight:700}
.hero-copy p{max-width:640px;opacity:.95}
.hero .hero-actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer}
.btn-primary{background:#c01818;color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{border:2px solid var(--red);color:var(--red)}
.btn-secondary:hover{background:#fff}

/* =============== INTRO =============== */
.intro{padding:40px 0;background:#fff}
.intro .box{
  background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.05)
}
.intro h2{margin:0 0 10px;text-align:center}
.intro p{margin:8px 0;color:#444}
.intro .key{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.callout{background:var(--gray);border-radius:12px;padding:10px 12px;color:#333}

/* =============== CARDS =============== */
.cards{padding:56px 0;background:#fff}
.cards h2{margin:0 0 24px;text-align:center}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

/* Tamaños ORIGINALES restaurados */
.card{
  background:#fff;border:1px solid #eee;border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.card img{
  width:100%;height:180px; /* tamaño original */
  object-fit:cover;font-size:0;color:transparent;transition:transform .25s ease
}
.card h3{margin:12px 16px 8px}
.card p{margin:0 16px 8px;color:#444}
.card .link{display:inline-block;color:var(--red);font-weight:600}
.card-actions{display:flex;gap:14px;align-items:center;margin:8px 16px 16px}

/* Interacción hover */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 16px 32px rgba(0,0,0,.12);
    border-color:#e5e7eb
  }
  .card:hover img{transform:scale(1.04)}
}
.card:focus-within{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 16px 32px rgba(0,0,0,.12);
  border-color:#e5e7eb;outline:none
}
.card a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.card,.card img{transition:none}}

/* =============== FAQS =============== */
.faqs{padding:56px 0;background:var(--gray)}
.faqs h2{margin-top:0;text-align:center}
details{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600}

/* =============== CONTACTO =============== */
.contact{padding:56px 0;background:#fff}
.contact h2{text-align:center}
.contact-form{background:var(--gray);padding:16px;border-radius:var(--radius);text-align:center}
.contact-form .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.contact-form input,.contact-form textarea{
  width:100%;max-width:480px;padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff;margin:6px 0
}
.contact-form .row > *{flex:1;min-width:220px}
.contact-form button{display:inline-block;margin-top:12px}
.rgpd{margin:12px 0;font-size:.9rem;color:#444;display:flex;justify-content:center;align-items:center;gap:6px}
.rgpd input[type="checkbox"]{width:16px;height:16px;accent-color:var(--red)}
.rgpd a{color:var(--red);text-decoration:underline}
.contact-data{margin-top:12px;color:#444;text-align:center}

/* =============== FOOTER =============== */
.site-footer{background:#111;color:#bbb;padding:18px 0;text-align:center}
.site-footer a{color:#bbb;margin-left:12px}

/* =============== MODAL =============== */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:20px;z-index:1000
}
.modal.open{display:flex}
.modal-dialog{
  background:#fff;border-radius:16px;max-width:640px;width:100%;
  padding:20px 20px 24px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.2)
}
.modal-dialog h3{margin:0 0 8px}
.modal-dialog p{margin:0 0 8px;color:#444}
.modal-dialog ul{margin:8px 0 16px 18px}
.modal-close{
  position:absolute;top:8px;right:10px;border:none;background:transparent;
  font-size:26px;line-height:1;cursor:pointer;color:#666
}

/* =============== RESPONSIVE TWEAKS =============== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:380px 1fr}
  .hero-media img:not(.hero-logo){height:360px}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-copy h1{font-size:1.9rem}
  .hero-media img:not(.hero-logo){height:320px}
}
@media (max-width:600px){
  .hero{padding:40px 0}
  .intro .key{grid-template-columns:1fr}
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  min-width: 260px;
  max-width: 92vw;
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.35;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast.success { background: #16a34a; }
.toast.error   { background: #b91c1c; }
.toast .close {
  margin-left: 8px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.toast .icon { font-size: 18px; line-height: 1; }

/* Mensaje inline del form */
.form-message{
  display:none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.form-message.is-ok{
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
}
.form-message.is-error{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}