:root{
      --yellow:#ffd200;          /* amarillo principal */
      --menu-bg:#f3f3f3;         /* tarjeta del menú */
      --text:#222;
      --muted:#6c6c6c;
      --bs-font-sans-serif:"Roboto", sans-serif;
      --bs-body-font-family:"Roboto", sans-serif;
      --bs-btn-font-family:"Roboto", sans-serif;
    }

    body{
      color:var(--text);
      font-family:"Roboto", sans-serif;
      background-image: url(../images/fondo.png);
      background-repeat: no-repeat;
      background-position: center top;
    }

    button,
    input,
    select,
    textarea{
      font-family:"Roboto", sans-serif;
    }
    h1,h2,h3,h4,h5,h6{font-style: italic;}

    /* --------- Top strip --------- */
    .topbar{
      padding:1rem 0;
      font-weight:600;
    }
    .topbar .social{ font-weight:700 }

    /* --------- Menú compacto (no full-width) --------- */
    .menu-wrap{
      margin-top:1rem;
    }
    .menu-card{
      padding: 0;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        width: 100%;
        margin-left: auto;
        background-color: #eeeeee;
        justify-content: space-between;
    }
    .menu-toggle{
      display:none;
      border:0;
      background:transparent;
      width:44px;
      height:44px;
      padding:10px;
      margin-left:auto;
      cursor:pointer;
    }
    .menu-toggle span{
      display:block;
      width:100%;
      height:3px;
      background:#000;
      border-radius:2px;
      margin:5px 0;
      border-bottom: 2px solid #000;
    }
    .brand-badge{
        background: #000;
        color: #fff;
        font-weight: 900;
        letter-spacing: .5px;
        padding: .45rem .75rem;
        line-height: 1;
        display: inline-block;
        font-style: italic;
        font-size: 24px;
        padding: 10px 15px;
    }
    .menu-list{
      list-style:none;
      display:flex;
      gap:1rem;
      margin:0 25px 0 0;
      padding:0;
    }
    .menu-list a{
      text-decoration:none;
      color:#000;
      text-transform:uppercase;
      font-weight:800;
      letter-spacing:.02em;
      padding:.55rem .5rem;
      display:block;
      font-style: italic;
      font-size: 18px;
    }
    .menu-list a.active::after{content: " ";width: 100%;background-color: #eac600;height: 4px; display: block; }

    /* --------- Hero con diagonal (sentido correcto) --------- */
    .hero{
      position:relative;
      padding:2.25rem 0 6.25rem;
      overflow:hidden;
      margin-top: 60px;
    }
    .hero h1{
      font-weight:900;
      text-align:center;
      margin:1.5rem 0 .75rem;
    }
    .hero p{
      max-width:900px;
      margin:.25rem auto;
      text-align:center;
      color:#222;
    }
    .header-image{margin-top: 70px;}

    /* Placeholders gris */
    .ph{
      background:#cfcfcf;
      border:1px solid #bdbdbd;
      border-radius:.25rem;
      box-shadow:0 10px 30px rgba(0,0,0,.15);
      width:100%;
      display:block;
    }
    .ph-hero{ padding-top:48%; }
    .ph-vert{ padding-top:92%; }
    .ph-wide{ padding-top:65%; }
    .diagonal{
        padding:4rem 1.5rem;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    }

    /* --------- Secciones --------- */
    .section{ padding:6.5rem 0; }
    .section.gray{ background:#f2f2f2; }
    .sec-title{
      text-align:center; text-transform:uppercase;
      font-weight:900; font-size:2rem; margin-bottom:.25rem;
    }
    .sec-sub{ text-align:center; color:#555; margin-bottom:2.25rem; }

    /* Empresa: 2 columnas */
    .empresa-col p{ color:#333; margin-bottom:1rem; }

    /* Productos */
    .product h5{
      text-transform:uppercase; font-weight:900; margin:1.1rem 0 .5rem; text-align:center;
    }
    .product .specs{ font-size:.85rem; line-height:1.55; text-align:center; color:#333; max-width:320px; margin:0 auto; }
    .product .price{ font-weight:800; text-align:center; margin-top:1rem; }

    /* Contacto */
    .contact-title{ font-weight:900; text-transform:uppercase; font-size:1.8rem; }
    .contact-desc{ color:var(--muted); max-width:32ch; }
    .cta-w{ font-weight:900; font-size:2rem; margin:.5rem 0 1rem; }

    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;   /* izquierda inputs, derecha textarea */
      gap:14px;
      align-items:start;
    }
    .stack-3{ display:flex; flex-direction:column; gap:14px; }
    .form-control{ height:50px; border-radius:.2rem; }
    .message-area{
      min-height: 3*50px + 2*14px;   /* visualmente ~192px */
      min-height: 192px;
      resize:vertical;
    }
    .form-feedback{
      grid-column: 1 / -1;
      display: none;
      padding: .85rem 1rem;
      border-radius: .25rem;
      font-weight: 600;
      font-size: .95rem;
    }
    .form-feedback.is-visible{ display:block; }
    .form-feedback.is-success{
      background:#e9f7ef;
      color:#0f5132;
      border:1px solid #badbcc;
    }
    .form-feedback.is-error{
      background:#fcebec;
      color:#842029;
      border:1px solid #f5c2c7;
    }
    .btn-yellow{
      background:#000000 !important; color:#ffd900 !important; border:none;
      font-weight:900; text-transform:uppercase; letter-spacing:.02em;
      padding:.9rem 1.5rem; border-radius: 0;
    }

    /* Footer */
    .btm{
      padding:2rem 0 3rem; color:#555; font-size:.95rem; 
    }
    .linkfooter{color: #555555; text-decoration: none;}
    .social-icon{width: 32px;}
    .social-icon-sm{width: 24px;}
    #contacto{padding-top: 3rem !important;}

    /* Responsivo */
    @media (max-width:991.98px){
      .menu-card{
        margin:0 auto;
        flex-wrap:wrap;
        padding:.75rem 1rem;
        gap:.75rem;
      }
      .menu-toggle{
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
      }
      .menu-list{
        display:none;
        flex-direction:column;
        width:100%;
        gap:0;
        margin:0;
        padding:.75rem 0 0;
        border-top:1px solid #d5d5d5;
      }
      .menu-list.is-open{
        display:flex;
      }
      .menu-list li{
        width:100%;
      }
      .menu-list a{
        padding:.85rem 0;
      }
      .form-grid{ grid-template-columns:1fr; }
      .message-area{ min-height:160px; }
      .diagonal{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%)  !important;padding-bottom: 10rem !important;}
      #contacto{padding-top: 0 !important;}
      .menu-list a.active::after{display: none;}
    }