/* Casa Siam · Camadas (31 oct 2026): una columna, el camino de la camada, colores y reservas,
   cómo cuidamos cada camada con la foto de la madre, y la consulta al final. Sin íconos ni vistos.
   Se carga después de casasiam-vidrio.css, solo en camadas.html y en/litters.html. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam { max-width: 760px; margin: 0 auto; padding: 96px 24px 112px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam :is(h2, h3) { letter-spacing: 0 !important; font-style: normal !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam h2.cs-cam__titulo { margin: 0 0 20px !important; text-align: center; font: 400 var(--c-t2)/1.1 var(--c-titulos) !important; color: #866B34 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam p { margin: 0 0 1.1em !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam a:not(.cs-wa-boton) { color: #6F5828 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(111, 88, 40, .45) !important; text-underline-offset: 4px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam a:not(.cs-wa-boton):hover { text-decoration-color: currentColor !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-cam__entrada { max-width: 34em; margin: 0 auto 48px !important; text-align: center; text-wrap: balance; font-size: var(--c-entrada) !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 88px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* La camada y su camino */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camada { margin-bottom: 88px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam h3.cs-camada__titulo { margin: 0 0 6px !important; font: 400 var(--c-t3)/1.2 var(--c-titulos) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-camada__hoy { margin-bottom: 36px !important; font: 400 15px/1.6 var(--c-cuerpo) !important; color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino { list-style: none; margin: 0 0 36px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; position: relative; }
/* La línea va del primer punto al último; la parte dorada, hasta hoy. Las medidas las pone el script. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino::before, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino::after { content: ""; position: absolute; left: var(--x0, 6px); top: var(--y0, 6px); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino::before { width: var(--lw, 0); height: var(--lh, 0); background: #E4DACB; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino::after { width: var(--aw, 0); height: var(--ah, 0); background: #866B34; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino__paso { position: relative; margin: 0 !important; padding: 28px 0 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino__punto { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1.5px solid #CDBFA9; z-index: 1; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino__paso.es-pasado .cs-camino__punto { background: #866B34; border-color: #866B34; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino__paso.es-siguiente .cs-camino__punto { border-color: #866B34; box-shadow: 0 0 0 4px rgba(134, 107, 52, .15); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-camino__cuando { margin: 0 0 4px !important; font: 400 15px/1.45 var(--c-cuerpo) !important; color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-camino__que { margin: 0 0 6px !important; font: 500 17px/1.4 var(--c-cuerpo) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-camino__detalle { margin: 0 !important; font: 400 15px/1.6 var(--c-cuerpo) !important; color: #4A3D2C !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam :is(.cs-camada__siguiente, .cs-camada__reserva) .cs-wa-accion { margin: 0 0 28px !important; }

html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-camada__nota { font: 400 15px/1.6 var(--c-cuerpo) !important; color: #4A3D2C !important; }
/* Colores y reservas, lado a lado */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__partes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 72px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam h3 { margin: 0 0 10px !important; font: 500 17px/1.4 var(--c-cuerpo) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__partes { margin-bottom: 104px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__cuidados { margin-bottom: 96px; }
/* La consulta cierra la página: primero la camada, después la confianza, al final la invitación */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__consulta { padding-top: 8px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__consulta .cs-wa-accion { margin: 28px 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam .cs-cam__antes { font-size: 15px !important; color: #4A3D2C !important; }
/* Cómo cuidamos cada camada: la madre con sus crías a todo el ancho, encima; los tres cuidados debajo, sin vistos */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__madre { margin: 0 0 56px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__madre img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 86%; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__cuidado p { font-size: 15px !important; line-height: 1.65 !important; color: #4A3D2C !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam { padding: 64px 20px 80px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__fotos { margin-bottom: 64px; gap: 10px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino { grid-template-columns: 1fr; gap: 28px; padding-left: 0 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-camino__paso { padding: 0 0 0 32px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__partes { grid-template-columns: 1fr; gap: 32px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__tres { grid-template-columns: 1fr; gap: 32px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__madre { margin-bottom: 40px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-cam__madre img { aspect-ratio: 4 / 3; }
}

/* La madre en vertical (2 nov 2026, la casa: «Sí, en vertical»): la foto completa, sin recorte, a la izquierda;
   el título y los tres cuidados a la derecha, uno debajo del otro. En celular, la foto arriba en vertical 4:5 y el texto debajo. */
@media (min-width: 768px) {
  /* la sección sale del ancho del texto (≈ 712 px) hasta 1040 px, para que la foto y el texto queden parejos */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__cuidados { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 80px); align-items: center;
    width: min(1040px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__madre { position: sticky; top: 110px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__madre { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; align-self: start; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__madre img { aspect-ratio: 2 / 3 !important; object-position: 50% 50% !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__cuidados > .cs-cam__titulo { grid-column: 2; grid-row: 1; align-self: end; text-align: left !important; margin: 0 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__tres { grid-column: 2; grid-row: 2; align-self: start; grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 32px !important; }
}
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i):not(#cs-j) .cs-cam__madre img { aspect-ratio: 4 / 5 !important; object-position: 50% 88% !important; }
}