/* ===========================================
   VARIABLES DE COLOR POR TEMA
=========================================== */
:root {
    /* Tema por defecto: blanco/negro */
    --color-principal: #000000;   /* color principal (títulos, iconos, bordes) */
    --color-secundario: #ffffff;  /* fondos suaves o degradados */
    --color-hover: #333333;       /* hover de botones o tarjetas */
    --color-sombra: rgba(0,0,0,0.15); /* sombras */
    --color-fondo: #ffffff;       /* fondo general */
    --color-texto: #000000;       /* texto principal */
}

/* TEMA MORADO */
body.morado {
    --color-principal: #6f42c1;       /* color principal, botones, íconos, timeline */
    --color-secundario: #e5dbf8;      /* fondos de tarjetas y secciones */
    --color-hover: #5936a3;           /* color al pasar el mouse */
    --color-sombra: rgba(111,66,193,0.25); /* sombras */
    --color-fondo: #f8f5fb;           /* fondo general de la página */
    --color-texto: #1c1c1c;           /* texto principal */
	--color-textocuandoydonde: #0a0a0a;           /* texto Cuando y donde  */

}

/* TEMA ROSA */
body.rosa {
    --color-principal: #d63384;
    --color-secundario: #ffe6f0;
    --color-hover: #b02a63;
    --color-sombra: rgba(214,51,132,0.25);
    --color-fondo: #fff5f8;
    --color-texto: #4b4b4b;
}

/* TEMA AMARILLO */
body.amarillo {
    --color-principal: #f0c419;       /* color principal, botones, íconos, timeline */
    --color-secundario: #fff8e1;      /* fondos de tarjetas y secciones */
    --color-hover: #d4a800;           /* color al pasar el mouse */
    --color-sombra: rgba(240,196,25,0.25); /* sombras */
    --color-fondo: #fffef5;           /* fondo general de la página */
    --color-texto: #1c1c1c;           /* texto principal */

}

/* TEMA MULTICOLOR */
body.multicolor {
    --color-principal: #ff6b6b;       /* rojo/rosado para botones e íconos */
    --color-secundario: #6bc1ff;      /* azul claro para fondos de tarjetas */
    --color-hover: #ffd93d;           /* amarillo brillante al pasar el mouse */
    --color-sombra: rgba(255,107,107,0.25); /* sombra principal */
    --color-fondo: linear-gradient(135deg, #ff6b6b, #6bc1ff, #ffd93d, #9b59b6); /* fondo multicolor degradado */
    --color-texto: #1c1c1c;           /* texto principal */
}


/* TEMA ROJO */
body.rojo {
    --color-principal: #c82333;       /* rojo intenso para botones e íconos */
    --color-secundario: #f8d7da;      /* fondo suave para tarjetas y secciones */
    --color-hover: #a71d2a;           /* rojo oscuro al pasar el mouse */
    --color-sombra: rgba(200,35,51,0.25); /* sombra de elementos */
    --color-fondo: #fff5f5;           /* fondo general del sitio */
    --color-texto: #1c1c1c;           /* texto principal negro para legibilidad */
}



/* TEMA VERDE */
body.verde {
    --color-principal: #28a745;
    --color-secundario: #d4f8d4;
    --color-hover: #218838;
    --color-sombra: rgba(40,167,69,0.25);
    --color-fondo: #f5fff5;
    --color-texto: #4b4b4b;
}

/* TEMA AZUL */
body.azul {
    --color-principal: #007bff;
    --color-secundario: #cce5ff;
    --color-hover: #0056b3;
    --color-sombra: rgba(0,123,255,0.25);
    --color-fondo: #f0f8ff;
    --color-texto: #4b4b4b;
}

/* TEMA PLATEADO */
body.plateado {
    --color-principal: #c0c0c0;
    --color-secundario: #e6e6e6;
    --color-hover: #999999;
    --color-sombra: rgba(192,192,192,0.25);
    --color-fondo: #f9f9f9;
    --color-texto: #4b4b4b;
}

/* TEMA DORADO */
body.dorado {
    --color-principal: #c9a227;
    --color-secundario: #fff7e0;
    --color-hover: #a88428;
    --color-sombra: rgba(201,162,39,0.25);
    --color-fondo: #fffdf5;
    --color-texto: #4b4b4b;
}





/* ===========================================
   ESTILOS GENERALES USANDO VARIABLES
=========================================== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    color: var(--color-principal);
}

 h4 {
    font-weight: 700;
    font-family: 'Dancing Script', cursive;
    color: var(--color-textocuandoydonde);
}


section {
    padding: 60px 0;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
}

/* BOTONES */
.btn-primary {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
}

/* TARJETAS */
.card {
    background: var(--color-secundario);
    box-shadow: 0 6px 20px var(--color-sombra);
    border-radius: 20px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px var(--color-sombra);
}

.card-title {
    color: var(--color-principal);
}

.card-text {
    color: var(--color-texto);
}


/* TIMELINE / ITINERARIO */
.timeline {
    position: relative;
    padding-left: 35px;
    margin-left: 25px;
    border-left: 3px solid var(--color-principal);
}

.timeline-icon {
    background: var(--color-principal);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 3px 10px var(--color-sombra);
}

.timeline-content {
    background: var(--color-secundario);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px var(--color-sombra);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content h4 {
    color: var(--color-principal);
}


/* MESA DE REGALOS */
#regalos .card {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-principal));
    box-shadow: 0 15px 35px var(--color-sombra);
}

#regalos .card-title {
    color: var(--color-principal);
}

#regalos .btn-outline-primary {
    border-color: var(--color-principal);
    color: var(--color-principal);
}

#regalos .btn-outline-primary:hover {
    background: var(--color-principal);
    color: #fff;
}

.btn-mapa {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* espacio entre icono y texto */
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 12px;
    border: 2px solid var(--color-principal);
    color: var(--color-principal);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-mapa i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-mapa:hover {
    background: var(--color-principal);
    color: #fff;
    transform: scale(1.05);
}

.btn-mapa:hover i {
    transform: rotate(20deg) scale(1.2);
}


.btn-calendario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    border: 2px solid var(--color-principal, #28a745); /* verde por defecto */
    background-color: var(--color-principal, #28a745);
    color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.btn-calendario i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-calendario:hover {
    background-color: #218838; /* más oscuro al pasar el mouse */
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-calendario:hover i {
    transform: rotate(-15deg) scale(1.2);
}