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

        :root {
          --cream: #f5f0e8;
          --cream-dark: #ede5d5;
          --warm-brown: #6b4f3a;
          --dark-brown: #3a2a1e;
          --forest-green: #3d5a3e;
          --forest-green-light: #4e7050;
          --burn-orange: #C15E22;
          --burn-orange-dark: #AE551F;
          --gold: #b8924a;
          --text-body: #5a4535;
          --text-light: #8a7060;
          --section-divider: #c8b89a;
          --font-serif: 'Cormorant Garamond', Georgia, serif;
          --font-body: 'EB Garamond', Georgia, serif;
        }

        html { scroll-behavior: smooth; }

        body {
          font-family: var(--font-body);
          background-color: var(--cream);
          color: var(--text-body);
          overflow-x: hidden;
        }

        /* ============ HERO ============ */
        .hero {
          margin-top: 65px;
          position: relative;
          width: 100%;
          height: 52vh;
          min-height: 340px;
          max-height: 480px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: auto;
          margin-right: auto;
          max-width: calc(100% - 48px);
          border-radius: 0 0 16px 16px;
        }

        .hero-bg {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(to bottom, rgba(20,15,8,0.2) 0%, rgba(20,15,8,0.5) 100%),
            /*url('../img/itw2.jpg') center/cover no-repeat;*/
            url('../img/header_serveis.avif') center/cover no-repeat;
          border-radius: 0 0 16px 16px;
          transition: transform 6s ease-out;
        }

        .hero-content {
          position: relative;
          z-index: 2;
          text-align: center;
          color: #fff;
          padding: 0 32px;
          animation: fadeUp 1s ease both;
        }

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

        .hero-title {
          font-family: var(--font-serif);
          font-size: clamp(2.2rem, 5vw, 4rem);
          font-weight: 400;
          letter-spacing: 0.03em;
          text-shadow: 0 2px 16px rgba(0,0,0,0.35);
          margin-bottom: 0.4em;
          line-height: 1.15;
        }

        .hero-subtitle {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: clamp(1rem, 2vw, 1.35rem);
          font-weight: 300;
          opacity: 0.93;
          text-shadow: 0 1px 8px rgba(0,0,0,0.3);
          margin-bottom: 1.8em;
          line-height: 1.5;
        }

        .hero-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 12px 32px;
          background: rgba(255,255,255,0.15);
          backdrop-filter: blur(6px);
          color: #fff;
          font-family: var(--font-body);
          font-size: 1rem;
          letter-spacing: 0.06em;
          text-decoration: none;
          border: 1.5px solid rgba(255,255,255,0.7);
          border-radius: 100px;
          cursor: pointer;
          transition: background 0.3s ease, transform 0.2s ease;
        }
        .hero-btn:hover {
          background: rgba(255,255,255,0.28);
          transform: translateY(-2px);
        }
        .hero-btn-arrow { font-size: 0.9rem; transition: transform 0.2s; }
        .hero-btn:hover .hero-btn-arrow { transform: translateX(4px); }

        /* ============ SECTION SHARED ============ */
        .section-heading {
          font-family: var(--font-serif);
          font-size: clamp(1.7rem, 3.5vw, 2.5rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.04em;
          text-align: center;
          margin-bottom: 0.3em;
        }

        .divider-dots {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin: 12px 0 32px;
        }
        .divider-dots span {
          width: 5px; height: 5px;
          border-radius: 50%;
          background: var(--section-divider);
          display: block;
        }
        .divider-dots span:nth-child(2) { width: 4px; height: 4px; opacity: 0.6; }

        .divider-dots::before,
        .divider-dots::after {
          content: '';
          flex: 1;
          display: block;
          height: 1px;
          background: var(--section-divider);
          min-width: 100px;
        }

        /* ============ INTRO TEXT ============ */
        .intro-section {
          padding: 64px 24px 48px;
          max-width: 680px;
          margin: 0 auto;
          text-align: center;
        }

        .intro-p {
          font-family: var(--font-body);
          font-size: clamp(0.95rem, 1.5vw, 1.1rem);
          color: var(--text-body);
          line-height: 1.8;
          margin-bottom: 0.6em;
        }
        .intro-p strong {
          font-weight: 500;
          color: var(--dark-brown);
        }
        .intro-p em {
          font-style: italic;
        }
        .intro-p-italic {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: clamp(1.05rem, 1.8vw, 1.25rem);
          color: var(--warm-brown);
          line-height: 1.7;
          margin-top: 0.8em;
        }

        /* ============ SERVICE CARDS ============ */
        .services-wrap {
          padding: 0 24px 72px;
          max-width: 1300px;
          margin: 0 auto;
        }

        .services-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
        }

        .service-card {
          background: #fff;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 24px rgba(58,42,30,0.08);
          display: flex;
          flex-direction: column;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .service-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 16px 48px rgba(58,42,30,0.14);
        }

        .service-img-wrap {
          width: 100%;
          aspect-ratio: 4/3;
          overflow: hidden;
        }
        .service-img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.5s ease;
          filter: sepia(0.1) brightness(0.96);
        }
        .service-card:hover .service-img { transform: scale(1.04); }

        .service-body {
          padding: 24px 22px 28px;
          flex: 1;
          display: flex;
          flex-direction: column;
        }

        .service-title {
          font-family: var(--font-serif);
          font-size: 1.3rem;
          font-weight: 500;
          color: var(--dark-brown);
          margin-bottom: 10px;
          line-height: 1.3;
        }

        .service-desc {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.95rem;
          color: var(--text-light);
          line-height: 1.65;
          margin-bottom: 24px;
          flex: 1;
        }

        .service-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 10px 22px;
          background: var(--burn-orange);
          color: #fff;
          font-family: var(--font-body);
          font-size: 0.9rem;
          font-weight: bold;
          letter-spacing: 0.05em;
          text-decoration: none;
          border-radius: 100px;
          border: none;
          cursor: pointer;
          width: fit-content;
          transition: background 0.3s, transform 0.2s;
        }
        .service-btn:hover {
          background: var(--burn-orange-dark);
          /*transform: translateX(3px);*/
        }
        .service-btn-arrow { font-size: 0.8rem; }

        /* ============ CÓMO CAMINAMOS ============ */
        .como-wrap {
          background: var(--cream-dark);
          padding: 64px 24px;
          border-top: 1px solid var(--section-divider);
          border-bottom: 1px solid var(--section-divider);
        }

        .como-inner {
          max-width: 900px;
          margin: 0 auto;
        }

        .como-steps {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
          margin-top: 48px;
        }

        .como-step {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .como-step-header {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .como-divider {
          height: 1px;
          background: var(--section-divider);
        }

        .como-number {
          font-family: var(--font-serif);
          font-size: 3.5rem;
          font-weight: 300;
          color: var(--burn-orange);
          line-height: 1;
          margin-bottom: 4px;
        }

        .como-title {
          font-family: var(--font-serif);
          font-size: 1.2rem;
          font-weight: 500;
          color: var(--dark-brown);
          line-height: 1.3;
        }

        .como-desc {
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.95rem;
          font-weight: bold;
          color: var(--text-light);
          line-height: 1.65;
          max-width: 165px;
        }

        /* ============ QUOTE BANNER ============ */
        .quote-banner {
          position: relative;
          overflow: hidden;
          border-radius: 16px;
          margin: 64px 24px;
          max-width: calc(100% - 48px);
          margin-left: auto;
          margin-right: auto;
          max-width: 1060px;
          min-height: 260px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

        .quote-banner-bg {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(to right, rgba(20,12,6,0.7) 0%, rgba(20,12,6,0.2) 70%, transparent 100%),
            /*url('https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=1200&q=80') center/cover no-repeat;*/
            url('../img/ma_marieta.avif') right center / cover no-repeat;
          border-radius: 16px;
        }

        .quote-banner-text {
          position: relative;
          z-index: 2;
          color: #fff;
          padding: 56px 56px;
          max-width: 600px;
        }

        .quote-banner-quote {
          font-family: var(--font-serif);
          font-size: clamp(1.3rem, 2.5vw, 2rem);
          font-weight: 300;
          line-height: 1.55;
        }
        .quote-banner-quote em {
          font-style: italic;
          font-weight: 400;
        }

        /* ============ FAQ ============ */

        .faq-wrap {
          padding: 64px 24px 80px;
          max-width: 1000px;
          margin: 0 auto;
        }

        .faq-section-heading {
          font-family: var(--font-serif);
          font-size: clamp(1.7rem, 3.5vw, 2.5rem);
          font-weight: 400;
          color: var(--dark-brown);
          letter-spacing: 0.04em;
          margin-bottom: 0.3em;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
        }

        .faq-section-heading::before,
        .faq-section-heading::after {
          content: '';
          flex: 1;
          display: block;
          height: 1px;
          background: var(--section-divider);
          min-width: 100px;
        }

        .faq-list {
          margin-top: 40px;
          display: flex;
          flex-direction: column;
          gap: 0;
          border-top: 1px solid var(--section-divider);
        }

        .faq-item {
          border-bottom: 1px solid var(--section-divider);
          overflow: hidden;
        }

        .faq-question {
          width: 100%;
          background: none;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 0;
          text-align: left;
          gap: 16px;
        }

        .faq-question-text {
          font-family: var(--font-body);
          font-size: 1rem;
          color: var(--text-body);
          letter-spacing: 0.02em;
          line-height: 1.5;
        }

        .faq-icon {
          flex-shrink: 0;
          width: 28px; height: 28px;
          border: 1.5px solid var(--section-divider);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.9rem;
          color: var(--text-light);
          transition: transform 0.3s ease, background 0.2s, color 0.2s;
        }
        .faq-item.open .faq-icon {
          transform: rotate(90deg);
          background: var(--burn-orange);
          color: #fff;
          border-color: var(--burn-orange);
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease, padding 0.3s ease;
        }
        .faq-item.open .faq-answer {
          max-height: 300px;
        }

        .faq-answer-inner {
          padding: 0 0 20px;
          font-family: var(--font-serif);
          font-style: italic;
          font-size: 0.98rem;
          color: var(--text-light);
          line-height: 1.75;
        }

        /* ============ SCROLL REVEAL ============ */
        .reveal {
          opacity: 0;
          transform: translateY(24px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible { opacity: 1; transform: none; }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 768px) {
          .services-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
          .como-steps { grid-template-columns: 1fr; gap: 32px; }
          .nav-links { display: none; }
          .quote-banner-text { padding: 40px 28px; }
        }
        @media (max-width: 600px) {
          .hero { max-width: calc(100% - 24px); margin-top: 74px; }
          .quote-banner { margin: 40px 12px; }
        }