/* ===========================================================================
   rodrigooryan.com

   Dos columnas: identidad fija a la izquierda, contenido que se desplaza a la
   derecha. Es la estructura del sitio anterior, conservada a pedido, con otro
   tratamiento.

   Como el sitio anterior: fondo en degradado verde y dos cards blancas. La foto
   de cabecera termina en una cuna blanca pura, asi que se funde con la tarjeta.
   =========================================================================== */

:root{
  --hueso:#E9E4D8;
  --tinta:#14171A;
  --tinta-2:#4E544E;
  --tinta-3:#767C76;
  /* Verde del sitio anterior. El #61ba46 original da 2.4:1 sobre blanco: sirve
     para decorar, no para texto. El de texto es el mismo tono oscurecido (5.3:1). */
  --acento:#2f7a22;
  --acento-s:rgba(97,186,70,.16);
  --blanco:#fff;
  --linea-h:rgba(20,23,26,.13);

  /* Una sola familia: Inter, desde Google Fonts (se carga en base.php). */
  --sans:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);

  --riel:25rem;
  --gap:2.6rem;
  --pad:1.5rem;
  --gap-can:.45rem;
  --radio:6px;
}

/* --- Escalones de densidad ---------------------------------------------
   La tarjeta del sitio anterior media 599px y ya desbordaba 19px en un
   portatil. Esta suma indice y canales, asi que la altura se administra:
   primero se recorta la foto, despues se oculta. El contacto nunca se pierde. */
@media (min-height:900px){ :root{--pad:1.9rem; --gap-can:.62rem} }
@media (max-height:739px){ :root{--pad:1.15rem;--gap-can:.3rem} }
@media (max-height:639px){ :root{--pad:.95rem; --gap-can:.22rem} }

/* --- Tipografia por sistema de escritura -------------------------------
   Sin webfont para japones y chino: una familia CJK pesa entre 4 y 10 MB y no
   se puede recortar por adelantado, porque el contenido lo escribe el panel y
   lo traduce la IA. La latina va PRIMERO en la pila para que "CORMA" y los
   nombres propios se resuelvan con la serif dentro de un titular japones. */
html[data-script="jpan"]{
  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
html[data-script="hans"]{
  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html[data-script="jpan"] body,
html[data-script="hans"] body{
  line-height:1.85; font-synthesis:none; line-break:strict;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Fondo: el degradado verde del sitio anterior (.bg-success), fijo para que no
   se estire con el largo de la pagina. */
body{margin:0;color:var(--tinta);font-family:var(--sans);
  background-color:#63b596;
  background-image:linear-gradient(90deg,hsl(176deg 33% 48%) 0%,hsl(173deg 37% 48%) 11%,
    hsl(170deg 39% 49%) 22%,hsl(166deg 41% 49%) 33%,hsl(161deg 42% 51%) 44%,
    hsl(156deg 43% 52%) 56%,hsl(150deg 44% 54%) 67%,hsl(142deg 44% 57%) 78%,
    hsl(132deg 43% 59%) 89%,hsl(120deg 43% 62%) 100%);
  background-attachment:fixed;min-height:100vh;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}

.saltar{position:absolute;left:-9999px;background:var(--hueso);color:var(--tinta);
  padding:.7rem 1.1rem;border-radius:4px;z-index:99}
.saltar:focus{left:1rem;top:1rem}

/* ===================== estructura ===================== */
.lienzo{max-width:74rem;margin:0 auto;padding:0 1.4rem}
@media (min-width:64rem){
  .lienzo{display:grid;grid-template-columns:var(--riel) 1fr;gap:var(--gap);
    align-items:start}   /* align-items:start: sin esto el sticky nunca pega */
}

/* ===================== columna izquierda ===================== */
.riel{padding:1.4rem 0;position:relative}
@media (min-width:64rem){
  .riel{position:sticky;top:0;align-self:start;
    max-height:100svh;display:flex;flex-direction:column}
}

.riel::before{content:"";position:absolute;left:-12px;top:calc(1.4rem - 12px);
  width:100%;height:calc(100% - 2.8rem);border-radius:var(--radio);
  background:linear-gradient(135deg,rgba(120,204,109,.4) 0%,rgba(120,204,109,.01) 100%)}
.tarjeta{position:relative;z-index:1;background:var(--blanco);color:var(--tinta);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;min-height:0;
  box-shadow:0 20px 50px rgba(0,0,0,.42)}

.foto{margin:0;background:var(--blanco);line-height:0}
.foto img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media (max-height:739px){
  .foto{max-height:8rem;overflow:hidden}
  .foto img{margin-top:-9%}
}
@media (max-height:639px){ .foto{display:none} }

.identidad{padding:.85rem var(--pad) var(--pad);display:flex;flex-direction:column;min-height:0}
@media (max-height:639px){ .identidad{padding-top:var(--pad)} }

.nombre{text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.6rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 .3rem}
.cargo{text-align:center;margin:0 0 .9rem;font-size:.86rem;color:var(--tinta-2);line-height:1.45}
.cargo b{color:var(--tinta);font-weight:600}

/* --- redes: fila de iconos, como en el sitio anterior --- */
.redes{display:flex;justify-content:center;gap:.35rem;margin:-.2rem 0 .9rem}
.redes a{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  border-radius:50%;color:var(--tinta-2);transition:color .2s,background .2s}
.redes a:hover{color:var(--acento);background:var(--acento-s)}
.redes svg{width:1.1rem;height:1.1rem}

.indice{display:flex;flex-direction:column;gap:.05rem;margin-bottom:.9rem;
  padding-top:.8rem;border-top:1px solid var(--linea-h);overflow-y:auto;min-height:0}
.indice a{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;
  color:var(--tinta-2);font-size:.87rem;padding:.26rem 0;transition:color .25s}
.indice a::before{content:"";width:13px;height:1px;background:currentColor;opacity:.42;
  flex-shrink:0;transform:translateY(-.3em);transition:width .25s,opacity .25s,background .25s}
.indice a:hover{color:var(--tinta)}
.indice a[aria-current]{color:var(--tinta);font-weight:600}
.indice a[aria-current]::before{width:22px;opacity:1;background:var(--acento)}

/* --- canales: lo que se ve aca lo decide el panel --- */
.canales{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--linea-h);
  display:flex;flex-direction:column;gap:var(--gap-can)}
.accion{display:flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--hueso);text-decoration:none;
  padding:.68rem 1rem;border-radius:4px;font-size:.83rem;font-weight:600;
  transition:transform .25s,background .25s}
.accion:hover{transform:translateY(-1px);background:#000}
.directo{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;
  color:var(--tinta-2);font-size:.8rem;padding:.1rem 0;transition:color .2s}
.directo .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;opacity:.62;width:4.4rem;flex-shrink:0}
.directo .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.directo:hover{color:var(--tinta)}

/* --- selector de idioma: abre hacia ARRIBA, esta al pie de una columna fija --- */
.idiomas{margin-top:.9rem;position:relative}
.idiomas summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  font-size:.85rem;font-weight:500;color:var(--tinta);
  border:1px solid var(--linea-h);border-radius:8px;padding:.62rem .8rem;
  background:#F6F8F5;transition:border-color .2s,background .2s,box-shadow .2s}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary:hover{border-color:rgba(47,122,34,.4);background:var(--blanco)}
.idiomas[open] summary{border-color:var(--acento);background:var(--blanco);
  box-shadow:0 0 0 3px var(--acento-s)}
.idiomas .globo{width:1.05rem;height:1.05rem;color:var(--acento);flex-shrink:0}
.idiomas .actual{flex:1}
.idiomas .cod{font-size:.66rem;font-weight:600;letter-spacing:.06em;color:var(--tinta-3)}
.idiomas .flecha{display:block;width:.95rem;height:.95rem;color:var(--tinta-3);flex-shrink:0;
  transform:rotate(180deg);transition:transform .2s}
.idiomas[open] .flecha{transform:none}
/* abre hacia ARRIBA: esta al pie de una columna fija */
.idiomas ul{position:absolute;left:0;right:0;bottom:calc(100% + .45rem);z-index:30;
  margin:0;padding:.4rem;list-style:none;background:var(--blanco);border:1px solid var(--linea-h);
  border-radius:10px;box-shadow:0 -12px 32px rgba(20,23,26,.16);
  display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.idiomas a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.5rem .6rem;text-decoration:none;color:var(--tinta-2);font-size:.83rem;border-radius:6px;
  transition:background .15s,color .15s}
.idiomas a:hover{background:var(--acento-s);color:var(--tinta)}
.idiomas a[aria-current]{background:var(--acento);color:var(--blanco);font-weight:600}
.idiomas a[aria-current] .cod{color:rgba(255,255,255,.8)}

/* ===================== columna derecha ===================== */
/* El bloque de experiencia va dentro de una card blanca, como el .card-inner
   del sitio anterior. Adentro, una linea de tiempo: los logos quedan unidos
   por un hilo vertical y cada entrada respira con aire propio, sin cajas. */
.contenido{min-width:0;margin:1.4rem 0 3rem;padding:2.6rem 3rem 1.4rem;
  background:var(--blanco);border-radius:var(--radio);
  box-shadow:0 20px 50px rgba(0,0,0,.18)}

.cab-seccion{margin-bottom:2.2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--linea-h);
  position:relative}
.cab-seccion::after{content:"";position:absolute;left:0;bottom:-1px;width:2.6rem;height:2px;
  background:var(--acento)}
.cab-seccion h2{font-weight:700;font-size:1.75rem;line-height:1.1;letter-spacing:-.025em;margin:0}

/* --- secciones de la pagina (Sobre mi, Experiencia) --- */
.seccion{scroll-margin-top:1.4rem}
.seccion + .seccion{margin-top:3.6rem}

/* --- Sobre mi --- */
.sobre-texto{max-width:64ch}
.sobre-texto p{margin:0 0 1rem;color:var(--tinta-2);font-size:.97rem;line-height:1.75}
.sobre-texto .titular{position:relative;margin:0 0 1.6rem;padding-left:1.15rem;
  font-size:1.32rem;font-weight:600;line-height:1.4;letter-spacing:-.015em;color:var(--tinta);
  text-wrap:balance}
.sobre-texto .titular::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;
  width:3px;border-radius:3px;background:var(--acento)}

/* la postura de Rodrigo: el bloque que no puede quedar enterrado */
.creo{margin:1.5rem 0 1.4rem;padding:1.25rem 1.4rem 1.1rem;border-radius:12px;
  background:#F4F8F2;border:1px solid rgba(47,122,34,.14)}
.sobre-texto .creo-intro{margin:0 0 .8rem;color:var(--tinta);font-weight:600;font-size:.95rem;line-height:1.55}
.creo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem}
.creo li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--tinta-2)}
.creo li svg{flex-shrink:0;width:1.05rem;height:1.05rem;margin-top:.12rem;padding:.14rem;
  border-radius:50%;background:var(--acento);color:var(--blanco);stroke-width:3}

.resto[hidden]{display:none}
.leer-mas{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;padding:.34rem .8rem .34rem .9rem;
  font:inherit;font-size:.8rem;font-weight:600;color:var(--acento);cursor:pointer;
  background:none;border:1px solid rgba(47,122,34,.3);border-radius:999px;
  transition:background .2s,border-color .2s,color .2s}
.leer-mas svg{width:.9rem;height:.9rem;transition:transform .2s}
.leer-mas[aria-expanded="true"] svg{transform:rotate(180deg)}
.leer-mas:hover{background:var(--acento);border-color:var(--acento);color:var(--blanco)}

.fichas{list-style:none;margin:0;padding:0}
.ficha{display:grid;grid-template-columns:5.75rem 1fr;column-gap:1.7rem;
  position:relative;padding-bottom:3.6rem}
.ficha:last-child{padding-bottom:1.4rem}
/* hilo de la linea de tiempo: del pie de un logo al siguiente */
.ficha:not(:last-child)::before{content:"";position:absolute;left:2.875rem;top:6.35rem;bottom:.6rem;
  width:1px;background:var(--linea-h)}

.placa{width:5.75rem;height:5.75rem;border-radius:14px;background:var(--blanco);
  border:1px solid var(--linea-h);box-shadow:0 1px 2px rgba(20,23,26,.05);
  display:flex;align-items:center;justify-content:center;padding:.5rem;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.ficha:hover .placa{border-color:rgba(47,122,34,.35);box-shadow:0 4px 14px rgba(47,122,34,.12)}
/* la imagen va separada del borde y con sus propias esquinas redondeadas */
.placa img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.placa .monograma{display:none;font-weight:700;font-size:1.8rem;color:var(--tinta-2)}
.placa.sin-logo .monograma{display:block}

.cuerpo{min-width:0;padding-top:.15rem}
.aviso{display:inline-block;margin-bottom:.45rem;font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);
  border:1px solid var(--linea-h);padding:.1rem .45rem;border-radius:999px}

.ficha h3{font-weight:700;font-size:1.4rem;line-height:1.25;letter-spacing:-.012em;
  margin:0;color:var(--tinta);text-wrap:balance}
.cargo-f{margin:.3rem 0 0;color:var(--acento);font-size:.92rem;font-weight:600;line-height:1.4}

.meta{list-style:none;margin:.65rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.meta li{display:inline-flex;align-items:center;gap:.38rem;font-size:.78rem;font-weight:500;
  color:var(--tinta-2);background:#F3F5F2;border-radius:999px;padding:.24rem .65rem .24rem .55rem}
.meta svg{width:.85rem;height:.85rem;color:var(--tinta-3);flex-shrink:0}

.desc{margin:.85rem 0 0;color:var(--tinta-2);font-size:.93rem;line-height:1.68;max-width:62ch}
.desc + .desc{margin-top:.6rem}

.enlace{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-size:.8rem;font-weight:600;color:var(--acento);text-decoration:none;
  border:1px solid rgba(47,122,34,.3);border-radius:999px;padding:.34rem .8rem .34rem .9rem;
  transition:background .2s,border-color .2s,color .2s}
.enlace svg{width:.85rem;height:.85rem;transition:transform .2s}
.enlace:hover{background:var(--acento);border-color:var(--acento);color:var(--blanco)}
.enlace:hover svg{transform:translate(1px,-1px)}

/* ===================== foco y movimiento ===================== */
a:focus-visible,summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}
.tarjeta a:focus-visible{outline-color:var(--tinta)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ===================== barra movil ===================== */
/* Oculta en escritorio: ahi el menu y el idioma viven en la tarjeta fija. */
.barra-movil{display:none}

/* ===================== una sola columna ===================== */
@media (max-width:63.99rem){
  /* --- barra fija arriba: secciones + idioma --- */
  .barra-movil{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:50;
    padding:.55rem 1rem;background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
    box-shadow:0 1px 0 var(--linea-h),0 6px 18px rgba(20,23,26,.08)}
  .pestanas{display:flex;gap:.25rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .pestanas::-webkit-scrollbar{display:none}
  .pestanas a{flex-shrink:0;padding:.42rem .8rem;border-radius:999px;font-size:.84rem;font-weight:500;
    color:var(--tinta-2);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
  .pestanas a[aria-current]{background:var(--acento-s);color:var(--acento);font-weight:600}
  .idiomas-movil{margin:0;flex-shrink:0}
  .idiomas-movil summary{gap:.35rem;padding:.4rem .55rem;border-radius:999px;font-size:.78rem}
  .idiomas-movil summary .cod{font-size:.72rem;color:var(--tinta)}
  .idiomas-movil .globo{width:.95rem;height:.95rem}
  .idiomas-movil .flecha{width:.8rem;height:.8rem}
  /* en la barra el menu de idiomas abre hacia ABAJO */
  .idiomas-movil ul{top:calc(100% + .45rem);bottom:auto;left:auto;right:0;width:17rem;
    box-shadow:0 12px 32px rgba(20,23,26,.18)}

  /* --- tarjeta compacta --- */
  .riel{position:static;max-height:none;padding-bottom:0}
  .riel::before{display:none}
  .tarjeta{max-width:30rem;margin:0 auto}
  .indice,.identidad > .idiomas{display:none}
  /* franja de madera mas baja: se recorta el cielo de la foto */
  .foto{display:block;max-height:none;overflow:hidden;aspect-ratio:1200/530}
  .foto img{margin-top:-22%}
  .identidad{padding:.6rem 1.2rem 1.2rem;
    display:grid;grid-template-columns:1fr auto;column-gap:.6rem;align-items:center}
  .identidad > script{display:none}
  .nombre,.cargo{grid-column:1/-1}
  .nombre{font-size:1.3rem;margin-bottom:.35rem}
  .cargo{font-size:.8rem;line-height:1.5;margin-bottom:.9rem}
  /* iconos y "Escribir" en una sola fila */
  .redes{grid-column:1;justify-content:flex-start;margin:0 0 0 -.45rem;gap:0}
  .canales{display:contents}
  .accion{grid-column:2;padding:.6rem 1.15rem;font-size:.8rem}
  .directo{grid-column:1/-1;margin-top:.5rem}

  .contenido{margin-top:1.2rem;padding:2rem 1.8rem 1rem}
  .seccion{scroll-margin-top:4.2rem}
}
@media (max-width:30rem){
  .contenido{padding:1.6rem 1.1rem .6rem}
  .cab-seccion h2{font-size:1.5rem}
  .ficha{grid-template-columns:4.25rem 1fr;column-gap:1rem;padding-bottom:2.8rem}
  .ficha:not(:last-child)::before{left:2.125rem;top:4.85rem}
  .placa{width:4.25rem;height:4.25rem;border-radius:12px;padding:.35rem}
  .placa img{border-radius:6px}
  .ficha h3{font-size:1.2rem}
  .sobre-texto .titular{font-size:1.14rem}
  .creo{padding:1.05rem 1rem .95rem}
  .creo ul{grid-template-columns:1fr}
  .redes a{width:2.1rem;height:2.1rem}
}