.elementor-2381 .elementor-element.elementor-element-1b6318b{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for html, class: .elementor-element-2e30bbb *//* ==========================
   1️⃣ Alineación izquierda global
========================== */
body, p, h1, h2, h3, h4, ul, li {
  text-align: left; /* solo texto, no afecta enlaces ni botones */
}

/* ==========================
   2️⃣ FAQ <details>/<summary> con flecha
========================== */
details {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f7f7f7;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;           /* centra verticalmente */
  justify-content: space-between; /* texto a la izquierda, flecha a la derecha */
  padding-right: 10px;           /* espacio para la flecha */
}

/* Flecha que apunta a la derecha por defecto */
summary::after {
  content: "➤";                  /* flecha derecha, también puedes usar → */
  font-size: 18px;
  transition: transform 0.3s ease;
  color: inherit;
}

/* Cuando el detalle está abierto, la flecha gira 90° hacia abajo */
details[open] summary::after {
  transform: rotate(90deg);
}

details[open] p {
  margin-top: 10px;
}

/* ==========================
   3️⃣ Tarjetas (.card)
========================== */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card h3 {
  margin-bottom: 10px;
  font-weight: 600;
}

.card p {
  flex-grow: 1;
  margin-bottom: 10px;
}

/* Botones en las tarjetas */
.card .btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: 0.3s;
  background-color: #C8102E; /* rojo principal */
  color: #fff;               /* texto blanco */
}

.card .btn:hover {
  background-color: #B08D57; /* color acento dorado */
}

/* ==========================
   4️⃣ Responsive
========================== */
@media (max-width: 768px) {
  .cards-container {
    padding: 10px;
    gap: 15px;
  }
  details {
    padding: 8px;
  }
  summary {
    font-size: 16px;
  }
  details p, .card p {
    font-size: 16px;
  }
}/* End custom CSS */