/* ─── HOME PAGE (index.php) ─── */
    body {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      background: var(--off-white);
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* ─── DIAMOND / RHOMBUS GRID BACKGROUND ─── */
    .diamond-grid {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.30;
      background-image: url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2780%27%20height=%2780%27><polygon%20points=%2740,4%2076,40%2040,76%204,40%27%20fill=%27none%27%20stroke=%27%23C08A34%27%20stroke-width=%270.8%27/></svg>");
      background-size: 80px 80px;
      background-repeat: repeat;
    }

    /* ─── HERO ─── */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 80px;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: var(--dark-green);
      z-index: 0;
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(45deg, rgba(192, 138, 52, 0.12) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(192, 138, 52, 0.12) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      /* Sin un ancho explícito, un hijo de flex se dimensiona por su
         contenido "sin envolver" (el algoritmo de tamaño intrínseco mide
         el texto como si no hiciera saltos de línea salvo los <br>
         forzados). Con textos largos como el tagline o el subtítulo, eso
         hacía que esta caja se calculara más ancha que la pantalla y se
         recortara contra el borde en vez de ajustar el texto. width:100%
         fuerza a que ocupe el ancho real disponible (hasta max-width) y
         deje que el texto envuelva con normalidad dentro de él. */
      width: 100%;
      max-width: 900px;
      text-align: center;
      padding: 0 40px;
      animation: fadeUp 1.2s ease both;
    }

    .hero-logo {
      width: 220px;
      margin: 0 auto 40px;
      display: block;
      filter: drop-shadow(0 0 30px rgba(192, 138, 52, 0.3));
    }

    .hero-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(38px, 5vw, 68px);
      font-weight: 300;
      color: var(--white);
      line-height: 1.15;
      margin-top: 0;
      margin-bottom: 24px;
      letter-spacing: 0.01em;
    }

    .hero-tagline em {
      font-style: italic;
      color: var(--gold-light);
    }

    .hero-tagline .reg-mark {
      font-size: 0.35em;
      margin-left: 2px;
      vertical-align: super;
    }

    .hero-sub {
      font-size: 13px;
      letter-spacing: 0.2em;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      margin-bottom: 50px;
    }

    .hero-ctas {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-primary {
      padding: 14px 36px;
      background: var(--gold);
      color: var(--dark-green);
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.25s;
      /* inline-flex + align-items centra el texto verticalmente sin
         importar el alto real del botón. Hacía falta porque .hero-ctas
         (flex, sin align-items propio) estira ambos botones al alto del
         más alto de los dos; con display:inline-block ese alto extra se
         queda debajo del texto en vez de repartirse a ambos lados. */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--r-sm);
    }

    .btn-primary:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

    .btn-outline {
      padding: 13px 35px;
      background: transparent;
      color: rgba(255, 255, 255, 0.85);
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, 0.4);
      transition: all 0.25s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--r-sm);
    }

    .btn-outline:hover {
      border-color: var(--gold);
      color: var(--gold-light);
    }

    .scroll-indicator {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      animation: bounce 2s infinite;
    }

    .scroll-indicator::after {
      content: '';
      display: block;
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, rgba(192, 138, 52, 0.6), transparent);
    }

    /* ─── SECTIONS COMMON ─── */
    section {
      position: relative;
      z-index: 1;
    }

    .section-label {
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-label::after {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--gold);
    }

    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(34px, 3.5vw, 54px);
      font-weight: 400;
      line-height: 1.15;
      color: var(--dark-green);
      margin-bottom: 24px;
    }

    .section-body {
      font-size: 15px;
      line-height: 1.8;
      color: var(--text-mid);
      max-width: 580px;
    }

    /* ─── ABOUT ─── */
    #about {
      padding: 120px 0;
      background: var(--off-white);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-visual {
      position: relative;
    }

    .about-image-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 480px;
      border-radius: var(--r-lg);
      overflow: hidden;
    }

    .about-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: var(--r-lg);
    }

    .about-card {
      background: var(--cream);
      border: 1px solid var(--border);
      padding: 60px 50px;
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
    }

    .about-card::before {
      content: '"';
      position: absolute;
      top: -20px;
      left: 30px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 200px;
      color: rgba(192, 138, 52, 0.15);
      line-height: 1;
      pointer-events: none;
    }

    .about-card p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 23px;
      font-style: italic;
      color: var(--dark-green);
      line-height: 1.6;
      position: relative;
      z-index: 1;
    }

    .about-card .card-author {
      margin-top: 24px;
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .about-accent {
      position: absolute;
      bottom: -20px;
      right: -20px;
      width: 80px;
      height: 80px;
      border: 1px solid var(--gold);
      opacity: 0.4;
      border-radius: 50%;
    }

    .stats-row {
      display: flex;
      gap: 40px;
      margin-top: 48px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }

    .stat {
      text-align: left;
    }

    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 48px;
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      display: block;
    }

    .stat-label {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-top: 6px;
    }

    /* ─── PRACTICE AREAS ─── */
    #practice {
      padding: 120px 0;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }

    #practice::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(45deg, rgba(192, 138, 52, 0.1) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(192, 138, 52, 0.1) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    #practice .section-title {
      color: var(--dark-green);
      text-align: center;
    }

    #practice .section-label {
      color: var(--gold);
      justify-content: center;
    }

    .practice-intro .gold-divider {
      margin-left: auto;
      margin-right: auto;
    }

    .practice-intro {
      max-width: 600px;
      text-align: center;
      margin: 0 auto 60px;
    }

    .practice-intro .section-body {
      color: var(--text-mid);
      max-width: none;
    }

    .practice-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      background: transparent;
      border: none;
    }

    .practice-item {
      background: var(--white);
      border: 1px solid var(--border);
      padding: 44px 36px;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      border-radius: var(--r-md);
    }

    .practice-item::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      transform: scaleX(0);
      transition: transform 0.4s;
      border-radius: 0 0 var(--r-md) var(--r-md);
    }

    .practice-item:hover {
      background: var(--off-white);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(192, 138, 52, 0.12);
    }

    .practice-item:hover::before {
      transform: scaleX(1);
    }

    .practice-icon {
      width: 36px;
      height: 36px;
      margin-bottom: 20px;
      opacity: 0.6;
    }

    .practice-icon-svg {
      display: block;
      width: 40px;
      height: 40px;
      margin-bottom: 20px;
      color: var(--gold);
      opacity: 0.9;
    }

    .practice-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--dark-green);
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .practice-desc {
      font-size: 13px;
      line-height: 1.75;
      color: var(--text-mid);
      text-align: justify;
    }

    /* ─── APPROACH ─── */
    #approach {
      padding: 120px 0;
      background: var(--white);
    }

    #approach .section-label {
      justify-content: center;
    }

    .approach-intro {
      max-width: 600px;
      text-align: center;
      margin: 0 auto 20px;
    }

    .approach-intro .gold-divider {
      margin: 20px auto 0;
    }

    /* Cada tarjeta usa la foto que le corresponde por posición; el orden
       del bucle en pages/home.php nunca cambia (siempre son 4, en este
       orden), así que puede fijarse aquí por :nth-child en vez de
       generarse inline en el PHP. */
    .approach-item:nth-child(1) {
      background-image: url('../../files/approach/1.jpg');
    }

    .approach-item:nth-child(2) {
      background-image: url('../../files/approach/2.jpg');
    }

    .approach-item:nth-child(3) {
      background-image: url('../../files/approach/3.jpg');
    }

    .approach-item:nth-child(4) {
      background-image: url('../../files/approach/4.jpg');
    }

    .approach-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 60px;
    }

    .approach-item {
      padding: 50px 36px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
      background-color: var(--off-white);
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }

    .approach-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(248, 246, 242, 0.90);
      border-radius: var(--r-md);
      z-index: 0;
    }

    .approach-item>* {
      position: relative;
      z-index: 1;
    }

    .approach-item:hover {
      background-color: var(--cream);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(192, 138, 52, 0.1);
    }

    .approach-item:hover::before {
      background: rgba(238, 233, 224, 0.90);
    }

    .approach-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 60px;
      font-weight: 300;
      color: var(--gold);
      opacity: 0.3;
      line-height: 1;
      margin-bottom: 20px;
    }

    .approach-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      color: var(--dark-green);
      margin-top: 0;
      margin-bottom: 14px;
      font-weight: 500;
    }

    .approach-text {
      font-size: 13px;
      line-height: 1.75;
      color: var(--text-mid);
      text-align: justify;
    }

    /* ─── TEAM ─── */
    #team {
      padding: 120px 0;
      background: var(--off-white);
    }

    .team-header {
      max-width: 600px;
      text-align: center;
      margin: 0 auto 60px;
    }

    .team-header .section-label {
      justify-content: center;
    }

    .team-header .gold-divider {
      margin-left: auto;
      margin-right: auto;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .team-card {
      background: var(--white);
      overflow: hidden;
      position: relative;
      border: 1px solid transparent;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      border-radius: var(--r-md);
    }

    .team-card:hover {
      border-color: var(--gold);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(192, 138, 52, 0.12);
    }

    .team-photo {
      width: 100%;
      aspect-ratio: 3/4;
      background: var(--dark-green);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: var(--r-md) var(--r-md) 0 0;
    }

    .team-photo-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #09221E 0%, #143830 40%, #0d2b24 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .team-photo-placeholder img {
      width: 270px;
      height: 300px;
      top: 10;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 10%;
      border: 3px solid var(--gold);
      transition: opacity 0.3s ease;
    }

    .team-initials {
      font-family: 'Cormorant Garamond', serif;
      font-size: 48px;
      font-weight: 300;
      color: rgba(192, 138, 52, 0.4);
    }

    .team-info {
      padding: 24px 26px;
      border-top: 2px solid var(--gold);
      text-align: center;
    }

    .team-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      color: var(--dark-green);
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 2px;
    }

    .team-email {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--gold);
      text-decoration: none;
      letter-spacing: 0.02em;
      margin-bottom: 2px;
      transition: color 0.2s;
    }

    .team-email:last-of-type {
      margin-bottom: 12px;
    }

    .team-email:hover {
      color: var(--dark-green);
      text-decoration: underline;
    }

    .team-role {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-mid);
      opacity: 0.8;
    }

    .team-specialty {
      font-size: 12px;
      color: var(--text-mid);
      opacity: 0.8;
      margin-top: 10px;
      line-height: 1.5;
    }

    .team-photo {
      cursor: pointer;
    }

    /* ─── TEAM MODAL ─── */
    .team-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(9, 34, 30, 0.72);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .team-modal-overlay.open {
      display: flex;
      opacity: 1;
    }

    .team-modal {
      background: var(--white);
      border-radius: var(--r-md);
      max-width: 700px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transform: translateY(16px);
      transition: transform 0.25s ease;
    }

    .team-modal-overlay.open .team-modal {
      transform: translateY(0);
    }

    .team-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--off-white);
      color: var(--dark-green);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      z-index: 2;
    }

    .team-modal-close:hover {
      background: var(--border);
    }

    .team-modal-header {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 32px 32px 20px;
      border-bottom: 2px solid var(--gold);
    }

    .team-modal-photo {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 10%;
      border: 3px solid var(--gold);
      flex-shrink: 0;
    }

    .team-modal-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      color: var(--dark-green);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .team-modal-role {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.9;
      margin-bottom: 8px;
    }

    .team-modal-email {
      display: block;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--gold);
      text-decoration: none;
    }

    .team-modal-email+.team-modal-email {
      margin-top: 2px;
    }

    .team-modal-email:hover {
      text-decoration: underline;
    }

    .team-modal-bio {
      padding: 24px 32px 32px;
      font-size: 14px;
      line-height: 1.8;
      color: var(--text-mid);
      white-space: pre-line;
      text-align: justify;
    }

    @media (max-width: 600px) {
      .team-modal-header {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px 20px;
      }
    }

    /* ─── INDUSTRIES ─── */
    #industries {
      padding: 120px 0;
      background: var(--off-white);
      position: relative;
    }

    #industries::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(45deg, rgba(192, 138, 52, 0.08) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(192, 138, 52, 0.08) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    #industries .section-title {
      color: var(--dark-green);
      text-align: center;
    }

    #industries .section-label {
      color: var(--gold);
      justify-content: center;
    }

    #industries .gold-divider {
      margin-left: auto;
      margin-right: auto;
    }

    .industries-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 60px;
      position: relative;
      z-index: 1;
    }

    .industry-item {
      padding: 26px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 12px;
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
      text-decoration: none;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }

    .industry-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(192, 138, 52, 0.1);
      border-color: var(--gold);
    }

    /* Cols 1 & 3 — base: plain light card */
    .industry-item:nth-child(4n+1),
    .industry-item:nth-child(4n+3) {
      background: #F6EDE1;
    }

    .industry-item:nth-child(4n+1):hover,
    .industry-item:nth-child(4n+3):hover {
      background: #E2DACF;
    }

    /* Cols 2 & 4 — dark green card, echoing the hero/brand background */
    .industry-item:nth-child(4n+2),
    .industry-item:nth-child(4n) {
      background: #163B34;
      border-color: #163B34;
    }

    .industry-item:nth-child(4n+2):hover,
    .industry-item:nth-child(4n):hover {
      background: var(--dark-green);
    }

    .industry-item:nth-child(4n+2) .industry-name,
    .industry-item:nth-child(4n) .industry-name {
      color: var(--off-white);
    }

    .industry-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 19px;
      line-height: 1.3;
      color: var(--dark-green);
      font-weight: 400;
      text-align: center;
    }

    /* ─── CLIENTS ─── */
    #clients {
      padding: 120px 0 130px;
      background: var(--cream);
      overflow: hidden;
    }

    #clients .section-title {
      color: var(--dark-green);
      text-align: center;
    }

    #clients .section-label {
      color: var(--gold);
      justify-content: center;
    }

    .clients-intro {
      text-align: center;
    }

    .clients-intro .gold-divider {
      margin: 20px auto 0;
    }

    .clients-carousel {
      width: 100%;
      min-height: 100px;
      overflow: hidden;
      margin-top: 60px;
      cursor: grab;
      touch-action: pan-y;
      position: relative;
    }

    .clients-carousel+.clients-carousel {
      margin-top: 24px;
    }

    /* Decorative edge fade only — kept off the draggable element itself so it
       never interferes with pointer hit-testing on the boundary logos. */
    .clients-carousel::before,
    .clients-carousel::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 110px;
      z-index: 2;
      pointer-events: none;
    }

    .clients-carousel::before {
      left: 0;
      background: linear-gradient(90deg, var(--cream), rgba(238, 233, 224, 0));
    }

    .clients-carousel::after {
      right: 0;
      background: linear-gradient(270deg, var(--cream), rgba(238, 233, 224, 0));
    }

    .clients-carousel.dragging {
      cursor: grabbing;
    }

    .clients-track {
      display: flex;
      align-items: center;
      width: max-content;
      will-change: transform;
    }

    .client-logo {
      flex: 0 0 auto;
      height: 100px;
      max-width: 170px;
      margin: 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: grayscale(100%);
      opacity: 0.55;
      transition: filter 0.3s ease, opacity 0.3s ease;
    }

    .client-logo:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    .client-logo img {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
    }

    /* ─── CONTACT ─── */
    #contact {
      padding: 120px 0;
      background: var(--off-white);
    }

    .contact-centered {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    #contact .section-label {
      justify-content: center;
    }

    .contact-centered .gold-divider {
      margin: 20px auto 50px;
    }

    .contact-blocks-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 60px;
    }

    .contact-bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
    }

    .contact-social-col .social-btns {
      width: 320px;
      max-width: 100%;
    }

    .contact-aside-img {
      display: block;
      width: 300px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 861 / 1280;
      object-fit: cover;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }

    .contact-block-card {
      background: var(--white);
      border: 1px solid var(--border);
      padding: 40px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      border-radius: var(--r-md);
    }

    .contact-block-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      transform: scaleX(0);
      transition: transform 0.4s;
      border-radius: 0 0 var(--r-md) var(--r-md);
    }

    .contact-block-card.contact-block-clickable {
      cursor: pointer;
    }

    .contact-block-card:hover {
      border-color: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(192, 138, 52, 0.12);
    }

    .contact-block-card:hover::after {
      transform: scaleX(1);
    }

    .contact-block-icon {
      color: var(--gold);
      margin-bottom: 18px;
      opacity: 0.85;
    }

    .contact-block-whatsapp .contact-block-icon {
      color: #25D366;
    }

    .contact-block-label {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

    .contact-block-content {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      color: var(--dark-green);
      line-height: 1.65;
      font-weight: 400;
    }

    .contact-block-content a {
      color: var(--dark-green);
      text-decoration: none;
      transition: color 0.2s;
    }

    .contact-block-content a:hover {
      color: var(--gold);
    }

    .whatsapp-link {
      color: var(--dark-green) !important;
    }

    .whatsapp-link:hover {
      color: #25D366 !important;
    }

    .whatsapp-link span {
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      letter-spacing: 0.1em;
      color: var(--gold);
      display: block;
      margin-top: 4px;
    }

    .contact-social-col .contact-block-label {
      text-align: center;
      margin-bottom: 18px;
    }

    .social-btns {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 28px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--dark-green);
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: all 0.25s;
      border-radius: var(--r-sm);
    }

    .social-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .social-fb:hover {
      border-color: #1877F2;
      color: #1877F2;
    }

    /* ─── FOOTER ─── */
    /* ─── ANIMATIONS ─── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(-8px);
      }
    }

    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

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

    /* ─── GOLD DIVIDER ─── */
    .gold-divider {
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      margin: 20px 0 32px;
    }

    @media (max-width: 975px) {
      .team-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Same cap as the 1-column layout, so cards stay the same size
         regardless of how many fit per row. */
      .team-card {
        max-width: 353px;
        margin: 0 auto;
      }
    }

    /* ─── MOBILE ─── */
    @media (max-width: 768px) {
      /* En escritorio el hero se fija a min-height:100vh a propósito (efecto
         "full bleed"). En móvil eso es justo lo que hacía que "no se
         redujera como las demás secciones": aunque el contenido creciera
         al envolver en más líneas (los subtítulos son más largos en
         algunos idiomas, p. ej. italiano/portugués), la sección se quedaba
         clavada al alto exacto de la pantalla en vez de crecer con su
         contenido como el resto de secciones, apretando el logo, el texto
         y los botones entre sí. Aquí el alto pasa a depender del
         contenido, igual que en las demás secciones.  */
      #hero {
        min-height: 0;
        padding: 120px 0 60px;
      }

      .hero-content {
        /* Menos padding lateral que en escritorio: en pantallas angostas,
           los 40px por lado dejaban muy poco ancho real para el texto y
           los botones, que quedaban pegados al borde. */
        padding: 0 24px;
      }

      .hero-logo {
        width: 160px;
        margin-bottom: 28px;
      }

      .hero-tagline {
        /* overflow-wrap: red de seguridad para que una palabra larga en
           cualquier idioma (los compuestos del italiano/portugués pueden
           ser más largos que el original en español) envuelva en vez de
           desbordar el borde de la pantalla. */
        overflow-wrap: break-word;
      }

      .hero-sub {
        overflow-wrap: break-word;
        letter-spacing: 0.12em;
        margin-bottom: 36px;
      }

      .hero-ctas {
        width: 100%;
      }

      .hero-ctas .btn-primary,
      .hero-ctas .btn-outline {
        /* Cuando los dos botones no caben uno junto al otro, que ocupen
           todo el ancho disponible en vez de flotar cada uno pegado a un
           borde: se ven como una sola columna centrada, no como si les
           faltara margen. */
        flex: 1 1 200px;
        text-align: center;
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .contact-blocks-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .contact-bottom {
        flex-direction: column;
        gap: 36px;
      }

      .contact-bottom .contact-aside-img {
        width: 320px;
      }

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

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

      .industries-list {
        grid-template-columns: 1fr;
      }

      .industry-item {
        border-right: none !important;
      }

    }

    @media (max-width: 650px) {
      .team-grid {
        grid-template-columns: 1fr;
      }

      /* Caps each card at the same width it has when 3 fit in a row on
         desktop ((1120px container - 2*30px gaps) / 3), so it doesn't
         stretch edge-to-edge just because it's alone in its row. */
      .team-card {
        max-width: 353px;
        margin: 0 auto;
      }
    }