/* --- GLOBAL STYLES & VARIABLES (UPDATED WITH YOUR LOGO COLORS) --- */
:root {
    --primary-color: #00A99D;   /* Teal from your logo */
    --secondary-color: #F06B7E; /* Pink/Coral from your logo */
    --dark-color: #3C3C3B;      /* Dark Grey from your logo */
    --light-color: #FFFFFF;
    --grey-color: #f0f2f5;      /* A slightly lighter grey for backgrounds */
    --font-family: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--card-4-light); color: #5c7c2c;;
    color: #5B4B4B;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* --- ANNOUNCEMENT BAR (NEWS TICKER) --- */
.announcement-bar {
    background-color: #A90060;
    color: var(--light-color);
    padding: 0.5rem 0;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* Asegura que ocupe todo el ancho */
    z-index: 1001; /* La ponemos por encima de todo */
}

/* ... (El código de la animación .announcement-ticker no necesita cambios) ... */
.announcement-ticker {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 10s linear infinite;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.announcement-ticker span {
    display: inline-block;
    padding: 0 2rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.announcement-ticker a{color:#fff;text-decoration:none;display:inline-block}
.announcement-ticker a:hover{text-decoration:underline}
.announcement-ticker span{margin-right:3rem}


/* --- HEADER & NAVIGATION --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white; /* Color sólido para que no sea transparente */
    border-bottom: 1px solid #eee;
    width: 100%;

    position: fixed;
    top: 34px; /* ALTURA DE LA BARRA DE ANUNCIOS (ajusta si es necesario) */
    left: 0;
    right: 0; /* Asegura que ocupe todo el ancho */
    z-index: 1000;
}

/* 3. Empujamos todo el contenido de la página hacia abajo */
body {
    /* ... (tus otras reglas de body como font-family, etc.) ... */
    padding-top: 90px; /* ESPACIO TOTAL para la barra de anuncios + el header (ajusta si es necesario) */
}


.nav-logo {
    display: flex; /* La clave para alinear elementos uno al lado del otro */
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 12px; /* Añade un pequeño espacio entre la imagen y el texto */
    text-decoration: none; /* Quita el subrayado del enlace */
}

.nav-logo span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--color-primary); /* Usamos el color violeta principal del tema */
}

.nav-link {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link-button {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

.nav-link-button:hover {
    background-color: var(--secondary-color);
    color: var(--light-color);
}

/* --- HERO SECTION --- */
.hero {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
    color: var(--light-color);
}


.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.4rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.btn {
    padding: 0.8rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0 0.5rem;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--light-color);
    display: inline-block;
    max-width: 100%;
}

.btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--light-color);
    color: var(--light-color);
}

.btn-secondary:hover {
    background: var(--light-color);
    color: var(--dark-color);
    transform: translateY(-3px);
}


/* --- FORMATO CUTE --- */
.bg-amicasa-primary { background-color: #F9BEC7; /* Rosa claro */ }
        .bg-amicasa-secondary { background-color: #7FC9C0; /* Verde menta */ }
        .bg-amicasa-tertiary { background-color: #FEF5E7; /* Naranja suave */ }
        .text-amicasa-dark { color: #5B4B4B; /* Marrón oscuro para texto */ }
        .btn-amicasa {
            background-color: #F06B7E; /* Rosa más vibrante para botones */
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px; /* Completamente redondeado */
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative; /* Para el efecto de "pop" */
            overflow: hidden;
            z-index: 1;
        }
        .btn-amicasa:hover {
            background-color: #F06B7E;
            transform: translateY(-2px) scale(1.02); /* Pequeña escala en hover */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .btn-amicasa::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s ease-out, height 0.4s ease-out;
            z-index: -1;
        }
        .btn-amicasa:hover::before {
            width: 200%;
            height: 200%;
        }

/* --- SERVICE SECTION --- */
.card-amicasa {
            background-color: white;
            border-radius: 1.5rem; /* Esquinas muy redondeadas */
            padding: 2rem;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    .card-amicasa:hover {
            transform: translateY(-8px) scale(1.02); /* Mayor levantamiento y escala en hover */
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
        }
    .icon-large {
            width: 3.5rem;
            height: 3.5rem;
            color: #FF8BA7; /* Color de los iconos */
    }


.services-section { padding: 4rem 0; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.service-card {
    background: var(--light-color);
    padding: 2rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.service-icon { font-size: 3rem; margin-bottom: 1rem; }

/* --- NEWS SECTION --- */
.news-section { padding: 4rem 0; background-color: var(--grey-color); }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.news-card {
    background: var(--light-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.news-card:hover { transform: translateY(-5px); }
.news-card img { width: 100%; height: 200px; object-fit: cover; }
.news-card-content { padding: 1.5rem; }
.news-card-content h3 { margin-bottom: 0.5rem; }
.read-more {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* --- ABOUT US SECTION --- */
.about-section { padding: 4rem 0; background-color: #F9BEC7; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-image img { width: 100%; border-radius: 10px; }
.about-section > .am-container,
.instagram-section > .am-container,
.services-section > .am-container,
.reviews-section > .am-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

/* --- REVIEWS SECTION --- */
.reviews-section { padding: 4rem 0; background-color: var(--grey-color); }
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.review-card { background: var(--light-color); border-left: 5px solid var(--secondary-color); padding: 2rem; border-radius: 5px; }
.reviewer-info { margin-top: 1rem; text-align: right; color: #555; }

/* --- INSTAGRAM SECTION --- */
.instagram-section { padding: 4rem 0; }
.instagram-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.insta-post img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: opacity 0.3s ease; }
.insta-post img:hover { opacity: 0.8; }

/* --- CONTACT SECTION --- */
.contact-section { padding: 4rem 0; background-color: var(--dark-color); color: var(--light-color); }
.contact-section .section-title, .contact-subtitle { color: var(--light-color); text-align: center; }
.contact-subtitle { margin-bottom: 2rem; }
.contact-form { max-width: 700px; margin: 0 auto; }
.form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.8rem; border-radius: 5px; border: none; font-family: var(--font-family); }
.contact-form textarea { margin-bottom: 1rem; }

/* --- FOOTER --- */
.footer { background: #111; color: #aaa; text-align: center; padding: 2rem 0; }

/* --- UTILITY: ANIMATE ON SCROLL --- */
.reveal { position: relative; transform: translateY(50px); opacity: 0; transition: all 0.6s ease-out; }
.reveal.active { transform: translateY(0); opacity: 1; }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .nav-menu { display: none; } /* On mobile, we'd need a hamburger menu. Hiding for now. */
    .hero-title { font-size: 2.5rem; }
    .about-grid { grid-template-columns: 1fr; }
    .about-image { order: -1; }
    .form-group { grid-template-columns: 1fr; }
    .instagram-feed { grid-template-columns: repeat(2, 1fr); }

}


/* --- STYLES FOR UPGRADED HEADER (NEW) --- */
.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    flex-grow: 1; 
    justify-content: center;
}

.nav-item {
    margin: 0 1rem; /* Spacing between menu items */
}

.nav-utility {
    display: flex;
    align-items: center;
    list-style: none;
}

.utility-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.utility-link:hover {
    background-color: var(--grey-color);
}

.utility-link i {
    font-size: 1.2rem;
}

/* --- Dropdown Menu Styles (NEW) --- */
.dropdown {
    position: relative;
}
.submenu {
    position: relative;
}

.submenu-menu.show {
    display: block;
}

.dropdown-menu, .submenu-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    background-color: var(--light-color);
    list-style: none;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    width: 200px;
    z-index: 1001;
}

.submenu-menu {
    top: 0;
    left: 100%;
    margin-left: 0.5rem;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--dark-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-menu li a:hover {
    background-color: var(--grey-color);
}

.dropdown .fa-chevron-down {
    font-size: 0.7rem;
    margin-left: 0.3rem;
    transition: transform 0.3s ease;
}

.dropdown.open .fa-chevron-down {
    transform: rotate(180deg);
}


/* Estilos para el botón de Volver Arriba */
#scrollTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    bottom: 20px; /* 20px desde abajo */
    right: 20px; /* 20px desde la derecha */
    z-index: 99; /* Asegura que esté por encima de otros elementos */
    background-color: #FF8BA7;
    color: white;
    border: none;
    border-radius: 50%; /* Redondo */
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
}
#scrollTopBtn:hover {
    background-color: #FF6B8B;
    transform: translateY(-5px) scale(1.1); /* Mayor efecto en hover */
}
.nav-logo img {
    height: 40px !important; /* Ajusta este valor según el tamaño que quieras */
    width: auto !important;  /* Mantiene la proporción de la imagen */
    vertical-align: middle; /* Ayuda a alinear el logo con los links del menú */
}

.dropdown-menu.lang-menu {
  /* deja tus estilos */
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;       /* <-- agrega esto */
  background-color: white;
  list-style: none;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  width: 150px;
  z-index: 1002;    /* opcional: súbelo si lo necesitas */
  /* quita display:none; o déjalo y añade la línea de abajo */
}

/* asegúrate de tener esto DESPUÉS de la regla anterior */
.dropdown-menu.lang-menu.show { display:block; }


/* ===== News & Announcements (landing KR) ===== */
.am-news { padding: 5rem 0; background: #FEFBF6; }
.am-news__container { max-width: 1200px; margin: 0 auto; padding: 4rem; text-align: center; }
.am-news__title { font-size: 2rem; font-weight: 800; margin-bottom: 2rem; }
.am-news__empty { color: #6B7280; }

.am-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 3rem;
}

.am-news-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.am-news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Imagen */
.am-news-card__thumb img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Contenido */
.am-news-card__content { padding: 1rem 1rem 1.25rem; }
.am-news-card__date { font-size: .875rem; color: #6B7280; margin: 0 0 .25rem; }
.am-news-card__title { font-size: 1.125rem; margin: 0 0 .5rem; line-height: 1.35; font-weight: 700; }
.am-news-card__title a { color: #111; text-decoration: none; }
.am-news-card__title a:hover { text-decoration: underline; }
.am-news-card__desc { font-size: .95rem; color: #374151; margin: 0 0 .75rem; }
.am-news-card__more { font-weight: 700; text-decoration: none; color: #00A99D; }
.am-news-card__more:hover { text-decoration: underline; }

/* Aparición suave opcional */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.reveal.is-visible { opacity: 1; transform: none; }

/* === Instagram thumbnails (prolijo) === */
.am-igthumb__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.am-igthumb__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.am-igthumb__item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.10); }

.am-igthumb__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* cuadrado perfecto */
  display: block;
}

@media (min-width: 1024px) {
  .am-igthumb__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
/* === Contact form fixes === */
.contact-section .contact-form input,
.contact-section .contact-form textarea {
  background: #ffffff;
  color: #111827; /* gris muy oscuro */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}

.contact-section .contact-form input::placeholder,
.contact-section .contact-form textarea::placeholder {
  color: #9ca3af; /* gris placeholder */
}

/* por si alguna clase utilitaria les pone color blanco */
.contact-section .contact-form input,
.contact-section .contact-form textarea,
.contact-section .contact-form input::placeholder,
.contact-section .contact-form textarea::placeholder {
  -webkit-text-fill-color: initial; /* safari */
}
.contact-flash {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.contact-flash.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.contact-flash.error   { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }

/* ===== Public FAQ (Landing KR) ===== */
.am-faq{max-width:840px;margin:0 auto;text-align:left}
.am-faq__item{background:#fff;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.am-faq__item[open]{box-shadow:0 12px 28px rgba(0,0,0,.12)}
.am-faq__q{cursor:pointer;font-weight:700;padding:16px 18px;list-style:none;position:relative}
.am-faq__q::-webkit-details-marker{display:none}
.am-faq__q::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:transform .2s ease}
.am-faq__item[open] .am-faq__q::after{transform:translateY(-50%) rotate(180deg)}
.am-faq__a{padding:0 18px 16px;color:#374151}

/* Encapsulamos todo al navbar nuevo */
#am-navbar .nav-menu     { display: flex; align-items:center; list-style:none; flex-grow:1; justify-content:center; }
#am-navbar .nav-utility  { display: flex; align-items:center; list-style:none; }

/* Estado base (mobile-first): oculta desktop, muestra mobile colapsado */
#am-navbar .nav-menu        { display: none; }           /* desktop menu oculto por defecto en mobile */
#nav-mobile                 { display: none; }           /* contenedor móvil colapsado */
#more-menu-m                { display: none; }           /* submenu mobile cerrado */

/* Desktop >= 769px: muestra desktop, oculta mobile SIEMPRE */
@media (min-width: 769px) {
  #am-navbar .nav-menu      { display: flex !important; } /* desktop visible */
  #nav-mobile               { display: none !important; } /* oculta contenedor mobile entero */
  #more-menu-m              { display: none !important; } /* evita que el submenu mobile aparezca en desktop */
}

/* Mobile <= 768px: oculta desktop y usa nav-mobile */
@media (max-width: 768px) {
  #am-navbar .nav-menu      { display: none !important; } /* desktop fuera en mobile */
  /* #nav-mobile seguirá hidden hasta que el burger lo abra por JS */
}
/* Todos los dropdowns comparten la clase show */
.dropdown-menu { display: none; position: absolute; }
.dropdown-menu.show { display: block; }

/* Asegura el posicionamiento relativo del trigger */
#am-navbar .nav-item.dropdown { position: relative; }

/* Menú de "More" (desktop) debajo del botón */
#more-menu {
  top: 100%;
  left: 0;
  z-index: 1003;
  min-width: 200px;
}

/* ====================================================== */
/* ESTILOS "FUERTES" Y DEFINITIVOS PARA EL NUEVO HEADER */
/* ====================================================== */

/* Regla para anular cualquier espacio fantasma superior */
#new-landing-header {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important; /* Anula posibles flotados del tema antiguo */
    position: relative; /* Resetea la posición */
}

/* Barra de Navegación */
#new-landing-header .navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    background: white !important;
    border-bottom: 1px solid #eee !important;
    width: 100% !important;
    height: auto !important; /* Resetea la altura */
    margin: 0 !important;
}

/* Logo y su Contenedor */
#new-landing-header .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

#new-landing-header .nav-logo img {
    height: 40px !important;
    width: auto !important;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
    max-width: none !important; /* Anula posibles restricciones de materialize */
}

#new-landing-header .nav-logo span {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    color: #8A2BE2 !important;
    background: none !important; /* Quitamos el gradiente por si da problemas */
    -webkit-text-fill-color: initial !important; /* Reseteamos por si acaso */
}

/* Menús de Navegación */
#new-landing-header .nav-menu,
#new-landing-header .nav-utility {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== Fixed header + (opcional) announcement bar ===== */
:root { --announce-h: 34px; --header-h: 60px; }

/* POSICIÓN del header: por defecto pegado arriba; solo baja si hay anuncio */
.navbar { top: 0 !important; }
body.has-announcement .navbar { top: var(--announce-h) !important; }

/* Usa clases en <body> para calcular el padding-top real */
body.has-fixed-header.has-announcement { padding-top: calc(var(--announce-h) + var(--header-h)) !important; }
body.has-fixed-header:not(.has-announcement) { padding-top: var(--header-h) !important; }
body:not(.has-fixed-header) { padding-top: 0 !important; }

/* Evita “saltos” por márgenes colapsados del primer/último elemento */
main.page-main { padding-top: 1.25rem; padding-bottom: 2rem; }
main.page-main > :first-child { margin-top: 0; }
main.page-main > :last-child { margin-bottom: 0; }

/* ===== Blog index ===== */
.am-blog { background: #FEFBF6; }
.am-blog__container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.am-blog__title { font-size: 2rem; font-weight: 800; text-align:center; margin: 0 0 1.25rem; color: var(--dark-color); }

.am-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  padding: 0 1rem;
}

.am-post {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; min-height:100%;
}
.am-post:hover { transform: translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.12); }

.am-post__thumb { display:block; background:#f3f4f6; }
.am-post__thumb img { width:100%; height:180px; object-fit:cover; display:block; }

.am-post__content { padding: 1rem 1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.am-post__date { font-size:.85rem; color:#6B7280; }
.am-post__title a { color:#111; font-weight:800; font-size:1.125rem; text-decoration:none; line-height:1.35; }
.am-post__title a:hover { text-decoration:underline; }
.am-post__excerpt { color:#374151; font-size:.95rem; }
.am-post__more { margin-top:auto; font-weight:700; color: var(--primary-color); text-decoration:none; }
.am-post__more:hover { text-decoration: underline; }
:root { --announce-h: 34px; --header-h: 60px; }



.faq-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.faq-category-filter {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: white;
}
.accordion-item {
    background:  #00A99D;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(200, 180, 240, 0.4);
    border: 1px solid #eee;
    transition: all 0.3s ease;
}
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
     align-items: center;
    color: var(--color-dark);
}
.accordion-header::after {
    content: '+'; /* Usamos el signo de más simple */
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-header::after {
    content: '-'; /* Usamos el guión/signo de menos simple */
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.accordion-content p {
     padding: 0 1.5rem 1.5rem;
     line-height: 1.8;
    color: #555;
}
.faq-category-group {
     margin-top: 2rem;
}
.faq-category-title {
     font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}
.faq-login-prompt {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
    background-color: #fdfcff; /* Un lila muy claro */
    border-radius: var(--border-radius);
}

.faq-login-prompt p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
}
/* ====================================================== */
/* RESPONSIVE DESIGN PARA EL HEADER (VERSIÓN MEJORADA) */
/* ====================================================== */

.hamburger {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-dark);
    z-index: 1001; /* Para que esté por encima del menú */
}

.nav-item-divider-mobile {
    display: none; /* Oculto por defecto */
}

/* Reglas para tablets y móviles (menos de 900px) */
@media (max-width: 900px) {
    .navbar {
        /* Esto empuja el logo a la izquierda y la hamburguesa a la derecha */
        justify-content: space-between;
    }

    .nav-menu {
        /* Ocultamos el menú por defecto */
        display: none;

        /* Lo convertimos en un menú vertical desplegable */
        flex-direction: column;
        position: absolute;
        top: 65px; /* Ajusta esta altura a la de tu header */
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 1rem 0;
    }

    .nav-menu.is-active {
        display: flex; /* Lo mostramos al hacer clic */
    }

    .nav-menu .nav-item {
        width: 100%;
        text-align: center;
    }

    /* Hacemos que los links de utilidades se vean bien en el menú móvil */
    .nav-item-utility {
        display: block !important; /* Asegura que se vean */
    }

    .nav-item-utility .utility-link {
        justify-content: center; /* Centra el ícono y el texto */
    }

    /* Mostramos un separador en el menú móvil */
    .nav-item-divider-mobile {
        display: block;
        height: 1px;
        background-color: #eee;
        margin: 0.5rem 1rem;
    }

    .hamburger {
        display: block; /* Mostramos el botón de hamburguesa */
    }

    /* Ocultamos los links de utilidades de la barra principal */
    .nav-utility {
        display: none;
    }
}
main, 
#main {
    padding-top: 0 !important; 
    padding-bottom: 0 !important;/* Altura combinada de la barra de anuncios y el header. ¡Puedes ajustar este valor! */
    flex-grow: 1;
    
}
/* --- ESTILOS PARA EL NUEVO FOOTER --- */
.footer-new {
    background-color: #000000; /* Fondo negro sólido, como pediste */
    color: #a0aec0; 
    padding: 4rem 0 2rem 0;
    margin-bottom: 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-bottom: 3rem;
}
.footer-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-light);
    margin-bottom: 1rem;
}
.footer-column p {
    line-height: 1.8;
}
.footer-links {
    list-style: none;
    padding: 0;
}
.footer-links li {
    margin-bottom: 0.5rem;
}
.footer-links a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    color: var(--color-primary);
}
.social-icons {
    display: flex;
    gap: 1.5rem;
}
.social-icons a {
    color: #a0aec0;
    font-size: 1.8rem;
    transition: color 0.3s ease;
}
.social-icons a:hover {
    color: var(--color-light);
}
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #3e3e5b;
    font-size: 0.9rem;
}

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

/* Clases para el volteo con JavaScript en móviles */
.card.is-flipped {
  transform: rotateY(180deg);
}

/* --- COLORES DE LAS TARJETAS --- */
:root {
    --card-1: #aee1e1; --card-1-light: #e4f5f5;
    --card-2: #fcc2d7; --card-2-light: #fce8ef;
    --card-3: #ffd8a8; --card-3-light: #fff3e0;
    --card-4: #c0eb75; --card-4-light: #e9fac8;
}

/* --- CUADRÍCULA DE TARJETAS --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

/* --- ESCENA 3D Y TARJETA --- */
.card-scene {
    perspective: 1000px;
    height: 350px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    cursor: pointer;
}

.card-scene:hover .card {
    transform: rotateY(180deg);
}

/* --- CARAS DE LA TARJETA (FRONTAL Y TRASERA) --- */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.card-front {
    z-index: 2;
}

.card-back {
    transform: rotateY(180deg);
}

/* --- ESTILO DEL CONTENIDO DE LA TARJETA --- */
.card-illustration {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.card-front h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
}

.price {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0.5rem 0;
    color: #fff;
    background-color: rgba(0,0,0,0.15);
    padding: 5px 15px;
    border-radius: 50px;
}

.details-hover {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 1rem;
}

.card-back h3 {
    font-weight: 800;
    margin-top: 0;
}

.card-back ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
}
.card-back ul li {
    margin-bottom: 0.8rem;
}

.feature-highlight {
    font-weight: 700;
    background-color: #fff;
    padding: 10px;
    border-radius: 12px;
    margin-top: 1rem;
}

.button-calc {
    display: inline-block;
    margin-top: 1rem;
    padding: 12px 25px;
    background-color: var(--card-3);
    color: #555;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: transform 0.2s;
}
.button-calc:hover {
    transform: scale(1.05);
}

/* --- ASIGNACIÓN DE COLORES --- */
.card-color-1 { background-color: var(--card-1); }
.card-color-1-light { background-color: var(--card-1-light); color: #3d6a6a; }
.card-color-2 { background-color: var(--card-2); }
.card-color-2-light { background-color: var(--card-2-light); color: #8d3d5b; }
.card-color-3 { background-color: var(--card-3); }
.card-color-3-light { background-color: var(--card-3-light); color: #8d6230; }
.card-color-4 { background-color: var(--card-4); }
.card-color-4-light { background-color: var(--card-4-light); color: #5c7c2c; }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 600px) {
    .header h1 { font-size: 2rem; }
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
/* Estilos para las pestañas tipo Chipset */
.tab-btn {
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background-color: #f3f4f6; /* Gris claro para inactivos */
    color: #4b5563; /* Gris oscuro para inactivos */
}
.tab-btn.active {
    background-color: #ec4899; /* Color de acento (rosa) */
    color: white;
}
.tab-content.active {
    display: block;
}
.tab-content {
    scroll-margin-top: 110px; /* <-- ¡La línea mágica! */
}
.page-hero { 
    background-color: #d3f585ff; 
    padding: 60px 20px; 
    text-align: center; 
    margin-bottom: 50px; 
}
.page-hero h1 { 
    font-size: 3rem; 
    font-weight: 700; 
    color: #3C3C3B; 
}
.page-hero p {
    font-size: 1.2rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}
.page-hero-services { 
    background-color: var(--primary-color); 
    padding: 60px 20px; 
    text-align: center; 
    margin-bottom: 50px; 
}
.page-hero-services h1 { 
    font-size: 3rem; 
    font-weight: 700; 
    color: #f6f6f2; 
}
.page-hero-services p {
    font-size: 1.2rem;
    color: #fcfafa;
    max-width: 700px;
    margin: 0 auto;
}

        .blog-container {
            max-width: 840px;
            margin: auto;
            font-family: 'Poppins', sans-serif; /* Asegúrate de usar la misma fuente que tu landing */
            padding: 4rem;
        }
        .blog-list-container {
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 20px;
         } 
        .blog-header h1 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #3C3C3B; /* Color oscuro principal */
            margin-bottom: 10px;
            line-height: 1.2;
        }
        .blog-meta {
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 30px;
        }
        .featured-image {
            width: 100%;
            height: auto;
            border-radius: 16px;
            margin-bottom: 30px;
            object-fit: cover;
        }
        .blog-content {
            color: #3C3C3B;
            line-height: 1.8;
            font-size: 1.1rem;
        }
        .blog-content h2, .blog-content h3 {
            font-weight: 600;
            margin-top: 2em;
            margin-bottom: 0.8em;
        }
        .blog-content p {
            margin-bottom: 1.5em;
        }
        .blog-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .blog-content a {
            color: #E95A8D; /* Color rosa de tu marca */
            text-decoration: underline;
        }
        .related-posts {
            max-width: 1200px;
            margin: 80px auto;
            padding: 40px 20px;
            text-align: center;
            border-top: 1px solid #eee;
        }
        .related-posts h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #3C3C3B;
            margin-bottom: 40px;
        }
        /* Reutilizamos el grid de noticias de tu landing para consistencia */
        .am-news__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 3rem;
        }


/*faqs*/
        .page-hero { background-color: #d3f585ff; padding: 60px 20px; text-align: center; margin-bottom: 50px; }
        .page-hero h1 { font-size: 3rem; font-weight: 700; color: #3C3C3B; }
        .faq-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
        .faq-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
        .faq-pills button { background-color: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; padding: 8px 20px; font-size: 0.9rem; font-weight: 600; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
        .faq-pills button.active { background-color: #E95A8D; color: white; border-color: #E95A8D; }
        .faq-category-title { font-size: 1.8rem; font-weight: 600; color: #3C3C3B; margin: 2.5rem 0 1.5rem 0; }
        .faq-category-group.hidden { display: none; }
        
        /* === NUEVOS ESTILOS PARA TU ACORDEÓN ORIGINAL === */

        .am-faq__q::-webkit-details-marker { display: none; } /* Oculta el triángulo en Chrome/Safari */
        .am-faq__q::after {
            content: '+';
            font-size: 1.5rem;
            color: #E95A8D;
            transition: transform 0.2s;
        }
        details[open] > .am-faq__q::after {
            transform: rotate(45deg);
        }

        /* Estilos para la sección de login */
        .faq-cta-section { background-color: #f9fafb; padding: 60px 20px; margin-top: 60px; }
        .faq-cta { max-width: 600px; margin: 0 auto; text-align: center; }
        .faq-cta i { font-size: 2.5rem; color: #E95A8D; margin-bottom: 1rem; }
        .faq-cta h3 { font-size: 1.8rem; font-weight: 600; color: #3C3C3B; margin-bottom: 0.5rem; }
        .faq-cta p { color: #555; margin-bottom: 1.5rem; }
 /*BUY IN*/

        .page-hero {
            background-color: var(--primary-color);
            padding: 60px 20px;
            text-align: center;
        }
        .page-hero h1 {
            font-size: 3rem;
            font-weight: 700;
            color: #3C3C3B;
            margin-bottom: 10px;
        }
        .page-hero p {
            font-size: 1.2rem;
            color: #555;
            max-width: 700px;
            margin: 0 auto;
        }
        .stores-section {
            max-width: 1200px;
            margin: 60px auto;
            padding: 40px 20px;
            border-radius: 20px;
        }
        .stores-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            color: #3C3C3B;
        }
        .stores-section .section-subtitle {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            margin-top: -10px;
            margin-bottom: 40px;
        }
        .filter-pills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-bottom: 40px;
        }
        .filter-pills button {
            background-color: #f3f4f6;
            color: #374151;
            border: none;
            padding: 10px 24px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .filter-pills button:hover {
            background-color: #e5e7eb;
        }
        .filter-pills button.active {
            background-color: #E95A8D; /* Color principal Amicasa */
            color: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .stores-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 25px;
        }
        .store-card {
            text-decoration: none;
            color: inherit;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex; /* Para flexbox */
            flex-direction: column; /* Apilar elementos verticalmente */
        }
        .store-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        .store-card .image-container {
            width: 100%;
            padding-top: 100%; /* Aspect ratio 1:1 */
            position: relative;
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .store-card img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* 'contain' para logos, 'cover' para imágenes */
            padding: 15px; /* Espacio para que el logo respire */
        }
        .store-card .info {
            padding: 15px;
            text-align: center;
            flex-grow: 1; /* El contenido de texto ocupa el espacio restante */
            border-top: 1px solid #f0f0f0;
        }
        .store-card .name {
            font-weight: 600;
            color: #3C3C3B;
            font-size: 1.1rem;
            margin: 0 0 5px 0;
        }
        .store-card .legend {
            font-size: 0.9rem;
            color: #777;
            margin: 0;
        }
        .section-divider {
            border: 0;
            height: 1px;
            background: #e5e7eb;
            margin: 80px auto;
            max-width: 1200px;
        }
/*NEWS LIST*/


        /* Estilos similares al blog, pero con un color de fondo diferente en el hero */
        .page-hero { background-color: var(--primary-color); padding: 60px 20px; text-align: center; margin-bottom: 50px; } /* Color rosa pálido */
        .page-hero h1 { font-size: 3rem; font-weight: 700; color: #fafafa; }
        .list-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .no-posts-message { text-align: center; font-size: 1.2rem; color: #777; padding: 80px 20px; }
        .pagination-container { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px 0 60px; }
        .pagination-container a { padding: 10px 15px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #3C3C3B; transition: background-color 0.2s, color 0.2s; }
        .pagination-container a:hover { background-color: #f5f5f5; }
        .pagination-container a.active { background-color: #E95A8D; color: white; border-color: #E95A8D; font-weight: bold; }

/*LOGIN*/
.main-header, .main-footer {
    display: none !important;
}
body {
    background-color: #f9fafb; 
}
.login-page-wrapper {
    display: grid;
    grid-template-columns: 1fr; 
    min-height: 100vh;
}
@media (min-width: 992px) { 
    .login-page-wrapper {
        grid-template-columns: 1fr 1fr; 
    }
}

.login-visual {
    display: none; 
    background: linear-gradient(to top right, #EE9CA7, var(--secondary-color)); 
    color: var(--light-color);
    padding: 60px;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (min-width: 992px) {
    .login-visual {
        display: flex; 
    }
}
.login-visual h2 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-top: 20px;
}
.login-visual p {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
}
.login-visual .logo-amicasa {
    max-width: 150px; 
}

.login-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.login-form {
    width: 100%;
    max-width: 400px;
}
.login-form h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #3C3C3B;
    text-align: center;
    margin-bottom: 30px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}
.input-group input, .input-group select {
    display: block !important; /* <-- ¡ESTA ES LA LÍNEA CLAVE! */
    opacity: 1 !important;     /* <-- AÑADE ESTA TAMBIÉN POR SI ACASO */
    position: relative !important; /* Y ESTA PARA ASEGURAR POSICIÓN */
    width: 100%;
    padding: 12px 12px 12px 45px; /* Espacio para el ícono */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none; /* Quita estilos por defecto en iOS */
    -moz-appearance: none;
    appearance: none;
    background-color: white; /* Asegura fondo blanco para el select */
}
.input-group select {
     /* Flecha personalizada para el select */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Espacio extra para la flecha */
}
.input-group input:focus, .input-group select:focus {
    outline: none;
    border-color: #E95A8D;
    box-shadow: 0 0 0 3px rgba(233, 90, 141, 0.2);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.btn-primary-signin {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background-color: #E95A8D;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}
.btn-primary-signin:hover {
    background-color: #d84a7d;
}
.social-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9ca3af;
    margin: 30px 0;
}
.social-login-divider::before,
.social-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}
.social-login-divider:not(:empty)::before {
    margin-right: .5em;
}
.social-login-divider:not(:empty)::after {
    margin-left: .5em;
}
.social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    color: #374151;
    transition: background-color 0.2s;
}
.btn-social:hover {
    background-color: #f9fafb;
}
.btn-social i {
    font-size: 1.2rem;
    margin-right: 10px;
}
.signup-link {
    text-align: center;
    margin-top: 30px;
    color: #6b7280;
}
.signup-link a {
    color: #E95A8D;
    font-weight: 600;
    text-decoration: none;
}
.signup-link a:hover {
    text-decoration: underline;
}
.login-link {
    text-align: center;
    margin-top: 30px;
    color: #6b7280;
}
.login-link a {
    color: #E95A8D;
    font-weight: 600;
    text-decoration: none;
}
.login-link a:hover {
    text-decoration: underline;
}

/* === AÑADE ESTAS REGLAS NUEVAS AQUÍ ABAJO === */

.input-group .select-wrapper input.select-dropdown,
.input-group .select-wrapper ul.select-dropdown {
	display: none !important;
}

/* 2. "Rescatamos" nuestro <select> ORIGINAL, que Materialize movió DENTRO de la caja */
.input-group .select-wrapper select {
	display: block !important;       /* ¡Hazte visible! */
	opacity: 1 !important;
	pointer-events: auto !important; /* Aseguramos que se pueda hacer clic */
	position: relative !important;   /* Ignora el posicionamiento raro de Materialize */
	top: 0 !important;               /* Reseteamos la posición a la normalidad */
	left: 0 !important;
}
		
/* 3. Limpiamos el contenedor de Materialize para que no agregue estilos feos */
.input-group .select-wrapper {
	border-bottom: none !important;
	box-shadow: none !important;
}
.input-group .select-wrapper .caret {
    display: none !important;
}

/* ... Tus reglas "Anti-Fantasma" y otras ... */
.input-group .select-wrapper input.select-dropdown,
.input-group .select-wrapper ul.select-dropdown {
	display: none !important;
}

.input-group .select-wrapper select {
	display: block !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
}
		
.input-group .select-wrapper {
	border-bottom: none !important;
	box-shadow: none !important;
}