:root { --carrito-azul:#222160; --carrito-celeste:#1d93d1; --carrito-texto:#526070; --carrito-borde:#dce5ef; }
.logo img { width:155px; height:58px; object-fit:contain; display:block; }
.detalle-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:36px; align-items:start; margin-top:24px; }
.detalle-imagen { width:100%; max-height:470px; object-fit:contain; border-radius:18px; }
.seleccion-imagen { float:right; margin:0 0 12px 16px; }
.seleccion-imagen img { width:76px; height:76px; object-fit:contain; border-radius:10px; }
.referencia-campo { width:100%; }
.nota-guardado { font-size:max(14px, 12px); line-height:1.6; margin:18px 0 0; }
.fila-producto h2 { overflow-wrap:anywhere; }
@media (max-width:700px) { .detalle-layout { grid-template-columns:1fr; } .detalle-imagen { max-height:220px; } }
* { box-sizing:border-box; }
body { margin:0; background:#f8fbfd; color:var(--carrito-azul); font-family:'Montserrat',Arial,sans-serif; line-height:1.6; }
.contenedor a { color:var(--carrito-azul); text-underline-offset:4px; }
.encabezado { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px max(24px,calc((100% - 1160px)/2)); background:white; border-bottom:1px solid var(--carrito-borde); }
.logo { font-size:24px; font-weight:700; text-decoration:none; letter-spacing:.05em; }
nav { display:flex; align-items:center; gap:24px; font-size:14px; flex-wrap:wrap; }
.carrito-enlace { background:#eaf6fc; padding:10px 16px; border-radius:24px; text-decoration:none; font-weight:600; }
.contenedor { width:min(1160px,calc(100% - 40px)); margin:48px auto; min-height:65vh; }
.etiqueta { font-size:max(14px, 12px); letter-spacing:.12em; font-weight:600; color:#0872a6; }
h1 { font-size:clamp(28px,4vw,44px); line-height:1.2; margin:10px 0 20px; font-weight:600; }
h2 { font-size:19px; line-height:1.4; margin:8px 0 16px; }
.introduccion, .tarjeta p, .vacio p { color:var(--carrito-texto); }
.productos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:30px; }
.tarjeta, .fila-producto { background:white; border:1px solid var(--carrito-borde); border-radius:18px; padding:28px; box-shadow:0 8px 26px #22216006; }
.tarjeta { display:flex; flex-direction:column; }
.tarjeta form { margin-top:auto; }
.codigo { color:#097aaa; font-size:max(14px, 12px); font-weight:600; overflow-wrap:anywhere; }
.contenedor label { display:block; margin:16px 0 6px; color:var(--carrito-azul); font-size:max(14px, 13px); font-weight:600; }
input, textarea, button { font:inherit; }
input, textarea { width:100%; border:1px solid #adbccd; border-radius:8px; padding:11px; background:white; color:#26364a; }
input[type=number] { max-width:95px; display:block; }
textarea { resize:vertical; }
.contenedor button, .contenedor .boton { display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; padding:12px 18px; border:1px solid var(--carrito-azul); border-radius:8px; background:var(--carrito-azul); color:white; text-decoration:none; font-size:max(14px, 13px); font-weight:600; cursor:pointer; }
.contenedor button:hover, .contenedor .boton:hover { background:#323080; }
.contenedor :focus-visible { outline:3px solid var(--carrito-celeste); outline-offset:3px; }
.aviso { border-left:4px solid var(--carrito-celeste); background:#eaf6fc; padding:14px 18px; border-radius:6px; font-size:14px; }
.aviso.error { border-color:#b84339; background:#fff0ed; color:#82291f; }
.aviso.exito { border-color:#257156; background:#eaf7f1; color:#205a45; }
.cotizacion-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; margin-top:32px; align-items:start; }
.fila-producto { margin-bottom:16px; }
.acciones { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; } 
.cantidad-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; min-width:0; }
.cantidad-form label { width:100%; margin-top:0; }
.cantidad-form { flex:1; }
.cantidad-form button, .acciones button { margin:0; }
.acciones > form:last-child { display:flex; align-items:flex-end; justify-content:flex-end; margin-left:auto; }
.secundario { color:var(--carrito-azul); background:#f4f7fc; }
.secundario:hover { color:white; }
.quitar { color:#873127; background:white; border-color:#debdb8; min-height:44px; }
.quitar:hover { background:#fff0ed; }
.formulario button { width:100%; }
.campo-trampa { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.acciones-secundarias {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-top:18px;
}
.volver { display:inline-block; margin:0; }
.vacio { border:1px solid var(--carrito-borde); background:white; border-radius:18px; padding:45px 25px; text-align:center; margin:35px auto; max-width:700px; }
.pie { padding:28px 20px; text-align:center; color:var(--carrito-texto); font-size:max(14px, 12px); border-top:1px solid var(--carrito-borde); }
@media (max-width:850px) { .productos { grid-template-columns:1fr; } .cotizacion-layout { grid-template-columns:1fr; } }
@media (max-width:550px) { .encabezado { align-items:flex-start; flex-direction:column; padding:20px; gap:14px; } nav { gap:16px; } .tarjeta, .fila-producto { padding:20px; } .contenedor { margin-top:30px; } }

/* Distribución para tabletas y teléfonos */
.contenedor, .encabezado, .tarjeta, .fila-producto, .cotizacion-layout, .acciones { min-width: 0; }
.tarjeta h2, .fila-producto h2, .contenedor p, .codigo { overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }

@media (max-width: 850px) {
    .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cotizacion-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .productos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .contenedor { width: calc(100% - 28px); margin: 28px auto; }
    .encabezado { padding: 18px 14px; }
    nav { width: 100%; gap: 8px 14px; }
    .acciones { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
    .acciones > form:last-child { width: 100%; margin-left: 0; }
    .acciones button, .acciones > form:last-child button { width: 100%; }
    .cantidad-form { align-items: stretch; }
    .cantidad-form input[type="number"] { max-width: 100%; width: 100%; }
    .acciones-secundarias { align-items: stretch; }
    .acciones-secundarias .boton, .acciones-secundarias button { width: 100%; }
}

@media (max-width: 380px) {
    .tarjeta, .fila-producto { padding: 16px; }
    .encabezado { gap: 10px; }
    .logo img { width: min(155px, 70vw); height: auto; }
}

@media (min-width: 1800px) {
    html { font-size: clamp(20px, 0.9vw, 48px); }
    body { font-size: 1rem; }
    .encabezado { padding: 1.2vw 4vw; gap: 2vw; }
    .logo { font-size: clamp(24px, 1.3vw, 58px); }
    .logo img { width: clamp(155px, 12vw, 600px); height: auto; }
    nav { gap: 1.2vw; font-size: clamp(14px, 0.72vw, 32px); }
    .contenedor { width: 92vw; max-width: none; margin: 3vw auto; }
    .contenedor h1 { font-size: clamp(44px, 2.6vw, 116px); }
    .contenedor h2 { font-size: clamp(22px, 1.25vw, 56px); }
    .productos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22vw), 1fr)); gap: 1.2vw; }
    .tarjeta, .fila-producto { padding: 1.4vw; border-radius: 1vw; }
    .tarjeta p, .fila-producto p, .contenedor label { font-size: max(14px, clamp(13px, 0.72vw, 32px)); }
    .contenedor input, .contenedor textarea, .contenedor button, .contenedor .boton { font-size: clamp(14px, 0.72vw, 32px); padding: 0.65vw 0.9vw; }
    .cotizacion-layout { gap: 1.4vw; }
}