/*
  Theme: Auditoría Financiera: CuÃĄndo es Necesaria y CÃģmo se Realiza
  Design System: Retro
  Trend: Asymmetric Balance
  Color Scheme: Triadic
  Animation Style: Smooth Transitions
  Fonts: Space Grotesk (Headings), DM Sans (Body)
*/

:root {
  /* Retro Triadic Color Scheme */
  --primary-color: #4A7C59; /* Muted Green */
  --secondary-color: #D98A4A; /* Muted Orange/Terracotta */
  --tertiary-color: #8C5E8C; /* Muted Plum/Purple */

  --primary-color-darker: #386046;
  --secondary-color-darker: #b06f3a;
  --tertiary-color-darker: #6d486d;

  --accent-color-light-green: #7EAA92;
  --accent-color-light-orange: #E6B48E;
  --accent-color-light-purple: #B38FB3;

  /* Neutrals */
  --background-light: #FDF6E3; /* Creamy Off-White */
  --background-section-alt: #f7f0e0; /* Slightly darker cream for alt sections */
  --text-dark: #3D352A; /* Dark Brown/Charcoal */
  --text-light: #FDF6E3;
  --border-color: #BFB5A8;
  --neutral-medium: #D3CBBF; /* Light grayish beige */

  /* Fonts */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Transitions */
  --transition-smooth: all 0.3s ease-in-out;

  /* Spacing - can be adjusted or use Bulma's spacing */
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;

  /* Header height for content offset */
  --header-height: 6rem; /* Adjust based on final header size */
}

/* Global Styles */
html {
  scroll-behavior: smooth;
  background-color: var(--background-light);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 16px; /* Base font size */
}

body {
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.2;
}

.title.is-1, .title.is-2, .title.is-3 {
  margin-bottom: 1.5rem;
}
.subtitle {
  font-weight: 400;
  color: var(--text-dark);
  opacity: 0.85;
}

.section-title {
  color: var(--text-dark); /* Ensuring high contrast for section titles */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  margin-bottom: 2.5rem !important; /* Bulma override */
}

p {
  margin-bottom: 1rem;
  color: var(--text-dark);
  font-size: 1.05rem;
}

a {
  color: var(--primary-color);
  transition: var(--transition-smooth);
}
a:hover {
  color: var(--primary-color-darker);
  text-decoration: underline;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
  font-family: var(--font-heading);
  font-weight: 500;
  border-radius: 6px; /* Slightly more modern retro */
  transition: var(--transition-smooth);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-width: 1px;
  border-style: solid;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button.is-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}
.button.is-primary:hover {
  background-color: var(--primary-color-darker);
  border-color: var(--primary-color-darker);
  color: var(--text-light);
}

.button.is-secondary { /* Custom class if needed */
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-light);
}
.button.is-secondary:hover {
  background-color: var(--secondary-color-darker);
  border-color: var(--secondary-color-darker);
  color: var(--text-light);
}

.button.is-light { /* Bulma override for consistency */
  background-color: var(--background-light);
  border-color: var(--border-color);
  color: var(--text-dark);
}
.button.is-light:hover {
  background-color: var(--neutral-medium);
  border-color: var(--border-color);
  color: var(--text-dark);
}

.button.is-link.is-small.modal-trigger { /* "Read More" buttons */
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 0.5em 1em;
    font-size: 0.9rem;
}
.button.is-link.is-small.modal-trigger:hover {
    background-color: var(--secondary-color);
    color: var(--text-light);
    border-color: var(--secondary-color);
}


/* General Section Styling */
.section {
  padding: 4rem 1.5rem; /* Default Bulma padding is 3rem 1.5rem */
  position: relative; /* For parallax or absolute positioned elements */
}
.section-alternative-bg {
  background-color: var(--background-section-alt);
}

/* Header and Navigation */
.header {
  background-color: rgba(253, 246, 227, 0.85); /* Semi-transparent --background-light */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
.navbar-item, .navbar-link {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
  background-color: transparent;
  color: var(--primary-color);
}
.navbar-burger {
  color: var(--text-dark);
}
.navbar-burger:hover {
  background-color: rgba(0,0,0,0.05);
  color: var(--primary-color);
}
.navbar-menu.is-active {
  background-color: rgba(253, 246, 227, 0.98); /* --background-light with more opacity for mobile menu */
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.navbar-brand .navbar-item img {
  max-height: 40px; /* Adjust as per logo aspect ratio */
}

/* Main content padding to avoid overlap with fixed header */
main {
  padding-top: var(--header-height);
}

/* Hero Section */
.hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.hero-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)); /* Dark overlay for text visibility */
  z-index: 1;
}
.hero .hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-title {
  font-size: 3.5rem; /* Bulma .title.is-1 */
  color: var(--text-light) !important; /* IMPORTANT: Hero text must be white */
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero-subtitle {
  font-size: 1.75rem; /* Bulma .subtitle.is-3 */
  color: var(--text-light) !important; /* IMPORTANT: Hero text must be white */
  margin-bottom: 2rem;
  opacity: 0.9;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.hero-cta {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-light);
  padding: 1em 2.5em;
  font-size: 1.1rem;
}
.hero-cta:hover {
  background-color: var(--secondary-color-darker);
  border-color: var(--secondary-color-darker);
  color: var(--text-light);
}

/* Card Styling */
.card {
  background-color: var(--background-light);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(61, 53, 42, 0.1); /* --text-dark with low alpha */
  transition: var(--transition-smooth);
  overflow: hidden; /* Ensures content respects border-radius */
  height: 100%; /* For equal height cards in columns */
  display: flex;
  flex-direction: column;
  text-align: center; /* Center inline/inline-block content like titles */
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(61, 53, 42, 0.15);
}

.card .card-image { /* Bulma's card-image */
  overflow: hidden; /* To ensure image respects card radius if applied here */
}
.card .card-image .image-container { /* The custom class applied to figure.image */
  display: block; /* Ensure it takes up space for aspect ratio */
  width: 100%; /* Fill the card-image area */
}
.card .card-image .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crucial for fitting image into fixed aspect ratio container */
  display: block;
}

.card .card-content {
  padding: 1.5rem;
  flex-grow: 1; /* Allows content to expand and push actions to bottom if card is flex column */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes buttons/actions to bottom */
  text-align: left; /* Reset text-align for content, or center if preferred */
}
.card .card-content .title,
.card .card-content .subtitle {
  color: var(--text-dark);
  text-align: center; /* Center titles and subtitles within card content */
}
.card .card-content .content {
  font-size: 0.95rem;
  color: var(--text-dark);
  opacity: 0.9;
}

/* Specific Section Styles */

/* #cuando-necesaria */
.progress-indicators-container .progress {
  height: 1rem;
  border-radius: 4px;
  margin-top: 0.5rem;
}
.progress.is-success::-webkit-progress-value { background-color: var(--primary-color); }
.progress.is-success::-moz-progress-bar { background-color: var(--primary-color); }
.progress.is-danger::-webkit-progress-value { background-color: var(--secondary-color); }
.progress.is-danger::-moz-progress-bar { background-color: var(--secondary-color); }
.progress.is-warning::-webkit-progress-value { background-color: var(--tertiary-color); }
.progress.is-warning::-moz-progress-bar { background-color: var(--tertiary-color); }


/* #como-se-realiza */
.audit-process-carousel .card {
  /* Styles for carousel items if needed, Bulma card styles are primary */
  text-align: center;
}
.audit-process-carousel .card .icon i {
    color: var(--primary-color); /* Example using primary color for icons */
}
.animated-icon { /* Basic animation for icons */
  display: inline-block;
  transition: transform 0.3s ease;
}
.animated-icon:hover {
  transform: scale(1.1) rotate(5deg);
}
.audit-process-carousel .card-content {
    text-align: center; /* Ensure text content is also centered */
}

/* #historia & #innovacion - Asymmetric Balance */
#historia .columns, #innovacion .columns {
  align-items: center;
}
#historia figure.image, #innovacion figure.image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
#historia img, #innovacion img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* #premios (Awards) */
.awards-carousel .card {
  margin-bottom: 1.5rem;
}

/* #testimonios (Customer Stories) */
.testimonial-card .card-image figure.image { /* For 1by1 avatar like images */
    margin: 0 auto 1rem auto; /* Center the avatar image */
    border-radius: 50%; /* Circular avatar */
    overflow: hidden;
    border: 3px solid var(--border-color);
}
.testimonial-card .card-image img {
    aspect-ratio: 1 / 1;
}
.testimonial-card .card-content .subtitle {
    margin-bottom: 1rem;
    color: var(--neutral-medium);
    font-style: italic;
}

/* Modals (Bulma customization) */
.modal-card {
  border-radius: 8px;
  font-family: var(--font-body);
}
.modal-card-head, .modal-card-foot {
  background-color: var(--background-section-alt);
  border-color: var(--border-color);
}
.modal-card-title {
  color: var(--text-dark);
  font-family: var(--font-heading);
}
.modal-card-body {
  background-color: var(--background-light);
  color: var(--text-dark);
}

/* #galeria (Gallery/Team) */
.gallery-carousel .card {
  margin-bottom: 1.5rem;
}

/* #clientela (Clientele) */
.client-logos-carousel .column {
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-logos-carousel figure.image img {
  max-height: 80px; /* Control logo size */
  width: auto;
  opacity: 0.7;
  transition: var(--transition-smooth);
  filter: grayscale(50%);
}
.client-logos-carousel figure.image img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* #recursos-externos */
.external-links-list .box {
  background-color: var(--background-light);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: var(--transition-smooth);
  margin-bottom: 1.5rem;
}
.external-links-list .box:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-left: 3px solid var(--secondary-color);
}
.external-links-list .box h4 a {
  color: var(--secondary-color);
  font-weight: 500;
}
.external-links-list .box h4 a:hover {
  color: var(--secondary-color-darker);
}

/* #contacto-banner */
#contacto-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 5rem 1.5rem;
}
.background-overlay-dark { /* Used in HTML */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75));
  z-index: 0;
}
#contacto-banner .container.relative-content {
  position: relative;
  z-index: 1;
}
#contacto-banner .title,
#contacto-banner .subtitle {
  color: var(--text-light) !important;
}
#contacto-banner .button.is-light {
    background-color: var(--text-light);
    color: var(--primary-color-darker);
    font-weight: bold;
}
#contacto-banner .button.is-light:hover {
    background-color: var(--background-section-alt); /* A slightly off-white for hover */
    color: var(--primary-color);
}

/* Footer */
.footer {
  background-color: var(--text-dark);
  color: var(--text-light);
  padding: 3rem 1.5rem 2rem; /* Adjust padding */
}
.footer .title, .footer .footer-title {
  color: var(--text-light);
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}
.footer p, .footer li {
  color: var(--neutral-medium);
  font-size: 0.95rem;
}
.footer a {
  color: var(--accent-color-light-green); /* Lighter green for links on dark background */
  transition: var(--transition-smooth);
}
.footer a:hover {
  color: var(--text-light);
  text-decoration: underline;
}
.footer .content p {
  color: var(--neutral-medium);
}
.footer .columns .column ul {
  list-style: none;
  margin-left: 0;
}
.footer .columns .column ul li {
  margin-bottom: 0.5rem;
}
.footer .social-links a { /* If specific styling for social text links is needed */
  margin-right: 10px;
  font-size: 1.1em; /* Make them slightly larger */
}

/* Specific Page Styles */

/* success.html */
.success-page-container {
  min-height: calc(100vh - var(--header-height) - 60px); /* Full viewport height minus header and potential footer margin */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.success-page-container .icon {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}
.success-page-container .title {
  color: var(--text-dark);
}
.success-page-container .button {
  margin-top: 1.5rem;
}

/* privacy.html, terms.html */
.privacy-page-container,
.terms-page-container {
  padding-top: 40px; /* Additional padding below header if needed */
  padding-bottom: 40px;
}
.privacy-page-container .content,
.terms-page-container .content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.privacy-page-container .content h1, .privacy-page-container .content h2,
.terms-page-container .content h1, .terms-page-container .content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* contact.html */
.contact-form-section {
    padding: 4rem 1.5rem;
}
.contact-form-container .field .label {
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 500;
}
.contact-form-container .input,
.contact-form-container .textarea {
    border-color: var(--border-color);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.contact-form-container .input:focus,
.contact-form-container .textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb), 0.25); /* Using RGB for Bulma-like focus */
}
/* Helper to convert hex to rgb for box-shadow (can't do this in pure CSS without JS or preprocessor)
   For now, I'll use a solid color or accept slight deviation from Bulma's exact focus.
   A simpler focus: */
.contact-form-container .input:focus,
.contact-form-container .textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(74, 124, 89, 0.5); /* primary-color with alpha */
}

.contact-info-box {
    background-color: var(--background-section-alt);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(61, 53, 42, 0.08);
}
.contact-info-box .icon {
    color: var(--primary-color);
    margin-right: 0.75rem;
}
.contact-info-box p {
    margin-bottom: 0.75rem;
}

/* Parallax effect for background images (simple CSS version) */
[style*="background-image"] { /* Targets elements with inline background images */
  /* This is a very basic parallax. More complex effects might need JS. */
  /* background-attachment: fixed; // This can cause issues with stacking contexts and responsiveness.
     Use cautiously or implement with JS for better control.
     For now, ensure cover and no-repeat are applied.
  */
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Utility Classes */
.has-text-shadow {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* Responsive Adjustments */
@media screen and (max-width: 1023px) { /* Bulma's tablet breakpoint */
  .navbar-menu {
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
  .navbar-item {
    padding: 0.75rem 1rem;
  }
  .hero-title {
    font-size: 2.5rem;
  }
  .hero-subtitle {
    font-size: 1.25rem;
  }
  main {
    padding-top: calc(var(--header-height) - 1rem); /* Adjust if header is smaller on mobile */
  }
}

@media screen and (max-width: 768px) { /* Bulma's mobile breakpoint */
  .section {
    padding: 2.5rem 1rem;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
  .title.is-2 {
    font-size: 1.75rem;
  }
  .subtitle.is-4 {
      font-size: 1.1rem;
  }
  .columns.is-multiline .column {
      margin-bottom: 1.5rem; /* Add spacing between cards on mobile when they stack */
  }
  .card {
      margin-left: auto;
      margin-right: auto;
  }
  .footer .columns {
      text-align: center;
  }
  .footer .columns .column {
      margin-bottom: 1.5rem;
  }
}