/* Estilos base existentes */
:root{
  --green-dark:#134C44;
  --green:#176155;
  --pink:#EA9CAF;
  --blush:#F8E6EA;
  --fuchsia:#C81F70;
  --text:#3F3F3F;
  --text-light:#6B6B6B;
  --white:#FFFFFF;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(to bottom, var(--blush) 0%, #fff 40%, #fff 60%, var(--blush) 100%);
}
.container{max-width:1100px;margin:0 auto;padding:0 24px}

.hero{
  position:relative;
  padding-bottom:24px;
}
.hero-top-banner{
  width:80%; /* Reducir el ancho para que no ocupe todo el espacio */
  height:auto;
  max-height:60px; /* Mantener la altura reducida */
  object-fit:cover; /* Mantener proporción */
  display:block;
  margin:0 auto; /* Centrar la imagen */
  border-radius:8px; /* Añadir bordes redondeados */
  box-shadow:0 2px 8px rgba(0,0,0,.1); /* Sombra suave */
}

@media (max-width:768px){
  .hero-top-banner{
    width:90%; /* Un poco más ancho en móviles */
    height:auto;
    max-height:60px; /* Misma altura reducida */
    object-fit:cover;
    margin:0 auto;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
  }
}

@media (max-width:480px){
  .hero-top-banner{
    width:95%; /* Casi todo el ancho en pantallas muy pequeñas */
    height:auto;
    max-height:50px; /* Ligeramente más pequeño */
    object-fit:cover;
    margin:0 auto;
    border-radius:4px;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
}
.hero-top-band{
  height:42px;
  background:repeating-linear-gradient(90deg, rgba(234,156,175,.35) 0 40px, rgba(234,156,175,.25) 40px 80px);
  border-bottom:1px solid rgba(234,156,175,.35);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:28px;
  align-items:center;
  padding:32px 0;
}
.hero-media{position:relative}
.pill{
  display:inline-block;
  background:var(--pink);
  color:var(--white);
  font-weight:700;
  border-radius:999px;
  padding:10px 18px;
  box-shadow:var(--shadow);
  font-family:'Nunito',sans-serif;
  margin:-22px 0 8px;
}
.headline{
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:48px;
  line-height:1.1;
  color:var(--green-dark);
  margin:8px 0 16px;
}
.hero-img{
  width:100%;
  max-width:540px;
  border-radius:16px;
  box-shadow:var(--shadow);
  display:block;
}
.hero-content .intro{
  font-size:18px;
  color:var(--text-light);
  margin:6px 0;
}
.hero-content .emphasis{
  font-weight:700;
  color:var(--text);
}
.event-block{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:18px 0 8px;
}
.event-block .day{
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:44px;
  color:var(--green-dark);
  line-height:1;
}
.event-block .date-time{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.event-block .date,
.event-block .time{
  font-weight:700;
  color:var(--green-dark);
}
.limited{
  color:var(--fuchsia);
  font-weight:700;
  letter-spacing:.5px;
  margin:8px 0 16px;
}

.btn{
  display:inline-block;
  border-radius:12px;
  text-decoration:none;
  padding:12px 18px;
  font-weight:700;
  transition:all .2s ease;
}
.btn.primary{
  background:var(--green-dark);
  color:var(--white);
  box-shadow:var(--shadow);
}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{
  color:var(--green-dark);
  border:2px solid rgba(19,76,68,.2);
  background:rgba(255,255,255,.6);
  margin-left:10px;
}
.btn.ghost:hover{border-color:rgba(19,76,68,.35)}

.speakers{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.chip{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--white);
  border-radius:14px;
  padding:8px 12px;
  box-shadow:var(--shadow);
}
.chip img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.chip .name{font-weight:600;color:#222}
.chip .role{font-size:13px;color:var(--text-light)}

.butterflies{
  position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background:
    radial-gradient(20px 12px at 10% 30%, rgba(234,156,175,.25), transparent 70%),
    radial-gradient(18px 10px at 70% 60%, rgba(234,156,175,.25), transparent 70%),
    radial-gradient(16px 10px at 35% 80%, rgba(234,156,175,.25), transparent 70%);
  opacity:.7;
}

.about{padding:40px 0 10px}
.about h2{
  font-family:'Nunito',sans-serif;
  color:var(--green-dark);
  font-size:28px;
  margin:0 0 12px;
  text-align:center;
}
.bullets{margin:10px 0 0 18px}
.bullets li{margin:6px 0;color:var(--text-light)}

.register{padding:28px 0 56px}
.register h2{
  font-family:'Nunito',sans-serif;
  color:var(--green-dark);
  font-size:28px;
  margin:0 0 18px;
  text-align:center;
}
.form{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:20px;
  max-width:640px;
}
.field{margin-bottom:12px}
label{display:block;font-weight:600;margin-bottom:6px;color:#222}
input{
  width:100%;padding:12px;border:1px solid #dcdcdc;border-radius:10px;font-size:16px;
}
.btn.wide{width:100%;margin-top:8px}
.form-note{font-size:13px;color:var(--text-light);margin-top:8px}

/* Consent checkbox styles */
.consent-field{margin-top:14px}
.checkbox-container{display:flex;align-items:flex-start;gap:12px;position:relative}
.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkmark{flex:0 0 20px;height:20px;border:2px solid #dcdcdc;border-radius:4px;background:#fff;box-shadow:var(--shadow);position:relative;margin-top:4px}
.checkbox-container input:checked + .checkmark{background:var(--green-dark);border-color:var(--green-dark)}
.checkbox-container input:checked + .checkmark::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent-text{font-size:14px;line-height:1.5;color:var(--text-light)}
.consent-text a{color:var(--green-dark);text-decoration:underline}

.footer{
  background:linear-gradient(to bottom, rgba(234,156,175,.25), rgba(234,156,175,.45));
  padding:22px 0;
}
.footer .organize{color:#333;margin:0 0 8px}
.footer .logos{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.footer .logos img{height:60px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}

/* Redes sociales en el footer */
.social-links{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;flex-wrap:wrap}
.social-link{text-decoration:none;color:#d63384;font-size:1rem;font-weight:500;transition:all .3s ease;padding:.5rem 1rem;border-radius:2rem;background:rgba(214,51,132,.1)}
.social-link:hover{background:rgba(214,51,132,.2);transform:translateY(-2px)}
@media (max-width:768px){
  .social-links{gap:1rem}
  .social-link{font-size:.9rem;padding:.4rem .8rem}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:16px}
  .headline{font-size:40px}
  .hero-img{max-width:100%}
}

/* Ajuste de tamaño de logos en móviles */
@media (max-width:768px){
  .footer .logos{gap:24px;justify-content:center}
  .footer .logos img{height:60px;max-width:140px}
}

/* Mobile fine-tuning for consent text */
@media (max-width:480px){
  .form{padding:16px}
  .field{margin-bottom:10px}
  .checkbox-container{gap:10px}
  .checkmark{flex:0 0 18px;height:18px;margin-top:3px}
  .consent-text{font-size:13px;line-height:1.45}
  .consent-text a{word-break:break-word}
}

/* Estilos para mensajes de error */
.mensaje-error {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: block;
}

.campo-error {
  border-color: #d32f2f !important;
  background-color: #ffebee !important;
}

.campo-error:focus {
  border-color: #d32f2f !important;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2) !important;
}

/* Estilos base para mejor espaciado */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Mejorar espaciado en dispositivos móviles */
@media (max-width: 768px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .hero-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .hero-media,
  .hero-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .cta-row {
    gap: 1rem;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-row .btn { width: 100%; margin: 0; }
  .speakers { gap: 1rem; }
  .chip { width: 100%; justify-content: center; }
  .event-block { margin-left: 0.5rem; margin-right: 0.5rem; }
  .about .container,
  .register .container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .form { padding-left: 1rem; padding-right: 1rem; }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .hero-grid { padding-left: 0.5rem; padding-right: 0.5rem; }
  .headline { font-size: 2rem; line-height: 1.2; }
  .intro { font-size: 1.1rem; }
  .event-block { margin-left: 0; margin-right: 0; }
  .about .container,
  .register .container { padding-left: 1rem; padding-right: 1rem; }
}

/* Mejorar el espaciado general de la hero section */
.hero { padding: 2rem 0; }
.hero-grid { gap: 2rem; align-items: center; }
/* Asegurar que el contenido no toque los bordes */
.hero-content > * { margin-left: 0.5rem; margin-right: 0.5rem; }
/* Ajuste de espaciado entre botones: convertir contenedor en flex */
.cta-row {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Mejorar área táctil del botón */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* En móviles, apilar y ampliar el espacio entre botones */
@media (max-width: 768px) {
  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem; /* aumentar separación vertical */
  }
  .cta-row .btn {
    width: 100%;
    margin: 0; /* evitar márgenes que reduzcan el gap */
  }
  .btn.ghost { margin-left: 0; } /* corregir desplazamiento lateral en móviles */
}

/* En pantallas muy pequeñas, aún más espacio */
@media (max-width: 480px) {
  .cta-row { gap: 2.5rem; }
  .cta-row .btn { padding: 1rem 1.5rem; }
}
/* Mejorar espaciado de speakers */
.speakers { margin-top: 2rem; gap: 1.5rem; }
/* Asegurar que las imágenes no toquen los bordes */
.hero-img { border-radius: 0.5rem; max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* Mejorar el espaciado del formulario */
.form { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin: 0 auto; max-width: 500px; }
@media (max-width: 768px) { .form { padding: 1.5rem; margin-left: 1rem; margin-right: 1rem; } }
@media (max-width: 480px) { .form { padding: 1.25rem; margin-left: 0.5rem; margin-right: 0.5rem; } }