/* --- EFECTO CURSOR ESTRELLAS --- */
body { cursor: none; }

.cursor {
  width: 24px;
  height: 24px;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
  background-size: contain;
}

.estrella {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 9998;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
  background-size: contain;
  animation: brillar 1s ease-out forwards;
}

.brillito {
  position: fixed;
  width: 7px;
  height: 7px;
  pointer-events: none;
  z-index: 9997;
  border-radius: 50%;
  animation: explotar 0.9s ease-out forwards;
}

@keyframes brillar {
 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(360deg); }
}

@keyframes explotar {
 0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50% { opacity: 1; transform: translate(calc(var(--x)/2), calc(var(--y)/2)) scale(1.5); }
 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); }
}






/* --- ESTILOS GENERALES ROSA --- */
body { 
  background: #ffeef8; 
  font-family: Arial; 
  margin: 0; 
  color: #831843;
}

header { 
  background: pink; 
  color: white; 
  text-align: center; 
  padding: 20px; 
}

footer { 
  text-align: center; 
  padding: 10px; 
  background: #ffb6c1; 
  color: white;
}

/* --- LAYOUT DE 3 COLUMNAS --- */
main {
  display: flex;
  gap: 10px;
  padding: 10px;
  align-items: flex-start; /* para que no se estiren */
}

.izquierda { 
  width: 20%; 
  background: #fff0f5; 
  padding: 10px; 
  border-radius: 10px; 
}

.centro { 
  width: 55%; 
  background: white; 
  padding: 15px; 
  border-radius: 10px; 
}

.derecha { 
  width: 25%; /* aquí van todos los cuadritos apilados */
  display: flex;
  flex-direction: column; /* esto los pone uno debajo de otro */
  gap: 15px;
}

/* --- ESTILO DE LINKS Y CUADROS --- */
.izquierda a {
  display: block;
  color: #831843;
  text-decoration: none;
  padding: 3px 0;
}
.izquierda a:hover {
  text-decoration: underline;
}

.derecha .cuadrito, .izquierda .cuadrito-actu {
  background: #ffe4e6; /* rosa clarito */
  border: 2px solid #ffb6c1; /* borde rosa */
  border-radius: 12px;
  padding: 12px;
  width: 100%; /* que ocupen todo */
  color: #831843;
  box-sizing: border-box;
}

.derecha .cuadrito h2, .izquierda .cuadrito-actu h2 {
  font-size: 15px;
  background: #ffb6c1;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
  color: white;
  margin: 0 0 8px 0;
}

/* --- 2. TEMA AMARILLO SOLO PARA ACERCA DE MI --- */
body.pagina-amarilla {
  background: #fffbea; /* fondo amarillo clarito */
  color: #78350f; /* texto café oscuro */
}

body.pagina-amarilla header {
  background: #facc15; /* amarillo */
  color: #78350f;
}

body.pagina-amarilla footer {
  background: #facc15; /* amarillo */
  color: #78350f;
}

/* ESTO ERA EL ERROR PRINCIPAL */
body.pagina-amarilla .izquierda,
body.pagina-amarilla .centro,
body.pagina-amarilla .derecha .cuadrito,
body.pagina-amarilla .izquierda .cuadrito-actu {
  background: #fefce8; /* amarillo muy clarito */
  border-color: 2px solid #fde047; /* ANTES SOLO TENIAS border-color */
  border-radius: 12px; /* para que se vea como cuadrito bonito */
  padding: 15px; /* para que el texto no esté pegado al borde */
  color: #78350f;
  margin-bottom: 35px; /* espacio entre cuadritos */
}

body.pagina-amarilla .derecha .cuadrito h2,
body.pagina-amarilla .izquierda .cuadrito-actu h2 {
  background: #facc15; /* amarillo */
  color: white;
}
  Body.Pagina-amarilla.centro {
Background:white;
Border: 2px solid #fde047;
Color: #facc15;
}
body.pagina-amarilla.derecha.cuadrito{
Background:#fefce8;
Border:2px  solid #fde047;
Padding:12px 
color=#78350f;

/* FORZAR LAYOUT DE ESCRITORIO */
main {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px; /* le subí un poco para que respiren */
  padding: 20px;
  align-items: flex-start;
}

.izquierda { 
  width: 20% !important; 
  flex-shrink: 0;
}

.centro { 
  width: 55% !important; 
  flex-shrink: 0;
}

.derecha { 
  width: 25% !important; 
  display: flex !important;
  flex-direction: column !important;
  gap: 15px;
  flex-shrink: 0;
}

/* PARA QUE NO SE ROMPA EN CEL */
@media (max-width: 768px) {
  main {
    flex-direction: column !important;
  }
  .izquierda, .centro, .derecha {
    width: 100% !important;
  }
}



/* --- 3. TEMA VERDE SOLO PARA MIS GUSTOS --- */
body.pagina-verde {
  background: white; /* fondo blanco para escribir */
  color: #14532d; /* texto verde oscuro */
}

body.pagina-verde header {
  background: #4ade80; /* verde clarito para el header */
  color: #14532d;
}

body.pagina-verde footer {
  background: #16a34a; /* verde más fuerte para el footer */
  color: #ffffff;
}

/* Pinta TODOS los cuadros */
body.pagina-verde .izquierda,
body.pagina-verde .centro,
body.pagina-verde .derecha .cuadrito, /* ARREGLADO: sin puntos raros */
body.pagina-verde .izquierda .cuadrito-actu {
  background: #dcfce7; /* verde muy clarito */
  border: 2px solid #4ade80; /* ARREGLADO: ahora sí hay borde */
  border-radius: 12px; /* para que se vea bonito */
  padding: 15px; /* para que no esté pegado el texto */
  color: #14532d;
  margin-bottom: 15px;
}

/* Pinta el título de cada cuadrito */
body.pagina-verde .derecha .cuadrito h2,
body.pagina-verde .izquierda .cuadrito-actu h2 {
  background: #16a34a; /* verde fuerte */
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  margin: -15px -15px 10px -15px; /* para que toque los bordes */
}

/* Pinta los links del menú */
body.pagina-verde .izquierda a {
  color: #14532d;
}
body.pagina-verde .izquierda a:hover {
  color: #16a34a;
}

/* El centro donde escribes queda blanco */
body.pagina-verde .centro {
  background: white; /* fondo blanco para escribir */
  border: 2px solid #dcfce7; /* bordecito verde suavecito */
  color: #14532d;
}

/* --- ARREGLO: PINTAR CUADROS DE .cuadros-derecha EN VERDE --- */
body.pagina-verde .cuadros-derecha .cuadrito {
  background: #dcfce7; 
  border: 2px solid #4ade80; 
  border-radius: 12px;
  padding: 12px;
  color: #14532d;
}

body.pagina-verde .cuadros-derecha .cuadrito h2 {
  background: #16a34a; 
  color: white;
  font-size: 15px;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
  margin: 0 0 8px 0;
}

/* --- LÍNEA DIVISORA PUNTEADA SOLO PARA MIS GUSTOS --- */
body.pagina-verde hr {
  border: none; 
  border-top: 2px dashed #4ade80; 
  margin: 25px 0; 
}
body.pagina-verde { background: lime !important; }