/* =========================================================
   CONTACTO (contacto.html) — prefijo co-
   Usa rutas-unicas.css y los componentes de crea-tu-ruta.css (banner, campos, prefijo, casilla, confirmación).
   Dispositivos: Móvil ≤ 640 · Tablet 641–900 · Portátil 901–1279 · Ordenador ≥ 1280
   ========================================================= */

/* ---------- Banner: ocupa toda la pantalla, como el de la portada (altura de .ct-hero) ---------- */
.co-hero__img{object-position:50% 45%}   /* foto facilitada por Alberto (25/10) */
.co-hero .ct-hero__lead strong{color:var(--ru-white)}

/* botones del banner: teléfono (llamar o WhatsApp) y email (email o formulario). El menú se abre hacia arriba (el banner recorta lo que sale por abajo) */
.co-tel{position:relative;display:flex}
.co-tel__icons{display:inline-flex;gap:6px}
.co-tel__menu{position:absolute;z-index:5;left:0;bottom:calc(100% + 8px);min-width:max(100%,300px);margin:0;padding:6px;list-style:none;border-radius:var(--ru-radius);
  background:var(--ru-white);box-shadow:0 24px 60px rgba(0,0,0,.28);animation:ru-rise .35s var(--ru-ease)} /* taste-skill-ignore: el menú flota */
.co-tel__menu[hidden]{display:none}
.co-tel__menu a{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:12px;color:var(--ru-ink);text-decoration:none;transition:background .2s var(--ru-ease)}
.co-tel__menu a:hover,.co-tel__menu a:focus-visible{background:var(--ru-tint);outline:none}
.co-tel__menu .ct-ico{width:44px;height:44px;border-radius:12px}
.co-tel__menu strong{display:block;font-size:1rem;font-weight:700;color:var(--ru-text-accent)}
.co-tel__menu small{display:block;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--ru-muted)}
@media (max-width:640px){ .co-tel__btn{width:100%} .co-tel__menu{right:0} }

/* ---------- Formulario ---------- */
.co-main{background:var(--ru-white);   /* sección y tarjeta en blanco, como Crea tu ruta (25/10) */
  padding:clamp(40px,7vh,72px) var(--ru-page) clamp(56px,8vh,96px)}   /* abajo más aire: ya no es la última sección (27/10, Quiénes somos y FAQ debajo) */
/* una sola columna centrada (25/10): título y texto arriba, formulario debajo; así no queda hueco a la izquierda */
.co-main__grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;max-width:820px;margin:0 auto}
.co-intro{grid-column:1 / -1;text-align:center}
.co-intro .ct-lead{margin-left:auto;margin-right:auto;max-width:60ch}
.co-card{grid-column:1 / -1;width:100%;margin-top:clamp(4px,1vh,12px);background:var(--ru-white);border-radius:var(--ru-radius);padding:clamp(20px,2.5vw,32px) 0 0;min-width:0}   /* sobre blanco la tarjeta no se ve: sin relleno lateral, alineada con el título */
.co-form [hidden]{display:none!important}
.co-form .ct-grid2{grid-template-columns:1fr 1fr}   /* nombre a todo el ancho; email y teléfono en la misma fila */
.co-form__title{margin:0 0 24px;font-family:var(--ru-font-country);font-weight:600;font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.15;color:var(--ru-text-accent)}
.co-send{display:flex;justify-content:flex-end;margin-top:24px}
.co-send .ct-btn{min-width:180px}
.co-send .ct-btn:hover svg{animation:ct-fly .7s var(--ru-ease)}
.co-form.is-sending .co-send .ct-btn{pointer-events:none;opacity:.7}
.co-again{border:0;background:none;padding:8px 0;font:inherit;cursor:pointer}

/* otras formas de contacto: icono en cuadrado tintado + dato */
.co-ways__title{margin:40px 0 16px;font-size:.9375rem;font-weight:700;color:var(--ru-ink)}
.co-ways{display:grid;gap:var(--ru-gap);margin:0;padding:0;list-style:none}
.co-way{display:flex;align-items:center;gap:16px;padding:10px 18px 10px 10px;border-radius:var(--ru-radius);background:var(--ru-sand);color:var(--ru-ink);text-decoration:none;
  transition:background .25s var(--ru-ease)}
.co-way:hover{background:var(--ru-tint)}
.co-way:focus-visible{outline:3px solid var(--ru-primary);outline-offset:2px}
.co-way .ct-ico{transition:background .25s var(--ru-ease), color .25s var(--ru-ease)}
.co-way:hover .ct-ico{background:var(--ru-primary);color:var(--ru-white)}
.co-way__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-way__txt small{font-size:.8125rem;font-weight:500;color:var(--ru-muted)}
.co-way__txt strong{font-size:1.0625rem;font-weight:700;color:var(--ru-text-accent);overflow-wrap:anywhere}

/* =========================================================
   TABLET Y MÓVIL (≤ 900): un campo por fila
   ========================================================= */
@media (max-width:900px){
  .co-form .ct-grid2{grid-template-columns:1fr}
  .co-ways{grid-template-columns:repeat(3,minmax(0,1fr));text-align:left}
  .co-way{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .co-card{margin-top:16px}
}

/* =========================================================
   MÓVIL (≤ 640)
   ========================================================= */
@media (max-width:640px){
  .co-main{padding:32px 0 48px}
  .co-intro{padding:0 var(--ru-page)}
  .co-intro .ru-dest__title{font-size:clamp(2.5rem,13vw,3.75rem)}
  .co-intro .ru-dest__kicker{font-size:.8125rem;letter-spacing:.28em;margin-bottom:6px}
  .co-intro .ct-lead{font-size:1rem}
  .co-ways__title{margin-top:28px}
  .co-ways{grid-template-columns:1fr}
  .co-way{flex-direction:row;align-items:center;gap:14px;padding:8px 14px 8px 8px}
  .co-card{margin-top:8px;border-radius:0;padding:20px var(--ru-page) 8px}
  .co-form__title{font-size:1.5rem;margin-bottom:20px}
  .co-send .ct-btn{width:100%}
}

/* Pie como el de Crea tu ruta (25/10, comentario «Trae el footer de crea tu ruta»): newsletter compacta dentro del pie
   (clase .ru-foot-in del <body>, reglas en crea-tu-ruta.css); el degradado empieza en el blanco del formulario */
body{--ft-from:var(--ru-white)}

/* Botón del email del banner: fondo más blanco que el translúcido general (25/10) */
/* Botón del email del banner: blanco con el texto en color (25/10, comentario «Blanco y letra de color») */
#coMailBtn{background:var(--ru-white);color:var(--ru-primary);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#coMailBtn::before{background:var(--ru-sand)}

/* Etiquetas Nombre, Email y Teléfono en negrita, como «Mensaje» (25/10) */
.co-form .ct-field__label{font-size:.9375rem;font-weight:700;color:var(--ru-ink)}

/* Aviso de error bajo cada campo (26/10, regla de Alberto: el error va en su propia caja, no al final).
   Se probó el estilo común .ru-ferr sobre el borde de la caja (v218) y Alberto pidió volver a este (26/10) */
.co-err{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:.8125rem;font-weight:600;line-height:1.4;color:#b3261e}
.co-err::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:#b3261e;color:var(--ru-white);font-size:.6875rem;font-weight:800}
#coContact[aria-invalid="true"] .ct-opt{box-shadow:inset 0 0 0 2px #b3261e}   /* taste-skill-ignore: grupo con error */
.co-form .ct-check:has(input[aria-invalid="true"]) .ct-check__box{box-shadow:inset 0 0 0 2px #b3261e}   /* taste-skill-ignore: casilla con error */
.co-form .ct-check + .co-err{margin-left:36px}

/* ---------- Quiénes somos (27/10, referencias WeRoad «Cómo funciona» y Pangea) ---------- */
.co-about{background:var(--ru-ivory);padding:clamp(56px,9vh,104px) var(--ru-page)}
.co-about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1200px;margin:0 auto}
.co-about__media{margin:0;border-radius:var(--ru-radius);overflow:hidden;aspect-ratio:4/5;max-height:640px}
.co-about__media img{display:block;width:100%;height:100%;object-fit:cover}
.co-about__text .ct-lead{max-width:56ch}
.co-about__ways{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.co-about__way{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:var(--ru-radius);background:var(--ru-white);color:var(--ru-ink);text-decoration:none;box-shadow:0 1px 0 var(--ru-tint-2);transition:box-shadow .35s var(--ru-ease), top .35s var(--ru-ease);position:relative;top:0}
.co-about__way:hover{top:-2px;box-shadow:0 12px 28px -14px rgba(0,0,0,.25)}
.co-about__way:focus-visible{outline:2px solid var(--ru-primary);outline-offset:3px}
.co-about__wt{flex:1;min-width:0}
.co-about__wt strong{display:block;font-size:1rem;font-weight:700;color:var(--ru-text-accent)}
.co-about__wt small{display:block;margin-top:2px;font-size:.875rem;line-height:1.45;color:var(--ru-muted)}
.co-about__arrow{flex:none;color:var(--ru-primary);transition:transform .35s var(--ru-ease)}
.co-about__way:hover .co-about__arrow{transform:translateX(4px)}
@media (max-width:900px){
  .co-about__grid{grid-template-columns:minmax(0,1fr)}
  .co-about__media{aspect-ratio:16/10;max-height:none}
}
@media (max-width:640px){
  .co-about{padding:48px var(--ru-page)}
  .co-about .ru-dest__title{font-size:clamp(2.5rem,13vw,3.75rem)}
  .co-about .ct-ico{width:44px;height:44px;border-radius:12px}
}

/* ---------- Preguntas frecuentes (27/10): acordeón con iconos y separadores, uno abierto a la vez ---------- */
.co-faq{background:var(--ru-white);padding:clamp(56px,9vh,104px) var(--ru-page) 24px}
.co-faq__inner{max-width:820px;margin:0 auto}
.co-faq__head{text-align:center;margin-bottom:clamp(24px,4vh,40px)}
.co-faq__list{border-top:1px solid var(--ru-tint-2)}
.co-faq__item{border-bottom:1px solid var(--ru-tint-2)}
.co-faq__q{display:flex;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:700;line-height:1.35;color:var(--ru-ink)}
.co-faq__q::-webkit-details-marker{display:none}
.co-faq__q:focus-visible{outline:2px solid var(--ru-primary);outline-offset:2px;border-radius:6px}
.co-faq__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ru-tint);color:var(--ru-primary)}
.co-faq__qt{flex:1;min-width:0}
.co-faq__chev{flex:none;color:var(--ru-primary);transition:transform .35s var(--ru-ease)}
.co-faq__item[open] .co-faq__chev{transform:rotate(180deg)}
.co-faq__q:hover .co-faq__qt{color:var(--ru-text-accent)}
.co-faq__a{padding:0 44px 22px 64px}
.co-faq__a p{margin:0;font-size:.9875rem;line-height:1.65;color:var(--ru-muted);max-width:62ch}
.co-faq__item[open] .co-faq__a{animation:co-faq-in .45s var(--ru-ease)}
@keyframes co-faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.co-faq__more{margin:28px 0 0;text-align:center;font-size:.9375rem;color:var(--ru-muted)}
.co-faq__more a{white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .co-faq__item[open] .co-faq__a{animation:none} }
@media (max-width:640px){
  .co-faq{padding:48px var(--ru-page) 8px}
  .co-faq .ru-dest__title{font-size:clamp(2.5rem,13vw,3.75rem)}
  .co-faq__q{gap:12px;padding:16px 0;font-size:1rem}
  .co-faq__ico{width:38px;height:38px;border-radius:10px}
  .co-faq__a{padding:0 0 18px 50px}
}