/*
 Theme Name:   My Child Theme
 Theme URI:    https://example.com/
 Description:  Child theme for Hello Elementor with global typography & color system
 Author:       Andre Esna
 Template:     hello-elementor
 Version:      1.0.2
 Text Domain:  hello-elementor-child
*/

/* --------------------------------
   1. CSS VARIABLES (DESIGN SYSTEM)
----------------------------------- */

:root {
  /* Font */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Brand Colors */
  --color-primary: #F0790F;          /* Primary */
  --color-secondary: #191B22;        /* Secondary */
  --color-text: #333333;             /* Text */
  --color-accent: #F9E2D0;           /* Accent */
  --color-border-grey: #F5F5F5;      /* Borde gris */
  --color-button: #36B436;           /* Botón */
  --color-button-hover: #40D340;     /* Botón hover */
  --color-secondary-orange: #FBD089; /* Second naranja */
  --color-text-white: #FFFFFF;       /* Texto blanco */
  --color-grey-arrows: #CED0D6;      /* Gris flechas */

  /* Links */
  --color-link: #3366ff;
  --color-link-hover: #254eda; /* natural darker hover */

  /* Legacy alias */
  --verde: #36B436;
}

/* --------------------------------
   2. GLOBAL RESETS & BODY
----------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: #ffffff;
  line-height: 1.5;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------
   3. TYPOGRAPHY
----------------------------------- */

/* Titles: all headings use PRIMARY color */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
}

/* H1 */
h1 {
  font-size: 3rem;       /* Desktop */
  font-weight: 600;
  line-height: 2.5rem;
}

/* H2 */
h2 {
  font-size: 2.5rem;     /* Desktop */
  font-weight: 300;
  line-height: 2.125rem;
}

/* H3 */
h3 {
  font-size: 1.875rem;   /* Desktop */
  font-weight: 300;
  line-height: 1.6rem;
}

/* H4 */
h4 {
  font-size: 1.5rem;     /* Desktop */
  font-weight: 400;
  line-height: 1.3rem;
}

/* H5 */
h5 {
  font-size: 1.25rem;    /* Desktop */
  font-weight: 700;
  line-height: 1.2rem;
}

/* H6 */
h6 {
  font-size: 1rem;       /* Desktop */
  font-weight: 700;
  line-height: 1rem;
}

/* Paragraphs */
p {
  margin: 0 0 1rem;
  font-size: 1.125rem;   /* Desktop */
  font-weight: 400;
  line-height: 1.875rem;
  letter-spacing: -0.04em; /* ~ -4% */
  color: var(--color-text);
}

/* Links (global) */
a {
  font-size: 1.125rem;   /* Desktop */
  font-weight: 400;
  line-height: 1.875rem;
  letter-spacing: -0.04em; /* ~ -4% */
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* --------------------------------
   4. MOBILE TYPOGRAPHY (≤ 768px)
----------------------------------- */

@media (max-width: 768px) {
  h1 {
    font-size: 2.375rem;
    line-height: 2rem;
  }

  h2 {
    font-size: 2.1875rem;
    line-height: 2rem;
  }

  h3 {
    font-size: 1.875rem;
    line-height: 1.4rem;
  }

  h4 {
    font-size: 1.375rem;
    line-height: 1.2rem;
  }

  h5 {
    font-size: 1.125rem;
    line-height: 1.1rem;
  }

  h6 {
    font-size: 1rem;
    line-height: 1rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  a {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* --------------------------------
   5. BUTTONS (.boton + Elementor)
----------------------------------- */

.boton,
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  background: var(--color-button);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 1.0625rem;
  padding: 16px;

  border: none;
  border-style: none;
  border-radius: 5px;
  cursor: pointer;

  transition: 0.2s ease-in-out;
  box-shadow: 0 6px 20px rgba(64, 211, 64, 0.15);
  margin-top: 10px;
  text-decoration: none;
}

/* Ensure Elementor button text is white */
.elementor-button,
.elementor-button .elementor-button-text {
  color: var(--color-text-white);
}

.boton:hover,
.boton:focus,
.elementor-button:hover,
.elementor-button:focus {
  background: var(--color-button-hover);
  box-shadow: 0 8px 24px rgba(64, 211, 64, 0.25);
}

/* --------------------------------
   6. UTILITIES
----------------------------------- */

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-white { color: var(--color-text-white) !important; }
.text-muted { color: var(--color-grey-arrows) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-border-grey { background-color: var(--color-border-grey) !important; }

.border-grey { border-color: var(--color-border-grey) !important; }

/* --------------------------------
   7. BREADCRUMBS & RECAPTCHA
----------------------------------- */

/* Breadcrumbs */
.SEObreadcrumb a,
.rank-math-breadcrumb a {
  color: var(--color-primary);
}

/* Hide reCAPTCHA badge (you know Google’s policy, so use at your own risk) */
.grecaptcha-badge {
  visibility: hidden;
}

/* --------------------------------
   8. LISTS & CUSTOM LIST BLOCK
----------------------------------- */

/* Default UL / OL */
ul,
ol {
  padding-left: 40px;
  margin-left: 0;
  margin-bottom: 2rem;
  list-style-position: inside;
}

/* Custom list styling */
.custom-list-block ul {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
  border-left: 3px solid var(--color-primary);
  padding-left: 1.5em;
}

.custom-list-block li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: var(--color-text);
}

.custom-list-block li::before {
  content: "‣";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.5rem;
}

/* --------------------------------
   9. TABLE STYLING (.tabla-prestamos)
----------------------------------- */

.tabla-wrapper {
  overflow-x: auto;
  width: 100%;
}

.tabla-prestamos {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-base);
  font-size: 16px;
  margin-top: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}

/* Visually hidden caption (for accessibility) */
.tabla-prestamos caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tabla-prestamos thead {
  background-color: var(--color-primary);
  color: #ffffff;
}

.tabla-prestamos th,
.tabla-prestamos td {
  padding: 1.2rem 1rem;
  text-align: left;
  border: none;
}

.tabla-prestamos th {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.tabla-prestamos tbody tr {
  background-color: #ffffff;
  transition: background 0.3s ease;
}

.tabla-prestamos tbody tr:hover {
  background-color: #fff6ee;
}

.tabla-prestamos td {
  color: var(--color-text);
}

/* --------------------------------
   10. CONTACT FORM 7
----------------------------------- */

.wpcf7 form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 15px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.wpcf7 form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text);
}

.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.3s;
  margin-bottom: 20px;
}

.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
}

.wpcf7 input[type="submit"] {
  background-color: var(--color-button);
  color: #ffffff;
  border: none;
  padding: 12px 25px;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--color-button-hover);
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
}

.wpcf7-validation-errors {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
}

.wpcf7-mail-sent-ok {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.wpcf7-mail-sent-ng {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* --------------------------------
   11. STICKY SIDE MENU
----------------------------------- */

.scroll-follow {
  position: sticky;
  top: 10px;
  padding-top: 10px;
  z-index: 999;
}

/* Hide Hello Elementor default site title in header */
header#site-header .site-branding,
header#site-header .site-branding .site-title,
header#site-header .site-branding .site-title a {
    display: none !important;
}