/* ================================================
   ar.css — RTL overrides para la versión en árabe
   Se carga DESPUÉS de style.css y solo afecta
   a la página ar.html. No modifica el CSS base.
   ================================================ */

/* ------------------------------------------------
   FUENTE ÁRABE — Google Fonts (Noto Sans Arabic)
   ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900&display=swap');

/* ------------------------------------------------
   DIRECCIÓN GLOBAL RTL + FUENTE ÁRABE
   ------------------------------------------------ */
html, body {
  direction: rtl;
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
}

/* Los headings también usan la fuente árabe
   (reemplaza Playfair Display que no soporta árabe) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
  font-weight: 700;
}

/* ------------------------------------------------
   BORDES: izquierda → derecha
   ------------------------------------------------ */
.parrafo-destacado,
.cita-destacada,
.faq-item,
.marco-legal,
.autor-card,
.icon-list li,
.como-item,
.precios-lista li,
.cobertura-list li {
  border-left: none;
  border-right: 3px solid var(--yellow);
  padding-left: 0;
  padding-right: 20px;
}

.marco-legal,
.autor-card,
.como-item {
  border-right-width: 4px;
  padding-right: 36px;
}

section[aria-labelledby="casos-titulo"] ul li,
.icon-list li {
  border-right: 3px solid var(--yellow);
  border-left: none;
}

/* FAQ — borde lateral */
.faq-item {
  border-right: 3px solid var(--yellow);
  border-left: 1px solid var(--border);
}
.faq-item:hover {
  border-right-color: var(--yellow);
  border-left-color: var(--border);
}

/* ------------------------------------------------
   SECTION LABEL — el trazo decorativo va a la derecha
   ------------------------------------------------ */
.section-label::before {
  order: 1; /* mueve la línea al lado derecho en flex */
}
.section-label {
  flex-direction: row-reverse;
}

/* ------------------------------------------------
   CASO REAL — comilla decorativa: left → right
   ------------------------------------------------ */
.caso-real::before {
  left: auto;
  right: 28px;
}

/* ------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP: right → left
   ------------------------------------------------ */
.whatsapp-float {
  right: auto;
  left: 28px;
}

/* ------------------------------------------------
   TEXTO ALINEADO A LA IZQUIERDA → DERECHA
   ------------------------------------------------ */
.tray-list li,
.faq-answer,
.servicio-body p,
.elegirnos-card p,
.proceso-card p {
  text-align: right;
}

/* ------------------------------------------------
   HEADER — address y nav en RTL
   ------------------------------------------------ */
header address {
  flex-direction: row-reverse;
}

header nav > ul {
  flex-direction: row-reverse;
}

/* ------------------------------------------------
   HERO BUTTONS — alineación RTL
   ------------------------------------------------ */
.hero-buttons {
  justify-content: flex-start;
}

/* ------------------------------------------------
   TRUST BADGES — separadores
   ------------------------------------------------ */
.hero-trust {
  flex-direction: row-reverse;
}

/* ------------------------------------------------
   FORMULARIO — labels y selects en RTL
   ------------------------------------------------ */
.form-group label,
.form-group input,
.form-group select,
.form-group textarea {
  text-align: right;
  direction: rtl;
}

select {
  background-position: left 12px center;
}

/* ------------------------------------------------
   FOOTER — grid y columnas en RTL
   ------------------------------------------------ */
.footer-grid {
  direction: rtl;
}

.footer-contact {
  flex-direction: row-reverse;
}

.footer-legal {
  flex-direction: row-reverse;
}

/* ------------------------------------------------
   CARDS DE CONTACTO
   ------------------------------------------------ */
.contacto-card,
.contacto-address-header {
  flex-direction: row-reverse;
}

/* ------------------------------------------------
   PROCESO / PASOS — número alineado
   ------------------------------------------------ */
.proceso-card {
  text-align: right;
}

/* ------------------------------------------------
   COBERTURA LIST — iconos a la derecha
   ------------------------------------------------ */
.cobertura-list li {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ------------------------------------------------
   ELEGIRNOS CARDS — icono a la derecha
   ------------------------------------------------ */
.elegirnos-card {
  text-align: right;
}

/* ------------------------------------------------
   SERVICIOS — body de cards
   ------------------------------------------------ */
.servicio-body {
  text-align: right;
}

/* ------------------------------------------------
   PRESENTACION LAYOUT — imagen a la izquierda
   (en LTR está a la derecha, en RTL se invierte solo
   con flex, pero esto lo refuerza)
   ------------------------------------------------ */
.presentacion-layout {
  direction: rtl;
}

/* ------------------------------------------------
   COBERTURA LAYOUT
   ------------------------------------------------ */
.cobertura-layout {
  direction: rtl;
}