body {
    font-family: 'Montserrat', sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    background-color: #0d0d0d;
    color: white;
}

a {
    color: #c9a84c;
    text-decoration: none;
}

a:hover { color: white; }

article { margin-bottom: 60px; }

h1, h2 { color: #c9a84c; }

h2 span { color: white; }

/* HERO */
.hero {
    text-align: center;
    padding: 40px 0;
    border-bottom: 1px solid #333;
}

.hero h1 { font-size: 3rem; }

.hero p { color: #aaa; }

.hero span { color: #c9a84c; }

/* FOTO PRINCIPAL */
.foto-principal img {
    width: 100%;            /* ocupa todo el ancho */
    height: 350px;          /* altura fija */
    object-fit: cover;      /* recorta sin deformar */
    border-radius: 8px;
    border: 1px solid #333;
}

/* TARJETAS */
.tarjetas {
    display: flex;          /* en fila */
    gap: 16px;
    flex-wrap: wrap;        /* bajan si no caben */
}

.tarjeta {
    flex: 1;
    min-width: 160px;
    background-color: #1a1a1a;
    border: 1px solid #c9a84c;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.tarjeta i {
    font-size: 2rem;
    color: #c9a84c;
}

.tarjeta h3 {
    color: #c9a84c;
    margin: 10px 0 6px;
}

.tarjeta p { color: #aaa; font-size: 0.9rem; }

/* TEXTO + IMAGEN */
.info {
    display: flex;          /* texto a la izquierda, imagen a la derecha */
    gap: 40px;
    align-items: center;
}

.info-texto { flex: 1; }

.info-texto p {
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 12px;
}

.info-imagen { flex: 1; }

.info-imagen img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #333;
    object-fit: cover;
}

/* PREGUNTAS FRECUENTES */
details {
    border: 1px solid #333;       /* borde gris entre preguntas */
    border-radius: 6px;
    margin-bottom: 10px;          /* espacio entre cada pregunta */
    padding: 16px;
    background-color: #1a1a1a;
}

summary {
    color: #c9a84c;             
    font-weight: bold;
    cursor: pointer;            
    list-style: none;            
}

summary::before {
    content: "+ ";                /* agrega un + antes de cada pregunta */
    color: #c9a84c;
}

details[open] summary::before {
    content: "− ";               /* cuando está abierto cambia a - */
}

details p {
    color: #aaa;
    margin-top: 12px;            /* espacio entre la pregunta y la respuesta */
    line-height: 1.6;
}