/* ============================================================
   TEXTS_STYLES.CSS — Fuente única de estilos tipográficos
   Todos los archivos CSS del sitio referencian desde aquí.
   ============================================================ */


/* ------------------------------------------------------------
   FUENTES
   Butler   → h2, h3, h4, h5  (serif elegante)
   Lusitana → h1              (serif clásica)
   Muli     → body, p, spans, labels (sans-serif legible)
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Butler';
    src: url('../fonts/Butler_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ------------------------------------------------------------
   COLORES TIPOGRÁFICOS
   --color-text-dark:    #2c2c2c   → títulos principales
   --color-text-body:    #555      → cuerpo de texto
   --color-text-light:   #666      → texto secundario
   --color-text-muted:   #999      → texto muy suave
   --color-text-hero:    #e0e0e0   → texto sobre hero oscuro
   --color-accent-gold:  #b28d63   → dorado (h3 rooms, acentos)
   --color-accent-pink:  #b0a0a7   → rosa/malva (badges, antetítulos)
   --color-accent-pink2: #c4abb4   → rosa medio (badges secundarios)
   ------------------------------------------------------------ */

:root {
    --color-text-dark:    #2c2c2c;
    --color-text-body:    #555;
    --color-text-light:   #666;
    --color-text-muted:   #999;
    --color-text-hero:    #e0e0e0;
    --color-accent-gold:  #b28d63;
    --color-accent-pink:  #b0a0a7;
    --color-accent-pink2: #c4abb4;
}


/* ------------------------------------------------------------
   RESET TIPOGRÁFICO BASE
   ------------------------------------------------------------ */

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

body, p {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    color: var(--color-text-body);
}


/* ------------------------------------------------------------
   H1
   Fuente: Lusitana
   Uso: Hero principal de cada página
   Desktop: 56px / Móvil: 42px
   ------------------------------------------------------------ */

h1 {
    font-family: 'Lusitana', serif;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--color-text-dark);
    margin: 0 0 30px 0;
    text-align: center;
}

@media (max-width: 768px) {
    h1 { font-size: 42px; }
}


/* ------------------------------------------------------------
   H2
   Fuente: Butler
   Uso: Títulos de sección
   Desktop: 58px / Móvil: 42px
   ------------------------------------------------------------ */

h2 {
    font-family: 'Butler', serif;
    font-size: 58px;
    font-weight: normal;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--color-text-dark);
    margin: 0 0 50px 0;
    text-align: center;
}

@media (max-width: 768px) {
    h2 {
        font-size: 42px;
        margin-bottom: 65px;
    }
}


/* ------------------------------------------------------------
   H3
   Fuente: Butler
   Uso: Subtítulos de sección, nombres de alojamientos
   Desktop: 42px / Móvil: 30px
   Color especial: dorado (#b28d63) en contexto de rooms
   ------------------------------------------------------------ */

h3 {
    font-family: 'Butler', serif;
    font-size: 42px;
    font-weight: normal;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--color-accent-gold);
    margin: 0 0 30px 0;
    text-align: center;
}

@media (max-width: 768px) {
    h3 {
        font-size: 30px;
        margin-bottom: 40px;
    }
}


/* ------------------------------------------------------------
   H4
   Fuente: Butler
   Uso: Títulos de subsección, labels de características
   Desktop: 22px / Móvil: 18px
   ------------------------------------------------------------ */

h4 {
    font-family: 'Butler', serif;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: -0.3px;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 15px 0;
}

@media (max-width: 768px) {
    h4 { font-size: 18px; }
}


/* ------------------------------------------------------------
   H5
   Fuente: Butler
   Uso: Títulos menores, etiquetas destacadas
   Desktop: 18px / Móvil: 16px
   ------------------------------------------------------------ */

h5 {
    font-family: 'Butler', serif;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 10px 0;
}

@media (max-width: 768px) {
    h5 { font-size: 16px; }
}


/* ------------------------------------------------------------
   BODY / PÁRRAFOS
   Fuente: Muli
   Uso: Todo el texto de contenido
   Desktop: 16px / Móvil: 16px (20px en bloques especiales)
   ------------------------------------------------------------ */

p {
    font-size: 20px;
    line-height: 1.8;
    font-family: 'Muli', sans-serif;
    color: var(--color-text-body);
    margin-bottom: 65px;
}


/* ------------------------------------------------------------
   LISTAS (ul, ol, li)
   Fuente: Muli
   Uso: Listas de características, amenities, normativa
   ------------------------------------------------------------ */

ul, ol {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-body);
}

li {
    font-size: 20px;
    line-height: 1.7;
    font-family: 'Muli', sans-serif;
    color: var(--color-text-body);
}

@media (max-width: 768px) {
    li { font-size: 16px; }
}


/* ------------------------------------------------------------
   ANTETÍTULO / EYEBROW
   Fuente: Muli
   Uso: Texto pequeño en mayúsculas sobre los títulos
   Ejemplo: "heart · ponie", "Abierto 365 días"
   ------------------------------------------------------------ */

.eyebrow,
.about-hp-subtitle,
.room-page-eyebrow,
.landing-subtitle,
.pools-preview-label {
    font-family: 'Muli', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-accent-pink);
    display: block;
    margin-bottom: 20px;
}


/* ------------------------------------------------------------
   BADGES
   Fuente: Muli
   Uso: Etiquetas de precio, disponibilidad, temporada
   Variantes: --badge-primary (rosa), --badge-gold (dorado)
   ------------------------------------------------------------ */

.badge,
.room-price,
.room-badge,
.section-badge,
.space-tag {
    font-family: 'Muli', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    padding: 6px 15px;
}

/* Badge rosa principal */
.badge,
.room-badge,
.section-badge,
.space-tag {
    background-color: var(--color-accent-pink2);
    color: white;
}

/* Badge dorado (precio, temporada gold) */
.room-price,
.section-badge.season {
    background-color: var(--color-accent-gold);
    color: white;
}


/* ------------------------------------------------------------
   AUDIENCE SECTION (compartido: que_es y retiros_y_reserve)
   ------------------------------------------------------------ */

.about-hp-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
    margin-bottom: 70px;
}

.audience-section {
    background: #e0e0e0;
    padding: 45px 40px;
    border: none;
}

.audience-section.ideal {
    margin-bottom: 30px;
}

.audience-section ul {
    list-style: none;
}

.audience-section li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-align: center;
}


.audience-section li svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .about-hp-audience {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .audience-section {
        padding: 35px 25px;
    }

    .audience-section li,
    .audience-section li span {
        text-align: center;
    }
}


/* ------------------------------------------------------------
   LINK DORADO (compartido entre secciones)
   ------------------------------------------------------------ */

.link-gold {
    color: var(--color-accent-gold);
    text-decoration: underline;
}


/* ------------------------------------------------------------
   BOTONES COMPARTIDOS
   ------------------------------------------------------------ */

.btn-reserve-secondary {
    display: inline-block;
    padding: 18px 60px;
    background-color: var(--color-accent-pink2);
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    font-family: 'Muli', sans-serif;
    margin-bottom: 60px;
}

.btn-reserve-secondary:hover {
    background-color: #8a7a81;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(176, 160, 167, 0.3);
}

@media (max-width: 768px) {
    .btn-reserve-secondary {
        padding: 16px 40px;
    }
}


/* ------------------------------------------------------------
   FARM IMAGE (compartido entre secciones)
   ------------------------------------------------------------ */

.farm-image-container {
    max-width: 900px;
    margin: 125px auto 180px;
    width: 100%;
    padding: 0;
}

.farm-image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.farm-img-bottom {
    object-position: bottom;
}

.farm-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-accent-pink2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Muli', sans-serif;
    font-weight: bold;
    text-align: center;
}

@media (max-width: 768px) {
    .farm-image-container {
        max-width: none;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        margin-top: 125px;
        margin-bottom: 180px;
    }
}


/* ------------------------------------------------------------
   MOBILE TYPOGRAPHY - 20px body text
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    body, p, label, small,
    .content,
    .about-hp-intro,
    .about-hp-badge,
    .feature-card p,
    .retreats-intro p,
    .retreat-tag,
    .question-note,
    .recommendation-item p,
    .philosophy-cta p,
    .about-hp-cta-primary p,
    .pools-preview-lead,
    .landing-lead,
    .landing-intro p,
    .retiro-card p,
    .retiro-feature p,
    .piscina-includes li,
    .temp-box p,
    .temp-note,
    .not-included-list li,
    .temporada-card > p:last-child,
    .normativa-block li,
    .detail-text li,
    .temp-desc,
    .spaces-note,
    .landing-important p,
    .landing-important li,
    .landing-cta p,
    .roomspic .rdesc p,
    .room-capacity,
    .room-page-intro,
    .room-dist-desc,
    .amenity-item,
    .info-card p,
    .suite-card-desc,
    .nota-importante {
        font-size: 18px;
    }

    /* Exclude search bar labels */
    #booking-form .search-field label {
        font-size: 11px;
    }

    /* Exclude Lodgify widget */
    #lodgify-book-now-box,
    #lodgify-book-now-box *,
    #lodgify-book-now-box span,
    #lodgify-book-now-box label,
    #lodgify-book-now-box button {
        font-size: 16px;
    }

    /* Room badges */
    .room-price, .room-badge, .distance-time {
        font-size: 9px;
    }
}

@media (max-width: 400px) {
    #booking-form .search-field label {
        font-size: 10px;
    }
}