:root {
    /* Nueva Paleta Oficial - TIN TOM */
    --dragon-del-puerto: #003651;
    /* Azul profundo */
    --sello-carmesi: #E01227;
    /* Rojo intenso */
    --niebla-de-arroz: #FCF7F8;
    /* Blanco cálido */
    --piedra-de-templo: #CED3DC;
    /* Gris suave */
    --oro-del-umbral: #CBA135;
    /* Dorado cálido */

    /* Theme Mappings */
    --primary-color: var(--sello-carmesi);
    --primary-dark: #b30e1f;
    /* Un poco más oscuro que el carmesí para hover */
    --accent-color: var(--oro-del-umbral);
    --bg-color: var(--dragon-del-puerto);

    /* Card BG: Glassmorphism suave sobre el azul profundo */
    --card-bg: rgba(0, 54, 81, 0.707);
    /* Blue tinted glass instead of white */
    --card-hover: rgba(255, 255, 255, 0.15);

    --text-color: var(--niebla-de-arroz);
    --text-muted: var(--piedra-de-templo);

    /* Typography */
    --font-title: 'Lilita One', cursive;
    /* Títulos */
    --font-main: 'Patua One', serif;
    /* Textos */

    --rappi-color: #ff4d46;
    --pedidosya-color: #ea0044;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
    letter-spacing: 0.5px;
}

/* Dynamic Background */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Gradient using Dragón del Puerto */
    background: radial-gradient(circle at 50% 10%, #034e73 0%, #003651 70%);
}

.background-animation::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 250%;
    /* Larger coverage for rotation */
    height: 250%;
    background-image: url('assets/pattern.svg');
    background-repeat: repeat;
    /* Aspect Ratio: 2849.63 / 1837.5 ≈ 1.55 */
    /* Maintaining ratio: 116px width / 75px height ≈ 1.55 */
    background-size: 116px 75px;
    opacity: 0.08;
    animation: movePattern 20s linear infinite;
    transform: rotate(-15deg);
}

@keyframes movePattern {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 116px 75px;
        /* Must match background-size x/y */
    }
}

.container {
    width: 100%;
    max-width: 480px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Header */
.profile-header {
    text-align: center;
    animation: fadeInDown 0.8s ease-out;
}

.profile-image-container {
    width: 280px;
    /* Increased width for the logo */
    height: auto;
    /* Allow height to adjust */
    margin: 0 auto 5px;
    /* Reduced from 10px */
    border-radius: 0;
    /* Remove circle */
    padding: 0;
    border: none;
    /* Remove border */
    overflow: visible;
    background: transparent;
    box-shadow: none;
    /* Remove shadow or adjust */
}

.profile-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    display: block;
    /* filter drop-shadow removed */
}

.profile-name {
    font-size: 1.8rem;
    /* Slightly larger for Lilita */
    margin-bottom: 5px;
    letter-spacing: 1px;
    font-family: var(--font-title);
    text-transform: uppercase;
    color: var(--text-color);
}

.profile-bio {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
}

/* Schedule Subtle */
.schedule-subtle {
    margin: 8px auto 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 20px;
    width: 100%;
    /* max-width removed to allow full stretch */
    border-radius: 12px;
    /* Matches other cards better */
    border: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    font-family: var(--font-title);
    /* Make schedule look like a heavy label */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-subtle i {
    color: var(--accent-color);
    /* Oro del Umbral icon */
}

/* Button Back UI for PDF */
.back-btn-ui {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 25px;
    border-radius: 30px;
    margin-top: 15px;
    font-family: var(--font-title);
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    /* Center in flex column */
}

.back-btn-ui:hover {
    background: var(--accent-color);
    color: var(--dragon-del-puerto);
    transform: translateY(-2px);
}

/* Links */
.links-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

.link-card {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    padding: 16px 20px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: visible;
}

.link-card:hover {
    background: var(--primary-color);
    /* Red Brand Color */
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(224, 18, 39, 0.4);
    z-index: 2;

}

.link-card:active {
    transform: scale(0.98);
}

.link-card:hover .link-text,
.link-card:hover .link-title {
    color: white !important;
}

.link-card:hover .link-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.link-icon {
    font-size: 1.4rem;
    margin-right: 15px;
    width: 24px;
    text-align: center;
    color: var(--accent-color);
    /* Gold Icon Default */
    transition: color 0.3s;
}

/* Wrapper for Title + Subtitle */
.link-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.link-text,
.link-title {
    flex: 1;
    /* For simple text */
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-color);
    /* White/Rice on Blue */
    font-family: var(--font-main);
    transition: color 0.3s;
    line-height: 1.2;
}

.link-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 300;
    margin-top: 2px;
    transition: color 0.3s;
    font-family: var(--font-main);
}

.link-arrow {
    font-size: 0.9rem;
    color: var(--accent-color);
    transition: transform 0.3s, color 0.3s;
}

.link-card:hover .link-arrow {
    transform: translateX(4px);
    color: var(--niebla-de-arroz) !important;
    /* Gold Arrow */
}

.link-card:hover .link-icon {
    color: var(--niebla-de-arroz) !important;
    /* Gold Icon */
}

/* Badge Promo */
.badge-promo {
    position: absolute;
    top: -12px;
    right: 15px;
    background: var(--sello-carmesi);
    /* Oro del Umbral para resaltar */
    color: var(--niebla-de-arroz);
    /* Contraste con el oro */
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(211, 4, 4, 0.4);
    border: 2px solid var(--oro-del-umbral);
    /* Separación visual */
    animation: pulse 2s infinite;
    z-index: 10;
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Delivery Section */
.delivery-section {
    text-align: center;
    margin: 15px 0 5px;
}

.section-title {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
    /* Increased visibility */
    font-family: var(--font-title);
}

.cta-highlight {
    color: var(--accent-color);
    /* Amarillo Oro del Umbral */
    margin-top: 10px;
    line-height: 1.4;
    /* Better spacing for 2 lines */
    display: block;
    width: 100%;
    text-align: center;
}

.link-info-text {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: -10px;
    /* Pull it closer to the button above */
    margin-bottom: 10px;
    font-weight: 300;
}

.highlight-word {
    border-bottom: 3px solid var(--primary-color);
    /* Rojo Marca */
    padding-bottom: 2px;
}

/* ... existing delivery button styles ... */


/* Modal Stuff */
/* ... */
.modal-title {
    color: var(--niebla-de-arroz);
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    /* Lilita is bold by default */
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.delivery-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.delivery-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* Reduced vertical padding since images are tall */
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s;
    background: white;
    /* Logos usually need white BG */
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 50px;
    /* Uniform height */
}

.delivery-img {
    height: 100%;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    display: block;
}

/* Specific tweaks if logos need it */
.rappi-btn {
    background: #ff4d46;
    /* Rappi Brand Color BG? Or stick to white? Usually white looks cleaner for multicolored logos, but let's check user intent. Try a subtle white */
    background: #FF441F;
}

.pedidosya-btn {
    background: #EA0044;
}

/* Override image filter to be white for contrast on colored buttons, OR keep buttons white. 
   Given the logos are likely colored, white buttons (clean look) are often best. 
   BUT user asked for "rappi and pedidosya logos", which are usually white on red, or red on white. 
   Let's assume the SVGs are the colored versions. So white background is safest.
*/

.delivery-btn {
    background: #fff;
}

.delivery-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Map Container */
.map-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: -5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #00263a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Specific button customizations */

#btn-whatsapp:hover {
    background: rgba(37, 211, 101, 0.271);
    border-color: #25D366;
    box-shadow: rgba(37, 211, 101, 0.271) !important;
}

#btn-whatsapp:hover .link-icon {
    color: #25D366;

}

/* Social Footer */
.social-footer {
    margin-top: 15px;
    /* Reduced from 40px since it's now higher up */
    margin-bottom: 20px;
    /* Add some space below it */
    display: flex;
    gap: 25px;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    justify-content: center;
    /* Center align */
}

.social-footer a {
    color: var(--text-muted);
    font-size: 1.6rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* remove weird underlines */
    border: none;
}

.social-footer a:hover {
    color: var(--primary-color);
    /* Hover ROJO (Sello Carmesí) as requested */
    transform: translateY(-3px);
}

.copyright {
    margin-top: 30px;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.8;
    text-align: center;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 54, 81, 0.95);
    /* Dragón del Puerto opaque */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(5px);
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--dragon-del-puerto);
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    width: 90%;
    height: 80%;
    max-width: 800px;
}

/* Gallery Content Specifics */
.gallery-content {
    background: var(--bg-color);
}

.modal-title {
    color: var(--niebla-de-arroz);
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}

.close-modal:hover {
    color: var(--primary-color);
}

.download-btn {
    display: block;
    text-align: center;
    background: var(--primary-color);
    color: white;
    padding: 12px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    border-radius: 8px;
    transition: background 0.2s;
}

.download-btn:hover {
    background: var(--primary-dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    overflow-y: auto;
    padding-right: 5px;
}

.gallery-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.hidden {
    display: none;
}

/* PDF Control Header */
.pdf-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    padding: 0 10px;
}

.pdf-header-controls .modal-title {
    margin-bottom: 0;
    /* Remove default margin for alignment */
    text-align: left;
    font-size: 1.2rem;
}

.zoom-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.zoom-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.zoom-btn:hover {
    background: var(--accent-color);
    color: var(--dragon-del-puerto);
}

.zoom-btn:active {
    transform: scale(0.95);
}

/* PDF Scroll Wrapper */
.pdf-scroll-wrapper {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    border-radius: 8px;
    background: #525659;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers the canvas horizontally */
}

/* PDF Renderer Container */
#pdf-renderer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* Spacing between pages */
    min-height: 50vh;
    /* Ensure some height if empty */
}

/* Fallback Iframe */
.pdf-fallback-iframe {
    width: 100%;
    height: 80vh;
    /* Taller height for the iframe fallback */
    border: none;
    display: block;
}

/* Canvas Styling */
canvas.pdf-page {
    max-width: 100%;
    height: auto !important;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

/* Loader */
#pdf-loader {
    color: var(--niebla-de-arroz);
    font-size: 1.2rem;
    margin-top: 20px;
}

/* Gallery Filters (Tabs) */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    /* Permitir que bajen de línea */
    justify-content: center;
    /* Centrar todo el grupo */
    gap: 8px;
    /* Espacio más ajustado */
    padding: 10px 0;
    margin-bottom: 20px;
}

.gallery-tab {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--accent-color);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-title);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.gallery-tab.active,
.gallery-tab:hover {
    background: var(--accent-color);
    color: var(--dragon-del-puerto);
}

/* Gallery Content Area adjustments */
.gallery-content-area {
    width: 100%;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    /* Above modal */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.lightbox.visible {
    opacity: 1;
    pointer-events: all;
}

#lightbox-img {
    max-width: 95%;
    max-height: 85vh;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s;
}

.lightbox.visible #lightbox-img {
    transform: scale(1);
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
    z-index: 20001;
}

.pdf-page-canvas {
    display: none;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 600px;
    }
}

/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar,
.pdf-scroll-wrapper::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
.pdf-scroll-wrapper::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: var(--dragon-del-puerto);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb,
.pdf-scroll-wrapper::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: var(--sello-carmesi);
    border-radius: 5px;
    border: 2px solid var(--dragon-del-puerto);
    /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover,
.pdf-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sello-carmesi) var(--dragon-del-puerto);
}