/* ==========================================================================
   Kusi Navidad 2026 — paleta propia de campaña
   Cochinilla + oro + crema, con el par rojo/verde del manto Paracas en fajas.
   Sin pinos, sin nieve, sin rojo de catálogo importado.
   ========================================================================== */

:root {
  --cochinilla: #7A1F2B;
  --cochinilla-honda: #4A111A;
  --rojo-manto: #C8302F;
  --verde-manto: #254634;
}

/* --- Frisos: escalonado de Chan Chan (Chimú) y rombos de Kuélap (Chachapoyas) --- */
.friso-escalonado {
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14V10h4V6h4V2h6v4h4v4h4v4z' fill='%23DBA331'/%3E%3C/svg%3E") repeat-x left bottom;
}
.friso-escalonado.invertido { transform: scaleY(-1); }
.faja-manto { height: 8px; background: linear-gradient(90deg, var(--rojo-manto) 0 50%, var(--verde-manto) 50% 100%); background-size: 56px 8px; }
.rombos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23DBA331' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M22 2L42 22L22 42L2 22z'/%3E%3Cpath d='M22 12L32 22L22 32L12 22z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Cabecera --- */
.cabecera { background: var(--cochinilla-honda); color: var(--crema); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marca { display: flex; align-items: baseline; gap: .4em; text-decoration: none; font-family: var(--serif); letter-spacing: .12em; }
.marca b { font-weight: 600; font-size: 1.35rem; color: var(--crema); }
.marca span { font-weight: 500; font-size: 1rem; color: var(--oro); }
.cabecera nav { display: flex; gap: 6px; }
.cabecera nav a { text-decoration: none; font-size: .9rem; font-weight: 700; padding: 8px 12px; border-radius: var(--radio); color: var(--crema); }
.cabecera nav a:hover { background: rgba(244,239,228,.1); }
.cabecera nav .solo-ancho { display: none; }
@media (min-width: 720px) { .cabecera nav .solo-ancho { display: inline-block; } }

/* --- Portada --- */
.portada { background-color: var(--cochinilla); color: var(--crema); text-align: center; padding: 56px 0 64px; }
.antetitulo { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-luz); }
.antetitulo::before, .antetitulo::after { content: ""; width: 9px; height: 9px; background: var(--oro); transform: rotate(45deg); }
.portada h1 { margin: 18px 0 4px; line-height: 1; }
.portada h1 .qu { display: block; font-size: clamp(4rem, 17vw, 8.5rem); font-weight: 600; letter-spacing: .08em; color: var(--oro-luz); }
.portada h1 .es { display: block; margin-top: 14px; font-size: clamp(1.35rem, 4.5vw, 2rem); font-weight: 400; font-style: italic; }
.portada .bajada { max-width: 620px; margin: 20px auto 32px; font-size: 1.05rem; color: #F1E6DA; }
.puertas { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
@media (min-width: 640px) { .puertas { grid-template-columns: 1fr 1fr; } }
.puerta { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: var(--radio); text-decoration: none; text-align: left; border: 1px solid rgba(240,206,118,.45); background: rgba(26,21,18,.28); transition: background .18s, transform .18s; }
.puerta:hover { background: rgba(26,21,18,.45); transform: translateY(-2px); }
.puerta .qu { font-size: 1.45rem; color: var(--oro-luz); }
.puerta .es { font-weight: 700; font-size: 1.05rem; }
.puerta small { font-size: .92rem; color: #E9DCCD; }
.puerta .flecha { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--oro-luz); }

/* --- Secciones --- */
.seccion { padding: 64px 0; }
.titulo-seccion { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.titulo-seccion .qu { display: block; font-size: clamp(2rem, 6vw, 2.8rem); color: var(--cochinilla); line-height: 1.1; }
.titulo-seccion h2 { font-size: 1.25rem; font-weight: 700; margin-top: 4px; }
.titulo-seccion p { margin-top: 12px; color: var(--texto-suave); }
.glosa { font-style: italic; }

/* --- Tarjetas de producto --- */
.grilla { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tarjeta { display: flex; flex-direction: column; background: #FFFCF6; border: 1px solid var(--crema-3); border-radius: var(--radio); overflow: hidden; }
.tarjeta.estrella { border: 2px solid var(--oro); box-shadow: 0 8px 28px rgba(122,31,43,.14); }
@media (min-width: 900px) { .grilla { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } .tarjeta.estrella { grid-column: span 2; grid-row: span 2; } .tarjeta.estrella .foto { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; } .tarjeta.estrella .cuerpo { flex: 0 0 auto; padding: 26px 28px 28px; } .tarjeta.estrella .acciones .boton { flex: 0 1 auto; } }
.foto { position: relative; aspect-ratio: 1; background: var(--crema-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto .vacia { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ukhu); }
.foto .vacia svg { width: 64px; height: 64px; stroke-width: 1.3; }
.referencial { position: absolute; left: 8px; bottom: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 3px; background: rgba(26,21,18,.72); color: var(--crema); }
.cinta { position: absolute; top: 10px; left: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; background: var(--cochinilla); color: var(--crema); }
.cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.mundo { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.mundo::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--c, var(--oro)); }
.mundo.kay { --c: var(--kay); } .mundo.hanan { --c: var(--hanan); } .mundo.ukhu { --c: var(--ukhu); } .mundo.kimsa { --c: var(--oro); }
.tarjeta h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--tinta); }
.tarjeta.estrella h3 { font-size: 1.6rem; }
.tarjeta p { font-size: .95rem; color: var(--texto-suave); }
.precio { font-size: 1.35rem; font-weight: 700; color: var(--cochinilla); margin-top: auto; padding-top: 6px; }
.precio small { font-size: .8rem; font-weight: 400; color: var(--texto-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Botones (borde escalonado al pie, guiño Chimú) --- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: var(--radio); font: 700 .95rem var(--sans); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background .18s, color .18s; }
.boton.lleno { background: var(--cochinilla); color: var(--crema); }
.boton.lleno:hover { background: var(--cochinilla-honda); }
.boton.linea { border-color: var(--cochinilla); color: var(--cochinilla); background: transparent; }
.boton.linea:hover { background: var(--cochinilla); color: var(--crema); }
.boton.oro { background: var(--oro); color: var(--tinta); }
.boton.oro:hover { background: var(--oro-luz); }
.acciones .boton { flex: 1 1 auto; }

/* --- Ayni: empresa --- */
.ayni { background: var(--verde-manto); color: var(--crema); }
.ayni .titulo-seccion .qu { color: var(--oro-luz); }
.ayni .titulo-seccion p { color: #DCE3D8; }
.lineas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 40px; }
.linea-emp { background: rgba(244,239,228,.06); border: 1px solid rgba(240,206,118,.35); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; }
.linea-emp .foto { aspect-ratio: 4/3; }
.linea-emp .cuerpo { color: var(--crema); }
.linea-emp h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--oro-luz); }
.linea-emp p { font-size: .95rem; color: #DCE3D8; }
.linea-emp ul { list-style: none; display: grid; gap: 4px; font-size: .92rem; }
.linea-emp li { display: flex; gap: 8px; }
.linea-emp li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; transform: rotate(45deg); background: var(--oro); }

.ventajas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 44px; }
.ventaja { display: flex; gap: 12px; align-items: flex-start; }
.ventaja .icono { width: 30px; height: 30px; color: var(--oro-luz); stroke-width: 1.5; }
.ventaja b { display: block; }
.ventaja span { font-size: .9rem; color: #DCE3D8; }

.cotizador { background: var(--crema); color: var(--texto); border-radius: var(--radio); padding: 28px 22px; max-width: 760px; margin: 0 auto; }
.cotizador h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--verde-manto); }
.cotizador > p { color: var(--texto-suave); margin: 4px 0 20px; font-size: .95rem; }
.campos { display: grid; gap: 14px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campos .ancho { grid-column: 1 / -1; } }
.campo label, .campo legend { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 46px; padding: 10px 12px; font: 400 1rem var(--sans); color: var(--texto); background: #FFFCF6; border: 1px solid #B8AA92; border-radius: var(--radio); }
.campo textarea { min-height: 84px; resize: vertical; }
.campo fieldset { border: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: .95rem; padding: 8px 12px; border: 1px solid #B8AA92; border-radius: var(--radio); background: #FFFCF6; cursor: pointer; }
.opciones input { width: auto; min-height: 0; accent-color: var(--cochinilla); }
.cotizador .boton { width: 100%; margin-top: 20px; }
.nota-form { font-size: .82rem; color: var(--texto-suave); margin-top: 10px; text-align: center; }

/* --- Q'ipi: empaque --- */
.empaques { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.empaque { padding: 24px 22px; border-radius: var(--radio); background: #FFFCF6; border: 1px solid var(--crema-3); border-top: 4px solid var(--c, var(--kay)); }
.empaque.secundario { --c: var(--crema-3); background: transparent; border-style: dashed; border-top-style: solid; }
.empaque .icono { width: 34px; height: 34px; color: var(--c, var(--kay)); stroke-width: 1.4; margin-bottom: 10px; }
.empaque.secundario .icono { color: var(--texto-suave); }
.empaque h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.empaque .etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-texto); margin-bottom: 4px; }
.empaque p { font-size: .95rem; color: var(--texto-suave); margin-top: 6px; }

/* --- Pagos --- */
.pagos { background: var(--crema-2); }
.fichas-pago { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ficha-pago { display: flex; gap: 12px; align-items: flex-start; background: #FFFCF6; border-radius: var(--radio); padding: 18px; }
.ficha-pago .icono { width: 28px; height: 28px; color: var(--cochinilla); stroke-width: 1.5; }
.ficha-pago b { display: block; }
.ficha-pago span { font-size: .9rem; color: var(--texto-suave); }

/* --- Kimsa Pacha: enlaces a la tienda --- */
.mundos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mundo-enlace { display: flex; flex-direction: column; gap: 2px; padding: 22px; border-radius: var(--radio); text-decoration: none; color: var(--crema); background: var(--f); transition: transform .18s; }
.mundo-enlace:hover { transform: translateY(-2px); }
.mundo-enlace .qu { font-size: 1.3rem; color: var(--oro-luz); }
.mundo-enlace b { font-size: 1rem; }
.mundo-enlace span { font-size: .88rem; color: #EDE5D8; }
.mundo-enlace .flecha { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: .88rem; }
.mundo-enlace.hanan { --f: var(--hanan-fondo); } .mundo-enlace.kay { --f: var(--kay-fondo); } .mundo-enlace.ukhu { --f: var(--ukhu-fondo); } .mundo-enlace.toda { --f: var(--tinta); }

/* --- Pie --- */
.pie { background: var(--tinta); color: #D9CFC2; padding: 44px 0 28px; font-size: .92rem; }
.pie .columnas { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pie h4 { font-family: var(--serif); font-weight: 600; color: var(--oro); font-size: 1rem; margin-bottom: 8px; letter-spacing: .06em; }
.pie a { color: var(--crema); }
.pie ul { list-style: none; display: grid; gap: 4px; }
.pie dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.pie dt { font-family: var(--serif); font-weight: 600; color: var(--oro-luz); }
.pie .legal { border-top: 1px solid #3A302A; margin-top: 32px; padding-top: 18px; font-size: .82rem; color: #A99D90; }

/* --- Botón flotante de WhatsApp --- */
.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 40px; background: var(--kay-fondo); color: var(--crema); font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 6px 22px rgba(26,21,18,.35); }
.flotante:hover { background: var(--verde-manto); }
@media (max-width: 480px) { .flotante span { display: none; } .flotante { padding: 15px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }