WADLEY

Diseñada para explorar sin límites. Wadley combina una plataforma de carbono de última generación con una configuración enfocada en la versatilidad, permitiendo recorrer desde largas jornadas sobre asfalto hasta caminos de tierra con la misma eficiencia, comodidad y control.

/* ===== Especificaciones Wadley — sin marcos, fondos transparentes ===== */
.wdl{
–wdl-line:#eceef1; –wdl-head:rgba(0,0,0,.045); –wdl-sub:rgba(0,0,0,.06);
–wdl-txt:#111827; –wdl-mut:#6b7280; –wdl-accent:#ea580c; –wdl-accent-rgb:234 88 12;
all:initial;
display:block; container-type:inline-size;
box-sizing:border-box; width:100%; max-width:650px;
font-family:-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Helvetica,Arial,sans-serif;
color:var(–wdl-txt); line-height:1.45; text-align:left;
background:transparent;
transition:background-color .2s ease;
}
.wdl *,.wdl *::before,.wdl *::after{box-sizing:border-box}

.wdl .wdl-title{
margin:0 0 4px; padding:0; font-size:19px; font-weight:700;
letter-spacing:.02em; line-height:1.25; text-transform:none;
}
.wdl .wdl-badge{
font-size:11px; font-weight:700; color:var(–wdl-accent);
letter-spacing:.08em; margin-left:8px; vertical-align:2px; white-space:nowrap;
transition:color .2s ease;
}
.wdl .wdl-sub{margin:0 0 16px; padding:0; font-size:13px; color:var(–wdl-mut)}

.wdl .wdl-switch{
display:flex; width:100%; flex-wrap:nowrap; gap:4px; padding:3px; margin:0 0 16px;
border:1px solid var(–wdl-line); border-radius:9px; background:transparent;
max-width:100%;
}
.wdl .wdl-switch button{
appearance:none; -webkit-appearance:none; margin:0;
border:1px solid var(–wdl-line);
background:rgba(0,0,0,.02); cursor:pointer; font-family:inherit; font-size:13px;
font-weight:600; color:var(–wdl-mut); letter-spacing:.04em; line-height:1;
padding:9px 0; border-radius:7px;
transition:background .16s,color .16s,border-color .16s;
text-transform:none; white-space:nowrap; min-width:0; flex:1 1 0;
}
.wdl .wdl-switch button:hover{
color:var(–wdl-txt); background:rgba(0,0,0,.05); border-color:#c9ccd2;
}
.wdl .wdl-switch button:focus-visible{outline:2px solid var(–wdl-accent); outline-offset:2px}
.wdl .wdl-switch button[aria-selected=”true”]{
background:rgba(var(–wdl-accent-rgb),.1);
color:var(–wdl-accent);
border-color:rgba(var(–wdl-accent-rgb),.45);
font-weight:700;
}
@media (prefers-reduced-motion: reduce){
.wdl .wdl-switch button{transition:none}
.wdl{transition:none}
}

.wdl .wdl-scroll{
width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
border-top:3px solid var(–wdl-accent); border-radius:3px; transition:border-color .2s ease;
}

/* Tabla sin marcos: solo separadores horizontales */
.wdl table{
width:100%; max-width:100%; table-layout:fixed;
border-collapse:collapse; border-spacing:0; border:0;
font-size:12.5px; background:transparent; margin:0;
}
.wdl thead th{
background:rgba(var(–wdl-accent-rgb),.06); text-align:left; padding:10px;
font-weight:600; font-size:12.5px; color:var(–wdl-txt);
border:0; border-bottom:2px solid rgba(var(–wdl-accent-rgb),.4);
text-transform:none; letter-spacing:0; transition:background-color .2s ease,border-color .2s ease;
}
.wdl th.wdl-c1,.wdl td.wdl-c1{width:36%}
.wdl td{
padding:9px 10px; border:0; border-bottom:1px solid var(–wdl-line);
vertical-align:top; background:transparent; color:var(–wdl-txt); font-size:12.5px;
overflow-wrap:anywhere; word-break:normal; hyphens:auto;
}
.wdl td.wdl-c1{font-weight:600}
.wdl tr.wdl-group td{
background:rgba(var(–wdl-accent-rgb),.09); color:var(–wdl-accent); font-weight:700;
font-size:11.5px; letter-spacing:.07em; padding:10px 10px 10px 12px;
border:0; border-bottom:1px solid var(–wdl-line); border-left:3px solid var(–wdl-accent);
transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.wdl tbody tr:not(.wdl-group):hover td{background:rgba(var(–wdl-accent-rgb),.035); transition:background .16s}

/* ===== Modo apilado (tarjetas) ===== */
@container (max-width: 400px){
.wdl .wdl-scroll{overflow-x:visible}
.wdl table{table-layout:auto; border:0; display:block; width:100%}
.wdl thead{display:none}
.wdl tbody{display:block; width:100%}
.wdl tbody tr{display:block; width:100%; margin:0}

.wdl tbody tr:not(.wdl-group){
border:0; border-bottom:1px solid var(–wdl-line); padding:2px 0;
}
.wdl td{
display:block; width:100%; max-width:100%; min-width:0;
border:0; padding:7px 2px; white-space:normal;
overflow-wrap:break-word; word-break:break-word;
}
.wdl td.wdl-c1{
width:auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
color:var(–wdl-mut); padding-bottom:0; line-height:1.35;
}
.wdl td:not(.wdl-c1){padding-top:3px; padding-bottom:12px; line-height:1.5}

/* Separación entre bloques sin usar margin en celdas */
.wdl tbody tr.wdl-group{border:0; padding:0; margin:0}
.wdl tr.wdl-group td{
padding:10px 10px 10px 12px; line-height:1.3;
border:0; border-bottom:1px solid var(–wdl-line); border-left:3px solid var(–wdl-accent);
}
.wdl tbody tr.wdl-group:not(:first-child) td{
border-top:14px solid transparent; background-clip:padding-box;
}

.wdl .wdl-title{font-size:17px; line-height:1.3}
.wdl .wdl-badge{display:inline-block; margin-left:0; margin-top:4px; vertical-align:baseline}
.wdl .wdl-sub{font-size:12.5px}
.wdl .wdl-switch{gap:6px}
.wdl .wdl-switch button{padding:10px 6px; font-size:12.5px; letter-spacing:.03em; text-align:center}
}

@supports not (container-type: inline-size){
@media (max-width: 420px){
.wdl .wdl-scroll{overflow-x:visible}
.wdl table{table-layout:auto; border:0; display:block; width:100%}
.wdl thead{display:none}
.wdl tbody{display:block; width:100%}
.wdl tbody tr{display:block; width:100%; margin:0}
.wdl tbody tr:not(.wdl-group){border:0; border-bottom:1px solid var(–wdl-line); padding:2px 0}
.wdl td{
display:block; width:100%; max-width:100%; min-width:0;
border:0; padding:7px 2px; white-space:normal;
overflow-wrap:break-word; word-break:break-word;
}
.wdl td.wdl-c1{
width:auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
color:var(–wdl-mut); padding-bottom:0; line-height:1.35;
}
.wdl td:not(.wdl-c1){padding-top:3px; padding-bottom:12px; line-height:1.5}
.wdl tbody tr.wdl-group{border:0; padding:0; margin:0}
.wdl tr.wdl-group td{padding:10px 10px 10px 12px; line-height:1.3; border:0; border-bottom:1px solid var(–wdl-line); border-left:3px solid var(–wdl-accent)}
.wdl tbody tr.wdl-group:not(:first-child) td{
border-top:14px solid transparent; background-clip:padding-box;
}
.wdl .wdl-title{font-size:17px; line-height:1.3}
.wdl .wdl-badge{display:inline-block; margin-left:0; margin-top:4px; vertical-align:baseline}
.wdl .wdl-sub{font-size:12.5px}
.wdl .wdl-switch{gap:6px}
.wdl .wdl-switch button{padding:10px 6px; font-size:12.5px; letter-spacing:.03em; text-align:center}
}
}

@media print{
.wdl .wdl-switch{display:none}
.wdl td,.wdl th{font-size:10px}
}