:root {
      --color-burgundy: #800D28;
      --color-grey-mid: #CCCCCC;
      --color-grey-light: #EFEFED;
      --color-white: #ffffff;
      --color-dark: #1A1A1A;
      --font-main: 'Montserrat', sans-serif;
      --font-serif: 'Playfair Display', Georgia, serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    body {
      font-family: var(--font-main);
      background-color: var(--color-grey-light);
      color: var(--color-dark);
      line-height: 1.6;
      padding-top: 80px;
      -webkit-font-smoothing: antialiased;
    }

    /* Typography */
    h1, h2, h3, h4 {
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-dark);
    }

    h1 {
      font-size: clamp(2.2rem, 4.5vw, 3.8rem);
      line-height: 1.1;
      text-transform: uppercase;
    }

    h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }

    p {
      font-size: 1rem;
      color: #333333;
      font-weight: 400;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.25s ease;
    }

    /* Decorative Technical Grid Pattern */
    .bg-grid {
      background-image: 
        radial-gradient(var(--color-grey-mid) 1px, transparent 0);
      background-size: 24px 24px;
    }

    /* Fixed Header */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 300;
      background-color: rgba(239, 239, 237, 0.94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--color-grey-mid);
      display: flex;
      align-items: center;
    }

    .header-container {
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      height: 48px;
    }

    .brand-logo img {
      height: 38px;
      width: auto;
      object-fit: contain;
    }

    nav ul {
      display: flex;
      list-style: none;
      gap: 2rem;
      align-items: center;
    }

    nav a {
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-dark);
    }

    nav a:hover {
      color: var(--color-burgundy);
    }

    /* Header Contact Dropdown */
    .cta-dropdown {
      position: relative;
      display: inline-block;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.65rem 1.25rem;
      border: 2px solid var(--color-burgundy);
      background-color: var(--color-burgundy);
      color: var(--color-white);
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: var(--font-main);
    }

    .cta-button:hover,
    .cta-dropdown:hover .cta-button,
    .cta-dropdown:focus-within .cta-button {
      background-color: var(--color-dark);
      border-color: var(--color-dark);
      color: var(--color-white);
    }

    .cta-menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.5rem;
      background-color: var(--color-white);
      border: 1px solid var(--color-grey-mid);
      box-shadow: 0 12px 28px rgba(0,0,0,0.12);
      border-radius: 6px;
      min-width: 230px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.25s ease;
      z-index: 50;
      padding: 0.5rem 0;
    }

    .cta-dropdown:hover .cta-menu,
    .cta-dropdown:focus-within .cta-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .cta-menu-item {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.75rem 1.25rem;
      color: var(--color-dark);
      font-size: 0.88rem;
      font-weight: 600;
      text-transform: none;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .cta-menu-item:hover {
      background-color: var(--color-grey-light);
      color: var(--color-burgundy);
    }

    .cta-menu-item i {
      font-size: 1.1rem;
      color: var(--color-burgundy);
      width: 22px;
      text-align: center;
    }

    /* Subtitle Styling - Matching Logo Burgundy Serif Font */
    .section-subtitle {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 600;
      font-style: italic;
      text-transform: none;
      letter-spacing: 0.01em;
      color: var(--color-burgundy);
      margin-bottom: 0.3rem;
      display: block;
    }

    .statement-subtitle {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 600;
      font-style: italic;
      text-transform: none;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 1rem;
      display: block;
    }

    /* Hero Section */
    .hero {
      position: relative;
      padding: 5rem 2rem 6rem 2rem;
      border-bottom: 1px solid var(--color-grey-mid);
      background-color: var(--color-white);
    }

    .hero-container {
      max-width: 1300px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 4rem;
      align-items: start;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background-color: var(--color-grey-light);
      border: 1px solid var(--color-grey-mid);
      padding: 0.35rem 0.85rem;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-burgundy);
      margin-bottom: 1.5rem;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      background-color: var(--color-burgundy);
      border-radius: 50%;
    }

    .hero-headline {
      color: var(--color-dark);
      margin-bottom: 1.5rem;
    }

    .hero-headline span {
      color: var(--color-burgundy);
    }

    .hero-description {
      font-size: clamp(1.3rem, 2.1vw, 1.6rem);
      line-height: 1.65;
      color: #333333;
      margin-bottom: 0;
      max-width: 600px;
      font-weight: 400;
    }

    .hero-visual {
      position: relative;
    }

    .hero-card {
      background-color: var(--color-grey-light);
      border: 1px solid var(--color-grey-mid);
      padding: 1rem;
      box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    }

    .hero-image-wrapper {
      width: 100%;
      height: 520px;
      position: relative;
    }

    .hero-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hero-tag {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      background-color: rgba(255, 255, 255, 0.95);
      border: 1px solid var(--color-grey-mid);
      padding: 0.85rem 1.2rem;
      backdrop-filter: blur(4px);
      z-index: 10;
    }

    .hero-tag span {
      display: block;
      font-size: 0.85rem;
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--color-burgundy);
    }

    .hero-tag strong {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--color-dark);
    }

    /* Core Values Bar */
    .values-bar {
      background-color: var(--color-burgundy);
      color: var(--color-white);
      padding: 3rem 2rem;
    }

    .values-container {
      max-width: 1300px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }

    .value-card {
      border-left: 2px solid rgba(255, 255, 255, 0.3);
      padding-left: 1.5rem;
    }

    .value-card h3 {
      color: var(--color-white);
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .value-card p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.9rem;
    }

    /* Process Section */
    .section-padding {
      padding: 6rem 2rem;
    }

    .container {
      max-width: 1300px;
      margin: 0 auto;
    }

    /* Section Header stacked layout */
    .section-header {
      margin-bottom: 3.5rem;
      border-bottom: 1px solid var(--color-grey-mid);
      padding-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .section-description {
      max-width: 650px;
      font-size: 0.95rem;
      color: #555;
      margin-top: 0.4rem;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .process-card {
      background-color: var(--color-white);
      border: 1px solid var(--color-grey-mid);
      padding: 2.5rem 1.5rem;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .process-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    }

    .process-number {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--color-grey-mid);
      margin-bottom: 1.5rem;
      line-height: 1;
    }

    .process-card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      color: var(--color-dark);
    }

    .process-card p {
      font-size: 0.88rem;
      color: #555;
    }

    /* Services / Technical Solutions */
    .services-section {
      background-color: var(--color-white);
      border-top: 1px solid var(--color-grey-mid);
      border-bottom: 1px solid var(--color-grey-mid);
    }

    .services-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .services-content p {
      margin-bottom: 1.5rem;
      font-size: 1.05rem;
    }

    .feature-list {
      list-style: none;
      margin-top: 2rem;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--color-grey-light);
    }

    .feature-bullet {
      width: 20px;
      height: 20px;
      background-color: var(--color-burgundy);
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature-text h4 {
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.25rem;
    }

    .feature-text p {
      font-size: 0.88rem;
      color: #666;
      margin-bottom: 0;
    }

    .services-media {
      display: block;
    }

    .media-card {
      background-color: var(--color-grey-light);
      border: 1px solid var(--color-grey-mid);
      padding: 0.75rem;
      position: relative;
    }

    .media-card img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      display: block;
    }

    /* 3D Stage Carousel for Catálogo de Aplicaciones - Multi-slide */
    .carousel-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 2.5rem auto 0 auto;
      min-height: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .carousel-radio {
      display: none;
    }

    .carousel-stage {
      position: relative;
      width: 100%;
      height: 530px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .carousel-item {
      position: absolute;
      width: 380px;
      height: 500px;
      background-color: var(--color-white);
      border: 1px solid var(--color-grey-mid);
      padding: 0.9rem;
      border-radius: 6px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.07);
      transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
      user-select: none;
      transform: translateX(0) scale(0.6);
      opacity: 0;
      z-index: 1;
      pointer-events: none;
    }

    .carousel-image-container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 4px;
    }

    .carousel-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Side Click Overlay to select adjacent cards directly */
    .slide-click-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 15;
      cursor: pointer;
      display: block;
    }

    /* Carousel 3D Positioning Rules for 11 slides */
    /* State 1 */
    #carousel-1:checked ~ .carousel-stage #slide-1 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-1:checked ~ .carousel-stage #slide-1 .slide-click-overlay { display: none; }
    #carousel-1:checked ~ .carousel-stage #slide-11 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-1:checked ~ .carousel-stage #slide-2 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 2 */
    #carousel-2:checked ~ .carousel-stage #slide-2 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-2:checked ~ .carousel-stage #slide-2 .slide-click-overlay { display: none; }
    #carousel-2:checked ~ .carousel-stage #slide-1 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-2:checked ~ .carousel-stage #slide-3 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 3 */
    #carousel-3:checked ~ .carousel-stage #slide-3 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-3:checked ~ .carousel-stage #slide-3 .slide-click-overlay { display: none; }
    #carousel-3:checked ~ .carousel-stage #slide-2 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-3:checked ~ .carousel-stage #slide-4 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 4 */
    #carousel-4:checked ~ .carousel-stage #slide-4 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-4:checked ~ .carousel-stage #slide-4 .slide-click-overlay { display: none; }
    #carousel-4:checked ~ .carousel-stage #slide-3 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-4:checked ~ .carousel-stage #slide-5 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 5 */
    #carousel-5:checked ~ .carousel-stage #slide-5 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-5:checked ~ .carousel-stage #slide-5 .slide-click-overlay { display: none; }
    #carousel-5:checked ~ .carousel-stage #slide-4 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-5:checked ~ .carousel-stage #slide-6 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 6 */
    #carousel-6:checked ~ .carousel-stage #slide-6 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-6:checked ~ .carousel-stage #slide-6 .slide-click-overlay { display: none; }
    #carousel-6:checked ~ .carousel-stage #slide-5 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-6:checked ~ .carousel-stage #slide-7 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 7 */
    #carousel-7:checked ~ .carousel-stage #slide-7 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-7:checked ~ .carousel-stage #slide-7 .slide-click-overlay { display: none; }
    #carousel-7:checked ~ .carousel-stage #slide-6 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-7:checked ~ .carousel-stage #slide-8 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 8 */
    #carousel-8:checked ~ .carousel-stage #slide-8 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-8:checked ~ .carousel-stage #slide-8 .slide-click-overlay { display: none; }
    #carousel-8:checked ~ .carousel-stage #slide-7 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-8:checked ~ .carousel-stage #slide-9 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 9 */
    #carousel-9:checked ~ .carousel-stage #slide-9 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-9:checked ~ .carousel-stage #slide-9 .slide-click-overlay { display: none; }
    #carousel-9:checked ~ .carousel-stage #slide-8 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-9:checked ~ .carousel-stage #slide-10 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 10 */
    #carousel-10:checked ~ .carousel-stage #slide-10 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-10:checked ~ .carousel-stage #slide-10 .slide-click-overlay { display: none; }
    #carousel-10:checked ~ .carousel-stage #slide-9 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-10:checked ~ .carousel-stage #slide-11 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* State 11 */
    #carousel-11:checked ~ .carousel-stage #slide-11 {
      transform: translateX(0) scale(1.06);
      opacity: 1;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(128, 13, 40, 0.16);
      pointer-events: auto;
    }
    #carousel-11:checked ~ .carousel-stage #slide-11 .slide-click-overlay { display: none; }
    #carousel-11:checked ~ .carousel-stage #slide-10 {
      transform: translateX(-72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }
    #carousel-11:checked ~ .carousel-stage #slide-1 {
      transform: translateX(72%) scale(0.82);
      opacity: 0.45;
      z-index: 5;
      pointer-events: auto;
    }

    /* Carousel Arrow Controls */
    .carousel-arrows {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 20;
    }

    .arrow-group {
      display: none;
      justify-content: space-between;
      padding: 0 1rem;
      width: 100%;
    }

    #carousel-1:checked ~ .carousel-arrows .arrow-group-1,
    #carousel-2:checked ~ .carousel-arrows .arrow-group-2,
    #carousel-3:checked ~ .carousel-arrows .arrow-group-3,
    #carousel-4:checked ~ .carousel-arrows .arrow-group-4,
    #carousel-5:checked ~ .carousel-arrows .arrow-group-5,
    #carousel-6:checked ~ .carousel-arrows .arrow-group-6,
    #carousel-7:checked ~ .carousel-arrows .arrow-group-7,
    #carousel-8:checked ~ .carousel-arrows .arrow-group-8,
    #carousel-9:checked ~ .carousel-arrows .arrow-group-9,
    #carousel-10:checked ~ .carousel-arrows .arrow-group-10,
    #carousel-11:checked ~ .carousel-arrows .arrow-group-11 {
      display: flex;
    }

    .carousel-arrow {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: var(--color-burgundy);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      box-shadow: 0 4px 14px rgba(0,0,0,0.22);
      transition: all 0.25s ease;
      border: 2px solid var(--color-white);
      pointer-events: auto;
    }

    .carousel-arrow:hover {
      background-color: var(--color-dark);
      transform: scale(1.1);
    }

    /* Carousel Dots Pagination */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1rem;
      z-index: 15;
      flex-wrap: wrap;
      max-width: 90%;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: var(--color-grey-mid);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .dot:hover {
      background-color: var(--color-burgundy);
    }

    #carousel-1:checked ~ .carousel-dots .dot-1,
    #carousel-2:checked ~ .carousel-dots .dot-2,
    #carousel-3:checked ~ .carousel-dots .dot-3,
    #carousel-4:checked ~ .carousel-dots .dot-4,
    #carousel-5:checked ~ .carousel-dots .dot-5,
    #carousel-6:checked ~ .carousel-dots .dot-6,
    #carousel-7:checked ~ .carousel-dots .dot-7,
    #carousel-8:checked ~ .carousel-dots .dot-8,
    #carousel-9:checked ~ .carousel-dots .dot-9,
    #carousel-10:checked ~ .carousel-dots .dot-10,
    #carousel-11:checked ~ .carousel-dots .dot-11 {
      background-color: var(--color-burgundy);
      width: 28px;
      border-radius: 10px;
    }

    /* Location & Technical Statement Banner */
    .statement-banner {
      background-color: var(--color-dark);
      color: var(--color-white);
      padding: 5rem 2rem;
      position: relative;
    }

    .statement-container {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
    }

    .statement-title {
      color: var(--color-white);
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 600;
      line-height: 1.25;
      margin-bottom: 2rem;
    }

    .statement-title span {
      color: var(--color-grey-mid);
      font-style: italic;
    }

    .location-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 0.6rem 1.5rem;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-white);
    }

    /* Footer */
    footer {
      background-color: var(--color-grey-light);
      border-top: 1px solid var(--color-grey-mid);
      padding: 4rem 2rem 2rem 2rem;
    }

    .footer-container {
      max-width: 1300px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1.2fr;
      gap: 3rem;
      margin-bottom: 3rem;
    }

    .footer-brand img {
      height: 36px;
      width: auto;
      margin-bottom: 1.25rem;
    }

    .footer-brand p {
      font-size: 0.9rem;
      color: #555;
      max-width: 400px;
    }

    .footer-col h4 {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-burgundy);
      margin-bottom: 1rem;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 0.6rem;
      font-size: 0.88rem;
      color: #444;
    }

    .social-contact-list {
      list-style: none;
    }

    .social-contact-list li {
      margin-bottom: 0.75rem;
    }

    .social-contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-dark);
      transition: color 0.25s ease;
    }

    .social-contact-link:hover {
      color: var(--color-burgundy);
    }

    .social-contact-link i {
      font-size: 1.1rem;
      color: var(--color-burgundy);
      width: 20px;
    }

    /* Bottom-most Contact Bar */
    .footer-bottom-contact-bar {
      max-width: 1300px;
      margin: 0 auto 2rem auto;
      padding: 1.5rem 2rem;
      background-color: var(--color-white);
      border: 1px solid var(--color-grey-mid);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .contact-bar-title {
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-dark);
    }

    .contact-bar-links {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }

    .contact-bar-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.6rem 1.25rem;
      background-color: var(--color-grey-light);
      border: 1px solid var(--color-grey-mid);
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-dark);
      transition: all 0.25s ease;
    }

    .contact-bar-btn:hover {
      background-color: var(--color-burgundy);
      border-color: var(--color-burgundy);
      color: var(--color-white);
    }

    .contact-bar-btn i {
      font-size: 1.1rem;
      color: var(--color-burgundy);
    }

    .contact-bar-btn:hover i {
      color: var(--color-white);
    }

    .footer-bottom {
      max-width: 1300px;
      margin: 0 auto;
      padding-top: 1.5rem;
      border-top: 1px solid var(--color-grey-mid);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      color: #666;
    }

    /* Media Queries */
    @media (max-width: 1024px) {
      .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .services-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
      }

      .carousel-container {
        min-height: 520px;
      }

      .carousel-stage {
        height: 480px;
      }

      .carousel-item {
        width: 320px;
        height: 450px;
      }

      .carousel-image-container {
        height: 100%;
      }
    }

    @media (max-width: 768px) {
      body {
        padding-top: 70px;
      }

      header {
        height: 70px;
      }

      .header-container {
        padding: 0 1rem;
      }

      nav {
        display: none;
      }

      .hero {
        padding: 3rem 1rem 4rem 1rem;
      }

      .values-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .process-grid {
        grid-template-columns: 1fr;
      }

      .footer-container {
        grid-template-columns: 1fr;
      }

      .footer-bottom-contact-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }

      /* Responsive Carousel Adjustments */
      .carousel-container {
        min-height: 460px;
        padding: 0;
      }

      .carousel-stage {
        height: 420px;
      }

      .carousel-item {
        width: 260px;
        height: 380px;
        padding: 0.6rem;
      }

      .carousel-image-container {
        height: 100%;
      }

      #carousel-1:checked ~ .carousel-stage #slide-11 { transform: translateX(-50%) scale(0.75); }
      #carousel-1:checked ~ .carousel-stage #slide-2 { transform: translateX(50%) scale(0.75); }

      #carousel-2:checked ~ .carousel-stage #slide-1 { transform: translateX(-50%) scale(0.75); }
      #carousel-2:checked ~ .carousel-stage #slide-3 { transform: translateX(50%) scale(0.75); }

      #carousel-3:checked ~ .carousel-stage #slide-2 { transform: translateX(-50%) scale(0.75); }
      #carousel-3:checked ~ .carousel-stage #slide-4 { transform: translateX(50%) scale(0.75); }

      #carousel-4:checked ~ .carousel-stage #slide-3 { transform: translateX(-50%) scale(0.75); }
      #carousel-4:checked ~ .carousel-stage #slide-5 { transform: translateX(50%) scale(0.75); }

      #carousel-5:checked ~ .carousel-stage #slide-4 { transform: translateX(-50%) scale(0.75); }
      #carousel-5:checked ~ .carousel-stage #slide-6 { transform: translateX(50%) scale(0.75); }

      #carousel-6:checked ~ .carousel-stage #slide-5 { transform: translateX(-50%) scale(0.75); }
      #carousel-6:checked ~ .carousel-stage #slide-7 { transform: translateX(50%) scale(0.75); }

      #carousel-7:checked ~ .carousel-stage #slide-6 { transform: translateX(-50%) scale(0.75); }
      #carousel-7:checked ~ .carousel-stage #slide-8 { transform: translateX(50%) scale(0.75); }

      #carousel-8:checked ~ .carousel-stage #slide-7 { transform: translateX(-50%) scale(0.75); }
      #carousel-8:checked ~ .carousel-stage #slide-9 { transform: translateX(50%) scale(0.75); }

      #carousel-9:checked ~ .carousel-stage #slide-8 { transform: translateX(-50%) scale(0.75); }
      #carousel-9:checked ~ .carousel-stage #slide-10 { transform: translateX(50%) scale(0.75); }

      #carousel-10:checked ~ .carousel-stage #slide-9 { transform: translateX(-50%) scale(0.75); }
      #carousel-10:checked ~ .carousel-stage #slide-11 { transform: translateX(50%) scale(0.75); }

      #carousel-11:checked ~ .carousel-stage #slide-10 { transform: translateX(-50%) scale(0.75); }
      #carousel-11:checked ~ .carousel-stage #slide-1 { transform: translateX(50%) scale(0.75); }

      .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
      }
    }

/* Agregado en la copia estática: el carrusel se asoma ~33px fuera de la pantalla en celular
   y generaba scroll lateral. Esto recorta ese desborde sin cambiar nada más. */
html, body {
  overflow-x: clip;
}