/* Lindgren v17: lo común a todas las páginas. Cada página agrega lo suyo en su <style>. */
:root {
  --verde: #111f1b;
  --verde-2: #1a2c26;
  --marfil: #f6f3ee;
  --papel: #fbfaf7;
  --salvia: #9aa89b;
  --dorado: #c9a96b;
  --gris: #dad6cf;
  --tinta-2: #4f5b56;
  /* Sobre el verde: texto secundario teñido del mismo verde, nunca gris */
  --sobre-verde-2: #b9c4bc;
  --margen: clamp(20px, 4.2vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --seccion: clamp(88px, 10vw, 148px);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--marfil); color: var(--verde); font: 400 17px/1.55 "Manrope", sans-serif; font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--verde); color: var(--marfil); }
:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; }
.wrap { width: min(calc(100% - 2 * var(--margen)), 1360px); margin-inline: auto; }
.flecha { display: inline-flex; align-items: center; gap: 8px; }
.flecha svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.flecha:hover svg { transform: translateX(3px); }
.enlace { font-weight: 600; font-size: 15px; }
.enlace span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.enlace:hover span { background-size: 100% 1px; }

/* Cabecera */
.barra { position: absolute; inset: 0 0 auto; z-index: 5; }
.barra .wrap { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.barra .logo img { width: 158px; }
.barra nav { display: flex; gap: clamp(18px, 2.4vw, 38px); font-size: 15px; font-weight: 500; }
.barra nav a { position: relative; padding: 6px 0; }
.barra nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--verde); }
.barra.fija { position: relative; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--verde); color: var(--marfil); font: 600 15px/1 "Manrope", sans-serif; cursor: pointer; transition: background .2s ease; }
.boton:hover { background: #1f322c; }
.boton.claro { background: var(--marfil); color: var(--verde); }
.boton.claro:hover { background: #fff; }
.corto { display: none; }

/* Titulares */
h1 { margin: 0; font: 800 clamp(2.4rem, 3.5vw, 3.6rem)/1.04 "Manrope", sans-serif; letter-spacing: -.035em; text-wrap: balance; }
h2 { margin: 0; font: 800 clamp(2rem, 3vw, 3rem)/1.05 "Manrope", sans-serif; letter-spacing: -.035em; text-wrap: balance; }
h3 { margin: 0; font: 700 20px/1.25 "Manrope", sans-serif; letter-spacing: -.01em; }
.bajada { margin: 22px 0 0; font-size: clamp(16px, 1.25vw, 19px); color: var(--tinta-2); max-width: 40ch; text-wrap: pretty; }
p { text-wrap: pretty; }

/* Encabezado de subpágina: titular a la izquierda, aire, sin foto de relleno */
.portada { padding: clamp(150px, 17vw, 210px) 0 clamp(56px, 6vw, 88px); }
.portada h1 { max-width: 17ch; font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.portada .bajada { max-width: 52ch; }
.miga { display: flex; gap: 8px; margin-bottom: 26px; font-size: 14px; color: var(--tinta-2); }
.miga a:hover { color: var(--verde); }

/* Bandas */
.banda-verde { background: var(--verde); color: var(--marfil); }
.banda-verde ::selection { background: var(--marfil); color: var(--verde); }
.banda-papel { background: var(--papel); }

/* Preguntas */
.preguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); padding: var(--seccion) 0; }
.preguntas-cabeza p { margin: 16px 0 24px; color: var(--tinta-2); max-width: 36ch; }
.lista-preguntas { border-top: 1px solid var(--gris); }
.lista-preguntas details { border-bottom: 1px solid var(--gris); }
.lista-preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-weight: 700; font-size: 18px; }
.lista-preguntas summary::-webkit-details-marker { display: none; }
.lista-preguntas summary i { position: relative; flex: none; width: 14px; height: 14px; }
.lista-preguntas summary i::before, .lista-preguntas summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.lista-preguntas summary i::after { transform: rotate(90deg); }
.lista-preguntas details[open] summary i::after { transform: rotate(0); }
.lista-preguntas details p { margin: -6px 0 24px; max-width: 62ch; color: var(--tinta-2); }

/* Contacto */
.contacto { padding: var(--seccion) 0; }
.contacto-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.contacto-cabeza p { margin: 18px 0 0; color: var(--tinta-2); max-width: 38ch; }
.quienes { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.quienes .caras { display: flex; }
.quienes img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--marfil); }
.quienes img + img { margin-left: -12px; }
.quienes span { font-size: 15px; color: var(--tinta-2); line-height: 1.4; }
.quienes b { color: var(--verde); font-weight: 600; }
.otros-medios { margin-top: 28px; display: grid; gap: 6px; font-size: 15px; }
.otros-medios a { font-weight: 600; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.campo { display: grid; gap: 8px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: 14px; font-weight: 600; padding: 0; }
.campo input, .campo textarea { width: 100%; border: 0; border-bottom: 1px solid #b9b4ab; border-radius: 0; background: transparent; padding: 10px 0; font: 400 17px/1.4 "Manrope", sans-serif; color: var(--verde); caret-color: var(--verde); transition: border-color .2s ease; }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--verde); box-shadow: 0 1px 0 var(--verde); }
.campo input::placeholder, .campo textarea::placeholder { color: #6b746f; }
fieldset.campo { border: 0; margin: 0; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.opciones label { position: relative; }
.opciones input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opciones span { display: inline-block; padding: 9px 14px; border: 1px solid #c9c4bb; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.opciones label:hover span { border-color: var(--verde); }
.opciones input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--marfil); }
.opciones input:focus-visible + span { outline: 2px solid var(--dorado); outline-offset: 2px; }
.enviar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 8px; }
.enviar small { font-size: 14px; color: var(--tinta-2); max-width: 40ch; }
.aviso-prototipo { grid-column: 1 / -1; display: none; font-size: 14px; color: var(--tinta-2); }
.aviso-prototipo.visible { display: block; }

/* Pie */
/* Pie, inspirado en el de Despacha: marca y contacto a la izquierda, menú a la derecha,
   y abajo el origen con bandera y el selector de idioma en cápsula. */
.pie { background: var(--verde); color: var(--marfil); padding: clamp(64px, 7vw, 88px) 0 28px; margin-top: clamp(24px, 3vw, 48px); }
.pie a { transition: color .2s ease, background .2s ease; }
.pie-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 72px); }
.pie-logo img { width: clamp(220px, 21vw, 300px); height: auto; }
.pie-lema { margin: 22px 0 0; max-width: 32ch; font-size: 15.5px; line-height: 1.5; color: var(--sobre-verde-2); }
.pie-contacto { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; font-size: 15px; font-weight: 600; }
.pie-contacto a { display: inline-flex; align-items: center; gap: 10px; }
.pie-contacto svg { width: 18px; height: 18px; color: var(--dorado); }
.pie h4 { margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--marfil); }
.pie-nav { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 32px; }
.pie-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; color: var(--sobre-verde-2); }
.pie-app { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; line-height: 1.35; color: var(--sobre-verde-2); }
.pie-app img, .pm-icono { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.pm-icono { display: grid; place-items: center; background: #36091c; color: #ffd84a; font: 800 13px/1 "Manrope", sans-serif; letter-spacing: -.02em; }
.pie-app b { display: block; font-size: 15px; font-weight: 700; color: var(--marfil); }
.pie .pie-sub { margin-top: 30px; }
.pie-contacto a:hover, .pie-nav a:hover, .pie-app:hover b { color: #fff; }
.pie-base { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 32px; padding-top: 24px; border-top: 1px solid rgba(246, 243, 238, .14); font-size: 13px; color: var(--sobre-verde-2); }
.pie-origen { display: inline-flex; align-items: center; gap: 10px; }
.pie-origen img { width: 20px; height: 15px; border-radius: 2px; }
.pie-base .banderas { justify-self: end; }
/* Selector de idioma en cápsula (cabecera y pie), como en Despacha */
.banderas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid rgba(17, 31, 27, .14); background: rgba(255, 255, 255, .35); }
.banderas a { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 8px; opacity: .6; transition: opacity .2s ease, background .2s ease; }
.banderas a:hover { opacity: 1; }
.banderas a[aria-current="true"] { opacity: 1; background: rgba(17, 31, 27, .1); }
.banderas img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.pie .banderas { border-color: rgba(246, 243, 238, .16); background: rgba(255, 255, 255, .04); }
.pie .banderas a[aria-current="true"] { background: rgba(246, 243, 238, .14); }

@media (max-width: 960px) {
  .barra nav { display: none; }
  .preguntas, .contacto-grid { grid-template-columns: 1fr; }
  .pie-cuerpo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .barra .largo { display: none; }
  .barra .corto { display: inline; }
  .barra .wrap { min-height: 72px; }
  .barra .logo img { width: 128px; }
  .boton { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .formulario { grid-template-columns: 1fr; }
  .portada { padding-top: 124px; }
  .lista-preguntas summary { font-size: 16.5px; padding: 18px 0; }
  .pie-nav { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .pie-nav > div:last-child { grid-column: 1 / -1; }
  .pie-base { grid-template-columns: 1fr; justify-items: start; }
  .pie-base .banderas { justify-self: start; order: -1; }
  .pie-arriba { margin-left: 0; }
}

/* Cabecera: idiomas y menú de celular */
.barra-der { display: flex; align-items: center; gap: 22px; }
.idiomas { display: flex; gap: 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.idiomas a { padding: 6px 7px; border-radius: 4px; color: var(--tinta-2); transition: color .2s ease; }
.idiomas a:hover { color: var(--verde); }
.idiomas a[aria-current="true"] { color: var(--verde); box-shadow: inset 0 -1px 0 var(--verde); border-radius: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abrir-menu { display: none; position: relative; z-index: 31; width: 44px; height: 44px; border: 1px solid #c9c4bb; border-radius: 999px; background: transparent; cursor: pointer; color: var(--verde); }
.abrir-menu .visual { position: absolute; left: 13px; right: 13px; top: 17px; bottom: 17px; }
.abrir-menu i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.abrir-menu i:first-child { top: 0; }
.abrir-menu i:last-child { top: 8px; }
.abrir-menu[aria-expanded="true"] i:first-child { top: 4px; transform: rotate(45deg); }
.abrir-menu[aria-expanded="true"] i:last-child { top: 4px; transform: rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 30; background: var(--marfil); padding: 104px var(--margen) 32px; display: flex; flex-direction: column; gap: 32px; overflow-y: auto; animation: menu-entra .35s var(--ease); }
.menu-movil[hidden] { display: none; }
.menu-movil nav { display: grid; }
.menu-movil nav a { padding: 12px 0; border-bottom: 1px solid var(--gris); font: 800 clamp(1.7rem, 7.5vw, 2.2rem)/1.15 "Manrope", sans-serif; letter-spacing: -.03em; }
.menu-movil nav a[aria-current="page"] { color: var(--tinta-2); }
.menu-movil .idiomas { font-size: 15px; }
.menu-movil-pie { margin-top: auto; display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
html.con-menu { overflow: hidden; }
html.con-menu .barra { position: fixed; z-index: 31; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .menu-movil { animation: none; } }
@media (max-width: 960px) {
  .barra .banderas { display: none; }
  .abrir-menu { display: inline-block; }
  .barra-der { gap: 10px; }
}

/* Calugas: las secciones de color no van de borde a borde. Son bloques con esquinas redondeadas
   que flotan sobre el marfil, con un margen parejo alrededor (pedido de John, 7-nov). */
:root { --orilla: clamp(8px, 1.1vw, 16px); --radio-caluga: clamp(18px, 2.2vw, 32px); }
.banda-verde, .banda-papel { margin: var(--orilla); border-radius: var(--radio-caluga); overflow: hidden; }
.banda-papel { box-shadow: inset 0 0 0 1px rgba(17, 31, 27, .06); }
@media (max-width: 560px) { :root { --orilla: 6px; --radio-caluga: 20px; } }

/* Easter eggs (descubrimientos.js) */
.aviso-zona { position: fixed; left: 50%; bottom: 28px; z-index: 60; width: min(420px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.aviso { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: var(--verde); color: var(--marfil); box-shadow: 0 18px 40px -16px rgba(17, 31, 27, .55); animation: aviso-entra .5s var(--ease); }
.aviso p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--sobre-verde-2); }
.aviso strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--marfil); }
.aviso-sello { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border: 1px dashed var(--verde); border-radius: 50%; outline: 3px solid var(--dorado); outline-offset: -1px; background: var(--dorado); color: var(--verde); animation: aviso-sella .55s var(--ease); }
.aviso-sello svg { width: 26px; height: 26px; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(16px); } }
@keyframes aviso-sella { 0% { transform: scale(1.6) rotate(-18deg); opacity: 0; } 70% { transform: scale(.94) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.huellas span { position: fixed; z-index: 55; width: 22px; height: 22px; pointer-events: none; opacity: 0; background: var(--salvia);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.2c-2.6 0-5 2.3-5 4.6 0 1.4 1.1 2.2 2.4 2.2 1 0 1.7-.5 2.6-.5s1.6.5 2.6.5c1.3 0 2.4-.8 2.4-2.2 0-2.3-2.4-4.6-5-4.6Z'/%3E%3Cellipse cx='6.2' cy='10.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='9.6' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='14.4' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='17.8' cy='10.2' rx='1.7' ry='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.2c-2.6 0-5 2.3-5 4.6 0 1.4 1.1 2.2 2.4 2.2 1 0 1.7-.5 2.6-.5s1.6.5 2.6.5c1.3 0 2.4-.8 2.4-2.2 0-2.3-2.4-4.6-5-4.6Z'/%3E%3Cellipse cx='6.2' cy='10.2' rx='1.7' ry='2.2'/%3E%3Cellipse cx='9.6' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='14.4' cy='6.6' rx='1.7' ry='2.3'/%3E%3Cellipse cx='17.8' cy='10.2' rx='1.7' ry='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(var(--giro)); animation: huella 2.2s var(--ease) forwards; }
@keyframes huella { 15% { opacity: .85; } 60% { opacity: .85; } 100% { opacity: 0; } }
.ruta-ee { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 55; height: 2px; background: var(--dorado); transform: scaleX(0); transform-origin: left center; pointer-events: none; animation: ruta-ee 1.3s var(--ease) forwards; }
@keyframes ruta-ee { to { transform: scaleX(1); } }
.modo-taller main section, .modo-taller .barra, .modo-taller .pie { outline: 1px dashed rgba(154, 168, 155, .9); outline-offset: -1px; }
.modo-taller h1, .modo-taller h2, .modo-taller h3 { outline: 1px solid rgba(201, 169, 107, .7); outline-offset: 2px; }
.taller-reticula { position: fixed; inset: 0; z-index: 50; pointer-events: none; animation: aviso-entra .4s var(--ease); }
.taller-reticula .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; height: 100%; }
.taller-reticula span { background: rgba(201, 169, 107, .08); border-inline: 1px solid rgba(201, 169, 107, .28); }
.taller-ficha { position: fixed; left: 24px; bottom: 24px; z-index: 61; width: min(360px, calc(100% - 48px)); padding: 22px 24px; border-radius: 16px; background: var(--verde); color: var(--marfil); box-shadow: 0 18px 40px -16px rgba(17, 31, 27, .55); animation: aviso-entra .5s var(--ease); }
.taller-ficha :focus-visible { outline-color: var(--marfil); }
.taller-titulo { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.taller-colores { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; font-size: 14px; }
.taller-colores li { display: flex; align-items: center; gap: 10px; }
.taller-colores i { width: 18px; height: 18px; border: 1px solid rgba(246, 243, 238, .3); border-radius: 50%; }
.taller-colores code { margin-left: auto; font-size: 13px; color: var(--sobre-verde-2); }
.taller-fuentes { margin: 0; font-size: 14px; color: var(--sobre-verde-2); }
.taller-salir { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(246, 243, 238, .3); border-radius: 999px; background: none; color: var(--marfil); font: 500 14px/1 "Manrope", sans-serif; cursor: pointer; }
.taller-salir kbd { font: 12px "Manrope", sans-serif; color: var(--sobre-verde-2); }
@media (prefers-reduced-motion: reduce) { .aviso, .aviso-sello, .taller-reticula, .taller-ficha, .ruta-ee { animation: none; } .ruta-ee { transform: none; } }

.gp { color: var(--marfil); text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 3px; }
.gp:hover { color: #fff; }

/* Ancho del sitio en escritorio (pedido de John, 7-nov, con la referencia de Manada): el contenido vive en 1240 px
   y los bloques de color en 1400 px. El pie va a ancho completo, centrados. En pantallas grandes sobra marfil a los lados. */
:root { --ancho: 1240px; --ancho-caluga: 1400px; }
.wrap { width: min(calc(100% - 2 * var(--margen)), var(--ancho)); }
.banda-verde, .banda-papel { max-width: var(--ancho-caluga); }
@media (min-width: 1432px) { .banda-verde, .banda-papel { margin-inline: auto; } }
.hero { max-width: 1600px; margin-inline: auto; }

:root { --dorado-texto: #8a6a2e; }

/* Idiomas con banderas, como en MPT */
.idiomas { gap: 4px; }
.idiomas a { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; opacity: .55; transition: opacity .2s ease, background .2s ease; }
.idiomas a:hover { opacity: 1; }
.idiomas a[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 1px rgba(17, 31, 27, .25); border-radius: 999px; }
.idiomas img { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.pie-base .idiomas a[aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(246, 243, 238, .4); }

/* WhatsApp flotante, como en MPT */
.wa-flotante { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1faf55; color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .75); transition: transform .3s var(--ease), opacity .3s ease; }
.wa-flotante svg { width: 28px; height: 28px; }
.wa-flotante:hover { transform: translateY(-2px); }
.wa-flotante.oculto-wa { opacity: 0; transform: translateY(24px); pointer-events: none; }
html.con-menu .wa-flotante { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-flotante { transition: none; } }

img.pm-icono { padding: 5px; background: #f4eee6; object-fit: contain; }

/* Pulido del pie (Codex y ChatGPT, 7-nov): columnas más juntas, línea fina bajo cada título,
   legales junto al copyright. */
.pie { padding-top: 72px; }
.pie-cuerpo { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px 40px; padding-bottom: 64px; }
.pie-logo img { width: clamp(220px, 21vw, 290px); }
.pie-lema { max-width: 320px; font-size: 16px; line-height: 1.5; }
.pie-nav { grid-template-columns: minmax(0, 200px) minmax(0, 180px) minmax(0, 1fr); gap: 40px; }
.pie h4 { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid rgba(246, 243, 238, .16); line-height: 18px; }
.pie .pie-sub { margin-top: 32px; }
.pie-nav ul { gap: 12px; font-size: 15.5px; }
.pie-nav a, .pie-contacto a, .pie-legal a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pie-nav ul a:hover, .pie-contacto a:hover, .pie-legal a:hover { text-decoration: underline; }
.pie-base { padding-top: 22px; padding-bottom: 4px; }
.pie-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
@media (max-width: 960px) {
  .pie-cuerpo { grid-template-columns: 1fr; }
  .pie-nav { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 560px) { .pie-legal { flex-direction: column; align-items: flex-start; } }
.pie-lema span { display: block; text-wrap: balance; }
.pie-lema b { display: block; margin-top: 4px; font-weight: 600; color: var(--marfil); }

/* Línea corta bajo cada título del pie, como en Despacha (pedido de John) */
.pie h4 { position: relative; border-bottom: 0; padding-bottom: 14px; margin-bottom: 22px; }
.pie h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 1.5px; border-radius: 2px; background: rgba(246, 243, 238, .45); }

/* Pie sin lema: logo y contacto, nada más (John, 7-nov) */
.pie-marca .pie-contacto { margin-top: 32px; }

/* Sin calugas de papel en ninguna página (criterio del inicio, 7-nov): la sección queda sobre el marfil,
   con una línea fina arriba del ancho del contenido. Solo se usa una caluga verde por página, a propósito. */
.banda-papel { background: none; box-shadow: none; border-radius: 0; overflow: visible; max-width: none; width: min(calc(100% - 2 * var(--margen)), var(--ancho)); margin: 0 auto; border-top: 1px solid var(--gris); }
.banda-papel .wrap { width: 100%; }

/* Formulario pulido: panel claro con campos con caja (7-nov) */
.panel-form { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--gris), 0 30px 60px -44px rgba(17, 31, 27, .35); }
.formulario { gap: 20px; }
.campo label, .campo legend { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 600; }
.opcional { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }
.campo input, .campo textarea { padding: 13px 16px; border: 1px solid #cfc9bf; border-radius: 12px; background: #fff; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.campo textarea { min-height: 120px; line-height: 1.5; }
.campo input:hover, .campo textarea:hover { border-color: #a9a297; }
.campo input:focus, .campo textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(201, 169, 107, .35); }
.campo input::placeholder, .campo textarea::placeholder { color: #8a918d; }
.campo .error { display: none; font-size: 13px; color: #a3322a; }
.campo.con-error input { border-color: #a3322a; box-shadow: 0 0 0 3px rgba(163, 50, 42, .12); }
.campo.con-error .error { display: block; }
.opciones { gap: 8px; }
.opciones span { display: inline-flex; align-items: center; gap: 0; padding: 9px 14px; border-color: #cfc9bf; background: #fff; transition: background .2s ease, border-color .2s ease, color .2s ease, gap .2s ease, padding .2s ease; }
.opciones span svg { width: 0; height: 14px; transition: width .2s var(--ease); }
.opciones input:checked + span { gap: 6px; padding-left: 11px; }
.opciones input:checked + span svg { width: 14px; }
.enviar { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--gris); }
.enviar small { font-size: 13.5px; }
.enviado { padding: 24px 8px; outline: none; }
.enviado-sello { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--verde); color: var(--marfil); margin-bottom: 20px; }
.enviado-sello svg { width: 24px; height: 24px; }
.enviado h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.enviado p { margin: 10px 0 0; color: var(--tinta-2); max-width: 46ch; }
.enviado .aviso-prototipo { margin-top: 18px; font-size: 13px; }
/* Columna izquierda del contacto: caras más grandes y medios con ícono */
.quienes img { width: 56px; height: 56px; }
.quienes img + img { margin-left: -14px; }
.otros-medios { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--gris); max-width: 360px; gap: 10px; }
.otros-medios a { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.otros-medios a::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--dorado-texto); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.otros-medios a[href^="mailto"] { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.otros-medios a[href*="wa.me"] { --icono: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M24%2011.7c0%206.45-5.27%2011.68-11.78%2011.68-2.07%200-4-.53-5.7-1.45L0%2024l2.13-6.27a11.57%2011.57%200%200%201-1.7-6.04C.44%205.23%205.72%200%2012.23%200%2018.72%200%2024%205.23%2024%2011.7M12.22%201.85c-5.46%200-9.9%204.41-9.9%209.83%200%202.15.7%204.14%201.88%205.76L2.96%2021.1l3.8-1.2a9.9%209.9%200%200%200%205.46%201.62c5.46%200%209.9-4.4%209.9-9.83a9.88%209.88%200%200%200-9.9-9.83m5.95%2012.52c-.08-.12-.27-.19-.56-.33-.28-.14-1.7-.84-1.97-.93-.26-.1-.46-.15-.65.14-.2.29-.75.93-.91%201.12-.17.2-.34.22-.63.08-.29-.15-1.22-.45-2.32-1.43a8.64%208.64%200%200%201-1.6-1.98c-.18-.29-.03-.44.12-.58.13-.13.29-.34.43-.5.15-.17.2-.3.29-.48.1-.2.05-.36-.02-.5-.08-.15-.65-1.56-.9-2.13-.24-.58-.48-.48-.64-.48-.17%200-.37-.03-.56-.03-.2%200-.5.08-.77.36-.26.29-1%20.98-1%202.4%200%201.4%201.03%202.76%201.17%202.96.14.19%202%203.17%204.93%204.32%202.94%201.15%202.94.77%203.47.72.53-.05%201.7-.7%201.95-1.36.24-.67.24-1.25.17-1.37%27%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 560px) { .panel-form { padding: 20px; border-radius: 20px; } }

.formulario[hidden], .enviado[hidden] { display: none; }
.campo { align-content: start; }

/* Contacto como una sola caluga (como en Triballe): sin tarjeta adentro, formulario compacto */
.contacto .contacto-grid { padding: clamp(28px, 4vw, 56px); border-radius: clamp(20px, 2.2vw, 28px); background: #ece6dc; align-items: start; }
.panel-form { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.formulario { gap: 18px 16px; }
.campo input, .campo textarea, .campo select { background: #fbf9f6; border-color: #d6cfc3; }
.campo select { width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 44px 13px 16px; border: 1px solid #d6cfc3; border-radius: 12px; font: 400 16px/1.4 "Manrope", sans-serif; color: var(--verde); cursor: pointer;
  background: #fbf9f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3.5 5.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23111f1b' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 14px no-repeat; transition: border-color .2s ease, box-shadow .2s ease; }
.campo select:hover { border-color: #a9a297; }
.campo select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(201, 169, 107, .35); }
.campo select:invalid, .campo select:has(option[value=""]:checked) { color: #8a918d; }
.campo textarea { min-height: 104px; }
.enviar { display: grid; gap: 12px; margin-top: 2px; padding-top: 0; border-top: 0; }
.enviar .boton { width: 100%; min-height: 54px; }
.enviar small { max-width: none; text-align: center; }
.contacto-cabeza .otros-medios { border-top-color: #d6cfc3; }
@media (max-width: 560px) { .contacto .contacto-grid { padding: 26px 20px; } }

@media (min-width: 961px) { .enviar small { font-size: 13px; text-wrap: balance; } }

/* Sello Shopify Select Partner en el pie (archivo oficial, sin alterar) */
.pie-shopify { display: block; width: 131px; height: auto; margin-top: 28px; }

/* Sellos del pie: Shopify Select Partner y Despacha en Google Play (oficiales, sin alterar) */
.pie-sellos { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.pie-sellos .pie-shopify { margin-top: 0; width: 120px; }
.pie-play img { display: block; height: 52px; width: auto; margin: -6px 0; }