/* =========================================================
   URBANETRASLADOS
   HOJA DE ESTILOS PRINCIPAL
   ========================================================= */


/* ---------------------------------------------------------
   VARIABLES DE COLOR

   Guardamos aquí los colores principales de Urbanet.

   La ventaja es que si mañana queremos cambiar el rojo,
   no tenemos que buscarlo por todo el archivo.
   Cambiamos solamente una variable.
   --------------------------------------------------------- */

:root {

    --color-rojo: #c62828;

    --color-rojo-oscuro: #9f1f1f;

    --color-negro: #111214;

    --color-antracita: #1b1d20;

    --color-blanco: #ffffff;

    --color-fondo-claro: #f5f3ee;

    --color-gris: #a7a7a7;

}


/* ---------------------------------------------------------
   REINICIO BÁSICO

   Los navegadores agregan algunos márgenes automáticamente.

   Los quitamos para tener nosotros el control del diseño.
   --------------------------------------------------------- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   BODY

   Define el aspecto general de toda la página.
   --------------------------------------------------------- */

body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: var(--color-fondo-claro);

    color: var(--color-negro);

}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

header {

    background-color: var(--color-negro);

    color: var(--color-blanco);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 6%;

}

.logo {
    display: flex;
    align-items: center;
}
/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.logo a {

    display: flex;
    align-items: center;

}

.logo img {
    width: 230px;
    height: auto; /* auto porque mantendrá la proporción de la imagen */
    display: block; /* display block es para que la imagen se muestre como un bloque */


}


/* ---------------------------------------------------------
   MENÚ DE NAVEGACIÓN
   --------------------------------------------------------- */

nav {

    display: flex;

    gap: 25px;

}


nav a {

    color: var(--color-blanco);

    text-decoration: none;

    font-size: 14px;

}


/* Cuando pasamos el mouse sobre una opción del menú */

nav a:hover {

    color: var(--color-rojo);
    
}


/* ---------------------------------------------------------
   SELECTOR DE IDIOMAS
   --------------------------------------------------------- */

.idiomas {

    display: flex;

    gap: 5px;

}


.idiomas button {

    background: transparent;

    border: none;

    color: var(--color-blanco);

    cursor: pointer;

}


/* ---------------------------------------------------------
   BOTÓN SOLICITAR TRASLADO
   --------------------------------------------------------- */

.boton-reserva a {

    background-color: var(--color-rojo);

    color: var(--color-blanco);

    text-decoration: none;

    padding: 12px 20px;

    border-radius: 4px;

    font-weight: bold;

}


/* Cuando ponemos el mouse sobre el botón */

.boton-reserva a:hover {

    background-color: var(--color-rojo-oscuro);

}


/* ---------------------------------------------------------
   HERO

   Esta será la sección principal de presentación.
   --------------------------------------------------------- */

.hero {

    min-height: 680px;

    color: var(--color-blanco);

    display: flex;

    align-items: center;

    padding: 80px 8%;

    background: 
        linear-gradient(
            45deg,

            rgba(10, 11, 13, 0.96) 0%,
            rgba(10, 11, 13, 0.83) 32%,
            rgba(10, 11, 13, 0.38) 58%,
            rgba(10, 11, 13, 0.08) 100%
        ),

        url("../imagenes/logos/corolaportada.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


}


/* Limitamos el ancho del texto */

.hero-contenido {

    max-width: 700px;

}


/* Texto DESDE 2003 */

.hero-desde {

    color: var(--color-rojo);

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 20px;

}


/* Título principal */

.hero h1 {

    font-size: 64px;

    line-height: 1.05;

    margin-bottom: 25px;

}

.hero h1 span {

    color: var(--color-rojo);

}



/* Descripción */

.hero-descripcion {

    color: #d0d0d0;

    font-size: 20px;

    line-height: 1.6;

    max-width: 600px;

    margin-bottom: 35px;

}


/* ---------------------------------------------------------
   BOTONES DEL HERO
   --------------------------------------------------------- */

.hero-botones {

    display: flex;

    gap: 15px;

}


.hero-botones a {

    background-color: var(--color-rojo);

    color: var(--color-blanco);

    text-decoration: none;

    padding: 15px 25px;

    border-radius: 4px;

    font-weight: bold;

}


/* Segundo botón */

.hero-botones a:last-child {

    background-color: transparent;

    border: 1px solid var(--color-blanco);

}


/* ---------------------------------------------------------
   BARRA DE CONFIANZA
   --------------------------------------------------------- */

.barra-confianza {

    background-color: var(--color-negro);

    color: var(--color-blanco);

    display: flex;

    justify-content: center;

    gap: 60px;

    padding: 22px 5%;

    font-size: 14px;

}


/* ---------------------------------------------------------
   COTIZADOR - POR AHORA SOLO CONTENEDOR
   --------------------------------------------------------- */

#cotizador {

    padding: 80px 8%;

    min-height: 400px;

}


#cotizador h2 {

    font-size: 38px;

    margin-bottom: 15px;

}


/* =========================================================
   RESPONSIVE - TABLETS Y CELULARES
   ========================================================= */

/*
   @media significa:

   "Aplicá estas reglas solamente cuando
   la pantalla mida 768px o menos".
*/

.boton-menu {
    display: none;
    background: transparent;
    width: 44px ;
    height: 44px;
    border : none;
    cursor: pointer;
}

.icono-menu {

    width: 30px;
    height: 30px;

}


.linea {
    fill: none;

    stroke: var(--color-blanco);

    stroke-width: 2;

    stroke-linecap: round;

      /*
       Esto indica desde dónde se realizará
       la transformación de cada línea.
    */

    transform-origin: center;

     /*
       transition evita que el cambio sea instantáneo.

       En este caso tarda 0.3 segundos.
    */

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

    
}
.boton-menu:hover .linea {

    stroke: var(--color-rojo);

}

/* =========================================================
   ANIMACIÓN DEL MENÚ
   ========================================================= */


/*
   Cuando JavaScript agregue la clase "activo"
   al botón, modificamos las tres líneas.
*/


/* Primera línea */

.boton-menu.activo .linea-1 {

    transform:
        translateY(6px)
        rotate(45deg);

}


/* La línea central desaparece */

.boton-menu.activo .linea-2 {

    opacity: 0;

}


/* Tercera línea */

.boton-menu.activo .linea-3 {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


@media (max-width: 768px) {

    .boton-menu {
    display: block;}

    /*
   Cuando JavaScript agregue la clase "menu-abierto",
   mostramos el menú.
*/

nav.menu-abierto {
    display: flex;
    position: absolute;
    
    top: 80px;
    left: 0;
    width: 100%;
    background-color: var(--color-negro);
    padding: 25px 6%;
    gap: 20px;
    z-index: 1000;
}


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    header {

        padding: 15px 5%;

    }


    /* Hacemos el logo más pequeño */

    .logo img {

        width: 170px;

    }


    /*
       Por ahora ocultamos el menú tradicional.

       En el próximo paso crearemos el botón hamburguesa.
    */

    nav {

        display: none;

    }


    /*
       También ocultamos temporalmente los idiomas.
       Después los incorporaremos al menú móvil.
    */

    .idiomas {

        display: none; /*none es para ocultar el elemento*/

    }


    /*
       Ocultamos el botón grande del Header.

       En celular tendremos una solución más cómoda.
    */

    .boton-reserva {

        display: none;

    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {

        min-height: 650px;

        padding: 70px 6%;

        /*
           En celular necesitamos oscurecer más la fotografía
           porque texto y vehículo tienen menos espacio.
        */

        background:
            linear-gradient(
                90deg,
                rgba(10, 11, 13, 0.95) 0%,
                rgba(10, 11, 13, 0.80) 55%,
                rgba(10, 11, 13, 0.45) 100%
            ),
            url("../imagenes/logos/corolaportada.png");

        background-size: cover; /* cover es para que la imagen cubra todo el contenedor */

        /*
           Movemos el encuadre hacia la derecha
           para intentar conservar el vehículo.
        */

        background-position: 65% center;

    }


    /* Contenedor del texto */

    .hero-contenido {

        max-width: 100%;

    }


    /* DESDE 2003 */

    .hero-desde {

        font-size: 12px;

        letter-spacing: 2px;

    }


    /* Título principal */

    .hero h1 {

        font-size: 46px;

        line-height: 1.05;

        max-width: 500px;

    }


    /* Descripción */

    .hero-descripcion {

        font-size: 17px;

        line-height: 1.5;

        max-width: 430px;

    }


    /* Botones */

    .hero-botones {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .hero-botones a {

        width: 100%;

        max-width: 280px;

        text-align: center;

    }


    /* -----------------------------------------------------
       BARRA DE CONFIANZA
       ----------------------------------------------------- */

    .barra-confianza {

        flex-direction: column;

        gap: 12px;

        text-align: center;

        padding: 22px 5%;

    }

}
/* Terminación responsive sobre los estilos y colores originales. */
html{scroll-behavior:smooth;scroll-padding-top:110px}body{line-height:1.6}a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #e24a4a;outline-offset:4px}header{position:relative;z-index:20;gap:22px;min-height:100px;padding:20px 4%}nav{gap:19px}nav a{white-space:nowrap}nav a[aria-current=page]{color:#f37b7b}nav a:hover{color:#f37b7b}.boton-reserva a{display:block;white-space:nowrap}.hero{min-height:640px}.hero h1{font-size:clamp(42px,5.3vw,76px);max-width:750px}.hero-desde,.eyebrow{color:#c62828;font-size:12px;letter-spacing:2px;font-weight:700}.hero-desde{color:#f37b7b}.hero h1 span{color:#eb5656}.hero-botones a{display:inline-block}.barra-confianza{gap:5%;flex-wrap:wrap}.barra-confianza p{white-space:nowrap}h1,h2,h3{line-height:1.12;letter-spacing:-.03em}h2{font-size:clamp(28px,3vw,40px)}h3{font-size:28px}p{margin-bottom:16px}p:last-child{margin-bottom:0}.seccion,#cotizador{padding:78px max(6%,calc((100% - 1280px)/2));min-height:0}.seccion-titulo{display:flex;gap:30px;justify-content:space-between;align-items:end;margin-bottom:36px}.seccion-titulo>p{max-width:400px;color:#565656}.cotizador-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ancho{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600}input,select,textarea{font:inherit;font-weight:400;color:#111214;background:#fff;border:1px solid #b7b7b7;border-radius:3px;padding:12px;width:100%;min-width:0}textarea{resize:vertical}.nota{font-size:13px;line-height:1.65;color:#5d5d5d;margin-top:18px}.boton{display:inline-block;border:1px solid #c62828;background:#c62828;color:white;padding:13px 22px;text-decoration:none;border-radius:4px;font:inherit;font-weight:bold;cursor:pointer;text-align:center}.boton:hover{background:#9f1f1f}.boton:disabled{background:#414348;border-color:#666;color:#ddd;cursor:not-allowed}.secundario{background:transparent;border-color:currentColor}.secundario:hover{background:#34363b}.resultado-panel{background:#1b1d20;color:white;padding:32px;border-top:4px solid #c62828;border-radius:4px}.resultado-panel .eyebrow{color:#f37b7b}.resultado-panel .nota{color:#c7c7c7}.resultado-panel h3{margin:18px 0;font-size:34px;overflow-wrap:anywhere}.resultado-panel .boton{width:100%;margin-top:14px}.consentimiento{display:flex;flex-direction:row;align-items:start;margin-top:20px;font-weight:400}.consentimiento input{width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:#c62828}.resumen-texto{margin-top:22px}.resumen-texto textarea{font-size:13px;background:#25282d;color:#fff;border-color:#777}#estado-copia{margin-top:12px}details{margin-top:35px;padding:22px 0;border-block:1px solid #c9c8c4}summary{cursor:pointer;font-weight:700}details p{margin-top:18px;max-width:900px}.introduccion{padding:72px 8%;background:#1b1d20;color:white;border-bottom:4px solid #c62828}.introduccion .eyebrow{color:#f37b7b}.introduccion h1{font-size:clamp(38px,5vw,64px);max-width:900px;margin:20px 0}.introduccion>p:last-child{max-width:750px;color:#d0d0d0;font-size:19px}.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:32px 0}.tarjeta{padding:30px;background:#fff;border-top:2px solid #c62828}.tarjeta h2{font-size:25px;margin:24px 0 18px}.tarjeta p{color:#555}.numero{color:#a32323;font-size:13px;letter-spacing:2px;font-weight:bold}.enlace{color:#9f1f1f;font-weight:700}.bloque{background:#fff;padding:34px}.bloque h2{margin-bottom:22px}.bloque .boton{margin-top:12px}.bloque ul{padding-left:24px;margin-bottom:22px}.cta{background:#1b1d20;color:white;padding:60px 8%;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{margin-bottom:18px}.cta .boton{flex-shrink:0}.foto-vehiculo{margin-bottom:40px}.foto-vehiculo img{display:block;width:100%;max-height:470px;object-fit:cover;border-radius:4px}figcaption{font-size:12px;color:#555;padding-top:10px}.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.bloque a:not(.boton){color:#9f1f1f}footer{background:#111214;color:#bbb;padding:48px 8%;display:flex;justify-content:space-between;gap:35px;font-size:14px}footer img{max-width:100%;height:auto}footer a{display:block;color:#fff;margin-bottom:12px}footer p{max-width:420px;margin-top:15px}.saltar{position:absolute;left:15px;top:-100px;background:white;color:#111;padding:12px;z-index:50}.saltar:focus{top:10px}[hidden]{display:none!important}.aviso{padding:20px}.sin-js{display:flex;flex-wrap:wrap;background:#111;padding:20px}.icono-menu{display:block;margin:auto}.linea{transform-box:view-box;transform-origin:12px 12px}.boton-menu.activo .linea-1{transform:translateY(6px) rotate(45deg)}.boton-menu.activo .linea-3{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){header{min-height:84px}.logo img{width:210px}.boton-menu{display:block;margin-left:auto}nav{display:none}nav.menu-abierto{display:flex;position:absolute;top:100%;left:0;right:0;width:100%;background:#111214;padding:24px 6%;flex-direction:column;gap:0;box-shadow:0 16px 20px #0004}nav a{padding:12px}.boton-reserva{display:none}.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}.cotizador-grid{gap:24px;grid-template-columns:1.1fr 1fr}.resultado-panel{padding:25px}}
@media(max-width:760px){header{padding:16px 6%}.logo img{width:190px}.hero{min-height:580px;padding:64px 6%}.hero h1{font-size:46px}.hero-botones{width:100%}.hero-botones a{max-width:100%}.barra-confianza{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:26px 6%;font-size:12px;text-align:left}.barra-confianza p{white-space:normal;margin:0}.seccion,#cotizador{padding:50px 6%}.seccion-titulo{display:block}.seccion-titulo>p{margin-top:20px}.cotizador-grid,.contacto-grid{grid-template-columns:1fr}.resultado-panel{margin-top:10px}.tarjetas{grid-template-columns:1fr}.tarjeta,.bloque{padding:26px}.introduccion{padding:54px 6%}.cta,footer{display:flex;flex-direction:column;align-items:stretch;padding:42px 6%}.campos{gap:16px 12px}.foto-vehiculo img{min-height:240px}.resultado-panel h3{font-size:32px}}
@media(max-width:380px){.campos{grid-template-columns:1fr}.hero h1{font-size:40px}.logo img{width:170px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Empresas indicadas por URBANET; nombres en texto, sin logos externos. */
.clientes{background:#eae8e3;border-top:1px solid #d3d0ca}
.lista-clientes{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#cbc8c2;border:1px solid #cbc8c2}
.lista-clientes li{background:#f5f3ee;min-height:110px;display:flex;align-items:center;justify-content:center;padding:22px 16px;text-align:center;font-size:17px;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
@media(max-width:1100px){.lista-clientes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.lista-clientes{grid-template-columns:repeat(2,minmax(0,1fr))}.lista-clientes li{min-height:100px;font-size:15px;padding:20px 12px}}
@media(max-width:380px){.lista-clientes{grid-template-columns:1fr}.lista-clientes li{min-height:74px}}

/* Cotizador por origen y destino. */
.ruta-campos{position:relative;display:grid;gap:10px;background:#fff;padding:26px;border-left:3px solid #c62828}
.ruta-campos label{font-size:22px;line-height:1.3;gap:8px}
.ruta-campos input{font-size:17px;padding:15px 13px}
.ruta-campos .eyebrow{font-size:10px;letter-spacing:1.5px}
.invertir{justify-self:end;width:44px;height:44px;border:1px solid #c62828;color:#9f1f1f;background:white;border-radius:50%;font-size:25px;cursor:pointer}
.invertir:hover{background:#f6e3e3}.categoria-viaje{margin-top:24px}
.detalles-viaje .campos{margin-top:24px}.detalles-viaje{margin:24px 0}
.resultado-panel .precio-referencia{display:inline-block;font-size:12px;letter-spacing:.04em;color:#ffb4b4;border:1px solid #865858;padding:5px 9px;margin:0 0 12px}
@media(max-width:760px){.ruta-campos{padding:22px 18px}.ruta-campos input{font-size:16px}}

/* Historia institucional suministrada por URBANET. */
.historia-urbanet .bloque{max-width:900px;margin-inline:auto}.historia-urbanet .bloque>p{font-size:18px;line-height:1.85;margin-bottom:25px}.firma-urbanet{border-left:3px solid #c62828;padding-left:24px;margin-top:36px}.firma-urbanet p{font-size:20px;line-height:1.5}.firma-urbanet strong{color:#9f1f1f}@media(max-width:760px){.historia-urbanet .bloque>p{font-size:16px}.firma-urbanet{padding-left:18px}.firma-urbanet p{font-size:18px}}

/* Tipografía institucional. Los archivos originales del logo y retratos se conservan. */
body{font-family:Inter,Arial,Helvetica,sans-serif}
h1,h2,h3,.boton,.hero-botones a,.boton-reserva a{font-family:Montserrat,Arial,Helvetica,sans-serif}
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
.historia-urbanet .bloque>p{font-weight:400;line-height:1.9}
.equipo-urbanet{padding-top:0}
.equipo-intro,.equipo-grid{max-width:900px;margin-inline:auto}
.equipo-intro{margin-bottom:32px}
.equipo-intro h2{max-width:700px}
.equipo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.persona-urbanet{margin:0;min-width:0;background:#fff;border-bottom:3px solid #c62828}
.retrato-urbanet{aspect-ratio:4/5;position:relative;overflow:hidden;background:#1b1d20;isolation:isolate}
.retrato-urbanet img{display:block;position:absolute;max-width:none}
.retrato-damian{width:100%;height:100%;object-fit:cover;object-position:center 20%}
/* Encuadre de Rubén: ventana de 620 × 775 sobre el PNG original. */
.retrato-ruben{width:165.16129%;height:198.19355%;left:-56.45161%;top:-23.22581%;z-index:1}
.retrato-fondo{inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 25%;filter:blur(18px);transform:scale(1.15);opacity:.8}
.retrato-urbanet::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(17,18,20,.1),transparent 20%,transparent 80%,rgba(17,18,20,.1))}
.persona-urbanet figcaption{padding:26px 24px 28px}
.persona-urbanet h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.persona-urbanet figcaption p{color:#626262;font-size:14px;line-height:1.6;margin:0}
@media(max-width:600px){.equipo-grid{grid-template-columns:1fr;gap:26px;max-width:420px}.persona-urbanet figcaption{padding:22px}.equipo-intro{max-width:420px}}

/* Logos de empresas proporcionados por URBANET, sin alterar colores ni proporciones. */
.lista-clientes li{min-height:174px;background:#fff}
.lista-clientes .cliente-con-logo{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:22px 16px}
.marca-cliente{height:100px;width:100%;display:flex;align-items:center;justify-content:center}
.marca-cliente img{display:block;width:100%;height:100%;object-fit:contain;max-width:170px}
.cliente-con-logo>span{font-size:13px;font-weight:600;line-height:1.4}
.cliente-solo-nombre>span{font-size:16px;font-weight:600;line-height:1.5}
@media(max-width:760px){.lista-clientes li{min-height:162px}.lista-clientes .cliente-con-logo{padding:20px 12px;gap:12px}.marca-cliente{height:88px}.cliente-solo-nombre>span{font-size:14px}}
@media(max-width:380px){.lista-clientes li{min-height:150px}.marca-cliente{height:90px}}