: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;
  appearance : none;
}
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 y tipografías personalizadas
   ========================== */
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;

}
.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}


/* =======================================================
 * Interacciones:
 *   - Hover en botón de checkout cambia color de fondo y texto
 *   - Listas desplegables de características (Product-list) con transición
 *   - Subtítulos clicables que abren/cerran listas
 *   - Responsivo: grid se adapta a 1 columna en pantallas <954px
 * Datos:
 *   - Contenedores principales: Product-section, Product-grid
 *   - Elementos de producto: imagen, info, descripción, detalles, flags
 *   - Componentes interactivos: Product-list, Product-wrapper, Product-checkout
 * Estructura:
 *   - General: flex y grid para layout
 *   - Product-grid: define columnas, filas y gap
 *   - Product-info: título, precio, botón, flex-flow column
 *   - Product-description / Product-details: grid-area y padding
 *   - Product-list: desplegable con transition y control de altura/opacidad
 *   - Responsive: media query ajusta grid y layout en tablet/móvil
 * Funciones / CSS especiales:
 *   - Uso de grid-template-columns y grid-area para layout preciso
 *   - clamp() para tamaños adaptativos de fuente y padding
 *   - transition en Product-list y Product-checkout para animaciones suaves
 * ======================================================= */


.Product-section{

    display: flex;
   
}

/* ==========================
   Grid principal del producto
   ========================== */
.Product-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: auto; /* deja que cada fila se ajuste al contenido */
  gap: 0;
  padding: 1rem;
  margin: auto;
   max-width: 1500px;
}

/* Grid areas para desktop */
.Product-image { 
  grid-area: 1 / 1 / 6 / 5;  /* Columnas 1-4 (4 columnas de ancho) */
display: flex;
justify-content: center;
align-items: center;
  border-radius: 5rem;
   /* ocupa todo el div */
padding: 2rem;
}

/* ==========================
   Información del producto (título, precio, botón)
   ========================== */
.Product-info { 
   grid-area: 1 / 5 / 3 / 15;    /* Columnas 5-14 */

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: start;
     padding: clamp(2vw, 3rem, 5vw);
    gap: 5rem;
    color: white;
    
}

/* ==========================
   Bandera/etiqueta del producto
   ========================== */
.Product-flag{
width: 9rem;
}

/* ==========================
   Contenedor del título
   ========================== */
.Product-title--wrapper{
display: flex;
gap: .5rem;
align-items: center;
width: 100%;
}

/* ==========================
   Título del producto
   ========================== */
.Product-title{
     font-size: clamp(3vw, 2rem, 8vw);

}

/* ==========================
   Contenedor de precio y botón de compra
   ========================== */
.Product-buy{
    display: flex;
    align-items: center;
    gap: clamp(1vw,2rem, 5vw);
}

/* ==========================
   Precio del producto
   ========================== */
.Product-price{
  color: white;
  font-weight: 500;
  border-bottom: 1px rgb(255, 255, 255) solid ;
  line-height: 1.2;
     font-size: clamp(1vw,1.5rem, 5vw);
}

/* ==========================
   Botón de compra
   ========================== */
.Product-button{

}



/* ==========================
   Descripción del producto
   ========================== */
.Product-description { 
   grid-area: 3 / 5 / 6 / 11;  /* Columnas 5-10 (6 columnas de ancho) */

    border-top: 0;
    border-right: 0;
    padding: clamp(1vw, 2rem, 3vw);
 

}

/* ==========================
   Párrafo de descripción
   ========================== */
.Product-p{
line-height: 1.5;
font-size: 1.4rem;
color: white;

}

/* ==========================
   Detalles del producto (características)
   ========================== */
.Product-details { 
  grid-area: 3 / 11 / 6 / 15; /* Columnas 11-14 (4 columnas de ancho) */
   padding: clamp(1vw, 1.5rem, 2vw);
  overflow: hidden;

display: flex;
flex-flow: column;
}

/* ==========================
   Componente Product: contenedor del listado desplegable
   ========================== */
.Product{
  display: flex;
  flex-flow: column;
  overflow: hidden;
background-color:#fcbd1b;
  padding: 1rem;
}

/* ==========================
   Lista desplegable de características
   ========================== */
.Product-list {
  transition: all 0.3s ease;
  height: 0;           /* empieza cerrado */
  opacity: 0;
  line-height: 1.3;
  display: none
}

/* ==========================
   Lista desplegable: estado visible
   ========================== */
.Product-list.display {
  height:fit-content   ;    /* suficiente para la lista */
  opacity: 1;
  display: block;
}

/* ==========================
   Subtítulo de características
   ========================== */
.subtitle{
 
    font-weight: 600;
}

/* ==========================
   Elemento desplegable
   ========================== */
.Product-desplegable{
  cursor: pointer;
   transition: all 0.3s ease;
   text-align: left;
}

/* ==========================
   Contenedor del desplegable
   ========================== */
.Product-wrapper{

  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* ==========================
   SVG del desplegable
   ========================== */
.Product-svg{
  width: 1.5rem;
 
}

/* ==========================
   SVG del carrito de compras
   ========================== */
.Product-checkout--svg{
  width: 1.5rem;

}

/* ==========================
   Botón de checkout
   ========================== */
.Product-checkout{
margin: 1rem 0;
  display: flex;
  justify-content: center;
  padding: 1rem;
  align-items: center;
  gap: .5rem;
  background-color: #fcbd1b;
  font-size: 1.3rem;

  transition: all .3s ease;
}
.Product-checkout:hover{
background-color: #ee3b37;
color: white;
}

/* ==========================
   Media queries: responsivo para tablet/móvil
   ========================== */
@media (max-width: 954px) {
  .Product-grid {
    grid-template-columns: 1fr; /* Solo 1 columna */
    grid-template-rows: auto;
    padding: 1rem;
    gap: 1rem;
  }
    .Product-image { grid-area: 1 / 1 / 2 / 2; }
  .Product-info { grid-area: 2 / 1 / 3 / 2;
    padding: 0;
    gap: .5rem;
}
  .Product-description { grid-area: 3 / 1 / 4 / 2; 
  padding: 0;}
  .Product-details { grid-area: 4 / 1 / 5 / 2; 
  background-color:#fcbd1b;}
  .Product-flag{
width: 7rem;
}
.Product-image--img{
  width: 40%;
}
.Product{
    padding:  1rem 0;
}
}