:root {
      --color-primario: #001f3f;         /* azul marino */
      --color-primario-rgb: 0, 31, 63;
      --color-secundario: #2596be;       /* azul claro */
      --color-secundario-rgb: 37, 150, 190;
      --color-fondo: #f8f9fa;            /* fondo global claro */
      --color-texto: #343a40;            /* texto oscuro */
      --color-muted: #6c757d;  /* texto muted oscuro */
      --radius-base: 1rem;
    }

    body {
      font-family: "Segoe UI", "Poppins", "Roboto", sans-serif;
      background: var(--color-fondo);
      color: var(--color-texto);
      scroll-behavior: smooth;
    }

    /* NAVBAR */
    .navbar {
      backdrop-filter: blur(12px);
      background: rgba(var(--color-primario-rgb), 0.9);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .navbar-brand img {
      height: 42px;
      width: auto;
    }
    .navbar .nav-link {
      color: #ffffff;
      font-weight: 500;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      color: var(--color-secundario);
    }
    .navbar .d-flex a {
      color: #ffffff;
    }

    /* HERO */
    .hero-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    .hero-video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
      z-index: -2;
    }
    .hero-bg {
      background: url('../images/cocheria-mario-ratto-hero.jpg') center/cover fixed no-repeat;
      position: absolute; inset: 0;
      z-index: -3;
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(0, 31, 63, 0.95) 0%, rgba(248, 249, 250, 0.4) 90%);
      z-index: -1;
    }
    .hero-content {
      max-width: 760px;
      margin-inline: 1rem;
      animation: fadeUp .8s ease-out;
    }
    .hero-title {
      font-size: clamp(2.4rem, 4.4vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -.03em;
      color: #ffffff;
    }
    .hero-subtitle {
      font-size: 1.1rem;
      margin-top: 1rem;
      color: rgba(255,255,255,.8);
    }
    .hero-cta {
      margin-top: 1.9rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }
    .btn-whatsapp {
      background: #25d366;
      color: #fff;
      border: none;
      box-shadow: 0 10px 35px rgba(37, 211, 102, .3);
    }
    .btn-whatsapp:hover {
      background: #1da851;
      color: #fff;
    }
    .btn-outline-light {
      border-color: rgba(255,255,255,.4);
      color: #ffffff;
    }
    .gallery-image {
      height: 250px;
      width: 100%;
      object-fit: cover;
      transition: all .25s ease;
    }
    .gallery-image:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 25px rgba(0,0,0,.15);
    }

    /* VIDEO SECTION */
    .video-section {
      position: relative;
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
      z-index: -2;
    }
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 31, 63, 0.7);
      z-index: -1;
    }
    .video-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      color: #ffffff;
    }

    /* SECCIONES GENERALES */
    section {
      padding: 5rem 0;
    }
    .section-title {
      font-weight: 700;
      font-size: clamp(2rem, 3vw, 2.4rem);
      margin-bottom: 1rem;
    }
    .section-subtitle {
      max-width: 650px;
      margin: 0 auto 3rem auto;
      color: var(--color-muted);
    }

    /* QUIENES SOMOS */
    .about-section {
      background: var(--color-fondo);
    }
    .about-card {
      background: #f0f0f0;
      border: 1px solid rgba(var(--color-secundario-rgb), 0.3);
      border-radius: 1.2rem;
      padding: 2.3rem 2rem;
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 50px rgba(0,0,0,.1);
      color: var(--color-texto);
    }

    /* TESTIMONIOS */
    .testimonials-section {
      background: var(--color-primario);
      color: #ffffff;
    }
    .testimonials-section .section-subtitle {
      color: rgba(255,255,255,.8);
    }
    .testimonials-section .lead {
      font-size: 1.25rem;
      font-style: italic;
      max-width: 800px;
      margin: 0 auto 1rem auto;
    }
    .testimonials-section .blockquote-footer {
      color: rgba(255,255,255,.6);
    }
    .testimonials-section .carousel-control-prev-icon,
    .testimonials-section .carousel-control-next-icon {
      filter: invert(1);
    }

    /* PREGUNTAS FRECUENTES */
    .faq-section {
      background: var(--color-fondo);
    }
    .faq-section .accordion-item {
      background-color: #f0f0f0;
      border: 1px solid rgba(var(--color-secundario-rgb), 0.3);
      margin-bottom: 1rem;
      border-radius: .5rem;
      overflow: hidden;
    }
    .faq-section .accordion-button {
      background-color: #f0f0f0;
      color: var(--color-texto);
      font-weight: 600;
      padding: 1rem 1.25rem;
    }
    .faq-section .accordion-button:not(.collapsed) {
      color: var(--color-primario);
      background-color: #e0e0e0;
      box-shadow: none;
    }
    .faq-section .accordion-body {
      color: var(--color-muted);
      padding: 1rem 1.25rem;
    }

    .service-card {
      background: #f0f0f0;
      border: 1px solid rgba(var(--color-secundario-rgb), 0.3);
      border-radius: 1.4rem;
      padding: 2.2rem 1.9rem 2.1rem 1.9rem;
      height: 100%;
      transition: all .25s ease;
      position: relative;
      overflow: hidden;
      color: var(--color-texto);
    }

    .service-card p {
      color: var(--color-muted);
    }
    .service-card h5 {
      color: var(--color-primario);
    }
    .service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top, rgba(192,192,192, .12), transparent 70%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(192,192,192, .4);
      box-shadow: 0 16px 35px rgba(0,0,0,.1);
    }
    .service-card:hover::after {
      opacity: 1;
    }
    .service-icon {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: rgba(168,137,74,.1);
      border: 1px solid rgba(192,192,192,.4);
      display: grid;
      place-items: center;
      font-size: 1.6rem;
      color: var(--color-secundario);
      margin-bottom: 1.1rem;
    }

    /* CTA / PARALLAX */
    .cta-parallax {
      background: linear-gradient(140deg, rgba(0, 31, 63, 0.7), rgba(var(--color-secundario-rgb),.05)), url('../images/acompanamiento-familiar-cocheria-mario-ratto.jpg') center 0 no-repeat;
      background-size: cover;
      text-align: center;
      padding: 8rem 0;
      transition: background-position 0.1s linear; /* Smooth transition for parallax */
    }
    .cta-parallax .content {
      max-width: 720px;
      margin: 0 auto;
    }
    .cta-parallax h3 {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #ffffff;
    }
    .cta-parallax p {
      color: #ffffff;
    }

    /* UBICACIÓN */
    .ubicacion-section {
      background: var(--color-fondo);
    }
    .ubicacion-section .map-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
      height: 0;
      overflow: hidden;
      max-width: 100%;
      background: #e9ecef;
      border-radius: 1rem;
      box-shadow: 0 8px 20px rgba(0,0,0,.1);
    }
    .ubicacion-section .map-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(0.5);
    }

    /* CONTACTO */
    .contact-section {
      background: var(--color-fondo);
    }
    .contact-card {
      background: #ffffff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 1.1rem;
      padding: 2.8rem 2.2rem;
    }
    .form-control,
    .form-select {
      background: #ffffff;
      border: 1px solid rgba(0,0,0,.15);
      color: var(--color-texto);
    }
    .form-control:focus,
    .form-select:focus {
      background: #ffffff;
      border-color: rgba(192,192,192,.6);
      color: var(--color-texto);
      box-shadow: none;
    }
    .iframe-map {
      border: 0;
      width: 100%;
      min-height: 350px;
      border-radius: 1rem;
      filter: grayscale(.2);
    }

    /* FOOTER */
    footer {
      background: var(--color-primario);
      padding: 3rem 0 1.2rem 0;
      color: rgba(255,255,255,.75);
    }
    .footer-logo {
      height: 48px;
      width: auto;
      margin-bottom: 1.5rem;
    }
    .footer-social a {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15);
      color: #ffffff;
      margin-right: .4rem;
      transition: .15s;
    }
    .footer-social a:hover {
      background: var(--color-secundario);
      border-color: var(--color-secundario);
    }

    /* WHATSAPP FLOTANTE */
    .whatsapp-float {
      position: fixed;
      right: 1.3rem;
      bottom: 1.3rem;
      width: 58px;
      height: 58px;
      background: #25d366;
      color: #fff;
      display: grid;
      place-items: center;
      border-radius: 999px;
      box-shadow: 0 15px 35px rgba(0,0,0,.35);
      z-index: 995;
      transition: transform .15s ease;
    }
    .whatsapp-float:hover {
      transform: scale(1.03);
      color: #fff;
    }

    /* UTILIDADES */
    .text-gold { color: var(--color-secundario) !important; }
    .bg-dark-soft { background: rgba(255,255,255,.03); }

    @keyframes fadeUp {
      from {opacity: 0; transform: translateY(1.1rem);}
      to {opacity:1; transform: translateY(0);}
    }

    /* RESPONSIVE */
    @media (max-width: 992px) {
      .hero-section { text-align: center; }
      .navbar-brand img { height: 36px; }
      .hero-title { font-size: 2.4rem; }
      .about-section { background-attachment: scroll; }
    }
    @media (max-width: 576px) {
      section { padding: 4rem 0; }
      .hero-title { font-size: 2rem; }
      .hero-subtitle { font-size: .95rem; }
      .contact-card { padding: 1.7rem 1.4rem; }
      .whatsapp-float { right: .8rem; bottom: .8rem; }
    }

/* SECTION TRANSITIONS */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}