/* style.css - Diseño del Círculo Manchego del Puro */

body {
    font-family: 'Georgia', serif; /* Tipografía clásica y elegante */
    background-color: #f9f8f6; /* Tono papel antiguo/crema */
    color: #333333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background-color: #1a2f23; /* Verde botella muy oscuro */
    color: #d4af37; /* Dorado */
    text-align: center;
    padding: 2.5rem 0;
    border-bottom: 4px solid #8b2b2b; /* Franja burdeos */
}
..logo-cabecera {
    width: 220px; /* Tamaño por defecto para móvil */
    max-width: 85%;
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: width 0.3s ease;
}

/* Ajuste específico para pantallas de PC (pantallas de más de 768px) */
@media (min-width: 768px) {
    .logo-cabecera {
        width: 320px; /* Tamaño más imponente en escritorio */
    }
}
}
header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 2px;
}

nav {
    margin-top: 20px;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

nav a {
    color: #f9f8f6;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav a:hover {
    color: #d4af37;
}

main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

section {
    background: white;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-top: 3px solid #1a2f23;
}

h2 {
    color: #1a2f23;
    font-weight: normal;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-top: 0;
}

footer {
    text-align: center;
    padding: 30px;
    background-color: #1a2f23;
    color: white;
    margin-top: 60px;
    font-size: 0.9rem;
}


/* --- Diseño del Vitolario (Tarjetas) --- */

.grid-puros {
    display: grid;
    /* Esto hace que se adapte al móvil automáticamente */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.tarjeta-puro {
    border: 1px solid #e0dcd3;
    border-radius: 6px;
    padding: 25px;
    background-color: #faf9f7;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el ratón por encima */
.tarjeta-puro:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(26, 47, 35, 0.15);
    border-color: #d4af37;
}

.anilla {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.tarjeta-puro h3 {
    margin: 0 0 15px 0;
    color: #8b2b2b; /* Tono burdeos para el nombre */
    font-size: 1.4rem;
}

.tarjeta-puro {
    border: 1px solid #e0dcd3;
    border-radius: 6px;
    padding: 25px;
    background-color: #faf9f7;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Estos tres ajustes hacen la magia de alinear las alturas */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nota-cata {
    margin-top: 15px !important;
    font-style: italic;
    color: #555;
    border-top: 1px dashed #ccc;
    padding-top: 15px;
    text-align: left; /* El texto largo se lee mucho mejor alineado a la izquierda */
    line-height: 1.6;
}
/* --- Formulario de Reservas --- */

.form-reserva {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.campo label {
    font-weight: bold;
    color: #1a2f23;
    font-size: 0.95rem;
}

.campo input,
.campo textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #faf9f7;
    transition: border-color 0.3s ease;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: #8b2b2b;
    background-color: #fff;
}

.btn-enviar {
    background-color: #1a2f23;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 10px;
}

.btn-enviar:hover {
    background-color: #8b2b2b;
    color: #ffffff;
    border-color: #8b2b2b;
}
/* --- Estilos Sobre Nosotros --- */

.destacado-manifiesto {
    font-size: 1.15rem;
    color: #1a2f23;
    font-style: italic;
    line-height: 1.8;
    border-left: 3px solid #8b2b2b;
    padding-left: 15px;
    margin-bottom: 25px;
}
/* --- Desplegable "Leer más" --- */

.desplegable-cata {
    margin-top: 15px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    text-align: left;
}

.desplegable-cata summary {
    cursor: pointer;
    font-weight: bold;
    color: #8b2b2b; /* Rojo granate corporativo */
    font-size: 0.9rem;
    padding: 5px 0;
    user-select: none;
    transition: color 0.2s ease;
}

.desplegable-cata summary:hover {
    color: #1a2f23; /* Cambia a verde botella al pasar el ratón */
}

.desplegable-cata[open] summary {
    margin-bottom: 10px;
}
/* --- 1. Reset básico para evitar desbordamientos en móvil --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Evita que la pantalla se desplace hacia los lados */
    background-color: #faf9f7; /* Fondo crema corporativo */
}
/* --- 3. Logo controlado para móvil --- */
.logo-cabecera {
    width: 140px; /* Tamaño elegante y recogido en móvil */
    max-width: 60%; /* Nunca ocupará más del 60% de la pantalla del teléfono */
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
/* --- 7. ADAPTACIÓN A PANTALLA DE PC (Pantallas anchas) --- */
@media (min-width: 768px) {
    header {
        padding: 50px 20px; /* Un poco más de aire por arriba y abajo */
    }

    .logo-cabecera {
        width: 380px; /* Aumentamos el tamaño considerablemente para PC */
        max-width: 90%; /* Liberamos la restricción estricta del móvil */
    }

    nav ul {
        gap: 30px;
        font-size: 1.1rem; /* Hacemos el menú un pelín más grande también */
    }
}