@font-face {font-family: Ubuntu;src: url(estilo/Ubuntu-R.ttf);}
      @font-face {font-family: UbuntuB;src: url(estilo/Ubuntu-B.ttf);}

      /* ESTILOS GENERALES /////////////////////////////////////// */
      html,body{
        padding:0px;
        margin:0px;
        font-family:Ubuntu,sans-serif;
        width:100%;
        height:100%;
        background:#fff;
      }

      /* ESTILOS CABECERA  /////////////////////////////////////// */
      header{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        box-shadow:0px 2px 4px rgba(0,0,0,0.3);
        gap:20px;
        padding:10px;
        position:sticky;
        top:0;
        background:rgba(255,255,255,0.95);
        backdrop-filter:saturate(180%) blur(12px);
        z-index:10;
      }
      header img{width:30px;}
      header a{text-decoration:none;color:indigo;font-size:11px;
      display:flex;gap:5px;}
      header a h1{font-size:14px;}

      /* ESTILOS PRODUCTOS  /////////////////////////////////////// */
      main{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        padding:10px;
        box-sizing:border-box;
      }

      main article{
        width:100%;
        height:400px;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        gap:10px;
        position:relative;
        overflow:hidden;
     
        border:1px solid rgba(0,0,0,0.08);
        box-shadow:0px 10px 30px rgba(0,0,0,0.06);

        /* fondo por defecto si no hay imagen */
        background:lightgrey;
        background-size:cover;
        background-position:center;
      }

      /* overlay para legibilidad */
      main article::before{
        content:"";
        position:absolute; inset:0;
        /*background:linear-gradient(180deg, rgba(0,0,0,0.50), rgba(0,0,0,0.15));*/
        z-index:0;
      }

      main article h3, main article h4, main article a{
        position:relative;
        z-index:1;
        padding:0px;
        margin:0px;
        text-align:center;
        color:white;
       
      }
      main article h3{font-family:UbuntuB,Ubuntu,sans-serif;font-size:48px;}
      main article h4{font-size:24px;font-weight:bold;max-width:800px;padding:0 16px;box-sizing:border-box;}
      main article p{
        width:50%;
        text-align:center;
        color:white;
        font-size:11px;
      }
      main article a{
        background:indigo;
        text-decoration:none;
        color:white;
        padding:10px 20px;
        border-radius:50px;
        font-size:12px;
        border:1px solid rgba(255,255,255,0.25);
      }

      /* LOS 3 PRIMEROS OCUPAN TODA LA FILA ////////////////////// */
      main article:nth-child(-n+3){
        grid-column:1 / -1;
      }

      /* ARTÍCULOS 4+ EN DOS COLUMNAS /////////////////////////// */
      @media (min-width:600px){
        main{
          grid-template-columns:1fr 1fr;
        }
        main article:nth-child(-n+3){
          grid-column:1 / -1;
        }
      }

      footer{display:flex;justify-content:center;gap:20px;padding:20px;font-size:11px;}
      footer article{display:flex;flex-direction:column;gap:10px;}
      footer article a{text-decoration:none;color:indigo;}
      .social img{
            width: 16px;
            margin-left: 6px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
            
        }

        .social a:hover img { transform: translateY(-1px); }
        .social{display:flex;}
        article *{
          text-shadow:0px 0px 25px white;
        }