/* OJAI Alimentos – Responsive Fixes (non-breaking, no content changes)
   Coloca este archivo DESPUÉS de tu hoja principal para que tenga prioridad.
*/

/* Tipografía fluida mínima (no altera tamaños drásticamente) */
:root{
  --ojai-fs-body-min: 14px;
  --ojai-fs-body-max: 16px;
  --ojai-line-body: 1.6;
}
html { font-size: clamp(var(--ojai-fs-body-min), 1.5vw, var(--ojai-fs-body-max)); }
body { line-height: var(--ojai-line-body); -webkit-text-size-adjust: 100%; }

/* Imágenes y multimedia adaptativos */
img, svg, canvas, video { max-width: 100%; height: auto; }
figure { margin: 0; }

/* Evita scroll horizontal inesperado */
html, body { overflow-x: hidden; }
.container { padding-left: 1rem; padding-right: 1rem; }

/* Garantiza envoltura de filas aun si alguna regla previa la rompio */
.row { flex-wrap: wrap !important; }

/* Carrusel: indicadores circular/scrollable en móviles */
.carousel-indicators.circles-icons{
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.3) transparent;
}
.carousel-indicators.circles-icons::-webkit-scrollbar{ height:6px; }
.carousel-indicators.circles-icons::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius: 999px; }

/* Asegura que los elementos del carrusel nunca desborden */
.carousel .carousel-item{
  padding: 1rem 0;
}
.carousel .carousel-caption{ word-wrap: anywhere; }

/* Tarjetas/columnas con separación consistente en móviles */
[class*="col-"]{ margin-bottom: 1rem; }
@media (min-width: 768px){
  [class*="col-"]{ margin-bottom: 0; }
}

/* Títulos y párrafos: legibilidad en pantallas pequeñas */
h1,h2,h3,.titulo{
  line-height: 1.25;
  word-wrap: break-word;
}
p, .main-tipografia{
  text-wrap: pretty;
  text-align: justify;
}

/* Tap targets mínimos para enlaces del carrusel/controles */
.carousel-control-prev, .carousel-control-next,
.carousel-indicators.circles-icons .circulos{
  min-width: 44px; min-height: 44px;
}

/* Imágenes decorativas con contención */
.max-width{ width: 100%; height: auto; }

/* Evita que los svgs/íconos empujen el layout */
svg{ vertical-align: middle; }

/* Footer y bloques densos: respiración en móvil */
footer, .section, .bloque{
  padding-top: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(16px, 3vw, 40px);
}

/* Corrección de objetos absolutamente posicionados que causen CLS */
[style*="position: absolute"][style*="top"], [style*="position:absolute"][style*="top"]{
  will-change: transform;
}

/* Utilidades suaves */
.hidden-overflow{ overflow: hidden; }
.rounded-soft{ border-radius: .75rem; }
.shadow-soft{ box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Ensancha la tarjeta blanca de "Historia" un 10% en desktop, sin romper móvil */
@media (min-width: 992px){
  .history-card--wide{
    width: 110%;        /* +10% de ancho */
    max-width: none;     /* ignora max-width previo si lo hubiera */
    margin-left: -5%;    /* compensa para que quede centrada en su columna */
  }
}

/* Bloque simple de valores con icono y descripciones compactas */
.adn-values h4{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 10px 0 4px;         /* espacio compacto arriba/abajo */
  line-height: 1.25;
}
.adn-values h4::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  /* Estrella naranja (SVG embebido, accesible y sin librerías) */
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">\
<path fill="%23e66b10" d="M12 2l2.9 5.88 6.5.95-4.7 4.58 1.1 6.44L12 17.77 6.2 19.85l1.1-6.44-4.7-4.58 6.5-.95L12 2z"/>\
</svg>') center/contain no-repeat;
}

/* La descripción que sigue a cada H4 debe ser más pequeña y legible */
.adn-values h4 + p{
  font-size: 1.50rem;         /* más pequeño que el cuerpo */
  line-height: 1.6;
  margin: 0 0 10px;           /* separa cada par valor/desc */
  color: #444;                /* sutilmente más tenue */
  text-align: justify;        /* conserva estilo de texto */
}

/* Opcional: evita que se partan títulos por sílabas raras */
.adn-values h4, .adn-values h4 + p{
  word-break: normal;
  hyphens: auto;
}

.adn-label{
  color: #e66b10;   /* naranja institucional */
  font-weight: 700; /* resalta el prefijo */
  letter-spacing: .3px;
}