/* ============================================================
   SITIO PUBLICO — hotelboutiquelaconcordia.com
   Colores desde tema.css.
   ============================================================ */

.contenedor {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 0 var(--esp-5);
}

/* ------------------------------------------------------------
   Encabezado
   ------------------------------------------------------------ */
.sitio-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    padding: var(--esp-5) 0;
}

.sitio-header__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
}

/* Marca del encabezado: isotipo del logotipo mas el nombre. Si el
   archivo del logotipo no esta, el elemento marca deja solo el texto
   y esto sigue funcionando igual. */
.marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    line-height: 1.1;
}

.marca__logo {
    display: block;
    height: 48px;
    width: auto;
}

.marca__textos { display: flex; flex-direction: column; }

.marca__nombre {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-lg);
    font-weight: var(--peso-medio);
    letter-spacing: 0.02em;
    color: var(--color-texto-invertido);
}

.marca__bajada {
    font-size: 0.625rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-acento-claro);
    margin-top: var(--esp-1);
}

.sitio-nav {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
}

.sitio-nav__link {
    font-size: var(--texto-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}
.sitio-nav__link:hover { color: var(--color-acento-claro); }

/* ------------------------------------------------------------
   Hero
   Sin fotografia todavia: fondo de color de marca.
   Cuando exista material fotografico, sustituir el background
   por la imagen y conservar el degradado como capa de lectura.
   ------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--color-marca);
    color: var(--color-texto-invertido);
    overflow: hidden;
}

/* Los dos colibries del logotipo, insinuados como luz de color
   sobre el negro: azul-verde a la izquierda, rojo a la derecha,
   con el aro dorado al centro. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 18% 62%, rgb(var(--marca-verde-rgb) / 0.20) 0%, transparent 62%),
        radial-gradient(ellipse 55% 50% at 30% 30%, rgb(var(--marca-azul-rgb) / 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 84% 34%, rgb(var(--marca-rojo-rgb) / 0.20) 0%, transparent 62%),
        radial-gradient(ellipse 40% 40% at 72% 70%, rgb(var(--marca-purpura-rgb) / 0.14) 0%, transparent 60%),
        radial-gradient(circle at 62% 46%, rgb(var(--marca-dorado-rgb) / 0.13) 0%, transparent 42%);
    pointer-events: none;
}

.hero__contenido {
    position: relative;
    z-index: 1;
    max-width: 660px;
    padding: var(--esp-9) 0 var(--esp-8);
}

/* El logotipo completo es la entrada del sitio. El fondo del archivo
   es negro puro, igual que --marca-negro, asi que no se ve el borde
   de la imagen. */
.hero__logo {
    display: block;
    width: min(430px, 80vw);
    height: auto;
    margin-bottom: var(--esp-5);
}

.hero__titulo {
    font-size: var(--texto-3xl);
    font-weight: var(--peso-normal);
    color: var(--color-texto-invertido);
    margin-bottom: var(--esp-4);
}

.hero__texto {
    font-size: var(--texto-md);
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: var(--esp-6);
    max-width: 52ch;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

/* ------------------------------------------------------------
   Secciones
   ------------------------------------------------------------ */
.seccion { padding: var(--esp-9) 0; }
.seccion--crema { background: var(--color-superficie); }

.seccion__encabezado {
    max-width: 640px;
    margin: 0 auto var(--esp-7);
    text-align: center;
}

.seccion__titulo {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-normal);
    margin-bottom: var(--esp-3);
}

.seccion__texto { color: var(--color-texto-suave); margin: 0; }

/* ------------------------------------------------------------
   Tarjetas de experiencias
   ------------------------------------------------------------ */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--esp-5);
}

.tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-6);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover {
    border-color: var(--color-acento);
    box-shadow: var(--sombra-md);
}

.tarjeta__titulo {
    font-size: var(--texto-lg);
    margin-bottom: var(--esp-2);
}

.tarjeta__texto {
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
    margin: 0;
}

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.sitio-footer {
    background: var(--color-marca);
    color: rgba(255, 255, 255, 0.6);
    padding: var(--esp-7) 0 var(--esp-5);
    font-size: var(--texto-sm);
}

.sitio-footer__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding-bottom: var(--esp-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--esp-5);
}

.sitio-footer__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.sitio-footer__logo {
    display: block;
    height: 36px;
    width: auto;
}

.sitio-footer__nombre {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-lg);
    color: var(--color-texto-invertido);
}

.sitio-footer a { color: rgba(255, 255, 255, 0.72); }
.sitio-footer a:hover { color: var(--color-acento-claro); }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 720px) {
    :root { --texto-3xl: 2.25rem; --texto-2xl: 1.75rem; }

    .sitio-header { padding: var(--esp-4) 0; }
    .marca__logo { height: 38px; }
    .marca__nombre { font-size: var(--texto-base); }
    .sitio-nav { gap: var(--esp-3); }
    .sitio-nav__link:not(.sitio-nav__link--panel) { display: none; }
    .hero { min-height: 88vh; }
    .hero__contenido { padding: var(--esp-8) 0 var(--esp-6); }
    .seccion { padding: var(--esp-7) 0; }
}