/* ====================== */
/* BASE (común a todos)   */
/* ====================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Fuente-Regular,sans-serif}
a{font-size:14px;line-height:1.7;color:#666;transition:all .2s}
a:hover{text-decoration:none}
hr{margin:4px;border:0;border-top:1px solid #eee}

.fondo {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  padding: 5px;
  background: #000;
  
}
.fondo{width:100%;min-height:100vh;padding:5px;}

.contenedor {
  width: 650px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 95px 10px 95px;
}


.logo img{display:block;margin:auto;max-width:100%}
.cabecera{text-align:center}

/* Utilidades generales de texto (los tokens dinámicos los inyectas por inline <style> o :root) */
.txtCabecera{line-height:1.5;padding-left:10px}
.txtArticulo{line-height:1.5}
.txtArticuloCorto{line-height:1.5}
.txtDC{line-height:1.5}
.txtPrecio,.txtPrecioLargo{text-align:right}
.optAlergeno{display:inline-block}

/* Responsive base */
@media (max-width:992px){ .contenedor{  padding: 10px 85px 10px 85px} }
@media (max-width:576px){ .contenedor{  padding: 10px 85px 10px 85px} }
@media (max-width: 576px) {
  .contenedor {
    padding: 10px 15px 10px 15px;
  }
}
/* ====================== */
/* TIPO 1 (antes maincliente1) */
/* ====================== */
.tipo-1 .txtCabecera{display:inline-block;width:100%;text-align:left}
.tipo-1 .txtArticulo{display:inline-block;width:80%;padding-left:10px;text-align:left}
.tipo-1 .txtArticuloCorto{display:inline-block;width:60%;padding-left:10px;text-align:left}
.tipo-1 .txtDC{padding-left:20px;text-align:left}
.tipo-1 .txtPrecio{display:inline-block;width:15%}
.tipo-1 .txtPrecioLargo{display:inline-block;width:35%}

/* ====================== */
/* TIPO 2 (antes maincliente2) */
/* ====================== */
.tipo-2 hr{margin:4px;border-top:1px solid #eee}
.tipo-2 .txtCabecera{text-align:left;padding-left:10px}
.tipo-2 .txtArticulo{display:inline-block;width:95%;padding-left:10px;text-align:left}
.tipo-2 .txtDC{padding-left:20px;text-align:left}
.tipo-2 .txtPrecio{display:inline-block;width:95%;padding-left:10px;text-align:left}
.tipo-2 .alergenos{padding-left:10px}

/* ====================== */
/* TIPO 3 (antes maincliente3) */
/* ====================== */
.tipo-3 .txtCabecera{padding-left:10px;text-align:left}
.tipo-3 .txtArticulo{display:inline-block;width:95%;padding-left:10px;text-align:left}
.tipo-3 .txtDC{padding-left:20px;text-align:left}
.tipo-3 .txtPrecio{display:inline-block;width:95%;padding-left:10px;text-align:left}
.tipo-3 .Elemento{display:inline-block;width:80%}
.tipo-3 .Foto{display:inline-block;width:20%;vertical-align:top;padding-top:3px}
.tipo-3 .Foto img{border-radius:20px}

/* ====================== */
/* TIPO 4 (antes maincliente4 - grid/cards) */
/* ====================== */
/* Ojo: el CSS del modal mejor fuera (global), no scopeado; aquí solo cards/grid */
.tipo-4 .card-redondeada{border-radius:1rem;overflow:hidden}
.tipo-4 .txtCabecera{text-align:left;padding-left:10px}
.tipo-4 .txtArticulo{display:inline-block;width:100%;line-height:1;text-align:center}
.tipo-4 .txtDC{width:100%;text-align:center}
.tipo-4 .txtPrecio{width:100%;text-align:center}



:root{
  --card4-img-h: 130px; /* ajusta a tu gusto (180-220px suele ir bien) */
}



.tipo-4 .card-product{ height:100%; display:flex; flex-direction:column; }
.tipo-4 .card-media{ position:relative; }
.tipo-4 .media-box{ height:var(--card4-img-h); overflow:hidden; }
.tipo-4 .img-cover{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.tipo-4 .alerg-box{ position:absolute; left:.5rem; bottom:.5rem; }





/* cuerpo con padding para que nada quede “al filo” */
.modal-body-custom{
  padding: 0 18px 14px;
}

/* descripción del modal con separación y alto de línea cómodo */
.txtDC-modal{
  color: var(--dc-color, #555);
  font-size: var(--dc-size, 15px);
  font-family: var(--ff-dc, Fuente-Regular);
 
  text-align: left;
  padding: 0 2px;          /* un pelín de respiración extra */
}

/* barra de alérgenos centrada al final */
.alergenos-modal{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  padding: 12px 16px 16px;
 
}

/* si tus iconos de verAlergenosLineaModal no tienen tamaño, dáselo aquí */
.alergenos-modal img{ width:22px; height:22px; }

/* imagen del modal: centrada y con radio */
.img-modal{
  width: 70%;
  max-width: 520px;
  border-radius: 1rem;
  display: block;
}

/* título y precio ya los tenías, pero por si acaso */
.txtArticulo-modal{ text-align:center; }
.txtPrecio-modal{ text-align:center; }


.modal-bottom{position:fixed;left:0;bottom:3%;margin:0;transition:transform .3s ease-in-out; overflow:visible!important;}
.modal.fade .modal-dialog{transform:translateY(100%)}
.modal.show .modal-dialog{transform:translateY(0)}
.modal-open{overflow:visible!important}
.img-modal{width:70%;margin-top:-100px;border-radius:1rem}
.txtArticulo-modal{display:inline-block;width:100%;font-family:Fuente-Bold;color:#000;font-size:20px;line-height:1;text-align:center}
.txtPrecio-modal{display:inline-block;width:100%;font-family:Fuente-Regular;color:#000;line-height:1.5;font-size:15px;text-align:center}
.alergenos-modal{width:100%;text-align:center}

/* Solo móviles: el modal ocupa 100vw */
@media (max-width: 575.98px){
  .modal.show .modal-dialog{
    margin: 0 !important;
    max-width: 100vw;
    width: 100vw;
  }
}

/* Desde sm en adelante, vuelve al tamaño normal */
@media (min-width: 576px){
  .modal.show .modal-dialog{
    margin: 1.75rem auto !important; /* centrado BS */
    width: auto;
    max-width: 600px;                 /* o 700/800px a tu gusto */
  }
}