/*(c) Haxter Corporation | 2025.*/
.ass.secc {
  display: flex;
  width: 100%;
}

#dt-u {
  flex: 0 0 40%; /* Siempre ocupa 40% */
  padding: 1rem;
  box-sizing: border-box;
}

#pd-d {
  flex: 0 0 60%; /* Siempre ocupa 60% */
  padding: 1rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .ass.secc {
    flex-direction: column;
  }

  #dt-u, #pd-d {
    flex: 0 0 100%; /* Ocupan todo el ancho */
  }
}

/*!============*/

.ass.secc {
  display: flex;
  width: 100%;
}

#dt-u {
  flex: 0 0 40%;
  padding: 1rem;
  box-sizing: border-box;
}

#pd-d {
  flex: 0 0 60%;
  padding: 1rem;
  box-sizing: border-box;

  display: flex;          /* para que su contenido se expanda */
  align-items: flex-start; /* opcional: alinea arriba */
}

#pd-d > div {
  width: 100%; /* obliga a su hijo directo a cubrir todo el ancho */
}

.item h4{
    font-size:1.75rem;
}
.order-summary p{
    font-size:1.5rem;
}


  .panel {
    border: 2px solid lightgray;   /* borde gris */
    border-radius: 15px;      /* bordes redondeados */
    padding: 16px;
    max-width: 300px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
  }

  .panel h3 {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    color: #333;
  }

  .panel p {
    margin: 0 0 12px 0;
    color: #555;
  }

  .panel a {
    font-size:1rem;
    text-decoration: underline;
  }
  .promus a{
    font-size:1rem;
    text-decoration: underline;
  }

  .panel a:hover {
    text-decoration: underline;
  }

  #item-counter {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #item-counter button {
    width: 32px;
    height: 32px;
    font-size: 20px;
    cursor: pointer;
  }

  #quantity {
    width: 50px;
    text-align: center;
    font-size: 16px;
  }

  #item-counter {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #item-counter button {
    width: 32px;
    height: 32px;
    font-size: 20px;
    cursor: pointer;
  }

  #quantity {
    width: 50px;
    text-align: center;
    font-size: 16px;
  }

    
    

  .caja {
      border-radius: 45px;
      border: solid 1px white;
    width: 60%;
    height: 65vh; /* solo para que se vea fcfcfc*/
    background-color: white; 
    margin: 0 auto; /* centra el div horizontalmente */
    

    box-sizing: border-box;
  }
  .underbox h3{
      text-align: center;
      font-size:2.1rem;
  }
    .underbox h4{
        font-size: 1.75rem;
        text-align: center;
    }

    
    
.caja {
  border-radius: 45px;
  border: solid 1px #fff;
  width: 60%;
  height: 85vh; /* ajusta según necesites */
  background: white; /*linear-gradient(145deg, #ffffff, #f3f3f3); ligero degradado */
  margin: 0 auto; /* centra el div */
  box-sizing: border-box;

  /* Sombra para efecto 3D */
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.1),  /* sombra principal */
    0 6px 6px rgba(0, 0, 0, 0.08);   /* sombra más cercana */
}

/*.contenedor {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;  o 100% si quieres todo el ancho 
padding: 15px;
border-radius: 10px;
}
*/

.izquierda {
text-align: left;
}

.derecha {
text-align: right;
}

.precio {
font-size: 1.99rem;
font-weight: bold;
color: #2c3e50;
font-family: 'Arial';
}

.ahorro {
font-size: 1.19rem;
color: #27ae60;
}

.titulo {
font-size: 1.7rem;
font-weight: bold;
font-family: 'Arial';
}

.modelo {
font-size: 1.59rem;
color: #555;
}
.selene div,aside{

}



/* Responsive */
@media (max-width: 768px) {
  .ass.secc {
    flex-direction: column;
  }

  #dt-u,
  #pd-d {
    flex: 0 0 100%;   /* ocupan todo el ancho */
    width: 100%;      /* refuerzo por si acaso */
    height: auto;     /* evita que se quede gigante en móviles */
  }

  .caja {
    width: 100%;      /* la caja pasa a ocupar todo */
    height: auto;     /* que se ajuste al contenido */
  }
}