/* Una superficie cálida para mirar fotografías. El hero conserva su propia escena. */
.foto-editorial {
  --fg: light-dark(#302c27, #f2ebe0);
  --muted: light-dark(#645e56, #c3b9aa);
  --accent: light-dark(#775b35, #dec399);
  --accent-hover: light-dark(#4c371c, #f6dfbd);
  --line: light-dark(#d9d1c4, #4a443b);
  --cristal: light-dark(#fffaf0a6, #302a2399);
  --canto: light-dark(#ffffffd9, #f1d9b33d);
  background: light-dark(#f5f1e9, #211f1b);
  color: var(--fg); isolation: isolate;
}
.foto-contenido .envoltorio { width: min(1160px, calc(100% - 64px)); }
.foto-contenido section { border: 0; padding: 76px 0; scroll-margin-top: 74px; }
.foto-contenido h1, .foto-contenido h2, .foto-contenido h3 { background: none; mix-blend-mode: normal; color: var(--fg); -webkit-text-fill-color: currentColor; }
.foto-contenido h2 { font-weight: 400; font-size: clamp(2.5rem, 4.5vw, 3.8rem); letter-spacing: -.035em; }
.foto-contenido h3 { font-weight: 500; font-size: 1.6rem; }
.foto-contenido .seccion-bajada { max-width: 65ch; line-height: 1.7; }
.foto-contenido .numeros { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 0; padding: 42px 0; border-bottom: 1px solid var(--line); }
.foto-contenido .numeros li { padding: 0 28px; background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.foto-contenido .numeros li:first-child { padding-left: 0; }
.foto-contenido .numeros li:last-child { border-right: 0; }
.foto-contenido .numeros strong { font-size: 3.4rem; font-weight: 400; color: var(--fg); }
.foto-contenido .numeros span { font-size: .81rem; }
.foto-contenido .galeria { column-gap: 22px; margin-top: 40px; }
.foto-contenido .foto { border-radius: 12px; margin-bottom: 22px; box-shadow: none; position: relative; }
.foto-contenido .foto img { border-radius: 12px; transition: filter .25s; }
.foto-contenido .foto:hover, .foto-contenido .foto:focus-visible { transform: none; box-shadow: none; }
.foto-contenido .foto:hover img { filter: brightness(1.06); }
.foto-contenido .foto:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.foto-contenido .foto::after { content: '↗'; position: absolute; bottom: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #171510a8; color: #fff; opacity: 0; transition: opacity .2s; }
.foto-contenido .foto:hover::after, .foto-contenido .foto:focus-visible::after { opacity: 1; }
.foto-editorial .boton {
  border-radius: 100px; border: 1px solid var(--canto); padding: 13px 25px;
  background: linear-gradient(125deg, light-dark(#fff8e9d9,#b5996c60), light-dark(#e9d9bea6,#75604250));
  color: var(--fg); box-shadow: inset 0 1px #ffffff45, 0 8px 24px -16px #3b2d2080;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.foto-editorial .boton-suave { background: var(--cristal); }
.foto-editorial .lanza-otono .boton { color: #fff1d5; background: linear-gradient(125deg,#92754899,#33271e99); }
.foto-editorial .lanza-otono .boton-suave { background: #33271e66; }
.foto-editorial .boton::after { display: none; }
.foto-contenido .ver-mas { margin: 24px auto 0; }
.foto-contenido #problema .envoltorio { border-top: 1px solid var(--line); padding-top: 44px; }
.foto-contenido .dolores { display: block; margin-top: 28px; }
.foto-contenido .dolores li { border: 0; border-bottom: 1px solid var(--line); padding: 0; }
.foto-contenido .dolores summary { cursor: pointer; color: var(--fg); padding: 18px 0; font-size: 1.03rem; }
.foto-contenido .dolores p { max-width: 68ch; margin: 0 0 22px; }
/* Vidrio cálido para los textos; el corcho se limita a guía y pasos de casamientos. */
.foto-contenido .tarjeta, .foto-contenido .pasos li {
  padding: 28px; background: var(--cristal); border: 1px solid var(--canto); border-radius: 22px;
  box-shadow: 0 18px 40px -32px #0008; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.foto-contenido .tarjeta::after, .foto-contenido .pasos li::after { display: none; }
.foto-contenido .opiniones { padding: 8px 2px 20px; }
/* Tableros de corcho y copias de papel: textura estática y cinta hechas con CSS. */
.foto-contenido .tablero-fotos :is(.grilla-3, .pasos) {
  padding: 38px 30px; border: 7px solid light-dark(#c6a17b, #765b42); border-radius: 10px;
  background-color: light-dark(#b38b61, #866544);
  background-image: radial-gradient(ellipse at 25% 35%, #402a1730 0 1px, transparent 1.6px), radial-gradient(ellipse at 70% 65%, #ffe2ac35 0 1.2px, transparent 2px), radial-gradient(ellipse at 40% 80%, #49301b22 0 2px, transparent 3px);
  background-size: 7px 11px, 13px 9px, 19px 17px;
  box-shadow: inset 0 2px 8px #38271530;
}
.foto-contenido .tablero-fotos .tarjeta, .foto-contenido .tablero-fotos .pasos li {
  --fg: #37312a; --muted: #655b50; --accent: #80613c;
  border: 12px solid #fbf8f1; border-bottom-width: 30px; border-radius: 3px;
  background: #eee8dd; color: var(--fg); padding: 24px 20px;
  box-shadow: 2px 5px 9px #38271535, 0 1px 2px #38271530;
  backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important;
  rotate: -.6deg;
}
.foto-contenido .tablero-fotos :is(.tarjeta, .pasos li):nth-child(even) { rotate: .7deg; }
.foto-contenido .tablero-fotos :is(.tarjeta, .pasos li)::after {
  content: ''; display: block; position: absolute; inset: -27px auto auto calc(50% - 43px);
  width: 86px; height: 30px; z-index: 1; border-radius: 1px; opacity: 1;
  background: linear-gradient(100deg, #eee0bca8, #f4e7c8c9 45%, #e6d5ae9c);
  box-shadow: 0 1px 2px #49332220; rotate: -5deg; pointer-events: none;
  clip-path: polygon(2% 0,98% 2%,100% 20%,98% 40%,100% 65%,98% 85%,100% 100%,1% 98%,2% 75%,0 50%,2% 25%);
}
.foto-contenido .tablero-fotos :is(.tarjeta, .pasos li):nth-child(even)::after { rotate: 4deg; }
.foto-contenido .grilla-3 { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px 28px; }
.foto-contenido .trabajo p { font-size: .93rem; line-height: 1.7; }
.foto-contenido .trabajo:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr; gap: 42px; }
.foto-contenido .trabajo:first-child h3 { font-size: 2rem; }
.foto-contenido .pasos { gap: 36px; }
.foto-contenido .pasos li::before { background: none; color: var(--accent); font-size: 2.7rem; width: auto; height: auto; justify-content: start; margin-bottom: 20px; }
.foto-contenido .opinion { flex-basis: min(440px,88%); scroll-margin-left: 30px; }
.foto-contenido .opinion blockquote { font-family: "Crimson Pro",Georgia,serif; font-size: 1.45rem; line-height: 1.4; }
.foto-contenido .estrellas { color: var(--accent); font-size: .8rem; }
.foto-contenido .cierre-fuerte { background: light-dark(#e9e1d4, #302b24); }
.foto-contenido .cierre-fuerte h2, .foto-contenido .cierre-fuerte p { color: var(--fg); }
.foto-contenido .cierre-fuerte .seccion-bajada { color: var(--muted); }
.foto-contenido .otra-pagina { max-width: 75ch; padding-left: 22px; border-left: 2px solid var(--accent); }
.foto-contenido .otros-servicios .grilla-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.foto-contenido .otros-servicios .trabajo:first-child { grid-column: auto; display: block; }
@media (max-width:600px) { .foto-contenido .otros-servicios .grilla-3 { grid-template-columns: 1fr; } }
@media (max-width:900px) {
  /* Dos columnas con proporciones originales: las horizontales también cuentan la escena. */
  .foto-contenido .galeria { display: block; columns: 2; column-gap: 12px; }
  .foto-contenido .foto { aspect-ratio: auto; margin-bottom: 12px; }
  .foto-contenido .foto img { height: auto; object-fit: contain; }
  .foto-contenido .grilla-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .foto-contenido .envoltorio { width: calc(100% - 36px); }
  .foto-contenido section { padding: 48px 0; }
  .foto-contenido .numeros { grid-template-columns: 1fr 1fr; gap: 28px 0; padding: 30px 0; }
  .foto-contenido .numeros li { padding: 0 18px; }
  .foto-contenido .numeros li:nth-child(odd) { padding-left: 0; }
  .foto-contenido .numeros li:nth-child(even) { border: 0; }
  .foto-contenido .numeros strong { font-size: 2.8rem; }
  .foto-contenido .grilla-3 { grid-template-columns: 1fr; }
  .foto-contenido .trabajo:first-child { display: block; }
  .foto-contenido .tablero-fotos :is(.grilla-3, .pasos) { padding: 30px 16px; border-width: 5px; }
  .foto-contenido .tarjeta, .foto-contenido .pasos li { padding: 24px 20px; }
  .foto-contenido .tablero-fotos :is(.tarjeta, .pasos li) { padding: 20px 15px; rotate: none; }
  .foto-contenido .tablero-fotos :is(.tarjeta, .pasos li):nth-child(even) { rotate: none; }
  .foto-contenido .pasos { grid-template-columns: 1fr; }
}
/* Visor común: controles quietos aunque cambie la orientación de la fotografía. */
.foto-editorial .visor {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: 0; border: 0; border-radius: 0; background: #11110ff7; color: #f5f1e9;
  overflow: hidden; box-shadow: none;
}
.foto-editorial .visor[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.foto-editorial .visor::backdrop { background: #111; backdrop-filter: none; }
.visor-cabecera, .foto-editorial .visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(20px,env(safe-area-inset-right)); margin: 0; }
.visor-cabecera p { margin: 0; font-size: .9rem; }
.visor-cabecera small { color: #bfb6aa; display: block; font-size: .72rem; margin-top: 3px; }
.visor-escena { display: grid; place-items: center; min-height: 0; overflow: auto; padding: 10px 64px; }
.foto-editorial .visor img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; border-radius: 12px; box-shadow: none; cursor: zoom-in; object-fit: contain; }
.foto-editorial .visor:not(.ampliado) .visor-escena { touch-action: pan-y pinch-zoom; }
.foto-editorial .visor.ampliado .visor-escena { display: block; }
.foto-editorial .visor.ampliado img { max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.foto-editorial .visor button, .visor-original { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; border: 1px solid #ffffff30; border-radius: 50%; background: #ffffff0a; color: #f5f1e9; cursor: pointer; font: inherit; text-decoration: none; }
.foto-editorial .visor button:hover, .visor-original:hover { background: #ffffff20; color: #fff; }
.foto-editorial .visor :focus-visible { outline: 2px solid #dec399; outline-offset: 4px; }
.visor-acciones { display: flex; gap: 12px; align-items: center; }
.foto-editorial .visor .visor-zoom { border-radius: 100px; padding: 0 16px; font-size: .8rem; }
.visor-cuenta { font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.foto-editorial .visor-barra { padding-bottom: max(16px,env(safe-area-inset-bottom)); justify-content: center; }
html:has(.visor[open]) { overflow: hidden; }
@media (max-width:600px) {
  .visor-escena { padding: 8px; }
  .visor-cabecera { padding: max(12px,env(safe-area-inset-top)) 12px 8px; }
  .visor-cabecera p { max-width: 26ch; }
}

/* Entrada y salida nativas del dialog: display y overlay esperan a la transición. */
@media (prefers-reduced-motion: no-preference) {
  /* ponytail-keep: sin scale en el dialog. La foto viaja desde la miniatura con un
     FLIP en visor-fotos.js, y una escala del contenedor encima le mueve el punto de
     llegada mientras vuela: se ve un tironcito al final. El fundido solo no estorba. */
  .foto-editorial .visor { opacity: 0; transition: opacity 200ms ease, display 300ms allow-discrete, overlay 300ms allow-discrete; }
  .foto-editorial .visor[open] { opacity: 1; }
  @starting-style { .foto-editorial .visor[open] { opacity: 0; } }
  .foto-editorial .visor::backdrop { opacity: 0; transition: opacity 260ms ease, display 300ms allow-discrete, overlay 300ms allow-discrete; }
  .foto-editorial .visor[open]::backdrop { opacity: 1; }
  @starting-style { .foto-editorial .visor[open]::backdrop { opacity: 0; } }
}

.foto-editorial .boton.tiene-reflejo::after, .foto-comercial .tarjeta.tiene-reflejo::after, .foto-comercial .pasos li.tiene-reflejo::after { display: block; }