/* Schibsted Grotesk (variable 400-900, latin) alojada aquí: sin peticiones a Google Fonts */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/schibsted-grotesk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* BreedersNearby: diseño B "Trailhead" (elegido por el dueño 09-11-2026): mapa primero, verde pino y naranja señal */
:root { --pino: #15362b; --pino2: #1f4a3b; --fondo: #f2f4f1; --ficha: #fbfaf6; --linea: #dfe3dc; --tinta: #101512; --dim: #59635c; --naranja: #e4570f; --naranja2: #c4470a; --boton: #c2410c; --boton2: #a8370a; --aviso: #8a4b00; --aviso-f: #fdf0dc; --ok: #1f6b45; --r: 14px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 'Schibsted Grotesk', system-ui, sans-serif; }
a { color: inherit; }
.ancho { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num-t { font-variant-numeric: tabular-nums; }

/* banda verde: cabecera + titular */
.banda { background: var(--pino); color: #fff; }
.barra { display: flex; align-items: center; gap: 20px; height: 62px; }
.marca { min-height: 44px; font-weight: 900; font-size: 20px; letter-spacing: -.6px; text-decoration: none; display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #fff; }
.marca i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--naranja); display: inline-block; }
.buscar { flex: 1; max-width: 560px; display: flex; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; overflow: hidden; }
.buscar input, .buscar select { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 500 14px 'Schibsted Grotesk', sans-serif; padding: 10px 14px; outline: none; }
.buscar select option { color: var(--tinta); }
.buscar select { border-left: 1px solid rgba(255,255,255,.2); flex: 0 1 170px; cursor: pointer; }
.buscar input::placeholder { color: rgba(255,255,255,.6); }
.buscar button { border: 0; background: var(--boton); color: #fff; font: 700 14px 'Schibsted Grotesk', sans-serif; padding: 0 18px; cursor: pointer; }
.buscar button:hover { background: var(--boton2); }
.menu { display: flex; gap: 18px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.menu a { text-decoration: none; opacity: .9; } .menu a:hover { opacity: 1; text-decoration: underline; }
.boton-busca { display: none; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: 8px; background: none; color: #fff; }
.titular { padding: 26px 0 26px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.migas { font-size: 13px; opacity: .75; margin-bottom: 8px; }
.migas a { text-decoration: none; } .migas a:hover { text-decoration: underline; }
h1 { margin: 0; font-weight: 900; font-size: clamp(30px, 4.6vw, 54px); line-height: 1; letter-spacing: -1.6px; max-width: 24ch; text-wrap: balance; overflow-wrap: anywhere; }
.sub { margin: 10px 0 0; opacity: .85; font-size: 15px; max-width: 70ch; }
.cifras { display: flex; gap: 26px; }
.cifras div { font-size: 13px; opacity: .85; line-height: 1.25; max-width: 16ch; }
.cifras b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -1px; color: #fff; }

/* mapa a todo el ancho bajo la banda */
.mapa-ancho { position: relative; height: 430px; background: #e9ece6; }
.mapa-ancho::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: linear-gradient(var(--pino), rgba(21,54,43,0)); z-index: 3; pointer-events: none; }
#mapa { position: absolute; inset: 0; }
.cerca-flotante { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: 18px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--tinta); padding: 10px 16px; border-radius: 12px; box-shadow: 0 6px 22px rgba(16,21,18,.2); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cerca-flotante:hover { background: var(--ficha); }
.cerca-flotante svg { color: var(--naranja); }

/* lista */
.zona-lista { padding: 30px 0 10px; }
.cab-lista { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cab-lista h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.orden { display: flex; gap: 6px; flex-wrap: wrap; }
.orden button { min-height: 38px; border: 1px solid var(--linea); background: #fff; border-radius: 99px; padding: 7px 13px; font: 600 13px 'Schibsted Grotesk', sans-serif; cursor: pointer; color: var(--dim); }
.orden button[aria-pressed="true"] { border-color: var(--tinta); color: var(--tinta); background: var(--ficha); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ficha { background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 0 14px; transition: border-color .15s; }
.ficha .acc { align-self: end; }
.ficha.activa, .ficha:hover { border-color: var(--pino); }
.ficha[hidden] { display: none; }
.n { width: 34px; height: 42px; position: relative; }
.n svg { width: 34px; height: 42px; display: block; }
.n span { position: absolute; top: 9px; left: 0; width: 34px; text-align: center; color: #fff; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.ficha.vecino .n svg path { fill: #8a948d; }
.ficha h3 { margin: 0 0 2px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.ficha h3 a { text-decoration: none; display: inline-block; padding: 6px 0; margin: -6px 0 -4px; } .ficha h3 a:hover { text-decoration: underline; }
.lugar { color: var(--dim); font-size: 14px; }
.linea-nota { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14px; }
.barra-nota { flex: 0 0 90px; height: 6px; background: var(--linea); border-radius: 3px; overflow: hidden; }
.barra-nota i { display: block; height: 100%; background: var(--pino2); }
.linea-nota b { font-weight: 800; }
.linea-nota span { color: var(--dim); }
.avisos { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.aviso { display: flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; color: var(--aviso); background: var(--aviso-f); border-radius: 8px; padding: 6px 10px; }
.aviso.gris { color: var(--dim); background: #ebeee9; }
.bien { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ok); margin-top: 10px; }
.acc { grid-column: 2; display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 700 13px 'Schibsted Grotesk', sans-serif; padding: 9px 13px; border-radius: 9px; text-decoration: none; border: 1px solid var(--linea); background: #fff; color: var(--tinta); white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: var(--tinta); }
.btn.prim { background: var(--boton); border-color: var(--boton); color: #fff; }
.btn.prim:hover { background: var(--boton2); border-color: var(--boton2); }
.titulo-sec { grid-column: 1 / -1; font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--dim); margin: 16px 0 0; }
.vacio { color: var(--dim); padding: 10px 0; }

/* bloques de abajo */
.bloques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 30px 0 10px; }
.bloques.dos { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.bloques.uno { grid-template-columns: 1fr; }
.bloque { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 24px; }
.bloque h2, h2.sec { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.bloque ol { margin: 0; padding-left: 20px; } .bloque li { margin-bottom: 10px; max-width: 62ch; }
.enlaces a, .enlaces .fila { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-weight: 600; font-size: 14px; }
.enlaces a:last-child, .enlaces .fila:last-child { border-bottom: 0; }
.enlaces a:hover { color: var(--naranja2); }
.enlaces span { color: var(--dim); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.faq { max-width: 820px; padding: 20px 0 40px; }
.faq details { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 8px 0 0; color: #2f3a33; max-width: 72ch; }

/* portada y listados */
.portada-banda { padding: 40px 0 46px; }
.portada-banda h1 { font-size: clamp(40px, 6.4vw, 78px); max-width: 16ch; }
.gran-busca { display: flex; gap: 10px; flex-wrap: wrap; max-width: 780px; margin: 26px 0 18px; }
.gran-busca label { flex: 1 1 220px; display: flex; flex-direction: column; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 14px; }
.gran-busca span { font-size: 12px; opacity: .75; font-weight: 600; }
.gran-busca input, .gran-busca select { border: 0; background: none; font: 700 17px 'Schibsted Grotesk', sans-serif; outline: none; padding: 2px 0 0; color: #fff; width: 100%; }
.gran-busca select option { color: var(--tinta); }
.gran-busca input::placeholder { color: rgba(255,255,255,.55); }
.gran-busca button { flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--boton); color: #fff; font: 800 16px 'Schibsted Grotesk', sans-serif; padding: 0 26px; min-height: 60px; cursor: pointer; }
.gran-busca button:hover { background: var(--boton2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.chip:hover { background: rgba(255,255,255,.1); }
.rejilla-razas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 28px; }
.rejilla-razas a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.rejilla-razas a:hover { color: var(--naranja2); }
.rejilla-razas a span { color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.az { columns: 4 220px; column-gap: 32px; }
.az .grupo { break-inside: avoid; margin-bottom: 22px; }
.az .grupo a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.az .grupo a:hover { color: var(--naranja2); }
.az .grupo a span { color: var(--dim); font-weight: 500; }
.letra { font-weight: 900; font-size: 22px; margin: 0 0 4px; }
.texto { max-width: 760px; padding: 30px 0 40px; }
.texto p { max-width: 70ch; }

/* ficha del criadero */
.perfil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; padding: 26px 0 10px; align-items: start; }
.perfil .botones { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.perfil .botones .btn { padding: 12px 16px; font-size: 14px; }
.datos { margin: 0; }
.datos div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; }
.datos div:last-child { border-bottom: 0; }
.datos dt { color: var(--dim); }
.datos dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.datos dd a { display: inline-block; padding: 7px 0; margin: -7px 0; }
.mapa-ficha { position: relative; height: 340px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linea); background: #e9ece6; }
.senales ul { margin: 0; padding: 0; list-style: none; }
.senales li { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; font-size: 14px; }
.senales li svg { margin-top: 3px; }
.senales .ok { color: var(--ok); } .senales .ojo { color: var(--aviso); }
.reclama { font-size: 13px; color: var(--dim); margin: 14px 0 0; }

footer { background: var(--pino); color: rgba(255,255,255,.78); font-size: 13px; padding: 26px 0 40px; margin-top: 30px; }
footer .ancho { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: #fff; }

/* marcadores */
.pinn { cursor: pointer; }
.pinn svg { width: 30px; height: 38px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.pinn.vecino svg path { fill: #8a948d; }
.pinn.on svg path { fill: var(--pino); }
.maplibregl-popup-content { font: 13px 'Schibsted Grotesk', sans-serif; padding: 9px 12px; border-radius: 9px; }
.maplibregl-popup-content a { text-decoration: none; }

@media (max-width: 900px) {
  .menu, .buscar { display: none; }
  .boton-busca { display: inline-flex; }
  .barra { justify-content: space-between; }
  .ancho { padding: 0 16px; }
  .titular { padding: 18px 0 20px; }
  .cifras b { font-size: 26px; }
  .mapa-ancho { height: 46vh; min-height: 280px; }
  .rejilla { grid-template-columns: 1fr; }
  .bloques, .bloques.dos { grid-template-columns: 1fr; }
  .perfil { grid-template-columns: 1fr; }
  .portada-banda { padding: 24px 0 30px; }
  .gran-busca button { flex: 1 1 100%; }
  .acc { display: grid; grid-template-columns: 1fr 1fr; }
  .acc .btn.prim { grid-column: 1 / -1; }
  .acc .btn { padding: 11px 8px; }
  .rejilla-razas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .rejilla-razas a { font-size: 14px; }
  .az { columns: 2 140px; column-gap: 18px; }
  .cerca-flotante { left: 12px; transform: none; top: 30px; bottom: auto; padding: 9px 13px; font-size: 13px; }
  .bloque { padding: 18px 16px; }
  .az { columns: 2 120px; }
  .barra { min-height: 62px; }
}
body.busca-abierta .buscar { display: flex; flex-wrap: wrap; flex: 1 1 100%; order: 3; max-width: none; margin: 0 0 14px; background: var(--pino2); }
body.busca-abierta .buscar input { flex: 1 1 100%; border-bottom: 1px solid rgba(255,255,255,.2); padding: 12px 14px; font-size: 16px; }
body.busca-abierta .buscar select { flex: 1 1 auto; border-left: 0; padding: 12px 14px; font-size: 16px; }
body.busca-abierta .buscar button { padding: 0 22px; }
body.busca-abierta .barra { flex-wrap: wrap; height: auto; padding-top: 9px; }
.banda { position: relative; }

/* desplegables propios (raza y estado) */
.desplegable { position: fixed; z-index: 2000; background: #fff; color: var(--tinta); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 14px 40px rgba(16,21,18,.22); padding: 6px; overflow-y: auto; overscroll-behavior: contain; font: 500 15px/1.3 'Schibsted Grotesk', system-ui, sans-serif; }
.desplegable[hidden] { display: none; }
.desplegable .opc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; min-height: 42px; border-radius: 8px; cursor: pointer; }
.desplegable .opc[aria-selected="true"] { background: var(--fondo); }
.desplegable .opc .t { min-width: 0; }
.desplegable .opc b { font-weight: 800; color: var(--boton); }
.desplegable .opc .x { color: var(--dim); font-size: 13px; white-space: nowrap; }
.desplegable .vacia { padding: 12px; color: var(--dim); font-size: 14px; }
.campo-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; padding: 0; font: inherit; }
.campo-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-sel svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.campo-sel:focus-visible, .buscar input:focus-visible, .gran-busca input:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
.buscar .campo-sel { flex: 0 1 190px; border-left: 1px solid rgba(255,255,255,.2); padding: 10px 14px; font: 500 14px 'Schibsted Grotesk', sans-serif; }
.gran-busca .campo-sel { font: 700 17px 'Schibsted Grotesk', sans-serif; padding: 2px 0 0; }
body.busca-abierta .buscar .campo-sel { flex: 1 1 auto; border-left: 0; padding: 12px 14px; font-size: 16px; }
/* el botón del estado no hereda el estilo del botón de enviar */
.buscar button.campo-sel, .gran-busca button.campo-sel { background: none; border-radius: 0; min-height: 0; flex-grow: 1; color: #fff; }
.buscar button.campo-sel { flex: 0 1 190px; padding: 10px 14px; font: 500 14px 'Schibsted Grotesk', sans-serif; }
.gran-busca button.campo-sel { flex: 1 1 auto; padding: 2px 0 0; font: 700 17px 'Schibsted Grotesk', sans-serif; }
.buscar button.campo-sel:hover, .gran-busca button.campo-sel:hover { background: none; }
body.busca-abierta .buscar button.campo-sel { flex: 1 1 auto; padding: 12px 14px; font-size: 16px; }
/* foco: se marca la caja entera, no un recuadro dentro */
.gran-busca input:focus-visible, .gran-busca .campo-sel:focus-visible, .buscar input:focus-visible, .buscar .campo-sel:focus-visible { outline: none; }
.gran-busca label:focus-within { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.13); }
.buscar:focus-within { border-color: rgba(255,255,255,.55); }
.buscar input:focus, .buscar .campo-sel:focus, .gran-busca input:focus, .gran-busca .campo-sel:focus { background: none; }
/* el texto del botón de estado no es la etiqueta pequeña del campo */
.gran-busca .campo-sel span, .buscar .campo-sel span { font: inherit; opacity: 1; color: inherit; }
.buscar .campo-sel, body.busca-abierta .buscar .campo-sel { width: auto; }
body.busca-abierta .buscar button:not(.campo-sel) { flex: 0 0 auto; }

/* nada nativo del navegador a la vista */
button, input, select { -webkit-appearance: none; appearance: none; }
html { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(228,87,15,.28); color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.banda :focus-visible { outline-color: #fff; }
input::placeholder { opacity: 1; }
/* autorrelleno de Chrome: sin el fondo azul o amarillo */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px var(--pino2) inset; transition: background-color 9999s; }
/* barra de desplazamiento propia en los desplegables (sin las flechas de Windows) */
.desplegable::-webkit-scrollbar { width: 12px; }
.desplegable::-webkit-scrollbar-track { background: transparent; }
.desplegable::-webkit-scrollbar-thumb { background: #cfd5ce; border-radius: 12px; border: 4px solid #fff; }
.desplegable::-webkit-scrollbar-thumb:hover { background: #aab3a9; }
.desplegable::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { .desplegable { scrollbar-width: thin; scrollbar-color: #cfd5ce transparent; } }
/* las tiras de chips y listas que desplazan, igual */
.rejilla-razas::-webkit-scrollbar-button, .az::-webkit-scrollbar-button { display: none; }
/* preguntas frecuentes: sin el triángulo nativo, con un signo propio */
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
/* puntero: mano en toda la caja de los campos que abren lista, cursor de texto donde se escribe */
.gran-busca label { cursor: pointer; }
.gran-busca label input, .buscar input { cursor: text; }
.campo-sel, .campo-sel *, .desplegable .opc, .desplegable .opc *, .orden button, .boton-busca, .faq summary, .chip { cursor: pointer; }
/* párrafo propio de cada lista */
.intro { max-width: 78ch; font-size: 16px; line-height: 1.6; color: #2c3630; margin: 0 0 22px; }
/* pie con enlaces */
.pie { display: block; }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 18px; }
.pie-cols div { display: flex; flex-direction: column; gap: 6px; }
.pie-cols b { color: #fff; font-size: 14px; margin-bottom: 4px; }
.pie-cols a { color: rgba(255,255,255,.82); text-decoration: none; padding: 3px 0; }
.pie-cols a:hover { color: #fff; text-decoration: underline; }
footer p { margin: 0; max-width: 90ch; }
@media (max-width: 900px) { .pie-cols { grid-template-columns: 1fr 1fr; } .pie-cols div:last-child { grid-column: 1 / -1; } }
footer .ancho.pie { display: block; }
.pie-cols { grid-template-columns: repeat(3, minmax(0, 260px)); }
@media (max-width: 900px) { .pie-cols { grid-template-columns: 1fr 1fr; } }
/* ficha de la raza */
.raza-ficha { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: start; }
.raza-ficha.grande { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.raza-ficha figure { margin: 0; }
.raza-ficha img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: var(--fondo); }
.raza-ficha figcaption { font-size: 12px; color: var(--dim); margin-top: 6px; line-height: 1.35; }
.raza-ficha figcaption a { color: var(--dim); }
.raza-ficha .datos div { flex-direction: column; gap: 2px; padding: 9px 0; }
.raza-ficha .datos dd { text-align: left; font-weight: 600; }
.raza-ficha:not(:has(figure)) { grid-template-columns: 1fr; }
@media (max-width: 900px) { .raza-ficha, .raza-ficha.grande { grid-template-columns: 1fr; } }
/* ficha del criadero: resumen, su descripción, temas de las reseñas y lo que dice ofrecer */
.columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sobre .intro { margin-bottom: 18px; }
.sobre h3 { margin: 4px 0 10px; font-size: 16px; font-weight: 800; }
.sobre blockquote { margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--pino); color: #2c3630; font-size: 15px; line-height: 1.6; max-width: 70ch; overflow-wrap: anywhere; }
.sobre blockquote p { margin: 0 0 10px; } .sobre blockquote p:last-child { margin-bottom: 0; }
.nota-fuente { margin: 12px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.temas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.temas li { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); font-size: 14px; font-weight: 600; }
.temas b { font-weight: 800; color: var(--pino); font-variant-numeric: tabular-nums; }
.ofrece { list-style: none; margin: 0; padding: 0; }
.ofrece li { position: relative; padding: 7px 0 7px 18px; font-size: 14.5px; border-bottom: 1px solid var(--linea); }
.ofrece li:last-child { border-bottom: 0; }
.ofrece li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 2px; background: var(--naranja); }
.bloques.arriba { align-items: start; }