/* ===== TIENDA FÍSICA (desktop) ===== */
.tienda-fisica-section{
  background:#F5F3EE;           /* mismo fondo suave del site */
  overflow:hidden;
}

/* imagen + círculo */
.tienda-fisica__image{ position:relative; isolation:isolate; }
.tienda-fisica__image img{
  display:block; width:100%; height:auto; object-fit:cover; position:relative; z-index:2;
}

/* círculo decorativo (tono melocotón) */
.tienda-fisica__circle{
  position:absolute; z-index:1; pointer-events:none;
  width: clamp(280px, 32vw, 520px);
  aspect-ratio: 1 / 1; border-radius: 50%;
  background:#FAC3B6;           /* melocotón suave */
  left: -12%;                    /* ligeramente fuera del contenedor */
  bottom: -22%;
  
}

/* contenido */
.tienda-fisica__content{
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  gap: .75rem;                   /* ritmo vertical */
}

/* título grande, en mayúsculas */
.tienda-fisica__title{
 font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:-.3px;
  color:#6a6666;
  text-transform:uppercase;
  font-size:42px;            /* guía: ~42pt */
  margin:0 0 40px 0;
}

/* párrafos */
.tienda-fisica__content p{
  max-width: 64ch; line-height:1.55; margin-bottom:.5rem;
}

/* dirección (con viñeta como en el mock) */
.tienda-fisica__address{
  font-size: clamp(16px, 1vw, 18px);
  line-height:1.6; color:#1f2020;
  position:relative; padding-left: 1.25rem;
}
.tienda-fisica__address::before{
  content:"•"; position:absolute; left:0; top:.2rem; font-size:1.25rem; color:#1f2020;
}

/* ===== TIENDA FÍSICA — ajustes desktop ===== */
@media (min-width: 1024px){
  /* centra verticalmente ambas columnas */
  .tienda-fisica-section .row{
    align-items: center;
  }

  /* imagen un poco más pequeña (columna 42%) */
  .tienda-fisica__image{
    flex: 0 0 52%;
    max-width: 52%;
  }
  .tienda-fisica__image img{
    width: 85%;            /* no ocupa toda la columna */
    margin-left: -25%;       /* aire a la izquierda como en el mock */
  }

  /* contenido más ancho (58%) y centrado verticalmente */
  .tienda-fisica__content{
    flex: 0 0 48%;
    max-width: 425;
    justify-content: center;     /* centro vertical del bloque */
  }

  /* texto justificado y un pelín más de ancho de lectura */
  .tienda-fisica__content p{
    max-width: 72ch;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

  /* círculo más grande y más visible */
  .tienda-fisica__circle{
    width: clamp(520px, 52vw, 760px);   /* ↑ mucho más grande */
    left: -96%;
    top: 20%;
    bottom: -28%;
  }

  .tienda-fisica__title{ margin-bottom: 1rem; }
}

/* ===== TIENDA FÍSICA — móvil (fix overlap + círculo) ===== */
@media (max-width: 991.98px){

  /* Grid con una sola columna y filas automáticas */
  .tienda-fisica-section .row{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 24px;
  }

  /* Hacemos “transparentes” los contenedores de texto para poder
     posicionar sus hijos directamente como ítems del grid */
  .tienda-fisica__content{ display: contents; }

  /* 1) TÍTULO en la primera fila */
  .tienda-fisica__title{
    grid-column: 1 / -1;
    grid-row: 1;                /* fila 1 */
    text-align: center;
    margin: 0 0 8px 0;
    font-size: clamp(24px, 7vw, 32px);
  }

  /* 2) IMAGEN ocupa la fila 2, al 100% de anchura */
  .tienda-fisica__image{
    grid-column: 1 / -1;
    grid-row: 2;                /* fila 2 */
    position: relative;         /* anclaje para el círculo */
  }
  .tienda-fisica__image img{
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* CÍRCULO: abajo-derecha de la imagen */
  .tienda-fisica__circle{
    position: absolute;
    z-index: 1;                 /* por detrás de la foto (img tiene z-index:2) */
    width: clamp(160px, 55vw, 340px);
    right: -10vw;               /* esquina derecha */
    bottom: -100vw;              /* asomando por abajo */
    left: auto;                 /* aseguramos anclaje derecha */
    opacity: .6;
  }

  /* 3) RESTO DE TEXTO después de la imagen, una fila cada uno */
  /* (no asignamos grid-area para que el auto-placement cree filas 3, 4, 5…) */
  .tienda-fisica__content > :not(.tienda-fisica__title){
    grid-column: 1 / -1;
    padding: 0 18px;            /* aire lateral */
  }
  .tienda-fisica__content p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.55;
  }
  .tienda-fisica__address{ padding-left: 1.25rem; }
}