/* Raudocar landing - nuevo diseno (2026). Generado desde el mock Standalone. */
:root{
    --orange:#ff6600;
    --orange-dark:#e65a00;
    --text:#333;
    --muted:#777;
    --header-bg:#2b2b2b;
    --footer-bg:#1f1f1f;
    --border:#e5e5e5;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Open Sans',Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.5;
  }
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}

  /* Header */
  #cabecera_wrap{
    background:var(--orange);
    width:100%;
  }
  .cabecera{
    max-width:1170px;
    margin:0 auto;
    padding:6px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .cabecera h1{margin:0;line-height:0}
  #logo_raudocar{display:inline-block}
  #logo_raudocar img{height:34px;display:block}
  .btn-dicar{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#fff;
    color:var(--orange);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:5px 12px;
    border-radius:999px;
    text-decoration:none;
    border:1.5px solid #fff;
    transition:background .15s, color .15s, transform .15s;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
    white-space:nowrap;
    line-height:1;
  }
  .btn-dicar:hover{
    background:transparent;
    color:#fff;
    transform:translateY(-1px);
  }

  /* Layout helpers (bootstrap-ish) */
  .container{max-width:1170px;margin:0 auto;padding:0 15px}
  .row{display:flex;flex-wrap:wrap;margin:0 -15px;align-items:stretch}
  [class*="col-"]{padding:0 15px;width:100%}
  @media(min-width:768px){
    .col-md-3{width:25%}
    .col-md-4{width:33.3333%}
    .col-md-6{width:50%}
    .col-md-12{width:100%}
    .col-md-offset-1{margin-left:8.3333%}
    .col-md-offset-3{margin-left:25%}
  }
  .align-center{text-align:center}
  .mar-bot40{margin-bottom:40px}

  /* Contenedor de las 4 tarjetas: espacio extra para que no se corte el badge
     "Recomendado" (top:-14px) ni las sombras de las tarjetas */
  .service-cards-row{
    padding:26px 24px 20px 24px;
    overflow:visible;
    /* Igualar la altura de todas las tarjetas: la más alta manda.
       Sin esto, la tarjeta Express (con menos contenido) quedaba más baja
       y su botón no alineaba con el de las demás. */
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
  }

  /* Encabezado guía sobre las tarjetas de servicio */
  .select-head{text-align:center;margin:0 0 6px}
  .select-head h2{font-size:27px;color:#222}
  .select-head h2 span{color:var(--orange)}
  .select-head p{font-size:15px;color:var(--muted);font-weight:400;margin:8px 0 0}

  /* CTA dentro de cada tarjeta */
  .card-cta{
    display:block;
    width:100%;
    /* Fija el botón al fondo de la tarjeta, sin importar cuánto contenido tenga */
    margin-top:auto;
    background:var(--orange);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:11px 0;
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s;
  }
  .service-card:hover .card-cta{background:#fff;color:var(--orange)}

  /* Sections */
  .section{padding:60px 0}
  #section-about{padding:0 0 24px}
  #section-solicitar{padding:80px 0 40px}

  /* Hero banner detrás de "Nuestros servicios" */
  .hero-banner{
    position:relative;
    width:100%;
    height:160px;
    background:url("../img/raudocar/hero-banner-2horas.jpg") center center / cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
  }
  .hero-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
  }
  .hero-banner__inner{
    position:relative;
    z-index:1;
    text-align:center;
    padding:0 20px;
  }
  .hero-banner__title{
    color:#fff;
    font-size:36px;
    font-weight:700;
    margin:0 0 6px;
    text-shadow:0 2px 12px rgba(0,0,0,.4);
    line-height:1.1;
  }
  .hero-banner__subtitle{
    color:#fff;
    font-size:14px;
    font-weight:400;
    margin:0;
    opacity:.95;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
  .section-heading{
    font-size:26px;
    color:#222;
    margin-bottom:20px;
  }
  .section-header{margin-bottom:30px;text-align:center}
  .title-block-price{
    color:var(--orange);
    font-size:34px;
    margin-bottom:10px;
  }
  .sutitle-block-price{
    color:var(--muted);
    font-size:15px;
    font-weight:400;
    margin:6px 0;
  }

  /* Forms */
  .form-group{margin-bottom:15px}
  /* Inputs: idéntico a la versión anterior. El tamaño/padding/fuente/sombra los
     aporta el .form-control de Bootstrap (cargado por base_frontend); aquí solo
     replicamos el override de raudocar.css: borde naranjo + bordes redondeados. */
  .form-control,
  .select2-selection{
    border:1px solid rgb(255 102 0) !important;
    border-radius:18px !important;
  }
  .btn{
    display:inline-block;
    border:none;
    padding:12px 28px;
    border-radius:6px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    transition:background .15s;
  }
  .btn-servicio{
    background:var(--orange);
    color:#fff;
    width:100%;
  }
  .btn-servicio:hover{background:var(--orange-dark)}

  /* Service cards */
  .service-card{
    border:2px solid #ffffff30 !important;
    padding:14px !important;
    margin-top:6px;
    border-radius:20px;
    box-shadow:0 20px 48px rgba(0,0,0,.28), 0 6px 16px rgba(0,0,0,.16);
    background:#fff;
    cursor:pointer;
    transition:background .25s ease, transform .2s ease, box-shadow .2s ease;
    height:100%;
    min-height:360px;
    display:flex;
    align-items:stretch;
    justify-content:center;
  }
  .col-md-3 .service-card{padding:12px !important;min-height:360px}
  .col-md-3 .team-detail h3{font-size:17px}
  .col-md-3 .team-detail h5{font-size:12.5px}
  .col-md-3 .team-detail label,
  .col-md-3 .team-detail h4{font-size:12px}
  .col-md-3 .icon-placeholder{max-width:96px}

  /* Express: comunas */
  .express-comunas{
    font-size:11px;
    line-height:1.4;
    color:#555;
    margin:18px 0 0;
    text-align:center;
  }
  .express-comunas strong{
    color:var(--orange);
    display:inline-block;
    margin-bottom:4px;
  }
  /* En hover, ajustar contraste sobre fondo naranja */
  .service-card:hover .express-comunas{color:#fff}
  .service-card:hover .express-comunas strong{color:#fff}

  /* GreenGo: sello de entrega rápida y ecológica */
  .greengo-strip{
    display:flex;
    align-items:center;
    gap:9px;
    justify-content:center;
    margin-top:auto;
    padding-top:12px;
    border-top:1px solid #ececec;
    text-align:left;
  }
  .greengo-logo{
    width:42px;height:42px;
    border-radius:50%;
    flex-shrink:0;
    box-shadow:0 1px 5px rgba(0,0,0,.18);
  }
  .greengo-text{
    font-size:10.5px;
    line-height:1.3;
    color:#555;
  }
  .greengo-text strong{color:#10446b;font-weight:700}
  /* El sello ya se ancla al fondo, el botón va pegado debajo */
  .greengo-strip + .card-cta{margin-top:12px}
  /* Hover: contraste sobre fondo naranja */
  .service-card:hover .greengo-strip{border-top-color:rgba(255,255,255,.4)}
  .service-card:hover .greengo-text{color:#fff}
  .service-card:hover .greengo-text strong{color:#fff}

  /* Tarjeta destacada "Recomendado" */
  .service-card.is-recommended{
    position:relative;
    border:2px solid var(--orange) !important;
    box-shadow:0 20px 48px rgba(255,102,0,.40), 0 6px 16px rgba(0,0,0,.18);
  }
  .badge-recomendado{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:var(--orange);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    box-shadow:0 3px 10px rgba(255,102,0,.4);
    white-space:nowrap;
    z-index:2;
  }
  .service-card.is-recommended:hover .badge-recomendado{
    background:#fff;
    color:var(--orange);
  }

  /* Tarjeta destacada "Modo Mundial" (oferta por tiempo limitado) */
  .service-card.mundial-destacada{
    position:relative;
    border:2px solid var(--orange) !important;
    box-shadow:0 20px 48px rgba(255,102,0,.40), 0 6px 16px rgba(0,0,0,.18);
    padding-top:24px !important;
  }
  .badge-mundial{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:var(--orange);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    box-shadow:0 3px 10px rgba(255,102,0,.4);
    white-space:nowrap;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .service-card.mundial-destacada:hover .badge-mundial{
    background:#fff;
    color:var(--orange);
  }
  .modo-mundial{margin:0 0 12px;text-align:center;line-height:1.2}
  .modo-mundial .activado{
    display:inline-block;
    background:var(--orange);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:5px 14px;
    border-radius:999px;
    box-shadow:0 3px 10px rgba(255,102,0,.4);
  }
  .modo-mundial .limitado{
    display:block;
    margin-top:6px;
    color:var(--orange-dark);
    font-size:12px;
    font-weight:700;
    font-style:italic;
  }
  /* Sube la especificidad para ganarle a `.team-detail span{color:muted;font-size:13px}` (linea 476) */
  .team-detail .precio-mundial{font-size:24px;color:#f60;font-weight:700}
  /* Hover: contraste sobre fondo naranja */
  /* !important en color porque `.service-card:hover .team-detail span{color:#fff !important}` pisa la regla especifica */
  .service-card.mundial-destacada:hover .modo-mundial .activado{background:#fff;color:var(--orange) !important}
  .service-card.mundial-destacada:hover .modo-mundial .limitado{color:#fff}
  .service-card.mundial-destacada:hover .precio-mundial{color:#fff}

  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 52px rgba(255,102,0,.45), 0 10px 24px rgba(0,0,0,.28);
    background:var(--orange);
  }
  /* Hover: invertir tipografías y íconos a blanco */
  .service-card:hover .team-detail h3,
  .service-card:hover .team-detail h3 strong,
  .service-card:hover .team-detail h4,
  .service-card:hover .team-detail h5,
  .service-card:hover .team-detail label,
  .service-card:hover .team-detail span,
  .service-card:hover .team-detail strong,
  .service-card:hover .team-detail del{
    color:#fff !important;
  }
  .service-card:hover .team-detail del{opacity:.7}
  /* Quitado: fondo blanco translucido sobre el icono-placeholder en hover */
  fieldset.service-card{min-inline-size:auto}
  /* Anular el grid de Bootstrap (cargado por base_frontend) dentro de las tarjetas:
     sin float ni padding lateral para que precios y títulos queden centrados */
  .team-detail [class*="col-"],
  .team-detail label{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center;
  }
  .team-member{text-align:center;width:100%;display:flex;flex-direction:column;height:100%}
  /* La columna de detalle crece para ocupar el alto disponible, así el
     .card-cta (con margin-top:auto) se ancla al fondo de la tarjeta */
  .team-detail{display:flex;flex-direction:column;flex:1 1 auto}
  .member-photo{
    margin:0 0 6px;
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .member-photo img{
    width:58px;height:58px;
    object-fit:contain;
    display:inline-block;
  }
  .team-detail h3{
    font-size:18px;
    color:var(--orange);
    margin-bottom:6px;
    min-height:24px;
  }
  .team-detail h5{
    font-size:12.5px;
    color:var(--orange);
    font-weight:400;
    line-height:1.3;
    margin-bottom:8px;
    min-height:42px;
  }
  .team-detail h4{
    font-size:12.5px;
    color:#222;
    margin:2px 0 1px;
    font-weight:700;
  }
  .team-detail label{
    display:block;
    margin:0;
    font-weight:400;
    font-size:12.5px;
    color:#333;
    line-height:1.25;
  }
  .team-detail br{line-height:.5;font-size:0}
  /* Fijar altura de la fila de precio para que "Otras regiones" se alinee entre tarjetas */
  .team-detail label:not(.col-md-12){
    min-height:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  /* Por defecto cada t\u00edtulo de regi\u00f3n ocupa 2 l\u00edneas (para alinear con el bloque dual Coquimbo+Valpara\u00edso) */
  .team-detail label.col-md-12{
    min-height:36px;
  }
  .team-detail label.col-md-12 h4{
    min-height:36px;
    line-height:1.25;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin:0;
  }
  /* Cuando son 2 t\u00edtulos consecutivos (Coquimbo + Valpara\u00edso), cada uno ocupa solo 1 l\u00ednea */
  .team-detail label.col-md-12:has(+ label.col-md-12),
  .team-detail label.col-md-12 + label.col-md-12{
    min-height:18px;
  }
  .team-detail label.col-md-12:has(+ label.col-md-12) h4,
  .team-detail label.col-md-12 + label.col-md-12 h4{
    min-height:18px;
    align-items:center;
  }
  .team-detail label.col-md-12{padding:0}
  .team-detail span{color:var(--muted);font-size:13px}
  del{color:#999}

  /* Footer */
  #footer_wrap{
    background:var(--footer-bg);
    color:#ccc;
    padding:18px 0 14px;
  }
  #footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
    padding:0 15px;
  }
  #logo_footer{
    width:180px;
    max-width:100%;
    height:auto;
  }
  #info_footer{flex:1;min-width:280px}
  #utilitarios_footer{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:6px;
  }
  #utilitarios_footer a{
    color:#ccc;
    font-size:12px;
    transition:color .15s;
  }
  #utilitarios_footer a:hover{color:var(--orange)}
  .copy{
    font-size:11px;
    color:#888;
    margin:4px 0 0;
  }

  /* Tracking section (now at the bottom) */
  #section-consulta{
    background:#f7f7f7;
    padding:30px 0 50px;
    border-top:1px solid var(--border);
    margin-top:0;
  }

  /* Strip eco-friendly */
  .eco-strip{
    background:#1b6e3a;
    color:#fff;
    padding:10px 0;
    text-align:center;
    font-size:12px;
    line-height:1.4;
  }
  .eco-strip .container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .eco-strip strong{font-weight:700}
  .eco-leaf{
    display:inline-flex;
    width:18px;height:18px;
    background:#34c759;
    color:#fff;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
  }
  #section-consulta .section-heading{
    text-align:center;
    color:#222;
    margin-bottom:8px;
  }
  #section-consulta .sutitle-block-price{
    text-align:center;
    margin-bottom:30px;
  }

  /* Iconos de las tarjetas: default + hover */
  .icon-placeholder{
    width:100%;
    max-width:160px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .icon-placeholder img,
  .icon-placeholder .icon-hover{
    width:100%;
    height:auto;
    display:block;
  }
  /* Sistema de ícono: original en normal, versión con flechas blancas en hover */
  .icon-placeholder{position:relative}
  .icon-placeholder .icon-default,
  .icon-placeholder .icon-hover{
    width:100%;
    height:auto;
    display:block;
    transition:opacity .25s ease;
  }
  .icon-placeholder .icon-hover{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:auto;
    max-width:100%;
    max-height:100%;
    opacity:0;
    pointer-events:none;
    display:block;
  }
  .service-card:hover .icon-placeholder .icon-default{opacity:0}
  .service-card:hover .icon-placeholder .icon-hover{opacity:1}