:root {
  font-size : 100%;
  font-family : system-ui, sans-serif;
  scroll-behavior : smooth;
}

 * { -ms-overflow-style: none;  scrollbar-width: none;  } 
 *::-webkit-scrollbar { display: none; }
* , *::before , *::after {
  margin : 0;
  padding : 0;
  border : 0;
  box-sizing : border-box;
  vertical-align : baseline;
}
*::before , *::after {
  display : block;
}
img , picture , video , iframe , figure , canvas {
  max-width : 100%;
  display : block;
  width : 100%;
  height : initial;
  object-fit : cover;
  object-position : center center;
}
a {
  display : block;
  text-decoration : none;
  color : inherit;
  font :  inherit;
}
p a {
  display : inline;
}
li , menu, summary {
  list-style-type : none;
}
ol {
  counter-reset : revert;
}
h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , strong , blockquote , i , b , u , em , pre , code , mark , del {
  font :  inherit;
  line-height :  1em;
  text-decoration :  none;
  color : inherit;
  overflow-wrap : break-word;
  text-wrap : pretty;
}

mark {
  background-color : transparent;
}
blockquote::before , blockquote::after , q::before , q::after {
  content : none;
}
form , input , textarea , select , button , label {
  font :  inherit;
  hyphens : auto;
  background-color : transparent;
  color : inherit;
  display : block;

}
fieldset {
  border : none;
}
::placeholder {
  color : unset;
}
button , label {
  cursor : pointer;
}
table , tr , td , th , tbody , thead , tfoot {
  border-collapse : collapse;
  border-spacing : 0;
  font : inherit;
}
svg {
  width : 100%;
  height : initial;
  display : block;
  fill : currentColor;
}
body {
  min-height : 100vh;
  line-height : 1.5em;
  color : inherit;
  hyphens : auto;
  font-smooth : always;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
     font-family: "Montserrat", sans-serif;
       font-optical-sizing: auto;

}

/* =======================================================
 * Interacciones:
 *   - Formulario de checkout con campos de usuario
 *   - Consentimiento (checkbox) y botones interactivos
 *   - Resumen del carrito con productos dinámicos
 *   - Promocode y botón de aplicar
 * Datos:
 *   - Contenedores principales: Checkout-page, Checkout-main, Checkout-wrapper, Checkout-form, Cart-summary
 *   - Elementos interactivos: inputs, checkbox, radio, botones, eliminar producto
 *   - Estados visuales: hover, transition, focus
 * Estructura:
 *   - CHECKOUT PAGE:
 *       * Fondo negro para toda la página
 *   - CONTENEDOR PRINCIPAL (MAIN):
 *       * Flex vertical centrado
 *       * Contiene título y wrapper de columnas
 *   - TÍTULO CHECKOUT:
 *       * Texto grande, color dorado (#fcbd1b), padding
 *   - WRAPPER DE DOS COLUMNAS:
 *       * Flex horizontal con gap
 *       * Ajuste responsive a columna en pantallas <900px
 *   - COLUMNA IZQUIERDA: FORMULARIO
 *       * Flex vertical
 *       * Secciones con títulos (h3) y campos de input
 *       * Inputs con padding, color de fondo y borde redondeado
 *       * Checkbox y radio con estilo y cursor pointer
 *       * Consentimiento con texto e ítems alineados
 *       * Botón principal con hover y transición
 *   - COLUMNA DERECHA: RESUMEN DEL CARRITO
 *       * Fondo dorado (#fcbd1b) y padding
 *       * Contenedor de productos dinámicos
 *       * Cada producto: imagen, info, título, fila precio+cantidad, botón eliminar
 *       * Promocode: input y botón aplicar
 * Funciones / CSS especiales:
 *   - Uso de flexbox para layout de columnas y filas
 *   - Transiciones en hover y botones
 *   - Media query para responsive (<900px)
 * =======================================================
 */


.Checkout-page{

}
/* CONTENEDOR PRINCIPAL DEL MAIN */
.Checkout-main {
  width: 100%;  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

/* TÍTULO CHECKOUT */
.Checkout-title {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: .1rem;
  padding: 2rem;
  color:#fcbd1b;
}

@media (max-width: 500px) {
  .Checkout-title {
    font-size: 2.5rem;
   margin: 0 0 0 2rem;
  }
}

/* WRAPPER DE DOS COLUMNAS */
.Checkout-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;

  padding: 2rem;

}

/* COLUMNA IZQUIERDA: FORMULARIO */
.Checkout-form {
  width: 60%;
  display: flex;
  flex-direction: column;

}

.Form-section--h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: .8rem 0;
}
.Form-section{
  display: flex;
  flex-flow: column;

  gap: .5rem;
}

.Form-section input {
  width: 100%;
  padding: .9rem;
  margin: 0 0 1rem 0;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background-color: #fcbd1b;
  color: black;
}


input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  margin: 0; 
  cursor: pointer;

}

label {
  display: flex;
  align-items: center; 
  gap: 1rem; 

}





.Form-consent {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;

}

/* BOTÓN PRINCIPAL */
.Checkout-button {
  width: 100%;
  padding: 1rem;
  background-color: #fcbd1b;
  color: black;
  border: none;
  font-size: 1rem;
  letter-spacing: .04rem;
  margin: .5rem 0 0 0;
  cursor: pointer;
   border-radius: .5rem;
}

.Checkout-button:hover{
  background-color: black;
  color: #fcbd1b;
  border: 1px solid #fcbd1b;
}

/* COLUMNA DERECHA: RESUMEN DEL CARRITO */
.Cart-summary {
  width: 40%;
  background-color: #fcbd1b;
  padding: 25px;
  border-radius: .4rem;
}

.Cart-summary h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* AQUÍ SE INSERTAN TUS PRODUCTOS DINÁMICOS */
.Cart-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 1.5rem;

}

/* PROMOCODE */
.Cart-promo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.Cart-promo  {
  flex: 1;
  padding: .75rem;
  border: 1px solid #ccc;

}

.Cart-promo button {
  padding: .75rem 1rem;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .Checkout-wrapper {
    flex-direction: column;
  }

  .Checkout-form,
  .Cart-summary {
    width: 100%;
  }
}

/* CONTENEDOR DEL PRODUCTO */
.Cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e5e5;
}

/* IMAGEN MÁS PEQUEÑA */
.Cart-item-img {
  width: 3.5rem;

}

/* INFORMACIÓN DEL PRODUCTO */
.Cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Cart-item-title {
  font-size: 1rem;
  font-weight: 600;

  color: #111;
}

/* FILA DE PRECIO + CANTIDAD */
.Cart-item--info-row2 {
  display: flex;
  align-items: center;
  gap: 1rem;

}

.Cart-item-price {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}

.Cart-item-quantity {
  font-size: 1rem;
  color: #555;
}

/* BOTÓN ELIMINAR */
.Cart-remove-button {
  color: #b00;
  font-size: .8rem;
  cursor: pointer;

  transition: 0.2s ease;
}

.Cart-remove-button:hover {
  color: #ff0000;
}