:root{
            --accent: #274563;
            --accent-dark: #eb9545;
            --bg-overlay: rgba(0,0,0,0.35);
            --card-bg: rgba(255,255,255,0.95);
        }
        html,body{height:100%;margin:0;font-family:Inter, Arial, sans-serif;color:#222; }
        /* Carrusel de fondo */
        #carousel{
            position:fixed;
            inset:0;
            z-index:-2;
            overflow:hidden;
        }
        #carousel .slide{
            position:absolute;
            inset:0;
            background-size:cover;
            background-position:center;
            opacity:0;
            transition:opacity 1.2s ease-in-out;
        }
        #carousel .slide.active{opacity:1;}
        /* overlay para legibilidad */
        #bg-overlay{
            position:fixed;
            inset:0;
            background:var(--bg-overlay);
            z-index:-1;
        }

        /* Logo flotante */
        .logo{
            position:fixed;
            top:16px;
            left:16px;
            z-index:1000;
            background:white;
            border-radius:8px;
            padding:8px 10px;
            box-shadow:0 4px 12px rgba(0,0,0,0.15);
            display:flex;
            align-items:center;
            gap:8px;
            text-decoration:none;
            color:var(--accent-dark);
        }
        .logo img{height:100px; width:auto; display:block;}
        .logo .name{font-weight:700;}

        @media (max-width:945px) {
            .logo{ display: none;}
        }


        header{
            padding:28px 20px 10px 20px;
            text-align:center;
            color:white;
        }
        nav{
            display:flex;
            justify-content:center;
            gap:10px;
            margin-bottom:24px;
        }
        nav a{
            background:rgba(255,255,255,0.08);
            color:white;
            text-decoration:none;
            padding:10px 16px;
            border-radius:6px;
            font-weight:600;
            transition:background .2s;
        }
        nav a:hover{background:rgba(255,255,255,0.14);}

        main{
            max-width:1100px;
            margin:40px auto;
            padding:20px;
            color:#111;
        }
        @media (max-width:500px) {
            main{ margin:5px; padding:5px; }
        }

        .hero{
            min-height:220px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:white;
            text-shadow: 0 2px 8px rgba(0,0,0,0.6);
            font-size:1.6rem;
            font-weight:700;
        }

        /* Sección La empresa - dos columnas (foto + texto) */
        .empresa{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:24px;
            align-items:start;
            background:var(--card-bg);
            padding:35px;
            border-radius:10px;
            box-shadow:0 6px 24px rgba(0,0,0,0.08);
        }
        .empresa .text{order:1;}
        .empresa .photo{order:2;}
        .empresa img{width:100%; border-radius:8px; display: block ;}

        /* Sección proyectos: rejilla responsiva 2x6, 3x4, 4x3 */
        .projects-grid{
            margin-top:12px;
            display:grid;
            gap:12px;
        }
        /* Small: 2 columns (2x6) */
        @media (max-width:767px){
            .empresa{grid-template-columns:1fr; text-align:left;}
            .projects-grid{grid-template-columns: repeat(2,1fr);}
        }
        /* Medium: 3 columns (3x4) */
        @media (min-width:768px) and (max-width:1023px){
            .projects-grid{grid-template-columns: repeat(3,1fr);}
        }
        /* Large: 4 columns (4x3) */
        @media (min-width:1024px){
            .projects-grid{grid-template-columns: repeat(4,1fr);}
        }

        .proj-card{
            position:relative;
            overflow:hidden;
            border-radius:8px;
            cursor:pointer;
            background:#fafafa;
            box-shadow:0 6px 18px rgba(0,0,0,0.06);
        }
        .proj-card img{width:100%; height:160px; object-fit:cover; display:block;}
        .proj-card .meta{
            padding:10px;
        }
        .proj-card .title{font-weight:700;color:var(--accent-dark)}
        .proj-card .short{font-size:0.95rem;color:#444;margin-top:6px;}

        /* Modal */
        .modal-overlay{
            position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:2000; white-space: pre-wrap;
        }
        .modal{
            width:min(900px,95%);
            max-height:90vh;
            overflow:auto;
            background:white;
            border-radius:10px;
            padding:20px;
            box-shadow:0 12px 40px rgba(0,0,0,0.35);
        }
        .modal h3{margin-top:0;color:var(--accent-dark);}
        .modal .modal-image{width:100%; height:auto; max-height:350px; object-fit:contain; border-radius:6px; margin-bottom:12px;}
        .modal .modal-text p{ text-align:justify; line-height:1.6; margin-bottom:12px; color:#222; }

        /* Contact form */
        .contact-card{
            background:var(--card-bg);
            padding:18px 35px;
            border-radius:10px;
            box-shadow:0 6px 18px rgba(0,0,0,0.06);
        }
        .contact-card label{display:block;margin-top:8px;font-weight:600;}
        .contact-card input[type="text"],
        .contact-card input[type="email"],
        .contact-card textarea,
        .contact-card input[type="file"]{
            width:100%; padding:10px; border-radius:6px; border:1px solid #ddd; margin-top:6px;
        }
        .contact-card button{
            margin-top:12px; padding:10px 14px; background:var(--accent); color:white; border:none; border-radius:8px; cursor:pointer;
        }
        .contact-card .small{font-size:0.9rem;color:#666;margin-top:6px;}
        .cookie-banner{
            position:fixed; bottom:16px; right:16px; left:16px; max-width:980px; margin:auto;
            background:rgba(255,255,255,0.96); padding:14px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.15); z-index:1500; display:none;
        }
        .footer{
            margin-top:30px;
            padding:18px; text-align:center; color:#fff; background:var(--accent);
            border-radius:8px;
        }
        .footer a{color:#fff;text-decoration:underline;}
        .top-links{display:flex;gap:12px; justify-content:center; margin-bottom:12px;}
        .botonAcceder{ width: 120px; height: 45px; background: #eb9545; border:none; color: #ffffffff; font-size:1.0em; cursor:pointer; }

        .sombras {
            -moz-box-shadow: 10px 10px 42px 0px #000;
        	-webkit-box-shadow:  10px 10px 42px 0px #000;
        	box-shadow:  10px 10px 42px 0px #000; }

        .sombra_img { -webkit-filter: drop-shadow(10px 10px 10px #000);
			filter: drop-shadow(10px 10px 10px #000);}