/* =========================================================
   Estilos de Cartão Exclusivos para Destino La Rioja
   Paleta de Cores derivada do Logo (image_6.png)
   ========================================================= */

/* Paleta de Cores de Referência (com base no logo):
   --dlr-rojo-principal: #BC411D;  <-- Terracota vibrante do texto/canyon
   --dlr-marron-terroso: #7C4F3F;  <-- Marrom rico dos cânions/sombras
   --dlr-ocre-suave: #E8D5C1;      <-- Tom de areia muito suave para contornos
*/

/* ---------------------------------------------------------
   OPÇÃO A: Contorno Equilibrado (Magnitude Uniforme)
   Use esta classe para um visual sutil e definido, usando o
   tom de areia/ocre suave derivado do logo.
   --------------------------------------------------------- */
.tarjeta-contorno-equilibrado {
    background-color: #ffffff;
    /* Contorno completo em ocre suave */
    border: 2px solid #E8D5C1;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02); /* Sombra sutil */
    transition: box-shadow 0.3s ease-in-out;
}

    .tarjeta-contorno-equilibrado:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

/* ---------------------------------------------------------
   OPÇÃO B: Borda Superior Destacada (O exemplo do usuário)
   Use esta classe para dar um impacto visual forte no topo,
   usando o Terracota Principal, com um contorno suave
   ao redor dos outros três lados para definição.
   --------------------------------------------------------- */
.tarjeta-borda-superior-destacada {
    background-color: #ffffff;
    /* Contorno sutil em areia nos outros 3 lados para definição */
    border: 1px solid #F6F1EC;
    /* Borda superior grossa em terracota vibrante do logo */
    border-top: 5px solid #BC411D;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); /* Sombra um pouco mais forte para destaque */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

    .tarjeta-borda-superior-destacada:hover {
        transform: translateY(-2px); /* Pequeno 'pulo' Pro-level */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }