body{
font-family: Arial, sans-serif;
background:#f4f4f4;
text-align:center;
padding:40px;
position:relative;
overflow-x:hidden;
}

/* FONDO DECORATIVO */

body::before{
content:"";
position:absolute;
top:-120px;
left:-180px;
width:350px;
height:350px;
background:#6366f1;
opacity:0.2;
border-radius:50%;
z-index:-1;
}

body::after{
content:"";
position:absolute;
bottom:540px;
right:0px;
width:380px;
height:380px;
background:#22c55e;
opacity:0.2;
border-radius:50%;
z-index:-1;
}

/* CONTENEDOR */

.container{
background:white;
padding:35px;
border-radius:12px;
max-width:600px;
margin:auto;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
text-align:center;
}

/* INPUTS */

input, select, textarea{
  width:100%;
  max-width:100%;
  padding:12px;
  margin:10px 0;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
  transition:border 0.2s;
  display:block;
  box-sizing:border-box; /* 🔥 CLAVE */
}

input[type="radio"]{
width:auto;
}

textarea{
resize:none;
}

input:focus, textarea:focus{
outline:none;
border:1px solid #007bff;
}

/* BOTONES */

button{
padding:12px 20px;
margin:15px auto;
background:#007bff;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
transition:all 0.2s;
font-weight:600;
display:block;
}

button:hover{
background:#0056b3;
transform:translateY(-1px);
}

/* LINKS EVENTO */

.link-box{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
background:#f0f2f5;
padding:12px;
margin-top:10px;
border-radius:6px;
word-break:break-all;
font-size:14px;
font-weight:600;
color:#333;
}

/* copiar */

.copiar{
cursor:pointer;
font-size:18px;
padding:4px 7px;
border-radius:5px;
transition:background 0.2s;
}

.copiar:hover{
background:#e0e0e0;
}

/* mensaje copiado */

#mensajeCopiado{
margin-top:10px;
color:#28a745;
font-weight:600;
opacity:0;
transition:opacity 0.3s;
}

/* PREGUNTAS */

.pregunta-box{
margin-top:20px;
}

.pregunta-invitado{
margin-top:30px;
text-align:center;
}

.pregunta-invitado h3{
margin-bottom:12px;
color:#333;
}

/* OPCIONES RESPUESTA */

.opcion{
display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
padding:12px 16px;
margin:8px auto;
background:#f6f6f6;
border:1px solid #ddd;
border-radius:8px;
cursor:pointer;
transition:0.2s;
width:85%;
}

.opcion:hover{
background:#eeeeee;
}

.opcion input[type="radio"]{
margin:0;
}

.opcion p{
margin:0;
font-size:14px;
}

/* TITULOS */

h2{
margin-bottom:20px;
}

h3{
margin-top:20px;
color:#444;
}

/* PANEL ORGANIZADOR */

.pregunta-panel{
margin-top:30px;
text-align:center;
}

.columnas{
display:flex;
gap:20px;
margin-top:10px;
justify-content:center;
}

.columna{
flex:1;
background:#f8f9fa;
border-radius:8px;
padding:10px;
border:1px solid #e6e6e6;
}

.columna h4{
text-align:center;
margin-bottom:10px;
}

.persona{
background:white;
border-radius:6px;
padding:6px;
margin:5px 0;
text-align:center;
font-size:14px;
box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

.vacio{
text-align:center;
color:#999;
padding:10px;
}

/* MENSAJES */

.mensaje{
margin-top:15px;
font-weight:600;
padding:10px;
border-radius:6px;
transition:all 0.3s;
}

.mensaje.ok{
background:#e9f7ef;
color:#2e7d32;
}

.mensaje.error{
background:#fdecea;
color:#c62828;
}

/* DUDAS */

.dudas-container{
margin-top:25px;
text-align:left;
}

.duda-item{
background:#fff8e1;
border:1px solid #ffe082;
padding:10px;
border-radius:6px;
margin:8px 0;
font-size:14px;
}

/* FOOTER */

.footer{
margin-top:60px;
background:#1f2229;
color:white;
padding:40px 20px;
}

.footer-container{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
}

.footer-col h4{
margin-bottom:15px;
font-size:14px;
color:#c9c9c9;
}

.footer-col a{
display:block;
color:#fff;
text-decoration:none;
font-size:14px;
margin:6px 0;
opacity:0.85;
}

.footer-col a:hover{
opacity:1;
}

.footer-bottom{
text-align:center;
margin-top:30px;
font-size:13px;
color:#aaa;
}

/* OTROS */

.oculto{
display:none;
}

.actualizando{
color:#ff3b3b;
font-weight:bold;
margin-bottom:15px;
}

.loading{
text-align:center;
padding:30px;
color:#666;
font-size:16px;
}

/* BANNER COOKIES */

.cookie-banner{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#1f2229;
color:white;
padding:20px;
z-index:9999;
box-shadow:0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-content{
max-width:900px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.cookie-content p{
margin:0;
font-size:14px;
}

.cookie-content a{
color:#4da3ff;
text-decoration:underline;
}

.cookie-buttons{
display:flex;
gap:10px;
}

.cookie-aceptar{
background:#22c55e;
border:none;
padding:10px 16px;
border-radius:6px;
color:white;
font-weight:600;
cursor:pointer;
}

.cookie-aceptar:hover{
background:#16a34a;
}

.cookie-rechazar{
background:#444;
border:none;
padding:10px 16px;
border-radius:6px;
color:white;
cursor:pointer;
}

.cookie-rechazar:hover{
background:#666;
}

.error-msg {
  color: red;
  font-size: 13px;
  margin-top: 5px;
  display: none;
}

.input-error {
  border: 2px solid red;
}

.logo{
  position: absolute;
  top: -10px;
  left: -30px;
  width: 220px;
  height: auto;
  z-index: 1000;
  display: block;
  cursor: pointer;
}

.pregunta-header{
  position: relative;
}

.borrar-pregunta{
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 16px;
  transition: 0.2s;
}

.borrar-pregunta:hover{
  color: #ff3b3b;
  transform: translateY(-50%) scale(1.2);
}

.icono-compartir{
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
  transition: 0.2s;
}

.icono-compartir:hover{
  transform: scale(1.2);
}

.footer{
  position: relative;
  overflow: hidden;
}

.esperando{
  text-align:center;
  font-size:18px;
  color:#888;
  margin-top:20px;
}

.footer-redes {
  display: flex;
  justify-content: flex-end; /* derecha */
  align-items: center;
  margin-right: 75px;
  margin-top: -15px;
}

.red-social {
  display: inline-flex;
}

.red-social img,
.red-social svg {
  width: 80px;   /* 🔥 tamaño equilibrado */
  height: 60px;
  opacity: 0.8;
  transition: all 0.2s ease;
}


/* hover */
.red-social:hover img,
.red-social:hover svg {
  opacity: 1;
  transform: scale(1.15);
}

.red-social img:first-child{
  margin-right: -30px;
}

.cta-link{
  color:#007bff;
  text-decoration:none;
  font-weight:600;
  position:relative;
  padding-bottom:3px;
}

/* evitar morado */
.cta-link:visited{
  color:#007bff;
}

/* línea animada */
.cta-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:2px;
  background:#007bff;
  transition:width 0.25s ease;
}

/* hover */
.cta-link:hover::after{
  width:100%;
}



/* Espaciado tipo app */
@media (max-width: 480px) {
  .campo input {
    padding: 14px;
    font-size: 16px;
  }
}

@media (max-width: 768px){

  body{
    padding:15px;
  }

  .container{
    max-width:100%;
    padding:18px;
    border-radius:10px;
  }

  input, select, textarea{
    width:100%;
  }

  .opcion{
    width:100%;
  }

  .columnas{
    flex-direction:column;
  }

  /* 🔥 LOGO bien colocado (no invadiendo) */
  .logo{
    width:85px;
    left:10px;
    top:10px;
  }

  /* 🔵 círculo azul */
  body::before{
    width:160px;
    height:160px;
    top:-60px;
    left:-60px;
  }

  /* 🟢 círculo verde */
  body::after{
    width:180px;
    height:180px;
    bottom:1000px;
    right:-8px;
  }

  button{
    width:100%;
  }

  /* 🔥 FOOTER en columna */
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  /* 🔥 REDES CENTRADAS Y JUNTAS */
  .footer-redes{
    justify-content:center;
    margin: -20px 0 0 -30px;
    gap: 18px;
  }

  .red-social + .red-social{
    margin-left:-20px; /* 👈 pegadas */
  }

  
  h1 {
    font-size: 10px;
    line-height: 2;
  }
  
  .texto {
    font-size: 12px;
    line-height: 1.4; 
  }

}