/* VARIABLES DE COLOR  */
:root {
    --negro:       #111111;
    --blanco:      #ffffff;
    --gris-claro:  #f4f4f4;
    --gris-medio:  #cccccc;
    --acento:      #e8000d;   
    --acento-dark: #b00009;
}

/* Tal y como nos ecxplicaron en clase esto sirve para que empecemos
   con megenes y mas desde 0 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

/* BODY  */
body {
    font-family: 'Arial Black', Arial, sans-serif;
    background-color: var(--gris-claro);
    color: var(--negro);
}

/* NAVEGACIÓN (clase: nav)
   Barra de menú superior */
nav {
    background-color: var(--negro);
    display: flex;             /* coloca los enlaces en fila */
    gap: 8px;                  /* espacio entre enlaces */
    padding: 14px 30px;
    flex-wrap: wrap;           /* si no caben, bajan a la siguiente línea */
}

/* Cada enlace dentro del nav */
nav a {
    color: var(--blanco);
    text-decoration: none;     /* esto sirve para quitar la linea de subrayado */
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;     
    padding: 6px 12px;
    border-radius: 3px;
    transition: background-color 0.2s; /* animación suave al pasar el ratón */
}

/* Efecto hover: cuando pasas el ratón por encima */
nav a:hover {
    background-color: var(--acento);
}

/* CONTENEDOR PRINCIPAL (clase: container)
   Centra el contenido y lo limita en ancho */
.container {
    max-width: 1100px;          /* ancho máximo */
    margin: 40px auto;          /* auto = centrado horizontal */
    padding: 0 20px;
}

/* Títulos h1 y h2 dentro del container */
.container h1,
.container h2 {
    font-size: 28px;
    letter-spacing: 3px;
    text-transform: uppercase; /* todo en mayúsculas */
    margin-bottom: 30px;
    border-left: 5px solid var(--acento); /* línea roja a la izquierda */
    padding-left: 14px;
}

/* TARJETA DE PRODUCTO (clase: tarjeta)
   Caja blanca que contiene cada producto */
.tarjeta {
    background-color: var(--blanco);
    border: 1px solid var(--gris-medio);
    border-radius: 6px;
    padding: 16px;
    width: 220px;               
    display: inline-block;      
    vertical-align: top;
    margin: 10px;
    text-align: center;

    /* Sombra suave */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    /* Animación al pasar el ratón */
    transition: transform 0.2s, box-shadow 0.2s;
}


.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


.tarjeta p {
    font-size: 14px;
    margin: 8px 0 4px;
    line-height: 1.3;
}

/* CUADRO DE IMAGEN (clase: cuadro-foto)
   Contenedor que da tamaño fijo a las fotos */
.cuadro-foto {
    width: 100%;
    height: 180px;              /* altura fija para todas las fotos */
    overflow: hidden;           /* recorta lo que sobresalga */
    background-color: var(--gris-claro);
    border-radius: 4px;
    display: flex;
    align-items: center;        /* centra verticalmente */
    justify-content: center;    /* centra horizontalmente */
}

/*IMAGEN AJUSTADA (clase: foto-ajustada)
   La imagen cabe dentro del cuadro sin deformarse*/
.foto-ajustada {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;        /* mantiene proporción */
}

/*  BOTÓN DE COMPRA (clase: btn-compra)
   Botón rojo que usamos en tarjetas y formularios */
.btn-compra {
    display: inline-block;
    background-color: var(--acento);
    color: var(--blanco);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 10px 20px;
    border-radius: 4px;
    margin-top: 10px;
    text-transform: uppercase;

    /* Animación suave */
    transition: background-color 0.2s, transform 0.1s;
}

/* Hover del botón */
.btn-compra:hover {
    background-color: var(--acento-dark);
    transform: scale(1.03);    /* crece un poquito */
}

/* FORMULARIO (clase: formulario)
   Para login, carrito y soporte */
.formulario {
    background-color: var(--blanco);
    border: 1px solid var(--gris-medio);
    border-radius: 8px;
    padding: 30px;
    max-width: 480px;           /* no se hace muy ancho */
    margin: 0 auto;             /* centrado */
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);

    /* Flexbox para apilar los campos verticalmente */
    display: flex;
    flex-direction: column;
    gap: 14px;                  
}

/* Etiquetas label dentro del formulario */
.formulario label {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Campos de texto, email, password */
.formulario input,
.formulario textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--gris-medio);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;      
    transition: border-color 0.2s;
}


.formulario input:focus,
.formulario textarea:focus {
    outline: none;              
    border-color: var(--acento);
}

.formulario textarea {
    resize: vertical;          
}

/* ESTILOS PARA PÁGINA DE PRODUCTO*/

.seccion-producto {
    display: flex;       /* Pone los hijos en fila */
    gap: 30px;           /* Espacio entre la foto y el texto */
    flex-wrap: wrap;     /* Si no hay espacio (móvil), se pone uno abajo de otro */
}

.foto-detalle {
    flex: 1;             /* Ocupa la mitad del espacio */
    min-width: 300px;
    background-color: var(--blanco);
    border: 1px solid var(--gris-medio);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.foto-detalle img {
    max-width: 100%;
    height: auto;
}

.info-detalle {
    flex: 1;             /* Ocupa la otra mitad */
    min-width: 300px;
}

.selector-talla {
    width: 100%;
    padding: 10px;
    border: 1.5px solid var(--gris-medio);
    border-radius: 4px;
    font-family: inherit;
    margin-bottom: 10px;
}